@muibook/components 1.0.2 → 1.0.4

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

@@ -1,184 +0,0 @@
-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

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

@@ -1,31 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

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