@muibook/components 1.0.2 → 1.0.4

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

@@ -1,325 +0,0 @@
-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);