@muibook/components 1.0.1 → 1.0.3

package/dist/muibook/assets/index-CHZJlumm.js

@@ -1,95 +0,0 @@
-class t extends HTMLElement{constructor(){super();const i=this.attachShadow({mode:"open"}),s=`
-      :host { display: block; }
-    `;i.innerHTML=`
-      <style>${s}</style>
-
-
-      <story-template
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-body/index.ts"
-        title="Body"
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-892&t=fSFYVey9aCoE5oQa-1"
-        description="Use the Body component for clear and readable paragraph text across the UI. It’s ideal for longer-form content such as descriptions, explanations, or supporting information. Variant styles are also available for status messages and other contextual needs."
-      >
-
-        <mui-v-stack space="var(--space-700)">
-
-        <story-card title="Default">
-
-          <div slot="body">
-            <mui-body>Risus Mollis Dapibus</mui-body>
-          </div>
-
-          <mui-code slot="footer">
-            &lt;mui-body&gt; ... &lt;/mui-body&gt;
-          </mui-code>
-
-        </story-card>
-
-        <story-card title="Sizes">
-
-            <div slot="body">
-              <mui-v-stack space="var(--space-500)">
-                <div>
-                  <mui-heading size="4">X-Small</mui-heading>
-                  <mui-body size="x-small">Risus Mollis Dapibus</mui-body>
-                </div>
-                <div>
-                  <mui-heading size="4">Small</mui-heading>
-                  <mui-body size="small">Risus Mollis Dapibus</mui-body>
-                </div>
-                <div>
-                  <mui-heading size="4">Medium</mui-heading>
-                  <mui-body size="medium">Risus Mollis Dapibus</mui-body>
-                </div>
-                <div>
-                  <mui-heading size="4">Large</mui-heading>
-                  <mui-body size="large">Risus Mollis Dapibus</mui-body>
-                </div>
-              </mui-v-stack>
-            </div>
-
-            <mui-code slot="footer">
-              &lt;mui-body size="x-small"&gt; ... &lt;/mui-body&gt;
-              <br />
-              &lt;mui-body size="small"&gt; ... &lt;/mui-body&gt;
-              <br />
-              &lt;mui-body size="medium"&gt; ... &lt;/mui-body&gt;
-              <br />
-              &lt;mui-body size="large"&gt; ... &lt;/mui-body&gt;
-            </mui-code>
-
-          </story-card>
-
-          <story-card title="Variants">
-
-            <div slot="body">
-              <mui-v-stack space="var(--space-500)">
-                <div>
-                  <mui-heading size="4">Success</mui-heading>
-                  <mui-body variant="success">Risus Mollis Dapibus</mui-body>
-                </div>
-                <div>
-                  <mui-heading size="4">Warning</mui-heading>
-                  <mui-body variant="warning">Risus Mollis Dapibus</mui-body>
-                </div>
-                <div>
-                  <mui-heading size="4">Error</mui-heading>
-                  <mui-body variant="error">Risus Mollis Dapibus</mui-body>
-                </div>
-              </mui-v-stack>
-            </div>
-
-            <mui-code slot="footer">
-              &lt;mui-body variant="success"&gt; ... &lt;/mui-body&gt;
-              <br />
-              &lt;mui-body variant="warning"&gt; ... &lt;/mui-body&gt;
-              <br />
-              &lt;mui-body variant="error"&gt; ... &lt;/mui-body&gt;
-            </mui-code>
-
-          </story-card>
-
-        </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-body",t);

package/dist/muibook/assets/index-CPZ8jubJ.js

@@ -1,308 +0,0 @@
-class p extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),t=`
-      :host { display: block; }
-    `,i=[{name:"heading",required:!0,type:"string",options:"{text}",default:"",description:"Provides the accordion element with a heading"},{name:"size",type:"string",options:"small, medium, large",default:"medium",description:"Adjust the size of the Accordion"},{name:"slot",required:!0,type:"HTML attribute",options:"slot=“detail”",default:"",description:"Hides the label but it is still present for screen readers"},{name:"class",type:"CSS class",options:"card-slot",default:"",description:"By default, when Accordion is slotted into the mui-card, padding is automatically added. However, if the mui-accordion is nested within a shadow dom, you have to apply the class for correct padding"}],o=i.map(n=>`
-          <story-type-row
-            ${n.required?"required":""}
-            name="${n.name}"
-            type="${n.type}" 
-            options="${n.options||""}"
-            default="${n.default||""}"
-            description="${n.description}">
-          </story-type-row>
-        `).join(""),b=i.map((n,e)=>{const d=e===i.length-1?"last-child":"";return`
-            <mui-accordion-block
-              style="position: relative; z-index: 1;" 
-              size="medium" 
-              heading=${n.name.charAt(0).toUpperCase()+n.name.slice(1)} 
-              ${d}>
-              <story-type-slat
-                slot="detail"
-                ${n.required?"required":""}
-                name="${n.name}"
-                type="${n.type}" 
-                options="${n.options||""}"
-                default="${n.default||""}"
-                description="${n.description}">
-              </story-type-slat>
-            </mui-accordion-block>
-          `}).join("");s.innerHTML=`
-      <style>${t}</style>
-
-      <story-template 
-        title="Accordion"
-        description="The Accordion is a component stores content underneath a collapsible heading, revealing it through progressive disclosure in the user interface."
-        github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-accordion"
-        accessibility="
-          Accordion summary uses role='button' and tabindex='0' for keyboard access.;
-          Supports Enter and Space keys for toggling.;
-          aria-expanded reflects open/closed state.;
-          aria-controls links summary to detail with a unique ID.;
-          mui-heading applies semantic heading with role='heading' and aria-level.;
-          Chevron icon rotates visually and the state is conveyed via aria-expanded.
-        "
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-
-        <spec-card title="Props: Accordion Block">
-          <mui-responsive breakpoint="767" slot="body">
-            <story-type-table slot="showAbove">
-              ${o}
-            </story-type-table>
-            <mui-accordion-group exclusive slot="showBelow">
-              ${b}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-card>
-
-        <story-card 
-          title="Tab Scenarios: Button" 
-          description="The inline accordion is typically used within a block layout as a secondary UI element to a block element."
-        >
-          <div slot="body">
-            <mui-accordion-inline heading="Heading">
-              <div slot="detail">
-                <mui-button variant="primary">Focus on Open</mui-button>
-              </div>
-            </mui-accordion-inline>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-accordion-inline heading="Heading"&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-list as="ul" slot="detail"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;...
-            <br />
-            &nbsp;&nbsp;&lt;/mui-list&gt;
-            <br />
-            &lt;/mui-accordion-inline&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Tab Scenarios: Link" 
-          description="The inline accordion is typically used within a block layout as a secondary UI element to a block element."
-        >
-          <div slot="body">
-            <mui-accordion-inline heading="Heading">
-              <div slot="detail">
-                <mui-link variant="primary">Focus on Open</mui-link>
-              </div>
-            </mui-accordion-inline>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-accordion-inline heading="Heading"&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-list as="ul" slot="detail"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;...
-            <br />
-            &nbsp;&nbsp;&lt;/mui-list&gt;
-            <br />
-            &lt;/mui-accordion-inline&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Accordion Inline" 
-          description="The inline accordion is typically used within a block layout as a secondary UI element to a block element."
-        >
-          <div slot="body">
-            <mui-accordion-inline heading="Heading">
-              <mui-list as="ul" slot="detail">
-                <mui-list-item>Coffee</mui-list-item>
-                <mui-list-item>Tea</mui-list-item>
-                <mui-list-item>Milk</mui-list-item>
-              </mui-list>
-            </mui-accordion-inline>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-accordion-inline heading="Heading"&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-list as="ul" slot="detail"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;...
-            <br />
-            &nbsp;&nbsp;&lt;/mui-list&gt;
-            <br />
-            &lt;/mui-accordion-inline&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Accordion Group & Block" 
-          description="The block accordion is typically used within a page layout full-width to the parent container."
-        >
-          <mui-accordion-group slot="body">
-            <mui-accordion-block heading="Heading">
-              <div slot="detail">
-                  Content
-              </div>
-            </mui-accordion-block>
-            <mui-accordion-block heading="Heading">
-              <div slot="detail">
-                  Content
-              </div>
-            </mui-accordion-block>
-          </mui-accordion-group>
-          <mui-code slot="footer">
-            &lt;mui-accordion-group&gt;
-            <br />  
-            &nbsp;&nbsp;&lt;mui-accordion-block heading="Heading"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;div slot="detail"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-            <br />
-            &nbsp;&nbsp;&lt;/mui-accordion-block&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-accordion-block heading="Heading"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;div slot="detail"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-            <br />
-            &nbsp;&nbsp;&lt;/mui-accordion-block&gt;
-            <br />
-            &lt;mui-accordion-group&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card 
-          title="Accordion Group & Block: Exclusive" 
-          description="The block accordion is typically used within a page layout full-width to the parent container."
-        >
-          <mui-accordion-group exclusive slot="body">
-            <mui-accordion-block heading="Heading">
-              <div slot="detail">
-                  Content
-              </div>
-            </mui-accordion-block>
-            <mui-accordion-block heading="Heading">
-              <div slot="detail">
-                  Content
-              </div>
-            </mui-accordion-block>
-          </mui-accordion-group>
-          <mui-code slot="footer">
-            &lt;mui-accordion-group exclusive&gt;
-            <br />  
-            &nbsp;&nbsp;&lt;mui-accordion-block heading="Heading"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;div slot="detail"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-            <br />
-            &nbsp;&nbsp;&lt;/mui-accordion-block&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-accordion-block heading="Heading"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;div slot="detail"&gt;
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
-            <br />
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
-            <br />
-            &nbsp;&nbsp;&lt;/mui-accordion-block&gt;
-            <br />
-            &lt;mui-accordion-group&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Card w/ Accordion">
-          <div slot="body">
-            <mui-card>
-              <mui-card-body>
-                <mui-accordion-group exclusive>
-                  <mui-accordion-block heading="Heading">
-                    <div slot="detail">
-                        Content
-                    </div>
-                  </mui-accordion-block>
-                  <mui-accordion-block heading="Heading">
-                    <div slot="detail">
-                        Content
-                    </div>
-                  </mui-accordion-block>
-                </mui-accordion-group>
-              </mui-card-body>
-            </mui-card>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-card&gt;<br>
-            &nbsp;&nbsp;&lt;mui-card-body&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-accordion-group exclusive&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-accordion-block heading="Heading"&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div slot="detail"&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-accordion-block&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-accordion-block heading="Heading"&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div slot="detail"&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-accordion-block&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-accordion-group&gt;<br>
-            &nbsp;&nbsp;&lt;/mui-card-body&gt;<br>
-            &lt;/mui-card&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Card Header w/ Accordion" description="You can add in a mui-rule to help add a division between the header and body of the card">
-          <div slot="body">
-            <mui-card>
-              <mui-card-header>
-                <mui-heading size="3">Title</mui-heading>
-              </mui-card-header>
-              <mui-rule></mui-rule>
-              <mui-card-body>
-                <mui-accordion-group exclusive>
-                  <mui-accordion-block heading="Heading">
-                    <div slot="detail">
-                        Content
-                    </div>
-                  </mui-accordion-block>
-                  <mui-accordion-block heading="Heading">
-                    <div slot="detail">
-                        Content
-                    </div>
-                  </mui-accordion-block>
-                </mui-accordion-group>
-              </mui-card-body>
-            </mui-card>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-card&gt;<br>
-            &nbsp;&nbsp;&lt;mui-card-header&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-heading size="3"&gt;Title&lt;/mui-heading&gt;<br>
-            &nbsp;&nbsp;&lt;/mui-card-header&gt;<br>
-            &nbsp;&nbsp;&lt;mui-rule&gt;&lt;/mui-rule&gt;<br>
-            &nbsp;&nbsp;&lt;mui-card-body&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-accordion-group exclusive&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-accordion-block heading="Heading"&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div slot="detail"&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-accordion-block&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-accordion-block heading="Heading"&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div slot="detail"&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-accordion-block&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-accordion-group&gt;<br>
-            &nbsp;&nbsp;&lt;/mui-card-body&gt;<br>
-            &lt;/mui-card&gt;
-          </mui-code>
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-accordion",p);

package/dist/muibook/assets/index-CSLqxg9p.js

@@ -1,73 +0,0 @@
-class i extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"}),s=`
-      :host { display: block; }
-    `;e.innerHTML=`
-      <style>${s}</style>
-
-      <story-template 
-        title="Code"
-        description="The component defines a code view."
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-code/index.ts"
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-        <story-card title="Large">
-          <div slot="body">
-            <mui-code size="large">
-            Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis
-            euismod. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu
-            leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Cum
-            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-          </mui-code>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-code size="large"&gt;...&lt;/mui-code&gt;
-          </mui-code>
-        </story-card>
-
-       <story-card title="Medium">
-          <div slot="body">
-            <mui-code size="medium">
-            Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis
-            euismod. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu
-            leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Cum
-            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-          </mui-code>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-code size="medium"&gt;...&lt;/mui-code&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Small">
-          <div slot="body">
-            <mui-code size="small">
-            Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis
-            euismod. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu
-            leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Cum
-            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-          </mui-code>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-code size="small"&gt;...&lt;/mui-code&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="X-Small">
-          <div slot="body">
-            <mui-code size="x-small">
-            Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis
-            euismod. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu
-            leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Cum
-            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-          </mui-code>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-code size="x-small"&gt;...&lt;/mui-code&gt;
-          </mui-code>
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-code",i);

package/dist/muibook/assets/index-CT3BsW8R.js

@@ -1,177 +0,0 @@
-class k extends HTMLElement{constructor(){super();const r=this.attachShadow({mode:"open"}),n=":host { display: block; }",e=`
-      <mui-card>
-        <mui-card-body>{content}</mui-card-body>
-      </mui-card>
-    `,s=`
-      <mui-card>
-        <mui-card-body>{content}</mui-card-body>
-      </mui-card>
-    `,l=`
-      <mui-v-stack slot="body">
-        <mui-v-stack space="8px">
-          <mui-code style="border-radius: 8px;">
-            Default Size: space="var(--space-500)"
-          </mui-code>
-        </mui-v-stack>
-        <mui-h-stack>
-          ${s}
-          ${s}
-        </mui-h-stack>
-      </mui-v-stack>
-    `,d=`
-      <mui-v-stack slot="body">
-        <mui-v-stack space="8px">
-          <mui-code style="border-radius: 8px;">Default Size: space="var(--space-500)"</mui-code>
-        </mui-v-stack>
-        <mui-v-stack>
-          ${e}
-          ${e}
-        </mui-v-stack>
-      </mui-v-stack>
-  `,u=`
-    <mui-h-stack  space="var(--space-400)" slot="body">
-      ${s}
-      ${s}
-    </mui-h-stack>
-  `,m=`
-    <mui-v-stack slot="body" space="var(--space-400)">
-      ${e}
-      ${e}
-    </mui-v-stack>
-  `,a=[{name:"space",type:"string",options:"var(--space-100) etc...",default:"var(--space-500)",description:"Apply a design tokens to apply a gap between slotted elements"},{name:"alignX",type:"string",options:"flex-start etc...",default:"message",description:"Horizontal align using CSS flex properties."},{name:"alignY",type:"string",options:"flex-start etc...",default:"neutral",description:"Vertical align using CSS flex properties."},{name:"slot",required:!0,type:"HTML attribute",options:"elements",default:"",description:"Slot in any elements"},{name:"style",type:"string",options:"Valid CSS",default:"",description:"You are able to use styles to add layout based CSS to the host element."},{name:"class",type:"string",options:"Valid CSS",default:"",description:"You are able to use add a classname to add layout based CSS to the host element."}],o=[{name:"space",type:"string",options:"var(--space-100) etc...",default:"var(--space-500)",description:"Apply a design tokens to apply a gap between slotted elements"},{name:"slot",required:!0,type:"HTML attribute",options:"elements",default:"",description:"Slot in any elements"},{name:"style",type:"string",options:"Valid CSS",default:"",description:"You are able to use styles to add layout based CSS to the host element."},{name:"class",type:"string",options:"Valid CSS",default:"",description:"You are able to use add a classname to add layout based CSS to the host element."}],p=a.map(t=>`
-        <story-type-row
-          ${t.required?"required":""}
-          name="${t.name}"
-          type="${t.type}" 
-          options="${t.options||""}"
-          default="${t.default||""}"
-          description="${t.description}">
-        </story-type-row>
-      `).join(""),y=a.map((t,i)=>{const c=i===a.length-1?"last-child":"";return`
-          <mui-accordion-block 
-            size="small" 
-            heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)} 
-            ${c}>
-            <story-type-slat
-              slot="detail"
-              ${t.required?"required":""}
-              name="${t.name}"
-              type="${t.type}" 
-              options="${t.options||""}"
-              default="${t.default||""}"
-              description="${t.description}">
-            </story-type-slat>
-          </mui-accordion-block>
-        `}).join(""),b=o.map(t=>`
-        <story-type-row
-          ${t.required?"required":""}
-          name="${t.name}"
-          type="${t.type}" 
-          options="${t.options||""}"
-          default="${t.default||""}"
-          description="${t.description}">
-        </story-type-row>
-      `).join(""),g=o.map((t,i)=>{const c=i===o.length-1?"last-child":"";return`
-          <mui-accordion-block 
-            size="medium" 
-            heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)} 
-            ${c}>
-            <story-type-slat
-              slot="detail"
-              ${t.required?"required":""}
-              name="${t.name}"
-              type="${t.type}" 
-              options="${t.options||""}"
-              default="${t.default||""}"
-              description="${t.description}">
-            </story-type-slat>
-          </mui-accordion-block>
-        `}).join("");r.innerHTML=`
-      <style>${n}</style>
-
-      <story-template 
-        title="Stacks" 
-        description="A layout component that arranges its children in a horizontal or vertical flow"
-        github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-stack"
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-        <spec-card title="Props: HStack">
-          <mui-responsive breakpoint="767" slot="body">
-            <story-type-table slot="showAbove">
-              ${p}
-            </story-type-table>
-            <mui-accordion-group exclusive slot="showBelow">
-              ${y}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-card>
-
-        <story-card title="Horizontal: Default">
-          ${l}
-          <mui-code slot="footer">
-            &lt;mui-h-stack&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
-            <br />
-            &lt;/mui-h-stack&gt;
-          </mui-code>
-        </story-card>
-
-        <spec-card title="Props: VStack">
-          <mui-responsive breakpoint="767" slot="body">
-            <story-type-table slot="showAbove">
-              ${b}
-            </story-type-table>
-            <mui-accordion-group exclusive slot="showBelow">
-              ${g}
-            </mui-accordion-group>
-          </mui-responsive>
-        </spec-card>
-
-        <story-card title="Vertical: Default">
-          ${d}
-          <mui-code slot="footer">
-            &lt;mui-v-stack&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
-            <br />
-            &lt;/mui-v-stack&gt;
-          </mui-code>
-        </story-card>
-
-      <story-card title="Horizontal: Custom Space">
-        ${u}
-        <mui-code slot="footer">
-          &lt;mui-h-stack space="var(--space-400)"&gt;
-          <br />
-          &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
-          <br />
-          &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
-          <br />
-          &lt;/mui-h-stack&gt;
-        </mui-code>
-      </story-card>
-
-      <story-card title="Vertical: Custom Space">
-        ${m}
-        <mui-code slot="footer">
-          &lt;mui-v-stack space="var(--space-400)"&gt;
-          <br />
-          &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
-          <br />
-          &nbsp;&nbsp;&lt;mui-card&gt;...&lt;/mui-card&gt;
-          <br />
-          &lt;/mui-v-stack&gt;
-        </mui-code>
-      </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-stack",k);