@muibook/components 1.0.1 → 1.0.3

package/dist/muibook/assets/index-Bx-SU7T2.js

@@ -1,98 +0,0 @@
-const t="/create-mui-app.jpg";class a extends HTMLElement{constructor(){super();const e=this.attachShadow({mode:"open"}),i=`
-      :host { display: block; }
-    
-      .config::part(display) {
-        grid-template-columns: 1fr;
-      }
-
-      @media (min-width: 1230px) {
-        .config::part(display) {
-          grid-template-columns: minmax(0, 50ch) 400px;
-          gap: 7.2rem;
-          justify-content: space-between;
-          align-items: start;
-        }
-      }
-
-      @media (min-width: 1390px) {
-        .config::part(display) {
-          grid-template-columns: minmax(0, 50ch) 500px;
-          gap: 9.6rem;
-        }
-      }
-
-    `;e.innerHTML=`
-      <style>${i}</style>
-
-      <story-template 
-        title="Create Mui App"
-        description="Build with MUI’s Web Components — lightweight, React-free, framework-agnostic."
-        demo="https://create.muibook.com"
-        github="https://github.com/michaeltrilford/create-mui-app"
-      >
-
-
-      <mui-v-stack space="var(--space-700)">
-
-        <page-card>
-          
-          <mui-grid slot="body" class="config" space="var(--space-600)">
-
-            <mui-v-stack space="var(--space-600)">
-
-              <mui-v-stack space="var(--space-400)">
-                <mui-body size="large">Kickstart your project with a lightweight scaffold built on Vite. It comes 
-                preloaded with foundational CSS resets, a solid base structure, and design tokens ready to be customised 
-                for your brand.</mui-body>
-                <mui-body size="large">Access a curated set of <strong>MUI Components</strong>, wrapped in a clean layout that highlights 
-                the Design System’s core building blocks—so you can start designing and building immediately.</mui-body>
-              </mui-v-stack>
-
-              <mui-v-stack space="var(--space-300)">
-                <mui-heading level="3" size="5">Included components</mui-heading>
-                <mui-body size="medium">Use a growing library of accessible, themeable components. Each one is easy 
-                to customise with native web technologies.</mui-body>
-              </mui-v-stack>
-
-              <mui-v-stack space="var(--space-300)">
-                <mui-heading level="3" size="5">No framework required</mui-heading>
-                <mui-body size="medium">
-                  Build with plain HTML, CSS, and JavaScript — no React, Vue, or complex setups required. Everything 
-                  works out of the box using modern web standards.</mui-body>
-              </mui-v-stack>
-
-              <mui-v-stack space="var(--space-300)">
-                <mui-heading level="3" size="5">Quick local setup</mui-heading>
-                <mui-body size="medium">
-                  The project runs locally with Vite, a fast build tool and dev server. Follow the <mui-link 
-                    size="small" 
-                    weight="medium" 
-                    target="_blank" 
-                    href="https://github.com/michaeltrilford/create-mui-app">
-                      setup guide on GitHub
-                  </mui-link> to get started. 
-
-                </mui-body>
-              </mui-v-stack>
-
-              <mui-v-stack space="var(--space-300)">
-                <mui-heading level="3" size="5">Flexible architecture</mui-heading>
-                <mui-body size="medium">Compose interfaces with layout primitives, semantic elements, and design 
-                tokens. The architecture supports progressive enhancement and gives you full control over structure 
-                and styling.</mui-body>
-              </mui-v-stack>
-
-            </mui-v-stack>
-
-            <mui-image>
-              <img slot="image" src="${t}" alt="Create Mui App Code" />
-              <figcaption slot="caption">create-mui-app/src/index.ts</figcaption>
-            </mui-image> 
-          </mui-grid>
-
-        </page-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("create-mui-app",a);

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

@@ -1,64 +0,0 @@
-class i extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),o=`
-      :host { display: block; }
-
-      mui-container { min-width: initial; } 
-    `;t.innerHTML=`
-      <style>${o}</style>
-
-      <story-template 
-        title="Container" 
-        description="The Container is a layout helper to provide the base page structure for a web experience."
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-container/index.ts"
-      >
-
-        <mui-v-stack space="var(--space-700)">
-
-          <story-card title="Small">
-            <mui-container small slot="body">
-              <mui-card><mui-card-body>{Content}</mui-card-body></mui-card>
-            </mui-container>
-            <mui-code slot="footer">
-              &lt;mui-container small&gt;...&lt;/mui-container&gt;
-            </mui-code>
-          </story-card>
-
-          <story-card title="Medium">
-          <mui-container medium slot="body">
-            <mui-card><mui-card-body>{Content}</mui-card-body></mui-card>
-          </mui-container>
-            <mui-code slot="footer">
-              &lt;mui-container medium&gt;...&lt;/mui-container&gt;
-            </mui-code>
-          </story-card>
-
-          <story-card title="Large">
-            <mui-container large slot="body">
-              <mui-card><mui-card-body>{Content}</mui-card-body></mui-card>
-            </mui-container>
-            <mui-code slot="footer">
-              &lt;mui-container large&gt;...&lt;/mui-container&gt;
-            </mui-code>
-          </story-card>
-
-          <story-card title="Fluid">
-            <mui-container fluid slot="body">
-              <mui-card><mui-card-body>{Content}</mui-card-body></mui-card>
-            </mui-container>
-            <mui-code slot="footer">
-              &lt;mui-container fluid&gt;...&lt;/mui-container&gt;
-            </mui-code>
-          </story-card>
-
-          <story-card title="Center">
-            <mui-container small center slot="body">
-              <mui-card><mui-card-body>{Content}</mui-card-body></mui-card>
-            </mui-container>
-            <mui-code slot="footer">
-              &lt;mui-container center&gt;...&lt;/mui-container&gt;
-            </mui-code>
-          </story-card>
-
-        </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-container",i);

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

@@ -1,333 +0,0 @@
-class i extends HTMLElement{constructor(){super();const o=this.attachShadow({mode:"open"}),t=`
-      :host { display: block; }
-
-      mui-grid::part(internal) {
-        grid-template-columns: 1fr;
-      }
-
-      @media (min-width: 600px) {
-        mui-grid::part(internal) {
-          grid-template-columns: 1fr 1fr;
-        }
-      }
-
-      .color-options::part(color) {
-        color: var(--app-story-icon-grid-text);
-        margin-top: var(--space-100);
-      }
-
-      .color-options.inverted::part(color) {
-        color: var(--app-story-icon-grid-text-inverted);
-        margin-top: var(--space-100);
-      }
-
-      .variant.primary::part(color) {
-        color: var(--action-primary-text-color);
-      }
-      .variant.secondary::part(color) {
-        color: var(--action-secondary-text-color);
-      }
-      .variant.tertiary::part(color) { center
-        color: var(--action-tertiary-text-color);
-      }
-      .variant.attention::part(color) {
-        color: var(--action-attention-text-color);
-      }
-
-    `;o.innerHTML=`
-      <style>${t}</style>
-
-      <story-template 
-        title="Icons"
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-311&t=fSFYVey9aCoE5oQa-1"
-        github="https://github.com/michaeltrilford/muibook/tree/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-icons"
-      >
-
-        <mui-v-stack space="var(--space-700)">
-
-          <story-card title="Default" description="Icons are set to size 'small' by default." >
-
-            <mui-grid space="var(--space-400)" slot="body">
-
-              <story-icon-grid center>              
-                <mui-icon-accessibility slot="body"></mui-icon-accessibility>
-                <mui-code slot="footer">mui-icon-accessibility</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-add slot="body"></mui-icon-add>
-                <mui-code slot="footer">mui-icon-add</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-close slot="body"></mui-icon-close>
-                <mui-code slot="footer">mui-icon-close</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-up-chevron slot="body"></mui-icon-up-chevron>
-                <mui-code slot="footer">mui-icon-up-chevron</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-down-chevron slot="body"></mui-icon-down-chevron>
-                <mui-code slot="footer">mui-icon-down-chevron</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-left-chevron slot="body"></mui-icon-left-chevron>
-                <mui-code slot="footer">mui-icon-left-chevron</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-right-chevron slot="body"></mui-icon-right-chevron>
-                <mui-code slot="footer">mui-icon-right-chevron</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-grid slot="body"></mui-icon-grid>
-                <mui-code slot="footer">mui-icon-grid</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-left-arrow slot="body"></mui-icon-left-arrow>
-                <mui-code slot="footer">mui-icon-left-arrow-arrow</mui-code>
-              </story-icon-grid>      
-
-              <story-icon-grid center>              
-                <mui-icon-menu slot="body"></mui-icon-menu>
-                <mui-code slot="footer">mui-icon-menu</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-message slot="body"></mui-icon-message>
-                <mui-code slot="footer">mui-icon-message</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-moon slot="body"></mui-icon-moon>
-                <mui-code slot="footer">mui-icon-moon</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-sun slot="body"></mui-icon-sun>
-                <mui-code slot="footer">mui-icon-sun</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-subtract slot="body"></mui-icon-subtract>
-                <mui-code slot="footer">mui-icon-subtract</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-check slot="body"></mui-icon-check>
-                <mui-code slot="footer">mui-icon-check</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-info slot="body"></mui-icon-info>
-                <mui-code slot="footer">mui-icon-info</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-warning slot="body"></mui-icon-warning>
-                <mui-code slot="footer">mui-icon-warning</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-attention slot="body"></mui-icon-attention>
-                <mui-code slot="footer">mui-icon-attention</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-globe slot="body"></mui-icon-globe>
-                <mui-code slot="footer">mui-icon-globe</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-stop slot="body"></mui-icon-stop>
-                <mui-code slot="footer">mui-icon-stop</mui-code>
-              </story-icon-grid>
-
-
-
-            </mui-grid> 
-
-          </story-card>
-
-          <story-card title="Color Options" description="The icons have default color of var(--black). The color can be inverted or a custom color applied." >
-
-            <mui-grid col="1fr 1fr" space="var(--space-400)" slot="body">
-
-              <story-icon-grid center>              
-                <mui-icon-menu slot="body"></mui-icon-menu>
-                <mui-body size="x-small" weight="bold" class="color-options" slot="body">Default Color</mui-body>
-                <mui-code slot="footer">mui-icon-menu</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center theme="inverted">              
-                <mui-icon-menu slot="body" color="inverted"></mui-icon-menu>
-                <mui-body size="x-small" weight="bold" class="color-options inverted" slot="body">Inverted Color</mui-body>
-                <mui-code slot="footer"> color="inverted"</mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid center>              
-                <mui-icon-menu slot="body" color="var(--blue-500)"></mui-icon-menu>
-                <mui-body size="x-small" weight="bold" class="color-options" slot="body">Custom Color</mui-body>
-                <mui-code slot="footer">color="var(--blue-500)"</mui-code>
-              </story-icon-grid>
-
-            </mui-grid> 
-
-          </story-card>
-
-          <story-card title="Icon Toggle: Default" description="Transition between two icons with a scale effect." >
-            <mui-grid col="1fr" space="var(--space-400)" slot="body">
-              <story-icon-grid>            
-                <mui-icon-toggle slot="body">
-                  <mui-icon-add slot="start"></mui-icon-add>
-                  <mui-icon-subtract slot="end"></mui-icon-subtract>
-                </mui-icon-toggle>
-                <mui-body size="x-small" weight="bold" class="title" slot="body">Add / Subtract</mui-body>
-                <mui-code slot="footer">
-                  &lt;mui-icon-toggle&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-add slot="start"&gt;&lt;/mui-icon-add&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-subtract slot="end"&gt;&lt;/mui-icon-subtract&gt;
-                  <br />
-                  &lt;/mui-icon-toggle&gt;
-                </mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid>            
-                <mui-icon-toggle variant="secondary" slot="body">
-                  <mui-icon-add slot="start"></mui-icon-add>
-                  <mui-icon-subtract slot="end"></mui-icon-subtract>
-                </mui-icon-toggle>
-                <mui-body size="x-small" weight="bold" class="title" slot="body">Add / Subtract</mui-body>
-                <mui-code slot="footer">
-                  &lt;mui-icon-toggle variant="secondary"&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-add slot="start"&gt;&lt;/mui-icon-add&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-subtract slot="end"&gt;&lt;/mui-icon-subtract&gt;
-                  <br />
-                  &lt;/mui-icon-toggle&gt;
-                </mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid>            
-                <mui-icon-toggle variant="tertiary" slot="body">
-                  <mui-icon-add slot="start"></mui-icon-add>
-                  <mui-icon-subtract slot="end"></mui-icon-subtract>
-                </mui-icon-toggle>
-                <mui-body size="x-small" weight="bold" class="title" slot="body">Add / Subtract</mui-body>
-                <mui-code slot="footer">
-                  &lt;mui-icon-toggle variant="tertiary"&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-add slot="start"&gt;&lt;/mui-icon-add&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-subtract slot="end"&gt;&lt;/mui-icon-subtract&gt;
-                  <br />
-                  &lt;/mui-icon-toggle&gt;
-                </mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid>            
-                <mui-icon-toggle variant="attention" slot="body">
-                  <mui-icon-add slot="start"></mui-icon-add>
-                  <mui-icon-subtract slot="end"></mui-icon-subtract>
-                </mui-icon-toggle>
-                <mui-body size="x-small" weight="bold" class="title" slot="body">Add / Subtract</mui-body>
-                <mui-code slot="footer">
-                  &lt;mui-icon-toggle variant="attention"&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-add slot="start"&gt;&lt;/mui-icon-add&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-subtract slot="end"&gt;&lt;/mui-icon-subtract&gt;
-                  <br />
-                  &lt;/mui-icon-toggle&gt;
-                </mui-code>
-              </story-icon-grid>
-
-            </mui-grid> 
-          </story-card>
-
-          <story-card title="Icon Toggle: Rotate" description="Transition between two icons with a rotation effect." >
-            <mui-grid col="1fr" space="var(--space-400)" slot="body">
-              <story-icon-grid>            
-                <mui-icon-toggle rotate slot="body">
-                  <mui-icon-add slot="start"></mui-icon-add>
-                  <mui-icon-subtract slot="end"></mui-icon-subtract>
-                </mui-icon-toggle>
-                <mui-body size="x-small" weight="bold" class="title" slot="body">Add / Subtract</mui-body>
-                <mui-code slot="footer">
-                  &lt;mui-icon-toggle rotate&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-add slot="start"&gt;&lt;/mui-icon-add&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-subtract slot="end"&gt;&lt;/mui-icon-subtract&gt;
-                  <br />
-                  &lt;/mui-icon-toggle&gt;
-                </mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid>            
-                <mui-icon-toggle rotate variant="secondary" slot="body">
-                  <mui-icon-add slot="start"></mui-icon-add>
-                  <mui-icon-subtract slot="end"></mui-icon-subtract>
-                </mui-icon-toggle>
-                <mui-body size="x-small" weight="bold" class="title" slot="body">Add / Subtract</mui-body>
-                <mui-code slot="footer">
-                  &lt;mui-icon-toggle rotate variant="secondary"&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-add slot="start"&gt;&lt;/mui-icon-add&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-subtract slot="end"&gt;&lt;/mui-icon-subtract&gt;
-                  <br />
-                  &lt;/mui-icon-toggle&gt;
-                </mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid>            
-                <mui-icon-toggle rotate variant="tertiary" slot="body">
-                  <mui-icon-add slot="start"></mui-icon-add>
-                  <mui-icon-subtract slot="end"></mui-icon-subtract>
-                </mui-icon-toggle>
-                <mui-body size="x-small" weight="bold" class="title" slot="body">Add / Subtract</mui-body>
-                <mui-code slot="footer">
-                  &lt;mui-icon-toggle rotate variant="tertiary"&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-add slot="start"&gt;&lt;/mui-icon-add&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-subtract slot="end"&gt;&lt;/mui-icon-subtract&gt;
-                  <br />
-                  &lt;/mui-icon-toggle&gt;
-                </mui-code>
-              </story-icon-grid>
-
-              <story-icon-grid>            
-                <mui-icon-toggle rotate variant="attention" slot="body">
-                  <mui-icon-add slot="start"></mui-icon-add>
-                  <mui-icon-subtract slot="end"></mui-icon-subtract>
-                </mui-icon-toggle>
-                <mui-body size="x-small" weight="bold" class="title" slot="body">Add / Subtract</mui-body>
-                <mui-code slot="footer">
-                  &lt;mui-icon-toggle rotate variant="attention"&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-add slot="start"&gt;&lt;/mui-icon-add&gt;
-                  <br />
-                  &nbsp;&nbsp;&lt;mui-icon-subtract slot="end"&gt;&lt;/mui-icon-subtract&gt;
-                  <br />
-                  &lt;/mui-icon-toggle&gt;
-                </mui-code>
-              </story-icon-grid>
-            </mui-grid> 
-          </story-card>
-
-        </mui-v-stack>
-
-      </story-template>
-
-    `}}customElements.define("story-icon",i);