@muibook/components 1.0.0

package/dist/muibook/assets/base-B4dO4n0A.js

@@ -0,0 +1,198 @@
+class s extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),o=`
+      :host { display: block; }
+    `;t.innerHTML=`
+      <style>${o}</style>
+
+      <story-template 
+        title="Base"
+        description="Raw values for core attributes like color, typography, spacing, and size."
+        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-527&t=fSFYVey9aCoE5oQa-1"
+        github="https://github.com/michaeltrilford/muibook/blob/main/src/css/mui-tokens.css"
+      >
+
+        <mui-v-stack space="var(--space-700)">
+
+          <spec-card title="Font Family">
+            <story-token-slat 
+              slot="body" 
+              token="--font-family"
+              variant="font-family"
+              output="system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'">
+            </story-token-slat>
+          </spec-card>
+            
+          <spec-card title="Font Scale" description="The font size scale follows a consistent type ramp, using fluid rem values to establish visual hierarchy. Each step in the scale pairs directly with a calculated line-height, enabling predictable, harmonious typography across components and layouts." usage="E.g. --font-size-15 and --line-height-15 is paired.">
+            <story-token-slat slot="body" token="--font-size-15" variant="text-size" line-height="--line-height-15" output="1.1rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-25" variant="text-size" line-height="--line-height-25" output="1.2rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-50" variant="text-size" line-height="--line-height-50" output="1.4rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-100" variant="text-size" line-height="--line-height-100" output="1.6rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-200" variant="text-size" line-height="--line-height-200" output="1.8rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-300" variant="text-size" line-height="--line-height-300" output="2.1rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-400" variant="text-size" line-height="--line-height-400" output="2.4rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-500" variant="text-size" line-height="--line-height-500" output="3.6rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-600" variant="text-size" line-height="--line-height-600" output="4.8rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-700" variant="text-size" line-height="--line-height-700" output="6rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-800" variant="text-size" line-height="--line-height-800" output="7.2rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-900" variant="text-size" line-height="--line-height-900" output="8.4rem"></story-token-slat>
+            <story-token-slat slot="body" token="--font-size-1000" variant="text-size" line-height="--line-height-1000" output="9.6rem"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Line-height" description="Line heights are ratio-based and mapped to their corresponding font sizes, ensuring clear vertical rhythm and legibility. This alignment supports scalable, accessible typography that remains balanced at any size." usage="E.g. --font-size-15 and --line-height-15 is paired.">
+            <story-token-slat slot="body" token="--line-height-15" variant="line-height" font-size="--font-size-15" output="2.18181818"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-25" variant="line-height" font-size="--font-size-25" output="2"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-50" variant="line-height" font-size="--font-size-50" output="1.71428571"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-100" variant="line-height" font-size="--font-size-100" output="1.5"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-200" variant="line-height" font-size="--font-size-200" output="1.33333333"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-300" variant="line-height" font-size="--font-size-300" output="1.14285714"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-400" variant="line-height" font-size="--font-size-400" output="1.5"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-500" variant="line-height" font-size="--font-size-500" output="1.33333333"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-600" variant="line-height" font-size="--font-size-600" output="1.25"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-700" variant="line-height" font-size="--font-size-700" output="1.2"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-800" variant="line-height" font-size="--font-size-800" output="1.16666667"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-900" variant="line-height" font-size="--font-size-900" output="1.14285714"></story-token-slat>
+            <story-token-slat slot="body" token="--line-height-1000" variant="line-height" font-size="--font-size-1000" output="1.125"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Font Weight">
+            <story-token-slat slot="body" token="--font-weight-400" variant="font-weight" output="400"></story-token-slat>
+            <story-token-slat slot="body" token="--font-weight-500" variant="font-weight" output="500"></story-token-slat>
+            <story-token-slat slot="body" token="--font-weight-600" variant="font-weight" output="600"></story-token-slat>
+            <story-token-slat slot="body" token="--font-weight-700" variant="font-weight" output="700"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Colors / Black">
+            <story-token-slat slot="body" token="--black" variant="color" output="#000000"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-0" variant="color" output="hsla(0, 0%, 0%, 0)"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-10" variant="color" output="hsla(0, 0%, 0%, 0.1)"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-20" variant="color" output="hsla(0, 0%, 0%, 0.2)"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-30" variant="color" output="hsla(0, 0%, 0%, 0.3)"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-40" variant="color" output="hsla(0, 0%, 0%, 0.4)"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-50" variant="color" output="hsla(0, 0%, 0%, 0.5)"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-60" variant="color" output="hsla(0, 0%, 0%, 0.6)"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-70" variant="color" output="hsla(0, 0%, 0%, 0.7)"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-80" variant="color" output="hsla(0, 0%, 0%, 0.8)"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-90" variant="color" output="hsla(0, 0%, 0%, 0.9)"></story-token-slat>
+            <story-token-slat slot="body" token="--black-opacity-100" variant="color" output="hsla(0, 0%, 0%, 1)"></story-token-slat>
+          </spec-card>
+
+
+          <spec-card title="Colors / White">
+            <story-token-slat slot="body" token="--white" variant="color" output="#FFFFFF"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-0" variant="color" output="hsla(0, 0%, 100%, 0)"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-10" variant="color" output="hsla(0, 0%, 100%, 0.1)"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-20" variant="color" output="hsla(0, 0%, 100%, 0.2)"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-30" variant="color" output="hsla(0, 0%, 100%, 0.3)"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-40" variant="color" output="hsla(0, 0%, 100%, 0.4)"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-50" variant="color" output="hsla(0, 0%, 100%, 0.5)"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-60" variant="color" output="hsla(0, 0%, 100%, 0.6)"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-70" variant="color" output="hsla(0, 0%, 100%, 0.7)"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-80" variant="color" output="hsla(0, 0%, 100%, 0.8)"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-90" variant="color" output="hsla(0, 0%, 100%, 0.9)"></story-token-slat>
+            <story-token-slat slot="body" token="--white-opacity-100" variant="color" output="hsla(0, 0%, 100%, 1)"></story-token-slat>
+          </spec-card>
+
+
+          <spec-card title="Colors / Grey">
+
+            <story-token-slat slot="body" token="--grey-100" variant="color" output="#F5F5F5">
+              <div slot="visual" style="width: 16px; height: 16px; background: var(--grey-100); border-radius: 4px;"></div>
+            </story-token-slat>
+
+            <story-token-slat slot="body" token="--grey-200" variant="color" output="#E5E5E5"></story-token-slat>
+            <story-token-slat slot="body" token="--grey-300" variant="color" output="#CCCCCC"></story-token-slat>
+            <story-token-slat slot="body" token="--grey-400" variant="color" output="#AAAAAA"></story-token-slat>
+            <story-token-slat slot="body" token="--grey-500" variant="color" output="#888888"></story-token-slat>
+            <story-token-slat slot="body" token="--grey-600" variant="color" output="#666666"></story-token-slat>
+            <story-token-slat slot="body" token="--grey-700" variant="color" output="#555555"></story-token-slat>
+            <story-token-slat slot="body" token="--grey-800" variant="color" output="#444444"></story-token-slat>
+            <story-token-slat slot="body" token="--grey-900" variant="color" output="#333333"></story-token-slat>
+            <story-token-slat slot="body" token="--grey-1000" variant="color" output="#222222"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Colors / Red">
+            <story-token-slat slot="body" token="--red-100" variant="color" output="#FFE5E5"></story-token-slat>
+            <story-token-slat slot="body" token="--red-200" variant="color" output="#FBBCBC"></story-token-slat>
+            <story-token-slat slot="body" token="--red-300" variant="color" output="#F79494"></story-token-slat>
+            <story-token-slat slot="body" token="--red-400" variant="color" output="#F36B6B"></story-token-slat>
+            <story-token-slat slot="body" token="--red-500" variant="color" output="#F74E4E"></story-token-slat>
+            <story-token-slat slot="body" token="--red-600" variant="color" output="#E04343"></story-token-slat>
+            <story-token-slat slot="body" token="--red-700" variant="color" output="#C23C3C"></story-token-slat>
+            <story-token-slat slot="body" token="--red-800" variant="color" output="#A43535"></story-token-slat>
+            <story-token-slat slot="body" token="--red-900" variant="color" output="#862E2E"></story-token-slat>
+            <story-token-slat slot="body" token="--red-1000" variant="color" output="#6A2323"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Colors / Orange">
+            <story-token-slat slot="body" token="--orange-100" variant="color" output="#FFF2CC"></story-token-slat>
+            <story-token-slat slot="body" token="--orange-200" variant="color" output="#FFE0A3"></story-token-slat>
+            <story-token-slat slot="body" token="--orange-300" variant="color" output="#FFCC80"></story-token-slat>
+            <story-token-slat slot="body" token="--orange-400" variant="color" output="#FFB84D"></story-token-slat>
+            <story-token-slat slot="body" token="--orange-500" variant="color" output="#FFA500"></story-token-slat>
+            <story-token-slat slot="body" token="--orange-600" variant="color" output="#E59400"></story-token-slat>
+            <story-token-slat slot="body" token="--orange-700" variant="color" output="#CC8300"></story-token-slat>
+            <story-token-slat slot="body" token="--orange-800" variant="color" output="#B37300"></story-token-slat>
+            <story-token-slat slot="body" token="--orange-900" variant="color" output="#996200"></story-token-slat>
+            <story-token-slat slot="body" token="--orange-1000" variant="color" output="#805100"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Colors / Green">
+            <story-token-slat slot="body" token="--green-100" variant="color" output="#E5F9E5"></story-token-slat>
+            <story-token-slat slot="body" token="--green-200" variant="color" output="#C6F3C6"></story-token-slat>
+            <story-token-slat slot="body" token="--green-300" variant="color" output="#A6EDA6"></story-token-slat>
+            <story-token-slat slot="body" token="--green-400" variant="color" output="#86E786"></story-token-slat>
+            <story-token-slat slot="body" token="--green-500" variant="color" output="#00BD00"></story-token-slat>
+            <story-token-slat slot="body" token="--green-600" variant="color" output="#00A800"></story-token-slat>
+            <story-token-slat slot="body" token="--green-700" variant="color" output="#009400"></story-token-slat>
+            <story-token-slat slot="body" token="--green-800" variant="color" output="#007F00"></story-token-slat>
+            <story-token-slat slot="body" token="--green-900" variant="color" output="#006B00"></story-token-slat>
+            <story-token-slat slot="body" token="--green-1000" variant="color" output="#005700"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Colors / Blue">
+            <story-token-slat slot="body" token="--blue-100" variant="color" output="#E6F2FF"></story-token-slat>
+            <story-token-slat slot="body" token="--blue-200" variant="color" output="#CCE4FF"></story-token-slat>
+            <story-token-slat slot="body" token="--blue-300" variant="color" output="#99CAFF"></story-token-slat>
+            <story-token-slat slot="body" token="--blue-400" variant="color" output="#85BFFB"></story-token-slat>
+            <story-token-slat slot="body" token="--blue-500" variant="color" output="#62B7FB"></story-token-slat>
+            <story-token-slat slot="body" token="--blue-600" variant="color" output="#338fe0"></story-token-slat>
+            <story-token-slat slot="body" token="--blue-700" variant="color" output="#3396EB"></story-token-slat>
+            <story-token-slat slot="body" token="--blue-800" variant="color" output="#1A86E3"></story-token-slat>
+            <story-token-slat slot="body" token="--blue-900" variant="color" output="#0076DB"></story-token-slat> 
+            <story-token-slat slot="body" token="--blue-1000" variant="color" output="#005FB1"></story-token-slat> 
+          </spec-card>
+
+          <spec-card title="Radius">
+            <story-token-slat slot="body" token="--radius-000" variant="radius" output="0"></story-token-slat>
+            <story-token-slat slot="body" token="--radius-100" variant="radius" output="4px"></story-token-slat>
+            <story-token-slat slot="body" token="--radius-150" variant="radius" output="6px"></story-token-slat>
+            <story-token-slat slot="body" token="--radius-200" variant="radius" output="8px"></story-token-slat>
+            <story-token-slat slot="body" token="--radius-300" variant="radius" output="16px"></story-token-slat>
+            <story-token-slat slot="body" token="--radius-400" variant="radius" output="24px"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Spacing">
+            <story-token-slat slot="body" token="--space-000" variant="size" output="0"></story-token-slat>
+            <story-token-slat slot="body" token="--space-025" variant="size" output="0.2rem"></story-token-slat>
+            <story-token-slat slot="body" token="--space-050" variant="size" output="0.4rem"></story-token-slat>
+            <story-token-slat slot="body" token="--space-100" variant="size" output="0.6rem"></story-token-slat>
+            <story-token-slat slot="body" token="--space-200" variant="size" output="0.8rem"></story-token-slat>
+            <story-token-slat slot="body" token="--space-300" variant="size" output="1.2rem"></story-token-slat>
+            <story-token-slat slot="body" token="--space-400" variant="size" output="1.6rem"></story-token-slat>
+            <story-token-slat slot="body" token="--space-500" variant="size" output="2.4rem"></story-token-slat>
+            <story-token-slat slot="body" token="--space-600" variant="size" output="3.6rem"></story-token-slat>
+            <story-token-slat slot="body" token="--space-700" variant="size" output="4.8rem"></story-token-slat>
+            <story-token-slat slot="body" token="--space-800" variant="size" output="6rem"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Stroke">
+            <story-token-slat slot="body" token="--stroke-size-100" variant="border-width" output="1px"></story-token-slat>
+            <story-token-slat slot="body" token="--stroke-size-200" variant="border-width" output="2px"></story-token-slat>
+            <story-token-slat slot="body" token="--stroke-size-300" variant="border-width" output="3px"></story-token-slat>
+            <story-token-slat slot="body" token="--stroke-size-400" variant="border-width" output="4px"></story-token-slat>
+            <story-token-slat slot="body" token="--stroke-size-500" variant="border-width" output="5px"></story-token-slat>
+          </spec-card>
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("tokens-base",s);

package/dist/muibook/assets/components-YZ3tjmIt.js

@@ -0,0 +1,122 @@
+class o extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),e=`
+      :host { display: block; }
+
+      .reference {
+        padding: var(--space-500) var(--space-500); 
+        border-top: var(--border-thin);
+      }
+
+      @media (min-width: 768px) {
+        .reference {
+          padding: var(--space-500) var(--space-600); 
+        }
+      }
+    `;t.innerHTML=`
+      <style>${e}</style>
+
+      <story-template 
+        title="Components"
+        description="Tokens mapped to specific UI components and their states, bridging global tokens with practical implementation for consistency and scalability."
+        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-527&t=fSFYVey9aCoE5oQa-1"
+        github="https://github.com/michaeltrilford/muibook/blob/main/src/css/mui-tokens.css"
+      >
+        <mui-v-stack space="var(--space-700)">
+
+          <spec-card title="Icon" github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-icons">
+            <story-token-slat slot="body" token="--icon-color-default" variant="color" output="var(--black)"></story-token-slat>
+            <story-token-slat slot="body" token="--icon-color-inverted" variant="color" output="var(--white)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Card" github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-card">
+            <story-token-slat slot="body" token="--card-radius" variant="radius" output="var(--radius-150)"></story-token-slat>
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/surface-design-tokens">Surface</mui-link> tokens</mui-body>
+          </spec-card>
+
+          <spec-card title="Badge" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-badge/index.ts">
+            <story-token-slat slot="body" token="--badge-radius" variant="radius" output="var(--radius-100)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--badge-text-color" variant="text-color" output="var(--white)"></story-token-slat>
+            <story-token-slat slot="body" token="--badge-font-weight" variant="font-weight" output="var(--font-weight-bold)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--badge-background-neutral" variant="color" output="var(--grey-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--badge-background-positive" variant="color" output="var(--green-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--badge-background-warning" variant="color" output="var(--orange-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--badge-background-attention" variant="color" output="var(--red-600)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Table" github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-table">
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Border Contextual</mui-link> tokens</mui-body>
+          </spec-card>
+
+          <spec-card title="Image" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-image/index.ts">
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Text Contextual</mui-link> tokens</mui-body>
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/surface-design-tokens">Surface</mui-link> tokens</mui-body>
+          </spec-card>
+
+          <spec-card title="Code" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-code/index.ts">
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Text Contextual</mui-link> tokens</mui-body>
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/surface-design-tokens">Surface</mui-link> tokens</mui-body>
+          </spec-card>
+
+          <spec-card title="Alert" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-alert/index.ts">
+            <story-token-slat slot="body" token="--alert-radius" variant="radius" output="var(--radius-100)"></story-token-slat>
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/semantic-design-tokens">Feedback Semantic</mui-link> tokens</mui-body>
+          </spec-card>
+
+          <spec-card title="Message" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-message/index.ts">
+            <story-token-slat slot="body" token="--message-radius" variant="radius" output="var(--radius-150)"></story-token-slat>
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/semantic-design-tokens">Feedback Semantic</mui-link> tokens</mui-body>
+          </spec-card>
+
+          <spec-card title="Button" description="Button uses the 'Action' tokens to define the visual behavior of call-to-action button elements." github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-button/index.ts">
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/semantic-design-tokens">Action Semantic</mui-link> tokens</mui-body>
+          </spec-card>
+
+          <spec-card title="Link Button" description="Link button uses the 'Action' tokens to define the visual behavior of call-to-action button elements." github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-link/index.ts">
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/semantic-design-tokens">Action Semantic</mui-link> tokens</mui-body>
+          </spec-card>
+
+          <spec-card title="Link Default" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-link/index.ts">
+            <story-token-slat slot="body" token="--link-text-color-default" variant="text-color" output="var(--grey-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--link-text-color-default-hover" variant="text-color" output="var(--grey-1000)"></story-token-slat>
+            <story-token-slat slot="body" token="--link-text-color-default-focus" variant="text-color" output="var(--grey-1000)"></story-token-slat>
+            <story-token-slat slot="body" token="--link-text-color-default-disabled" variant="text-color" output="var(--grey-800)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Heading" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-heading/index.ts">
+            <story-token-slat slot="body" token="--heading-text-color" variant="text-color" output="var(--grey-1000)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-font-weight" variant="font-weight" output="var(--font-weight-bold)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--heading-font-size-100" variant="text-size" line-height="--heading-line-height-100" font-weight="--heading-font-weight" output="var(--font-size-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-font-size-200" variant="text-size" line-height="--heading-line-height-200" font-weight="--heading-font-weight" output="var(--font-size-500)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-font-size-300" variant="text-size" line-height="--heading-line-height-300" font-weight="--heading-font-weight" output="var(--font-size-400)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-font-size-400" variant="text-size" line-height="--heading-line-height-400" font-weight="--heading-font-weight" output="var(--font-size-300)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-font-size-500" variant="text-size" line-height="--heading-line-height-500" font-weight="--heading-font-weight" output="var(--font-size-200)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-font-size-600" variant="text-size" line-height="--heading-line-height-600" font-weight="--heading-font-weight" output="var(--font-size-100)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--heading-line-height-100" variant="line-height" font-size="--heading-font-size-100" font-weight="--heading-font-weight" output="var(--line-height-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-line-height-200" variant="line-height" font-size="--heading-font-size-200" font-weight="--heading-font-weight" output="var(--line-height-500)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-line-height-300" variant="line-height" font-size="--heading-font-size-300" font-weight="--heading-font-weight" output="var(--line-height-400)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-line-height-400" variant="line-height" font-size="--heading-font-size-400" font-weight="--heading-font-weight" output="var(--line-height-300)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-line-height-500" variant="line-height" font-size="--heading-font-size-500" font-weight="--heading-font-weight" output="var(--line-height-200)"></story-token-slat>
+            <story-token-slat slot="body" token="--heading-line-height-600" variant="line-height" font-size="--heading-font-size-600" font-weight="--heading-font-weight" output="var(--line-height-100)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Body" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-card/body/index.ts">
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Text Contextual</mui-link> tokens</mui-body>
+          </spec-card>
+
+          <spec-card title="Label" github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-input/index.ts">
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Text Contextual</mui-link> tokens</mui-body>
+          </spec-card>
+
+          <spec-card title="List" github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-list">
+            <mui-body size="x-small" class="reference" slot="body">Refer to <mui-link size="x-small" href="/#/contextual-design-tokens">Text Contextual</mui-link> tokens</mui-body>
+          </spec-card>
+
+
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("tokens-components",o);

package/dist/muibook/assets/contextual-D648xs_u.js

@@ -0,0 +1,59 @@
+class e extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),o=`
+      :host { display: block; }
+    `;t.innerHTML=`
+      <style>${o}</style>
+
+      <story-template 
+        title="Contextual"
+        description="Apply a base or semantic token to a specific use case or UI context."
+        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-527&t=fSFYVey9aCoE5oQa-1"
+        github="https://github.com/michaeltrilford/muibook/blob/main/src/css/mui-tokens.css"
+      >
+        <mui-v-stack space="var(--space-700)">
+
+          <spec-card title="Text">
+            <story-token-slat slot="body" token="--text-color" variant="text-color" output="var(--grey-900)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--text-font-size" variant="text-size" line-height="--text-line-height" output="var(--text-font-size-m)"></story-token-slat>
+            <story-token-slat slot="body" token="--text-line-height" variant="line-height" font-size="--text-font-size" output="var(--text-line-height-m)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--text-line-height-xs" variant="line-height" font-size="--text-font-size-xs" output="var(--line-height-25)"></story-token-slat>
+            <story-token-slat slot="body" token="--text-line-height-s" variant="line-height" font-size="--text-font-size-s" output="var(--line-height-50)"></story-token-slat>
+            <story-token-slat slot="body" token="--text-line-height-m" variant="line-height" font-size="--text-font-size-m" output="var(--line-height-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--text-line-height-l" variant="line-height" font-size="--text-font-size-l" output="var(--line-height-200)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--text-font-size-xs" variant="text-size" line-height="--text-line-height-xs" output="var(--font-size-25)"></story-token-slat>
+            <story-token-slat slot="body" token="--text-font-size-s" variant="text-size" line-height="--text-line-height-s" output="var(--font-size-50)"></story-token-slat>
+            <story-token-slat slot="body" token="--text-font-size-m" variant="text-size" line-height="--text-line-height-m" output="var(--font-size-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--text-font-size-l" variant="text-size" line-height="--text-line-height-l" output="var(--font-size-200)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Font Weight">
+            <story-token-slat slot="body" token="--font-weight-regular" variant="font-weight" output="var(--font-weight-400)"></story-token-slat>
+            <story-token-slat slot="body" token="--font-weight-medium" variant="font-weight" output="var(--font-weight-500)"></story-token-slat>
+            <story-token-slat slot="body" token="--font-weight-semi-bold" variant="font-weight" output="var(--font-weight-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--font-weight-bold" variant="font-weight" output="var(--font-weight-700)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Border">
+          <story-token-slat slot="body" token="--border-color" variant="border-color" output="var(--grey-200)"></story-token-slat>
+          <story-token-slat slot="body" token="--border-thin" variant="border" output="var(--stroke-size-100) var(--stroke-solid)
+          var(--border-color)"></story-token-slat>
+          <story-token-slat slot="body" token="--border-thick" variant="border" output="var(--stroke-size-200) var(--stroke-solid)
+          var(--border-color)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Outline">
+           <story-token-slat slot="body" token="--outline-color" variant="outline-color" output="var(--blue-500)"></story-token-slat>  
+          <story-token-slat slot="body" token="--outline-thin" variant="outline" output="var(--stroke-size-100) var(--stroke-outset)
+          var(--outline-color)"></story-token-slat>
+          <story-token-slat slot="body" token="--outline-medium" variant="outline" output="var(--stroke-size-200) var(--stroke-outset)
+          var(--outline-color)"></story-token-slat>
+          <story-token-slat slot="body" token="--outline-thick" variant="outline" output="var(--stroke-size-300) var(--stroke-outset)
+          var(--outline-color)"></story-token-slat>
+          </spec-card>
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("tokens-contextual",e);

package/dist/muibook/assets/image-1080-Bg-8LoSs.js

@@ -0,0 +1 @@
+const a="/image-1080.png";export{a as I};

package/dist/muibook/assets/index-0bBJZTXh.js

@@ -0,0 +1,135 @@
+class d extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"}),o=`
+      :host { display: block; }
+    `,i=[{name:"label",required:!0,type:"string",options:"{text}",default:"",description:"Provide the switch with a unique label. If without, a console warning will remind you to add label."},{name:"disabled",type:"boolean",options:"disabled",default:"",description:"Disable the switch"},{name:"checked",type:"boolean",options:"checked",default:"",description:"On / Off state"},{name:"slot (off)",type:"string",options:"off-icon",default:"",description:"Slot an icon in for the off state"},{name:"slot (on)",type:"string",options:"on-icon",default:"",description:"Slot an icon in for the off state"}],s=i.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=i.map((t,l)=>{const n=l===i.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)} 
+              ${n}>
+              <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>${o}</style>
+
+      <story-template
+        title="Switch"
+        description="A component that allows users to switch a setting on or off with immediate effect."
+        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-switch/index.ts"
+        accessibility="
+          A label is required and applied as aria-label to describe the switch’s purpose.;
+          Uses role="switch" and updates aria-checked for assistive tech.;
+          The label isn’t shown visually—context is provided through icons or nearby text.;
+          disabled sets aria-disabled and blocks interaction.;
+          Supports keyboard navigation with visible focus styles.;
+          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">
+              ${s}
+            </story-type-table>
+            <mui-accordion-group exclusive slot="showBelow">
+              ${c}
+            </mui-accordion-group>
+          </mui-responsive>
+        </spec-card>
+
+
+        <story-card title="Unchecked">
+          <div slot="body">
+            <mui-switch label="Unchecked"></mui-switch>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-switch label="Unchecked"&gt;&lt;mui-switch&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Checked">
+          <div slot="body">
+            <mui-switch label="On Example" checked></mui-switch>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-switch checked label="On Example"&gt;&lt;mui-switch&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Disabled w/ Unchecked">
+          <div slot="body">
+            <mui-switch label="Unchecked w/ Disabled" disabled></mui-switch>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-switch label="Unchecked w/ Disabled"&gt;&lt;mui-switch&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Disabled w/ Checked">
+          <div slot="body">
+            <mui-switch disabled label="Checked w/ Disabled" checked></mui-switch>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-switch checked disabled label="Checked w/ Disabled"&gt;&lt;mui-switch&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Icons: Off">
+          <div slot="body">
+            <mui-switch label="Dark mode toggle">
+              <mui-icon-sun slot="off-icon"></mui-icon-sun>
+              <mui-icon-moon slot="on-icon"></mui-icon-moon>
+            </mui-switch>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-switch label="Dark mode toggle" &gt;
+              <br />
+              &nbsp;&nbsp;&lt;mui-icon-sun slot="off-icon"&gt;&lt;/mui-icon-sun&gt;
+              <br />
+              &nbsp;&nbsp;&lt;mui-icon-moon slot="on-icon"&gt;&lt;/mui-icon-moon&gt;
+              <br />
+            &lt;mui-switch&gt;
+          </mui-code>
+        </story-card>
+
+        <story-card title="Icons: On">
+          <div slot="body">
+            <mui-switch label="Dark mode toggle" checked>
+              <mui-icon-sun slot="off-icon"></mui-icon-sun>
+              <mui-icon-moon slot="on-icon"></mui-icon-moon>
+            </mui-switch>
+          </div>
+          <mui-code slot="footer">
+            &lt;mui-switch label="Dark mode toggle" checked&gt;
+              <br />
+              &nbsp;&nbsp;&lt;mui-icon-sun slot="off-icon"&gt;&lt;/mui-icon-sun&gt;
+              <br />
+              &nbsp;&nbsp;&lt;mui-icon-moon slot="on-icon"&gt;&lt;/mui-icon-moon&gt;
+              <br />
+            &lt;mui-switch&gt;
+          </mui-code>
+        </story-card>
+
+
+      </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("story-switch",d);