@muibook/components 1.0.0

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

@@ -0,0 +1,429 @@
+class a extends HTMLElement{constructor(){super();const p=this.attachShadow({mode:"open"}),l=`
+      :host { display: block; }
+    `,s="1fr 1fr 1fr auto",b=[{name:"text",required:!0,type:"string",options:"{text}",default:"",description:"Provides the text for the cell element"},{name:"heading",type:"boolean",options:"",default:"",description:"Define the heading styles for the table"},{name:"class",type:"CSS class",options:"card-slot",default:"",description:"By default, when Table 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"}],t=b.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(""),i=b.map((n,e)=>{const u=e===b.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)} 
+              ${u}>
+              <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("");p.innerHTML=`
+      <style>${l}</style>
+
+      <story-template 
+        title="Table"
+        description="An HTML table consists of one table element and one or more tr, th, and td elements."
+        github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-table"
+      >
+
+        <mui-v-stack space="var(--space-700)">
+
+        <spec-card title="Props: Cell">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${t}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${i}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+          <story-card title="Table">
+            <mui-table slot="body">
+              <mui-row-group heading>
+                <mui-row columns="1fr 1fr 1fr auto">
+                  <mui-cell heading>Office</mui-cell>
+                  <mui-cell heading>Revenue</mui-cell>
+                  <mui-cell heading>Cost</mui-cell>
+                  <mui-cell heading action>
+                  </mui-cell>
+                </mui-row>
+              </mui-row-group>
+              <mui-row-group>
+                <mui-row columns="1fr 1fr 1fr auto">
+                  <mui-cell data-label="Office:">Whalen</mui-cell>
+                  <mui-cell data-label="Revenue:">$4,400.00</mui-cell>
+                  <mui-cell data-label="Cost:">$1,100.00</mui-cell>
+                  <mui-cell data-label="" action>
+                    <mui-button variant="tertiary" icon-only> <mui-icon-add size="small"></mui-icon-add></mui-button>
+                  </mui-cell>
+                </mui-row>
+                <mui-row columns="1fr 1fr 1fr auto">
+                  <mui-cell data-label="Office:">Whalen</mui-cell>
+                  <mui-cell data-label="Revenue:">$4,400.00</mui-cell>
+                  <mui-cell data-label="Cost:">$1,100.00</mui-cell>
+                  <mui-cell data-label="" action>
+                    <mui-button variant="tertiary" icon-only> <mui-icon-add size="small"></mui-icon-add></mui-button>
+                  </mui-cell>
+                </mui-row>
+              </mui-row-group>
+            </mui-table>
+            <mui-code slot="footer">
+              &lt;mui-table&gt;
+              <br />
+              &nbsp;&nbsp;&lt;mui-row-group heading&gt;
+              <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row columns="1fr 1fr 1fr 1fr"&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;...&lt;/mui-cell&gt;
+                  <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row&gt;
+                <br />
+              &nbsp;&nbsp;&lt;/mui-row-group&gt;
+              <br />
+              &nbsp;&nbsp;&lt;mui-row-group&gt;
+              <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row columns="1fr 1fr 1fr 1fr"&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell&gt;...&lt;/mui-cell&gt;
+                  <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row&gt;
+                <br />
+              &nbsp;&nbsp;&lt;/mui-row-group&gt;
+              <br />
+              &lt;/mui-table&gt;
+            </mui-code>
+          </story-card>
+
+          <story-card title="Responsive table">
+
+
+            <mui-responsive breakpoint="1024" slot="body">
+              <mui-table slot="showAbove">
+                <mui-row-group heading>
+                  <mui-row columns="1fr 1fr 1fr auto">
+                    <mui-cell heading>Office</mui-cell>
+                    <mui-cell heading>Revenue</mui-cell>
+                    <mui-cell heading>Cost</mui-cell>
+                    <mui-cell heading action>
+                    </mui-cell>
+                  </mui-row>
+                </mui-row-group>
+                <mui-row-group>
+                  <mui-row columns="1fr 1fr 1fr auto">
+                    <mui-cell data-label="Office:">Whalen</mui-cell>
+                    <mui-cell data-label="Revenue:">$4,400.00</mui-cell>
+                    <mui-cell data-label="Cost:">$1,100.00</mui-cell>
+                    <mui-cell data-label="" action>
+                      <mui-button variant="tertiary" icon-only> <mui-icon-add size="small"></mui-icon-add></mui-button>
+                    </mui-cell>
+                  </mui-row>
+                  <mui-row columns="1fr 1fr 1fr auto">
+                    <mui-cell data-label="Office:">Whalen</mui-cell>
+                    <mui-cell data-label="Revenue:">$4,400.00</mui-cell>
+                    <mui-cell data-label="Cost:">$1,100.00</mui-cell>
+                    <mui-cell data-label="" action>
+                      <mui-button variant="tertiary" icon-only> <mui-icon-add size="small"></mui-icon-add></mui-button>
+                    </mui-cell>
+                  </mui-row>
+                </mui-row-group>
+              </mui-table>
+
+              <mui-slat slot="showBelow">
+                <mui-heading slot="start" size="6">Whalen</mui-heading>      
+                <mui-h-stack space="var(--space-800)" alignX="flex-end" alignY="center" slot="end">
+                  <mui-v-stack space="var(--space-000)">
+                    <mui-h-stack space="var(--space-400)" alignX="flex-end">
+                      <mui-body weight="bold" size="small">Revenue:</mui-body>
+                      <mui-body size="small">$4,400.00</mui-body>
+                    </mui-h-stack>
+                    <mui-h-stack space="var(--space-400)" alignX="flex-end">
+                      <mui-body weight="bold" size="small">Cost:</mui-body>
+                      <mui-body size="small">$1,100.00</mui-body>
+                    </mui-h-stack>
+                  </mui-v-stack>
+                  <mui-button variant="tertiary" icon-only> <mui-icon-menu size="x-small"></mui-icon-menu></mui-button>
+                </mui-h-stack>
+              </mui-slat>
+              <mui-rule slot="showBelow" direction="horizontal" length="100%" style="margin: var(--space-300) 0;"></mui-rule>
+              <mui-slat slot="showBelow">      
+                <mui-heading slot="start" size="6">Whalen</mui-heading>      
+                <mui-h-stack space="var(--space-800)" alignX="flex-end" alignY="center" slot="end">
+                  <mui-v-stack space="var(--space-000)">
+                    <mui-h-stack space="var(--space-400)" alignX="flex-end">
+                      <mui-body weight="bold" size="small">Revenue:</mui-body>
+                      <mui-body size="small">$4,400.00</mui-body>
+                    </mui-h-stack>
+                    <mui-h-stack space="var(--space-400)" alignX="flex-end">
+                      <mui-body weight="bold" size="small">Cost:</mui-body>
+                      <mui-body size="small">$1,100.00</mui-body>
+                    </mui-h-stack>
+                  </mui-v-stack>
+                  <mui-button variant="tertiary" icon-only> <mui-icon-menu size="x-small"></mui-icon-menu></mui-button>
+                </mui-h-stack>
+              </mui-slat>
+            </mui-responsive>
+
+
+            <mui-code slot="footer">
+            <br />
+            &lt;mui-responsive breakpoint="1024"&gt;
+            <br />
+              &nbsp;&nbsp;&lt;mui-table slot="showAbove"&gt;
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row-group heading&gt;
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row columns="1fr 1fr 1fr 1fr"&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row&gt;
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row-group&gt;
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row-group&gt;
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row columns="1fr 1fr 1fr 1fr"&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell&gt;...&lt;/mui-cell&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row&gt;
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row-group&gt;
+              <br />
+              &nbsp;&nbsp;&lt;/mui-table&gt;
+              <br />
+              <br />
+              &nbsp;&nbsp;&lt;mui-slat slot="showBelow"&gt;
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-heading slot="start" size="5"&gt;Heading&lt;/mui-heading&gt;
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;&lt;div slot="end" width="20px"&gt;
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-h-stack slot="end" space="var(--space-400)" alignX="flex-end"&gt;
+                  <br />  
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body width="20px"&gt;Body&lt;/mui-body&gt;
+                    <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body width="20px"&gt;Body&lt;/mui-body&gt;
+                    <br />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-h-stack&gt;
+                  <br />
+                  &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+                <br />
+                &nbsp;&nbsp;&lt;/mui-slat&gt;
+                <br />
+
+
+
+
+              <br />
+              &lt;/mui-responsive&gt;
+            </mui-code>
+
+
+          </story-card>
+
+        <story-card title="Card w/ Table">
+          <div slot="body">
+            <mui-card>
+              <mui-card-body>
+                <mui-table>
+                  <mui-row-group heading>
+                    <mui-row columns="${s}">
+                      <mui-cell heading>Office</mui-cell>
+                      <mui-cell heading>Revenue</mui-cell>
+                      <mui-cell heading>Cost</mui-cell>
+                      <mui-cell heading action>
+                      </mui-cell>
+                    </mui-row>
+                  </mui-row-group>
+                  <mui-row-group>
+                    <mui-row columns="${s}">
+                      <mui-cell data-label="Office:">Whalen</mui-cell>
+                      <mui-cell data-label="Revenue:">$4,400.00</mui-cell>
+                      <mui-cell data-label="Cost:">$1,100.00</mui-cell>
+                      <mui-cell data-label="" action>
+                        <mui-button variant="tertiary" icon-only> <mui-icon-add size="small"></mui-icon-add></mui-button>
+                      </mui-cell>
+                    </mui-row>
+                    <mui-row columns="${s}">
+                      <mui-cell data-label="Office:">Whalen</mui-cell>
+                      <mui-cell data-label="Revenue:">$4,400.00</mui-cell>
+                      <mui-cell data-label="Cost:">$1,100.00</mui-cell>
+                      <mui-cell data-label="" action>
+                        <mui-button variant="tertiary" icon-only> <mui-icon-add size="small"></mui-icon-add></mui-button>
+                      </mui-cell>
+                    </mui-row>
+                  </mui-row-group>
+                </mui-table>
+              </mui-card-body>
+            </mui-card>
+          </div>
+          <mui-code slot="footer">
+            const Columns = &#96;1fr 1fr 1fr auto&#96;;<br>
+            <br>
+            &lt;mui-card&gt;<br>
+            &nbsp;&nbsp;&lt;mui-card-body&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-table&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row-group heading&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row columns="\${Columns}"&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;Office&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;Revenue&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;Cost&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading action&gt;&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row-group&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row-group&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row columns="\${Columns}"&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Office:"&gt;Whalen&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Revenue:"&gt;$4,400.00&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Cost:"&gt;$1,100.00&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="" action&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-button variant="tertiary" icon-only&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-icon-add size="small"&gt;&lt;/mui-icon-add&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-button&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row columns="\${Columns}"&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Office:"&gt;Whalen&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Revenue:"&gt;$4,400.00&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Cost:"&gt;$1,100.00&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="" action&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-button variant="tertiary" icon-only&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-icon-add size="small"&gt;&lt;/mui-icon-add&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-button&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row-group&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-table&gt;<br>
+            &nbsp;&nbsp;&lt;/mui-card-body&gt;<br>
+            &nbsp;&nbsp;&lt;mui-card-footer&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-code&gt;&lt;/mui-code&gt;<br>
+            &nbsp;&nbsp;&lt;/mui-card-footer&gt;<br>
+            &lt;/mui-card&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Card Header w/ Table" 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-table>
+                  <mui-row-group heading>
+                    <mui-row columns="${s}">
+                      <mui-cell heading>Office</mui-cell>
+                      <mui-cell heading>Revenue</mui-cell>
+                      <mui-cell heading>Cost</mui-cell>
+                      <mui-cell heading action>
+                      </mui-cell>
+                    </mui-row>
+                  </mui-row-group>
+                  <mui-row-group>
+                    <mui-row columns="${s}">
+                      <mui-cell data-label="Office:">Whalen</mui-cell>
+                      <mui-cell data-label="Revenue:">$4,400.00</mui-cell>
+                      <mui-cell data-label="Cost:">$1,100.00</mui-cell>
+                      <mui-cell data-label="" action>
+                        <mui-button variant="tertiary" icon-only> <mui-icon-add size="small"></mui-icon-add></mui-button>
+                      </mui-cell>
+                    </mui-row>
+                    <mui-row columns="${s}">
+                      <mui-cell data-label="Office:">Whalen</mui-cell>
+                      <mui-cell data-label="Revenue:">$4,400.00</mui-cell>
+                      <mui-cell data-label="Cost:">$1,100.00</mui-cell>
+                      <mui-cell data-label="" action>
+                        <mui-button variant="tertiary" icon-only> <mui-icon-add size="small"></mui-icon-add></mui-button>
+                      </mui-cell>
+                    </mui-row>
+                  </mui-row-group>
+                </mui-table>
+              </mui-card-body>
+            </mui-card>
+          </div>
+          <mui-code slot="footer">
+            const Columns = &#96;1fr 1fr 1fr auto&#96;;<br>
+            <br>
+            &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-table&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row-group heading&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row columns="\${Columns}"&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;Office&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;Revenue&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading&gt;Cost&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell heading action&gt;&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row-group&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row-group&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row columns="\${Columns}"&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Office:"&gt;Whalen&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Revenue:"&gt;$4,400.00&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Cost:"&gt;$1,100.00&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="" action&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-button variant="tertiary" icon-only&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-icon-add size="small"&gt;&lt;/mui-icon-add&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-button&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-row columns="\${Columns}"&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Office:"&gt;Whalen&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Revenue:"&gt;$4,400.00&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="Cost:"&gt;$1,100.00&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-cell data-label="" action&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-button variant="tertiary" icon-only&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-icon-add size="small"&gt;&lt;/mui-icon-add&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-button&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-cell&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-row-group&gt;<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-table&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-table",a);

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

@@ -0,0 +1,40 @@
+class o extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"}),t=`
+      :host { display: block; }
+    `;e.innerHTML=`
+      <style>${t}</style>
+
+      <story-template 
+        title="Quote"
+        description="The mui-quote specifies a section that is quoted from another source."
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-quote/index.ts"
+      >
+
+      <mui-v-stack space="var(--space-700)">
+
+        <story-card title="Quote">
+
+          <div slot="body">
+          
+            <mui-body>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-body>
+            
+            <mui-quote>Risus Mollis Dapibus</mui-quote>
+            
+            <mui-body>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non
+            mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor
+            id nibh ultricies vehicula ut id elit.</mui-body>
+          
+          </div>
+          
+          <mui-code slot="footer">
+            &lt;mui-quote&gt;...&lt;/mui-quote&gt;
+          </mui-code>
+
+        </story-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-quote",o);

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

@@ -0,0 +1,69 @@
+class m extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),n=`
+      :host { display: block; }
+      .panel {
+        padding: var(--space-600);
+        border: var(--border-thin);
+        border-radius: var(--radius-400);
+        background: var(--surface-elevated-200);
+      }
+    
+    `,t=`
+      <mui-v-stack space="var(--space-200)" class="panel">
+        <mui-heading size="4" level="4">Figma Plugin</mui-heading>  
+        <mui-body size="medium">Install via <mui-link size="medium" weight="bold" href="https://www.figma.com/community/plugin/1471341082690554711/guru-guides" target="_blank">Figma</mui-link> and access MUI Guides directly in Figma.</mui-body>
+      </mui-v-stack>
+    `,a=`
+      <mui-v-stack space="var(--space-200)" class="panel">
+        <mui-heading size="4" level="4">Website</mui-heading>
+        <mui-body size="medium">Visit <mui-link size="medium" weight="bold" href="https://guides.gurusuite.xyz/" target="_blank">guides.gurusuite.xyz</mui-link> and view Mui Guides in-browser.</mui-body>
+      </mui-v-stack>
+    `;s.innerHTML=`
+      <style>${n}</style>
+
+      <story-template 
+        title="Design Guidelines"
+        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=0-1&t=dSPmUahUSkrLxFYS-1"
+      >
+
+
+      <mui-v-stack space="var(--space-700)">
+
+       <page-banner></page-banner>
+
+        <page-card title="MUI Credentials" description="To view the MUI Guidelines in Guru Guides, you must be logged in.">
+          <mui-v-stack slot="body" space="var(--space-600)">  
+
+            <mui-v-stack space="var(--space-400)">        
+
+              <mui-input label="Email" id="email-input" name="email" value="mui-web-components@proton.me">
+                <mui-button slot="after">Copy</mui-button>
+              </mui-input>
+              <mui-input label="Password" id="password-input" name="password" value="muikit">
+                <mui-button slot="after">Copy</mui-button>
+              </mui-input>
+
+            </mui-v-stack>
+
+
+            <mui-responsive breakpoint="1080">
+
+              <mui-grid space="var(--space-500)" slot="showAbove">
+                ${t}
+                ${a}
+              </mui-grid>
+
+              <mui-v-stack space="var(--space-400)" slot="showBelow">  
+                ${t}
+                ${a}
+              </mui-v-stack>
+
+            </mui-responsive>
+
+
+          </mui-v-stack>
+        </page-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `,requestAnimationFrame(()=>{s.querySelectorAll("mui-button").forEach(e=>{e.addEventListener("click",async()=>{const i=e.closest("mui-input"),u=i==null?void 0:i.getAttribute("value");if(u)try{await navigator.clipboard.writeText(u),e.innerText="Copied!",setTimeout(()=>{e.innerText="Copy"},1500)}catch(o){console.error("Failed to copy text: ",o),e.innerText="Error",setTimeout(()=>{e.innerText="Copy"},1500)}})})})}}customElements.define("design-guidelines",m);

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

@@ -0,0 +1,72 @@
+class d extends HTMLElement{constructor(){super();const i=this.attachShadow({mode:"open"}),e=`
+      :host { display: block; }
+    `;i.innerHTML=`
+      <style>${e}</style>
+
+      <story-template 
+        title="Heading" 
+        description="The Heading component includes six levels (H1–H6) for structured heading usage, supporting a range of hierarchies in text presentation."
+        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-1120&t=fSFYVey9aCoE5oQa-1"
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-heading/index.ts"
+      >
+        
+        <mui-v-stack space="var(--space-700)">
+        
+          <story-card noHeader>
+            <div slot="body">
+              <mui-heading size="1">Heading 1</mui-heading>
+            </div>
+            <mui-code slot="footer">
+              &lt;mui-heading size="1"&gt; ... &lt;/mui-heading&gt;
+            </mui-code>
+          </story-card>
+
+          <story-card noHeader>
+            <div slot="body">
+              <mui-heading size="2">Heading 2</mui-heading>
+            </div>
+            <mui-code slot="footer">
+              &lt;mui-heading size="2"&gt; ... &lt;/mui-heading&gt;
+            </mui-code>
+          </story-card>
+
+          <story-card noHeader>
+            <div slot="body">
+              <mui-heading size="3">Heading 3</mui-heading>
+            </div>
+            <mui-code slot="footer">
+              &lt;mui-heading size="3"&gt; ... &lt;/mui-heading&gt;
+            </mui-code>
+          </story-card>
+
+          <story-card noHeader>
+            <div slot="body">
+              <mui-heading size="4">Heading 4</mui-heading>
+            </div>
+            <mui-code slot="footer">
+              &lt;mui-heading size="4"&gt; ... &lt;/mui-heading&gt;
+            </mui-code>
+          </story-card>
+
+          <story-card noHeader>
+            <div slot="body">
+              <mui-heading size="5">Heading 5</mui-heading>
+            </div>
+            <mui-code slot="footer">
+              &lt;mui-heading size="5"&gt; ... &lt;/mui-heading&gt;
+            </mui-code>
+          </story-card>
+
+          <story-card noHeader>
+            <div slot="body">
+              <mui-heading size="6">Heading 6</mui-heading>
+            </div>
+            <mui-code slot="footer">
+              &lt;mui-heading size="6"&gt; ... &lt;/mui-heading&gt;
+            </mui-code>
+          </story-card>
+        
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-heading",d);