@muibook/components 1.0.0

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

@@ -0,0 +1,96 @@
+class a extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"}),i=`
+      :host { display: block; }
+    `,o=[{name:"slot",required:!0,type:"HTML attribute",options:"mui-body, mui-icons-[name], elements",default:"",description:"Slot in text, icons or other appropriate micro compositions to support form experiences."}],s=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(""),n=o.map((t,d)=>{const r=d===o.length-1?"last-child":"";return`
+            <mui-accordion-block
+              style="position: relative; z-index: 1;" 
+              size="medium" 
+              heading=${t.name.charAt(0).toUpperCase()+t.name.slice(1)} 
+              ${r}>
+              <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("");e.innerHTML=`
+      <style>${i}</style>
+
+      <story-template 
+        title="Add On"
+        description="Enhance form inputs by using mui-addon to display supplementary information like units, prefixes, or suffixes."
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-addon/index.ts"
+        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=133-588&t=a1UUlxRE4ZIJUKwJ-1"
+      >
+
+      <mui-v-stack space="var(--space-700)">
+
+        <spec-card title="Props">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${s}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${n}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+        <story-card title="Before: Add On">
+          <div slot="body">
+            <mui-input label="Enter amount">
+              <mui-addon slot="before"><mui-body>USD</mui-body></mui-addon>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input label="Enter amount"&gt;
+            <br />
+
+            &nbsp;&nbsp;&lt;mui-addon slot="before"&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;USD&lt;mui-body&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-addon&gt;
+            <br />            
+
+            &lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+        <story-card title="After: Add On">
+          <div slot="body">
+            <mui-input label="Enter amount">
+              <mui-addon slot="after"><mui-body>USD</mui-body></mui-input></mui-addon>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input label="Enter amount"&gt;
+            <br />
+
+            &nbsp;&nbsp;&lt;mui-addon slot="after"&gt;
+            <br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-body&gt;USD&lt;mui-body&gt;
+            <br />
+            &nbsp;&nbsp;&lt;mui-addon&gt;
+            <br />            
+
+            &lt;mui-input&gt;
+            <br />
+          </mui-code>
+        </story-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-addon",a);

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

@@ -0,0 +1,257 @@
+class o extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),l=`
+      :host { display: block; }
+    `,s=[{name:"options",required:!0,type:"array",options:"[{...}]",default:"",description:"A JSON-encoded string representing the options for the select dropdown. Each option has a value and label."},{name:"id",type:"string",options:"{text}",default:"",description:"Identifier to group the label and input to allow user to focus on the input by clicking the label."},{name:"label",required:!0,type:"string",options:"{text}",default:"",description:"Provide the input with a unique label. If without, a console warning will remind you to add label."},{name:"hide-label",type:"boolean",options:"hide-label",default:"",description:"Ensures the label is accessible to screen readers while visually hiding it to avoid redundancy"},{name:"disabled",type:"boolean",options:"disabled",default:"",description:"Disable the select"},{name:"name",type:"string",options:"{text}",default:"",description:"The name attribute is used when submitting forms."},{name:"value",type:"string",options:"{text}",default:"",description:"Define which option is selected by default."}],n=s.map(e=>`
+          <story-type-row
+            ${e.required?"required":""}
+            name="${e.name}"
+            type="${e.type}" 
+            options="${e.options||""}"
+            default="${e.default||""}"
+            description="${e.description}">
+          </story-type-row>
+        `).join(""),b=s.map((e,i)=>{const a=i===s.length-1?"last-child":"";return`
+            <mui-accordion-block
+              style="position: relative; z-index: 1;" 
+              size="medium" 
+              heading=${e.name.charAt(0).toUpperCase()+e.name.slice(1)} 
+              ${a}>
+              <story-type-slat
+                slot="detail"
+                ${e.required?"required":""}
+                name="${e.name}"
+                type="${e.type}" 
+                options="${e.options||""}"
+                default="${e.default||""}"
+                description="${e.description}">
+              </story-type-slat>
+            </mui-accordion-block>
+          `}).join("");t.innerHTML=`
+      <style>${l}</style>
+
+      <story-template
+        title="Select" 
+        description="A versatile dropdown component for selecting from a list of options, supporting customisable styles and accessibility features."
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-select/index.ts"
+        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=117-2068&t=GMqx21isUVAMpLJp-1"
+        accessibility="
+          A label is required for screen reader support, describing the purpose of the select.;
+          If hide-label is used, the label is visually hidden but still accessible via aria-label.;
+          The label and select are linked using for and id attributes. If no id is provided, one is generated.;
+          Keyboard users see a clear focus style when navigating.;
+          The disabled attribute is native and fully supported by assistive tech.;
+          Logs a console warning if no label is provided.
+        "
+      >
+
+      <mui-v-stack space="var(--space-700)">
+
+        <spec-card title="Props">
+          <mui-responsive breakpoint="767" slot="body">
+            <story-type-table slot="showAbove">
+              ${n}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${b}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+
+        <story-card title="Default" description="A select requires a list of options.">
+          <div slot="body">
+            <mui-select
+              label="Default"
+              options='[
+                {"value": "default", "label": "Mui"},
+                {"value": "jal", "label": "JAL"},
+                {"value": "ana", "label": "ANA"},
+                {"value": "mono", "label": "Mono"}
+              ]'>
+            </mui-select>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-select label="Default"
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;options='[
+              <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "default", "label": "Mui"},
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "jal", "label": "JAL"},
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "ana", "label": "ANA"},
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "mono", "label": "Mono"}
+                <br />
+              &nbsp;&nbsp;]'&gt;
+              <br />
+            &lt;/mui-select&gt;
+
+          </mui-code>
+        </story-card>
+
+        <story-card title="Hide Label" description="Ensures the label is accessible to screen readers while visually hiding it to avoid redundancy.">
+          <div slot="body">
+            <mui-select 
+              label="Density"
+              hide-label
+              options='[
+                {"value": "spacious", "label": "Spacious"},
+                {"value": "compact", "label": "Compact"}
+              ]'>
+            </mui-select>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-select
+            <br />
+              &nbsp;&nbsp;label="Brand"
+              <br />
+              &nbsp;&nbsp;hide-label
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;options='[
+              <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "spacious", "label": "Spacious"},
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "compact", "label": "Compact"}
+                <br />
+              &nbsp;&nbsp;]'&gt;
+              <br />
+            &lt;/mui-select&gt;
+
+          </mui-code>
+        </story-card>
+
+
+        <story-card title="Value" description="Define which option is selected by default.">
+          <div slot="body">
+            <mui-select
+              value="compact"
+              label="Density"
+              hide-label
+              options='[
+                {"value": "spacious", "label": "Spacious"},
+                {"value": "compact", "label": "Compact"}
+              ]'>
+            </mui-select>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-select
+            <br />
+              &nbsp;&nbsp;label="Brand"
+              <br />
+              &nbsp;&nbsp;hide-label
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;options='[
+              <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "spacious", "label": "Spacious"},
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "compact", "label": "Compact"}
+                <br />
+              &nbsp;&nbsp;]'&gt;
+              <br />
+            &lt;/mui-select&gt;
+
+          </mui-code>
+        </story-card>
+
+        <story-card title="Disabled">
+          <div slot="body">
+            <mui-select
+              disabled
+              label="Brand"
+              hide-label
+              options='[
+                {"value": "spacious", "label": "Spacious"},
+                {"value": "compact", "label": "Compact"}
+              ]'>
+            </mui-select>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-select
+
+            <br />
+              &nbsp;&nbsp;disabled
+              <br />
+              &nbsp;&nbsp;label="Brand"
+              <br />
+              &nbsp;&nbsp;hide-label
+              <br />
+              &nbsp;&nbsp;&nbsp;&nbsp;options='[
+              <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "spacious", "label": "Spacious"},
+                <br />
+                &nbsp;&nbsp;&nbsp;&nbsp;{"value": "compact", "label": "Compact"}
+                <br />
+              &nbsp;&nbsp;]'&gt;
+              <br />
+            &lt;/mui-select&gt;
+
+          </mui-code>
+        </story-card>
+
+        <story-card title="Before: Select">
+          <div slot="body">
+            <mui-input type="search" label="Search">
+              <mui-select
+                style="width: 120px;"
+                slot="before"
+                label="Filter"
+                hide-label
+                  options='[
+                  {"value": "all", "label": "All"},
+                  {"value": "images", "label": "Images"},
+                  {"value": "video", "label": "Video"}
+                ]'>
+              </mui-select>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input type="search" label="Search"&gt;<br>
+            &nbsp;&nbsp;&lt;mui-select<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;slot="before"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;label="Filter"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;hide-label<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;style="width: 120px;"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;options='[<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "all", "label": "All" },<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "images", "label": "Images" },<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "video", "label": "Video" }<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;]'&gt;<br>
+            &nbsp;&nbsp;&lt;/mui-select&gt;<br>
+            &lt;/mui-input&gt;
+          </<mui-code>
+        </story-card>
+
+        <story-card title="After: Select">
+          <div slot="body">
+            <mui-input type="number" label="Amount to transfer">
+              <mui-select
+                style="width: 100px;"
+                slot="after"
+                label="Currency"
+                hide-label
+                  options='[
+                  {"value": "jpy", "label": "JPY"},
+                  {"value": "usd", "label": "USD"}
+                ]'>
+              </mui-select>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-input type="number" label="Amount to transfer"&gt;<br>
+            &nbsp;&nbsp;&lt;mui-select<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;slot="after"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;label="Currency"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;hide-label<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;style="width: 100px;"<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;options='[<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "jpy", "label": "JPY" },<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ "value": "usd", "label": "USD" }<br>
+            &nbsp;&nbsp;&nbsp;&nbsp;]'&gt;<br>
+            &nbsp;&nbsp;&lt;/mui-select&gt;<br>
+            &lt;/mui-input&gt;
+          </<mui-code>
+        </story-card>
+
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-select",o);

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

@@ -0,0 +1,67 @@
+class n extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),i=`
+      :host { display: block; }
+    `,t=[{name:"acceptedFileTypes",type:"string",options:"Any",default:"",description:"Comma-separated list of accepted file types (.jpg, .pdf)"},{name:"currentFileName",type:"string",options:"Any",default:"",description:"Initial text to display when no file has been selected."}],o=t.map(e=>`
+          <story-type-row
+            ${e.required?"required":""}
+            name="${e.name}"
+            type="${e.type}" 
+            options="${e.options||""}"
+            default="${e.default||""}"
+            description="${e.description}">
+          </story-type-row>
+        `).join(""),l=t.map((e,a)=>{const d=a===t.length-1?"last-child":"";return`
+          <mui-accordion-block 
+            size="medium" 
+            heading=${e.name.charAt(0).toUpperCase()+e.name.slice(1)} 
+            ${d}>
+            <story-type-slat
+              slot="detail"
+              ${e.required?"required":""}
+              name="${e.name}"
+              type="${e.type}" 
+              options="${e.options||""}"
+              default="${e.default||""}"
+              description="${e.description}">
+            </story-type-slat>
+          </mui-accordion-block>
+        `}).join("");s.innerHTML=`
+      <style>${i}</style>
+
+      <story-template
+        title="File Upload"
+        description="A simple file input that displays the selected file name and emits a file-upload event."
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-file-upload/index.ts"
+      >
+
+        <mui-v-stack space="var(--space-700)">
+
+          <spec-card title="Props">
+            <mui-responsive breakpoint="768" slot="body">
+              <story-type-table slot="showAbove">
+                ${o}
+              </story-type-table>
+              <mui-accordion-group exclusive slot="showBelow">
+                ${l}
+              </mui-accordion-group>
+            </mui-responsive>
+          </spec-card>
+
+          <story-card 
+            title="Default" 
+          >
+            <mui-file-upload slot="body"
+              acceptedFileTypes=".pdf,.jpg"
+              currentFileName="No file selected"
+            ></mui-file-upload>
+            <mui-code slot="footer">
+              &lt;mui-file-upload<br />
+              &nbsp;&nbsp;acceptedFileTypes=".pdf,.jpg"<br />
+              &nbsp;&nbsp;currentFileName="No file selected"<br />
+              &gt;&lt;/mui-file-upload&gt;
+            </mui-code>
+          </story-card>
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-file-upload",n);

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

@@ -0,0 +1,133 @@
+const s="/mui-tokens.jpg";class t extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"}),i=`
+      :host { display: block; }
+    
+      .config::part(display) {
+        grid-template-columns: 1fr;
+      }
+
+      @media (min-width: 1230px) {
+        .config::part(display) {
+          grid-template-columns: minmax(0, 50ch) 400px;
+          gap: 7.2rem;
+          justify-content: space-between;
+          align-items: start;
+        }
+      }
+
+      @media (min-width: 1390px) {
+        .config::part(display) {
+          grid-template-columns: minmax(0, 50ch) 500px;
+          gap: 9.6rem;
+        }
+      }
+
+    `;e.innerHTML=`
+      <style>${i}</style>
+
+      <story-template 
+        title="Theme Setup"
+        description="Connect your theme — token-powered, brand-ready, and dark mode friendly."
+        github="https://github.com/michaeltrilford/create-mui-app/blob/main/src/mui-styles/mui-tokens.css"
+      >
+
+
+      <mui-v-stack space="var(--space-700)">
+
+        <page-card>
+          
+          <mui-grid slot="body" class="config"  space="var(--space-400)">
+
+            <mui-v-stack space="var(--space-600)">
+
+              <mui-v-stack space="var(--space-400)">
+                <mui-body size="large">Configure your brand’s colors, typography, and spacing — without touching 
+                component code. Start with the GitHub template and plan how your brand will come to life, including 
+                support for both light and dark mode.</mui-body>
+              </mui-v-stack>
+
+              <mui-v-stack space="var(--space-300)">
+                <mui-heading level="3" size="5">Design tokens</mui-heading>
+                <mui-body size="medium">
+                  <mui-link size="medium" href="#/base-design-tokens">Base</mui-link>, 
+                  <mui-link size="medium" href="#/semantic-design-tokens">Semantic</mui-link>, 
+                  <mui-link size="medium" href="#/contextual-design-tokens">Contextual</mui-link>, 
+                  <mui-link size="medium" href="#/surface-design-tokens">Surface</mui-link> and 
+                  <mui-link size="medium" href="#/components-design-tokens">Component</mui-link> tokens.</mui-body>
+              </mui-v-stack>
+
+              <mui-v-stack space="var(--space-300)">
+                <mui-heading level="3" size="5">Brand primitives</mui-heading>
+                <mui-body size="medium">Set your brand’s core design tokens such as color palettes, font stacks, 
+                and spacing values. These primitives serve as the building blocks for every component.</mui-body>
+              </mui-v-stack>
+
+              <mui-v-stack space="var(--space-300)">
+                <mui-heading level="3" size="5">Light mode</mui-heading>
+                <mui-body size="medium">Apply your brand primitives to the light color scheme. Ensure accessibility 
+                and visual harmony by testing components against your chosen values.</mui-body>
+              </mui-v-stack>
+
+              <mui-v-stack space="var(--space-300)">
+                <mui-heading level="3" size="5">Dark mode</mui-heading>
+                <mui-body size="medium">Customise the dark theme by adjusting contrast, brightness, and other token 
+                values to provide a cohesive experience in low-light environments.</mui-body>
+              </mui-v-stack>
+
+              <mui-v-stack space="var(--space-300)">
+                <mui-heading level="3" size="5">Set the foundation</mui-heading>
+                <mui-body size="medium">Establish consistency across your product by using the template to unify 
+                theming across all modes. Fork the repository and start customizing your theme today.</mui-body>
+              </mui-v-stack>
+
+            </mui-v-stack>
+
+            <mui-image>
+              <img slot="image" src="${s}" alt="Author Tokens" />
+              <figcaption slot="caption">mui-styles/mui-tokens.css</figcaption>
+            </mui-image> 
+          </mui-grid>
+
+          <mui-code slot="footer">
+            <br />
+            THEME STRUCTURE:
+            <br />
+            <br />
+            &#47;* ===================================== *&#47;<br />
+            &#47;* 1. BRAND PRIMITIVES<br />
+            &#47;* ===================================== *&#47;<br />
+            :where(html) {<br />
+            &nbsp;&nbsp;...<br />
+            }<br />
+            <br />
+            &#47;* ===================================== *&#47;<br />
+            &#47;* 2. LIGHT MODE <br />
+            &#47;* ===================================== *&#47;<br />
+            html[data-theme=&#39;light&#39;] {<br />
+            &nbsp;&nbsp;...<br />
+            }<br />
+            <br />
+            &#47;* ===================================== *&#47;<br />
+            &#47;* 3. DARK MODE<br />
+            &#47;* ===================================== *&#47;<br />
+            html[data-theme=&#39;dark&#39;] {<br />
+            &nbsp;&nbsp;...<br />
+            }<br />
+            <br />
+            &#47;* ===================================== *&#47;<br />
+            &#47;* 4. SET THE FOUNDATION<br />
+            &#47;* ===================================== *&#47;<br />
+            :where(html) {<br />
+            &nbsp;&nbsp;...<br />
+            }<br />
+            <br />
+            <br />
+
+          </mui-code>
+
+
+        </page-card>
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("theme-setup",t);