@muibook/components 1.0.0

package/dist/muibook/assets/layout-BT0xIYa9.js

@@ -0,0 +1,184 @@
+class e extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),s=`
+      :host { display: block; }
+    `;t.innerHTML=`
+      <style>${s}</style>
+
+      <story-template 
+        title="Layout Parts"
+        description="Allows flexible styling overrides with customisable part names, supporting trusted customisation and scoped CSS in MUI web components."
+        github="https://github.com/michaeltrilford/muibook/blob/main/src/utils/part-map/index.ts"
+        >
+        <mui-v-stack space="var(--space-700)">
+
+          <spec-card title="Display">
+            <story-part-slat slot="body" token="part(display)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the display type of the element." ></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(display) {
+              <br />
+              &nbsp;&nbsp;display: flex;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Flex">
+            <story-part-slat slot="body" token="part(flex)" usage="Links, Buttons, Stacks, Grid, Body" output="..."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(flex) {
+              <br />
+              &nbsp;&nbsp;flex: 1;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Flex Direction">
+            <story-part-slat slot="body" token="part(flex-direction)" usage="Links, Buttons, Stacks, Grid, Body" output="..."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(flex-direction) {
+              <br />
+              &nbsp;&nbsp;flex-direction: column;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Flex Wrap">
+            <story-part-slat slot="body" token="part(flex-wrap)" usage="Links, Buttons, Stacks, Grid, Body" output="..."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(flex-wrap) {
+              <br />
+              &nbsp;&nbsp;flex-wrap: wrap;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Justify Content">
+            <story-part-slat slot="body" token="part(justify-content)" usage="Links, Buttons, Stacks, Grid, Body" output="..."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(justify-content) {
+              <br />
+              &nbsp;&nbsp;justify-content: center);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Align Items">
+            <story-part-slat slot="body" token="part(align-items)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the line-height of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(align-items) {
+              <br />
+              &nbsp;&nbsp;align-items: center;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Align Content">
+            <story-part-slat slot="body" token="part(align-content)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the case of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(align-content) {
+              <br />
+              &nbsp;&nbsp;align-content: center;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Align Self">
+            <story-part-slat slot="body" token="part(align-self)" usage="Links, Buttons, Stacks, Grid, Body" output="Controls the text decoration style (e.g., underline, none)."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(align-self) {
+              <br />
+              &nbsp;&nbsp;align-self: center;
+              <br />
+              }
+              <br />
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Grid Template Columns">
+            <story-part-slat slot="body" token="part(grid-template-columns)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the horizontal alignment of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(grid-template-columns) {
+              <br />
+              &nbsp;&nbsp;grid-template-columns: 1fr 1fr;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+
+          <spec-card title="Grid Template Rows">
+            <story-part-slat slot="body" token="part(grid-template-rows)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the horizontal alignment of the element."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(grid-template-rows) {
+              <br />
+              &nbsp;&nbsp;grid-template-rows: 1fr 1fr;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+
+          <spec-card title="Grid Column">
+            <story-part-slat slot="body" token="part(grid-column)" usage="Links, Buttons, Stacks, Grid, Body" output="grid-column defines a grid item’s horizontal position and span within a CSS Grid layout. It specifies which columns the item starts and ends on."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(grid-column) {
+              <br />
+              &nbsp;&nbsp;grid-column:  1 / 3;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Grid Row">
+            <story-part-slat slot="body" token="part(grid-row)" usage="Links, Buttons, Stacks, Grid, Body" output="grid-row defines a grid item’s vertical position and span within a CSS Grid layout. It sets which rows the item starts and ends on."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(grid-row) {
+              <br />
+              &nbsp;&nbsp;grid-row:  1 / 3;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Place Items">
+            <story-part-slat slot="body" token="part(place-items)" usage="Links, Buttons, Stacks, Grid, Body" output="place-items sets how items are aligned inside their grid or flex container both vertically and horizontally."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(place-items) {
+              <br />
+              &nbsp;&nbsp;place-items: center;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Place Content">
+            <story-part-slat slot="body" token="part(place-content)" usage="Links, Buttons, Stacks, Grid, Body" output="place-content sets how grid content is aligned vertically and horizontally."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(place-content) {
+              <br />
+              &nbsp;&nbsp;place-content: center;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Text Align">
+            <story-part-slat slot="body" token="part(text-align)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the horizontal alignment of the text."></story-part-slat>
+            <mui-code slot="footer">
+              mui-v-stack::part(text-align) {
+              <br />
+              &nbsp;&nbsp;text-align: center;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("parts-layout",e);

package/dist/muibook/assets/mui-D6S1tQ24.js

@@ -0,0 +1 @@
+const C="data:image/svg+xml,%3csvg%20width='91'%20height='30'%20viewBox='0%200%2091%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M45.066%200.522363L39.1121%2029.1217H31.9107L37.8651%200.522363H45.066ZM75.3627%2018.9898L79.1538%208.24927L81.3345%2018.9898H75.3627ZM83.401%2029.1217H90.0599L84.2422%200.522363H78.0995C76.7151%200.522363%2075.5488%201.34719%2075.0322%202.61889L64.2262%2029.1217H71.789L73.2908%2024.8508H82.5284L83.401%2029.1217ZM64.6011%2019.7846C64.633%2012.2372%2054.4465%2011.8187%2054.5141%208.44659C54.5363%207.42167%2055.4873%206.33005%2057.5674%206.05103C58.599%205.9143%2061.444%205.80425%2064.6698%207.33107L65.9314%201.26382C64.1986%200.620186%2061.9693%20-0.000100168%2059.1957%20-0.000100168C52.0765%20-0.000100168%2047.0682%203.88503%2047.0281%209.45316C46.9827%2013.5706%2050.6056%2015.8661%2053.3294%2017.2373C56.1381%2018.6391%2057.0794%2019.5384%2057.0659%2020.7906C57.0464%2022.7093%2054.8257%2023.5586%2052.7592%2023.5908C49.1358%2023.6486%2047.0368%2022.5848%2045.363%2021.7833L44.056%2028.0529C45.7412%2028.8455%2048.8464%2029.5352%2052.0619%2029.5708C59.6301%2029.5708%2064.5789%2025.7307%2064.6011%2019.7846ZM34.7762%200.522363L23.1079%2029.1217H15.4964L9.75402%206.29726C9.40617%204.89383%209.10269%204.37804%208.044%203.78498C6.31235%202.81843%203.4533%201.91467%200.939941%201.35219L1.10981%200.522363H13.3639C14.9246%200.522363%2016.329%201.58952%2016.686%203.43649L19.7193%2019.9875L27.2107%200.522363H34.7762Z'%20fill='black'/%3e%3c/svg%3e",L="data:image/svg+xml,%3csvg%20width='204'%20height='117'%20viewBox='0%200%20204%20117'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M184.713%2025.3643H202.107V90.9512H184.71L184.713%2025.3643ZM166.246%2091.9043C156.834%2091.9043%20150.162%2087.0791%20147.958%2078.501H147.601C144.622%2086.7217%20136.759%2091.9043%20127.228%2091.9043C114.36%2091.9043%20105.723%2083.1475%20105.723%2069.9229L105.723%2025.3643H123.117L123.117%2065.5742C123.117%2073.2588%20126.989%2077.4883%20134.078%2077.4883C140.929%2077.4883%20145.516%2072.4844%20145.516%2065.0381V25.3643H162.314V66.2295C162.314%2073.2588%20166.365%2077.4883%20173.097%2077.4883C176.632%2077.4883%20179.612%2076.0924%20181.668%2073.718C181.76%2085.8422%20176.62%2091.9043%20166.246%2091.9043Z'%20fill='black'/%3e%3cpath%20d='M193.398%2018.1689C188.275%2018.1689%20184.046%2014.2373%20184.046%209.05469C184.046%203.87207%20188.275%200%20193.398%200C198.581%200%20202.811%203.87207%20202.811%209.05469C202.811%2014.2373%20198.581%2018.1689%20193.398%2018.1689Z'%20fill='black'/%3e%3cpath%20d='M1.61523%2090.9058L1.61523%2025.3188L18.4141%2025.3188L18.4141%2037.2329H18.7715C21.5713%2029.3101%2028.7197%2024.3657%2037.4766%2024.3657C46.8887%2024.3657%2053.5605%2029.1909%2055.7646%2037.769H56.1221C59.1006%2029.5483%2066.9639%2024.3657%2076.4951%2024.3657C89.3623%2024.3657%2098%2033.1226%2098%2046.3472L98%2090.9058L80.6055%2090.9058L80.6055%2050.6958C80.6055%2043.0112%2076.7334%2038.7817%2069.6445%2038.7817C62.7939%2038.7817%2058.207%2043.7856%2058.207%2051.2319L58.207%2090.9058H41.4082L41.4082%2050.0405C41.4082%2043.0112%2037.3574%2038.7817%2030.626%2038.7817C23.7754%2038.7817%2019.0098%2044.0239%2019.0098%2051.4702L19.0098%2090.9058H1.61523Z'%20fill='black'/%3e%3cpath%20d='M10.3242%2098.1011C15.4473%2098.1011%2019.6768%20102.033%2019.6768%20107.215C19.6768%20112.398%2015.4473%20116.27%2010.3242%20116.27C5.1416%20116.27%200.912109%20112.398%200.912109%20107.215C0.912109%20102.033%205.1416%2098.1011%2010.3242%2098.1011Z'%20fill='black'/%3e%3c/svg%3e";export{L as M,C as V};

package/dist/muibook/assets/mui-logo-mobile-DuEMz_jq.js

@@ -0,0 +1,31 @@
+class i extends HTMLElement{static get observedAttributes(){return["color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(e,t,o){e==="color"&&t!==o&&this.render()}render(){let t=this.getAttribute("color");this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: 200px;
+          height: auto;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${t};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 98 93"
+      >
+        <path
+          d="M1.615 66.906V1.319h16.8v11.914h.357C21.572 5.31 28.72.366 37.477.366c9.412 0 16.084 4.825 18.288 13.403h.357C59.101 5.55 66.964.366 76.495.366 89.362.366 98 9.123 98 22.347v44.559H80.606v-40.21c0-7.684-3.873-11.914-10.961-11.914-6.851 0-11.438 5.004-11.438 12.45v39.674H41.408V26.041c0-7.03-4.05-11.259-10.782-11.259-6.85 0-11.616 5.242-11.616 12.689v39.435zM10.324 74.101c5.123 0 9.353 3.932 9.353 9.115s-4.23 9.054-9.353 9.054c-5.182 0-9.412-3.872-9.412-9.054s4.23-9.115 9.412-9.115"
+        ></path>
+      </svg>
+
+
+
+
+
+    `}}customElements.define("mui-logo-mobile",i);

package/dist/muibook/assets/semantic-cbNjeY5p.js

@@ -0,0 +1,111 @@
+class e extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),o=`
+      :host { display: block; }
+    `;t.innerHTML=`
+      <style>${o}</style>
+
+      <story-template 
+        title="Semantic"
+        description="Express meaning or state without tying it to a specific implementation."
+        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="Feedback States" description="User feedback (alerts, messages, forms, badges etc.)">
+            <story-token-slat slot="body" token="--feedback-neutral-border-color" variant="color" output="var(--grey-600)"></story-token-slat>  
+            <story-token-slat slot="body" token="--feedback-positive-border-color" variant="color" output="var(--green-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-info-border-color" variant="color" output="var(--blue-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-warning-border-color" variant="color" output="var(--orange-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-attention-border-color" variant="color" output="var(--red-600)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--feedback-neutral-border" variant="border" output="var(--stroke-size-200) var(--stroke-solid)
+            var(--feedback-neutral-border-color)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-positive-border" variant="border" output="var(--stroke-size-200) var(--stroke-solid)
+            var(--feedback-positive-border-color)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-info-border" variant="border" output="var(--stroke-size-200) var(--stroke-solid)
+            var(--feedback-info-border-color)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-warning-border" variant="border" output="var(--stroke-size-200) var(--stroke-solid)
+            var(--feedback-warning-border-color)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-attention-border" variant="border" output="var(--stroke-size-200) var(--stroke-solid)
+            var(--feedback-attention-border-color)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--feedback-neutral-background" variant="color" output="var(--grey-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-positive-background" variant="color" output="var(--green-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-info-background" variant="color" output="var(--blue-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-warning-background" variant="color" output="var(--orange-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-attention-background" variant="color" output="var(--red-100)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--feedback-neutral-icon" variant="color" output="var(--grey-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-positive-icon" variant="color" output="var(--green-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-info-icon" variant="color" output="var(--blue-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-warning-icon" variant="color" output="var(--orange-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-attention-icon" variant="color" output="var(--red-600)"></story-token-slat>
+
+            <story-token-slat slot="body" token="--feedback-neutral-text" variant="text-color" output="var(--grey-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-positive-text" variant="text-color" output="var(--green-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-info-text" variant="text-color" output="var(--blue-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-warning-text" variant="text-color" output="var(--orange-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--feedback-attention-text" variant="text-color" output="var(--red-900)"></story-token-slat>
+
+          </spec-card>
+
+          <spec-card title="Action" description="Action tokens define the visual behavior of call-to-action button and link button elements.">
+            <story-token-slat slot="body" token="--action-font-size" variant="text-size" output="var(--text-font-size)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-line-height" variant="line-height" output="var(--text-line-height)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-font-weight" variant="font-weight" output="var(--font-weight-medium)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-radius" variant="radius" output="var(--radius-100)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Action / Primary" description="Action tokens define the visual behavior of call-to-action button and link button elements.">
+            <story-token-slat slot="body" token="--action-primary-stroke" variant="border-color" output="var(--black-opacity-0)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-primary-background" variant="color" output="var(--grey-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-primary-background-hover" variant="color" output="var(--grey-1000)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-primary-background-focus" variant="color" output="var(--grey-1000)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-primary-background-disabled" variant="color" output="var(--grey-200)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-primary-text-color" variant="text-color" output="var(--white)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-primary-text-color-hover" variant="text-color" output="var(--white)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-primary-text-color-focus" variant="text-color" output="var(--white)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-primary-text-color-disabled" variant="text-color" output="var(--grey-400)"></story-token-slat>
+          </spec-card>
+
+
+          <spec-card title="Action / Secondary" description="Action tokens define the visual behavior of call-to-action button and link button elements.">
+            <story-token-slat slot="body" token="--action-secondary-stroke" variant="border-color" output="var(--grey-800)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-secondary-background" variant="color" output="var(--white)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-secondary-background-hover" variant="color" output="var(--grey-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-secondary-background-focus" variant="color" output="var(--grey-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-secondary-background-disabled" variant="color" output="var(--grey-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-secondary-text-color" variant="text-color" output="var(--grey-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-secondary-text-color-hover" variant="text-color" output="var(--grey-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-secondary-text-color-focus" variant="text-color" output="var(--grey-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-secondary-text-color-disabled" variant="text-color" output="var(--grey-400)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Action / Tertiary" description="Action tokens define the visual behavior of call-to-action button and link button elements.">
+            <story-token-slat slot="body" token="--action-tertiary-stroke" variant="border-color" output="var(--white-opacity-0)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-tertiary-background" variant="color" output="var(--white-opacity-0)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-tertiary-background-hover" variant="color" output="var(--black-opacity-10)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-tertiary-background-focus" variant="color" output="var(--black-opacity-10)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-tertiary-background-disabled" variant="color" output="var(--grey-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-tertiary-text-color" variant="text-color" output="var(--grey-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-tertiary-text-color-hover" variant="text-color" output="var(--grey-1000)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-tertiary-text-color-focus" variant="text-color" output="var(--grey-1000)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-tertiary-text-color-disabled" variant="text-color" output="var(--grey-400)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Action / Attention" description="Action tokens define the visual behavior of call-to-action button and link button elements.">
+            <story-token-slat slot="body" token="--action-attention-stroke" variant="border-color" output="var(--black-opacity-0)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-attention-background" variant="color" output="var(--red-500)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-attention-background-hover" variant="color" output="var(--red-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-attention-background-focus" variant="color" output="var(--red-600)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-attention-background-disabled" variant="color" output="var(--red-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-attention-text-color" variant="text-color" output="var(--white)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-attention-text-color-hover" variant="text-color" output="var(--white)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-attention-text-color-focus" variant="text-color" output="var(--white)"></story-token-slat>
+            <story-token-slat slot="body" token="--action-attention-text-color-disabled" variant="text-color" output="var(--red-300)"></story-token-slat>
+          </spec-card>
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("tokens-semantic",e);

package/dist/muibook/assets/spacing-DY3cAXq0.js

@@ -0,0 +1,82 @@
+class e extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),s=`
+      :host { display: block; }
+    `;t.innerHTML=`
+      <style>${s}</style>
+
+      <story-template 
+        title="Spacing Parts"
+        description="Allows flexible styling overrides with customisable part names, supporting trusted customisation and scoped CSS in MUI web components."
+        github="https://github.com/michaeltrilford/muibook/blob/main/src/utils/part-map/index.ts"
+        >
+        <mui-v-stack space="var(--space-700)">
+
+          <spec-card title="Padding">
+            <story-part-slat slot="body" token="part(padding)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the padding of the element." ></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(padding) {
+              <br />
+              &nbsp;&nbsp;padding: var(--space-100);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Margin">
+            <story-part-slat slot="body" token="part(margin)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the margin of the element." ></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(margin) {
+              <br />
+              &nbsp;&nbsp;margin: var(--space-100);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Gap">
+            <story-part-slat slot="body" token="part(gap)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the gap between items when using Flex or Grid" ></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(gap) {
+              <br />
+              &nbsp;&nbsp;gap: var(--space-100);
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Width">
+            <story-part-slat slot="body" token="part(width)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the width of elements"></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(width) {
+              <br />
+              &nbsp;&nbsp;width: 50rem;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Height">
+            <story-part-slat slot="body" token="part(height)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines the height of elements"></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(height) {
+              <br />
+              &nbsp;&nbsp;height: 50rem;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+          <spec-card title="Box Sizing">
+            <story-part-slat slot="body" token="part(box-sizing)" usage="Links, Buttons, Stacks, Grid, Body" output="Defines how the object reacts to padding."></story-part-slat>
+            <mui-code slot="footer">
+              mui-link::part(box-sizing) {
+              <br />
+              &nbsp;&nbsp;box-sizing: border-box;
+              <br />
+              }
+            </mui-code>
+          </spec-card>
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("parts-spacing",e);

package/dist/muibook/assets/surface-CMaW9FgJ.js

@@ -0,0 +1,148 @@
+class i extends HTMLElement{constructor(){super();const s=this.attachShadow({mode:"open"}),o=`
+      :host { display: block; }
+
+      .surface {
+        background: var(--surface);
+        box-sizing: border-box;
+        padding: var(--space-400);
+        margin-top: calc(var(--space-400) * -1);
+        margin-bottom: calc(var(--space-400) * -1);
+        margin-left: calc(var(--space-400) * -1);
+        margin-right: calc(var(--space-400) * -1);
+      }
+      .surface-elevated,
+      .surface-recessed {
+        padding: var(--space-400);
+        width: 100%;
+        height: 200px;
+        box-sizing: border-box;
+        border-radius: var(--radius-300);
+      }
+
+      .surface-elevated {
+        background: var(--surface-elevated-100);
+      }
+
+      .surface-recessed {
+        background: var(--surface-recessed-200);
+      }
+
+    `,t=[{token:"--surface",description:"Neutral base",usage:"Page background"},{token:"--surface-elevated-*",description:"Lighter/brighter",usage:"Cards, dialogs"},{token:"--surface-recessed-*",description:"Darker/deeper",usage:"insets, sidebar tracks"}],a=t.map(e=>`
+          <story-token-type-row
+            token="${e.token}"
+            usage="${e.usage}" 
+            description="${e.description}">
+          </story-token-type-row>
+        `).join(""),r=t.map((e,c)=>{const n=c===t.length-1?"last-child":"";return`
+          <mui-accordion-block 
+            size="medium" 
+            heading=${e.token.charAt(0).toUpperCase()+e.token.slice(1)} 
+            ${n}>
+            <story-token-type-slat
+              slot="detail"
+              token="${e.token}"
+              usage="${e.usage}" 
+              description="${e.description}">
+            </story-token-type-slat>
+          </mui-accordion-block>
+        `}).join("");s.innerHTML=`
+      <style>${o}</style>
+
+      <story-template 
+        title="Surface"
+        description="Surface tokens set the background layers of the interface. They create depth, support elevation, and provide structure across contexts. Dark mode is not a simple inversion. It is curated to maintain clarity and hierarchy across all surfaces."
+        figma="https://github.com/michaeltrilford/muibook/blob/main/src/css/mui-tokens.css"
+      >
+        <mui-v-stack space="var(--space-700)">
+
+          <spec-card title="Token Details">
+            <mui-responsive breakpoint="768" slot="body">
+              <story-token-type-table slot="showAbove">
+                ${a}
+              </story-token-type-table>
+              <mui-accordion-group exclusive slot="showBelow">
+                ${r}
+              </mui-accordion-group>
+            </mui-responsive>
+          </spec-card>
+
+          <spec-card title="Surface: Light">
+            <story-token-slat slot="body" token="--surface" variant="color" output="var(--grey-200)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-elevated-alpha" variant="color" output="var(--white-opacity-50)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-elevated-100" variant="color" output="var(--white)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-elevated-200" variant="color" output="var(--grey-100)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-recessed-alpha" variant="color" output="var(--black-opacity-10)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-recessed-100" variant="color" output="var(--grey-300)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-recessed-200" variant="color" output="var(--grey-400)"></story-token-slat>
+          </spec-card>
+
+          <spec-card title="Surface: Dark">
+            <story-token-slat slot="body" token="--surface" variant="color" output="var(--grey-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-elevated-alpha" variant="color" output="var(--white-opacity-10)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-elevated-100" variant="color" output="var(--grey-900)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-elevated-200" variant="color" output="var(--grey-800)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-recessed-alpha" variant="color" output="var(--black-opacity-30)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-recessed-100" variant="color" output="var(--grey-1000)"></story-token-slat>
+            <story-token-slat slot="body" token="--surface-recessed-200" variant="color" output="var(--grey-1100)"></story-token-slat>
+          </spec-card>
+
+          <story-card title="Example: Elevated" description="The Surface tokens are tailored to have a great tone for both light and dark settings">
+            <div slot="body">
+              <div class="surface">
+                <div class="surface-elevated"></div>
+              </div>
+            </div>
+            <mui-code slot="footer">
+              <br />
+              <mui-body size="x-small">Learn about <mui-Link size="x-small" href="/#/surface-design-tokens">Surface Tokens</mui-link></mui-body>
+              <br />
+              /* =================================== */
+              <br />
+              <br />
+              .surface {
+              <br />
+              &nbsp;&nbsp;background: var(--surface);
+              <br />
+              }
+              <br />
+              <br />
+              .surface-elevated {
+              <br />
+              &nbsp;&nbsp;background: var(--surface-elevated-200);
+              <br />
+              }
+            </mui-code>
+          </story-card>
+
+          <story-card title="Example: Recessed" description="The Surface tokens are tailored to have a great tone for both light and dark settings">
+            <div slot="body">
+              <div class="surface">
+                <div class="surface-recessed"></div>
+              </div>
+            </div>
+            <mui-code slot="footer">
+              <br />
+              <mui-body size="x-small">Learn about <mui-Link size="x-small" href="/#/surface-design-tokens">Surface Tokens</mui-link></mui-body>
+              <br />
+              /* =================================== */
+              <br />
+              <br />
+              .surface {
+              <br />
+              &nbsp;&nbsp;background: var(--surface);
+              <br />
+              }
+              <br />
+              <br />
+              .surface-recessed {
+              <br />
+              &nbsp;&nbsp;background: var(--surface-recessed-200);
+              <br />
+              }
+            </mui-code>
+          </story-card>
+
+        </mui-v-stack>
+
+      </story-template>
+    `}}customElements.define("tokens-surface",i);