chore: 2.0 [pfe-toast] update docs

docs/main.css

@@ -52,7 +52,7 @@ p.subtitle {
 pfe-band.header h1 {
   margin: 0;
 }
-pfe-band h2[id] {
+pfe-band h2[id]:not(.no-header-styles) {
   font-size: 1.5rem;
   line-height: 1.9375rem;
   font-weight: bold;
@@ -627,7 +627,7 @@ blockquote {
 }
 
 @media (min-width: 1200px) {
-  pfe-band h2[id] {
+  pfe-band h2[id]:not(.no-header-styles) {
     font-size: 2rem;
     line-height: 2.3125rem;
   }

elements/pfe-toast/docs/index.md

@@ -17,12 +17,14 @@ tags:
 </style>
 
 {% renderOverview for=package, title=title %}
+  Toast is a self-contained alert that is hidden on page load and slides in/out of the view when programmatically opened/closed.
+
   <pfe-button>
     <button>Trigger toast</button>
   </pfe-button>
 
   <pfe-toast id="overview-toast">
-    <h2>Do you feel toasted?</h2>
+    <h2 class="no-header-styles">Do you feel toasted?</h2>
     <p>Biodiesel wolf franzen, jean shorts pabst lomo cloud bread gentrify cronut af migas vinyl four dollar toast scenester twee. Twee synth hammock hella activated charcoal keffiyeh, farm-to-table cray try-hard tofu fixie truffaut leggings actually. Tote bag poutine kale chips intelligentsia health goth, thundercats affogato tofu literally vegan umami slow-carb VHS chillwave.</p>
   </pfe-toast>
 
@@ -58,11 +60,6 @@ tags:
 
 {% renderEvents for=package %}{% endrenderEvents %}
 
-{% renderCssCustomProperties for=package %}
-  - Max width: Allows you to specify the maximum width of the component. **Variable name:** `--pfe-toast--MaxWidth`.
-  - Min width: Allows you to specify the minimum width of the component. **Variable name:** `--pfe-toast--MinWidth`.
-  - Top: Allows you to customize the distance between the component and the top of its container. **Variable name:** `--pfe-toast--Top`.
-  - Right: Allows you to customize the distance between the component and the right of its container. **Variable name:** ` --pfe-toast--Right`.
-{% endrenderCssCustomProperties %}
+{% renderCssCustomProperties for=package %}{% endrenderCssCustomProperties %}
 
 {% renderCssParts for=package %}{% endrenderCssParts %}

elements/pfe-toast/pfe-toast.ts

@@ -29,6 +29,11 @@ export class ToastCloseEvent extends ComposedEvent {
  * @fires close - Fires when a toast is manually closed.
  * @fires pfe-toast:open - {@deprecated Use `open`} Fires when a toast is manually openned.
  * @fires pfe-toast:close - {@deprecated Use `close`} Fires when a toast is manually closed.
+ *
+ * @cssprop --pfe-toast--MaxWidth {@default 500px} Allows you to specify the maximum width of the component.
+ * @cssprop --pfe-toast--MinWidth {@default 250px} Allows you to specify the minimum width of the component.
+ * @cssprop --pfe-toast--Top {@default 50px} Allows you to customize the distance between the component and the top of its container.
+ * @cssprop --pfe-toast--Right {@default 50px} Allows you to customize the distance between the component and the right of its container.
  */
 @customElement('pfe-toast') @pfelement()
 export class PfeToast extends LitElement {