@muibook/components 1.0.0

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

@@ -0,0 +1,325 @@
+class f extends HTMLElement{constructor(){super();const r=this.attachShadow({mode:"open"}),m=`
+      :host { display: block; }
+    `,a=[{name:"slot",required:!0,type:"HTML attribute",options:"mui-tab-bar, mui-tab-panel",default:"",description:"Assigns the elements to a named slot in the Carousel Controller. Required for light DOM content like tabs and panels."}],l=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(""),c=a.map((t,e)=>{const i=e===a.length-1?"last-child":"";return`
+      <mui-accordion-block
+        class="card-slot"
+        size="medium" 
+        heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)} 
+        ${i}>
+        <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(""),s=[{name:"slot",required:!0,type:"HTML attribute",options:"tab-item",default:"",description:"Pass in the tab-item element"},{name:"speed",type:"string",options:"",default:"200ms",description:"Adjust the timing of the tab animation"}],d=s.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(""),u=s.map((t,e)=>{const i=e===s.length-1?"last-child":"";return`
+            <mui-accordion-block
+              class="card-slot"
+              style="position: relative; z-index: 1;" 
+              size="medium" 
+              heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)} 
+              ${i}>
+              <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(""),o=[{name:"slot",required:!0,type:"HTML attribute",options:"{text}",default:"Required",description:"Pass in text to the tab item"},{name:"icon",type:"string",options:"mui-icon-[name]",default:"",description:"Pass in optional icon"},{name:"active",type:"boolean",options:"active",default:"",description:"Set the active tab state"},{name:"id",type:"string",options:"any",default:"",description:"Unique identifier for the tab item. Used to link the tab with its corresponding panel."}],p=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(""),y=o.map((t,e)=>{const i=e===o.length-1?"last-child":"";return`
+              <mui-accordion-block
+                class="card-slot"
+                style="position: relative; z-index: 1;" 
+                size="medium" 
+                heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)} 
+                ${i}>
+                <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(""),n=[{name:"item",type:"string",options:"any",default:"",description:"Maps to the corresponding id of a tab-item in the tab bar. Controls which panel is shown based on the selected tab."}],g=n.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(""),$=n.map((t,e)=>{const i=e===n.length-1?"last-child":"";return`
+          <mui-accordion-block
+            class="card-slot"
+            size="medium" 
+            heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)} 
+            ${i}>
+            <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=[{id:"item1",label:"Message",icon:"mui-icon-message",active:!0},{id:"item2",label:"Notification",icon:"mui-icon-notification"}].map(({id:t,label:e,icon:i,active:h})=>`<mui-tab-item id="${t}" icon="${i}"${h?" active":""}>${e}</mui-tab-item>`).join("");r.innerHTML=`
+      <style>${m}</style>
+
+      <story-template
+        title="Tab Bar"
+        description="Allow users to switch between views or content sections by selecting from a group of tabs."
+        github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-tabs"
+        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=126-560&t=ZfvVjZFxH7mQ72pi-1"
+        accessibility="
+          Left/Right arrows, Home and End keys let keyboard users navigate between tab-items.; 
+          aria-selected and tabindex attributes are updated on each tab-item when it becomes active or inactive.; 
+          Each active tab-item can receive focus and shows a focus-visible outline.; 
+          tab-bar uses role=tablist to group related tab-items and each tab-item uses role=tab within the tab-bar.
+        "
+
+      >
+
+      <mui-v-stack space="var(--space-700)">
+
+        <spec-card title="Props: Tab Controller">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${l}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${c}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+        <spec-card title="Props: Tab Bar">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${d}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${u}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+        <spec-card title="Props: Tab Item">
+          <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>
+
+        <spec-card title="Props: Tab Panel">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${g}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${$}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+
+        <story-card title="Default">
+          <mui-tab-bar slot="body">
+            <mui-tab-item active id="item1">Item 1</mui-tab-item>
+            <mui-tab-item id="item2">Item 2</mui-tab-item>
+            <mui-tab-item id="item3">Item 3</mui-tab-item>
+          </mui-tab-bar>
+          <mui-code slot="footer">
+            &lt;mui-tab-bar&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-tab-item active id="item1"&gt;Item One&lt;/mui-tab-item&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-tab-item id="item2"&gt;Item two&lt;/mui-tab-item&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-tab-item id="item3"&gt;Item three&lt;/mui-tab-item&gt;
+            <br />
+            &lt;/mui-tab-bar&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Tab Controller and Tab Panel">
+          <mui-tab-controller slot="body">
+            <mui-tab-bar>
+              <mui-tab-item active id="item1">Item 1</mui-tab-item>
+              <mui-tab-item id="item2">Item 2</mui-tab-item>
+              <mui-tab-item id="item3">Item 3</mui-tab-item>
+            </mui-tab-bar>
+
+            <mui-tab-panel item="item1">Content 1</mui-tab-panel>
+            <mui-tab-panel item="item2">Content 2</mui-tab-panel>
+            <mui-tab-panel item="item3">Content 3</mui-tab-panel>
+          </mui-tab-controller>
+
+          <mui-code slot="footer">
+            &lt;mui-tab-controller&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-tab-bar&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-tab-item active id="item1"&gt;Item 1&lt;/mui-tab-item&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-tab-item id="item2"&gt;Item 2&lt;/mui-tab-item&gt;<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-tab-item id="item3"&gt;Item 3&lt;/mui-tab-item&gt;<br />
+            &nbsp;&nbsp;&lt;/mui-tab-bar&gt;<br />
+            &nbsp;&nbsp;&lt;mui-tab-panel item="item1"&gt;Content 1&lt;/mui-tab-panel&gt;<br />
+            &nbsp;&nbsp;&lt;mui-tab-panel item="item2"&gt;Content 2&lt;/mui-tab-panel&gt;<br />
+            &nbsp;&nbsp;&lt;mui-tab-panel item="item3"&gt;Content 3&lt;/mui-tab-panel&gt;<br />
+            &lt;/mui-tab-controller&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Animation Speed 500ms">
+          <mui-tab-bar slot="body" speed="500">
+            ${b}
+          </mui-tab-bar>
+          <mui-code slot="footer">
+            const tabData = [
+            <br />
+            &nbsp;&nbsp;{ id: 'item1', label: 'Message', icon: 'mui-icon-message', active: true },
+            <br />
+            &nbsp;&nbsp;{ id: 'item2', label: 'Notification', icon: 'mui-icon-notification' },
+            <br />
+            ];
+            <br />
+            <br />
+            const tabItemsHTML = tabData
+            <br />
+            &nbsp;&nbsp;.map(({ label, icon, active }) => {
+              <br />
+            &nbsp;&nbsp;const activeAttr = active ? ' active' : '';
+            <br />
+            &nbsp;&nbsp;return &#96;&lt;mui-tab-item id="&#36;{id}" icon="&#36;{icon}"&#36;{activeAttr}&gt;&#36;{label}&lt;/mui-tab-item&gt;&#96;;
+            <br />
+            })
+            <br />
+            .join('');
+            <br />
+            <br />
+            &lt;mui-tab-bar full-width&gt;
+            <br />
+            &nbsp;&#36;{tabItemsHTML}
+            <br />
+            &lt;/mui-tab-bar&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Default w/ Icon">
+          <mui-tab-bar slot="body">
+            ${b}
+          </mui-tab-bar>
+          <mui-code slot="footer">
+            const tabData = [
+            <br />
+            &nbsp;&nbsp;{ id: 'item1', label: 'Message', icon: 'mui-icon-message', active: true },
+            <br />
+            &nbsp;&nbsp;{ id: 'item2', label: 'Notification', icon: 'mui-icon-notification' },
+            <br />
+            ];
+            <br />
+            <br />
+            const tabItemsHTML = tabData
+            <br />
+            &nbsp;&nbsp;.map(({ label, icon, active }) => {
+              <br />
+            &nbsp;&nbsp;const activeAttr = active ? ' active' : '';
+            <br />
+            &nbsp;&nbsp;return &#96;&lt;mui-tab-item id="&#36;{id}" icon="&#36;{icon}"&#36;{activeAttr}&gt;&#36;{label}&lt;/mui-tab-item&gt;&#96;;
+            <br />
+            })
+            <br />
+            .join('');
+            <br />
+            <br />
+            &lt;mui-tab-bar&gt;
+            <br />
+            &nbsp;&#36;{tabItemsHTML}
+            <br />
+            &lt;/mui-tab-bar&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Full width">
+          <mui-tab-bar full-width slot="body">
+            ${b}
+          </mui-tab-bar>
+
+          <mui-code slot="footer">
+            const tabData = [
+            <br />
+            &nbsp;&nbsp;{ id: 'item1', label: 'Message', icon: 'mui-icon-message', active: true },
+            <br />
+            &nbsp;&nbsp;{ id: 'item2', label: 'Notification', icon: 'mui-icon-notification' },
+            <br />
+            ];
+            <br />
+            <br />
+            const tabItemsHTML = tabData
+            <br />
+            &nbsp;&nbsp;.map(({ label, icon, active }) => {
+              <br />
+            &nbsp;&nbsp;const activeAttr = active ? ' active' : '';
+            <br />
+            &nbsp;&nbsp;return &#96;&lt;mui-tab-item id="&#36;{id}" icon="&#36;{icon}"&#36;{activeAttr}&gt;&#36;{label}&lt;/mui-tab-item&gt;&#96;;
+            <br />
+            })
+            <br />
+            .join('');
+            <br />
+            <br />
+            &lt;mui-tab-bar full-width&gt;
+            <br />
+            &nbsp;&#36;{tabItemsHTML}
+            <br />
+            &lt;/mui-tab-bar&gt;
+          </mui-code>
+        </story-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-tab-bar",f);