@muibook/components 1.0.2 → 1.0.4

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

@@ -1,263 +0,0 @@
-import"./mui-logo-mobile-DuEMz_jq.js";class o extends HTMLElement{static get observedAttributes(){return["color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,i,e){t==="color"&&i!==e&&this.render()}render(){let i=this.getAttribute("color");this.shadowRoot.innerHTML=`
-      <style>
-        :host {
-          width: 100%;
-          height: auto;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          fill: ${i};
-        }
-        svg {
-          width: 100%;
-          display: block;
-          fill: inherit; 
-        }
-      </style>
-
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 202 117"
-      >
-        <path
-          d="M183.801 25.364h17.394v65.587h-17.397zm-18.467 66.54c-9.412 0-16.084-4.825-18.288-13.403h-.358c-2.978 8.22-10.842 13.403-20.373 13.403-12.867 0-21.505-8.757-21.505-21.981V25.364h17.395v40.21c0 7.685 3.872 11.914 10.961 11.914 6.85 0 11.437-5.004 11.437-12.45V25.364h16.799V66.23c0 7.029 4.051 11.258 10.782 11.258 3.535 0 6.515-1.396 8.572-3.77q.138 18.186-15.422 18.186M192.486 18.169c-5.123 0-9.352-3.932-9.352-9.114S187.363 0 192.486 0c5.183 0 9.412 3.872 9.412 9.055s-4.229 9.114-9.412 9.114M.703 90.906V25.319h16.799v11.914h.357c2.8-7.923 9.949-12.867 18.706-12.867 9.412 0 16.083 4.825 18.288 13.403h.357c2.978-8.22 10.842-13.403 20.373-13.403 12.867 0 21.505 8.757 21.505 21.981v44.559H79.693v-40.21c0-7.684-3.872-11.914-10.96-11.914-6.851 0-11.438 5.004-11.438 12.45v39.674H40.496V50.041c0-7.03-4.05-11.259-10.782-11.259-6.85 0-11.616 5.242-11.616 12.689v39.435zM9.412 98.101c5.123 0 9.353 3.932 9.353 9.115s-4.23 9.054-9.353 9.054C4.23 116.27 0 112.398 0 107.216s4.23-9.115 9.412-9.115"
-        ></path>
-      </svg>
-
-
-
-
-
-    `}}customElements.define("mui-logo",o);class n extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"}),i=`
-      Muibook is the home of the Mui Design System <span style="opacity: 0.5;">(MichaelUI)</span>  — native Web Components with clean, composable patterns that help you write less code
-    `,e=`
-      :host { 
-        display: flex; 
-        width: 100%;
-        align-items: stretch;
-      }
-
-      mui-responsive {
-        display: grid;
-        min-height: 100%;
-      }
-
-      main {
-        display: grid;
-        align-content: center;
-        justify-content: center;
-        margin-bottom: var(--space-000);
-        gap: var(--space-800);
-      }
-
-      @media (min-height: 1100px) {
-        main {
-          gap: 100px;
-        }
-      }
-
-      @media (min-height: 1200px) {
-        main {
-          gap: 200px;
-        }
-      }
-
-      @media (min-width: 961px) {
-        main {
-          align-items: initial;
-          justify-content: initial;
-          column-gap: var(--space-200);
-          row-gap: var(--space-400);
-          grid-template-columns: repeat(12, 1fr);
-          grid-template-rows: 1fr auto;
-          padding: var(--space-000);
-        }
-      }
-
-      @media (min-width: 1100px) {
-        main {
-          column-gap: var(--space-800);
-          row-gap: var(--space-800);
-        }
-      }
-
-      .logo-wrapper {
-        align-self: center;
-        position: relative;
-        margin: 0;
-        display: flex;
-        justify-content: center;
-      }
-
-      /* Grid */
-      .logo {
-        width: 70%;
-      }
-
-      @media (min-width: 640px) {
-        .logo {
-          width: 100%;
-        }
-      }
-
-      @media (min-width: 961px) {
-        .logo-wrapper {
-          grid-column: 5 / 13;
-        }
-      }
-
-      @media (min-width: 1400px) {
-        .logo-wrapper {
-          grid-column: 6 / 12;
-        }
-      }
-
-      @media (min-width: 961px) {
-        .actions {
-          grid-column: 1 / 5;
-          grid-row: 2 / 4;
-        }
-      }
-
-      @media (min-width: 1100px) {
-        .actions {
-          grid-row: initial;
-        }
-      }
-
-      @media (min-width: 961px) {
-        .introduction {
-          grid-column: 5 / 13;
-          grid-row: 2 / 3;
-          text-align: right;
-        }
-      }
-
-      @media (min-width: 1100px) {
-        .introduction {
-          grid-row: initial;
-        }
-      }
-
-      @media (min-width: 1300px) {
-        .introduction {
-          grid-column: 6 / 13;
-        }
-      }
-
-      @media (min-width: 1400px) {
-        .introduction {
-          grid-column: 6 / 12;
-        }
-      }
-
-      @media (min-width: 1700px) {
-        .introduction {
-          grid-column: 7 / 12;
-        }
-      }
-
-      @media (min-width: 1800px) {
-        .introduction {
-          grid-column: 8 / 12;
-        }
-      }
-
-      /* END - Grid */
-
-      .logo,
-      .introduction {
-        margin-bottom: 0;
-      }
-
-      .actions {
-        width: auto;
-        text-align: center;
-        margin-top: var(--space-200);
-      }
-      @media (min-width: 961px) {
-        .actions {
-          text-align: left;
-          margin-top: var(--space-000);
-          padding-left: var(--space-200);
-        }
-        .actions__secondary {
-          margin-top: var(--space-200);
-        }
-      }
-
-      @media (min-width: 1400px) {
-        .actions {
-          padding-left: var(--space-600);
-        }
-      }
-
-
-    `;t.innerHTML=`
-      <style>${e}</style>
-
-      <mui-container slot="main-content" center fluid>
-        <mui-responsive breakpoint="960">
-          
-          <!-- Main content above -->
-          <main slot="showAbove">
-            <div class="logo-wrapper">
-              <mui-logo color="var(--app-logo-color)"></mui-logo>
-            </div>
-
-            <mui-v-stack class="actions" space="var(--space-050)" alignX="start">
-
-              <div style="text-align: center;" >
-                <mui-link 
-                  class="github-link" 
-                  target="_blank" 
-                  href="https://github.com/michaeltrilford/create-mui-app"
-                  variant="primary" 
-                  rounded>
-                  Get Started
-                </mui-link>
-                <mui-v-stack class="actions__secondary" space="var(--space-000)">
-                  <mui-body size="small" weight="medium">
-                    <mui-link href="#/create-mui-app">Documentation</mui-link>
-                  </mui-body>
-                </mui-v-stack>
-              </div>
-              
-            </mui-v-stack>
-            <mui-body class="introduction" size="medium" weight="bold">
-              ${i}
-            </mui-body> 
-          </main>
-
-          <!-- Main content below -->
-          <main slot="showBelow">
-            <mui-v-stack space="var(--space-600)" style="text-align: center;">
-              <div class="logo-wrapper">
-                <mui-logo-mobile color="var(--app-logo-color)"></mui-logo-mobile>
-              </div>
-              <mui-v-stack space="var(--space-500)" style="max-width: 31rem; padding-left: var(--space-300); padding-right: var(--space-300);">
-                <mui-body class="introduction" size="small" weight="bold">
-                  ${i}
-                </mui-body> 
-              </mui-v-stack>
-              <mui-v-stack class="actions" space="var(--space-300)">
-                  <mui-link 
-                    class="github-link" 
-                    target="_blank" 
-                    href="https://github.com/michaeltrilford/create-mui-app" 
-                    variant="primary">
-                    Get Started
-                  </mui-link>
-                  <mui-v-stack class="actions__secondary" space="var(--space-050)">
-                    <mui-body size="small" weight="medium">
-                      <mui-link href="#/create-mui-app">Documentation</mui-link>
-                    </mui-body>
-                  </mui-v-stack>
-              </mui-v-stack>
-            </mui-v-stack>
-          </main>
-
-        </mui-responsive>
-      </mui-container>
-
-    `}}customElements.define("home-page",n);

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

@@ -1,336 +0,0 @@
-class t extends HTMLElement{constructor(){super();const i=this.attachShadow({mode:"open"}),n=`
-      :host { display: block; }
-
-      mui-link.custom-wc::part(color) {
-        color: var(--red-600);
-      }
-
-      mui-link.custom-wc::part(color):hover {
-        color: var(--red-800);
-      }
-
-      mui-link.custom-wc::part(font-weight) {
-        font-weight: var(--font-weight-700);
-      }
-
-      mui-link.custom-wc::part(text-decoration) {
-        text-decoration: none;
-      }
-      mui-link.custom-wc::part(text-decoration):hover {
-        text-decoration: underline;
-      }
-
-    `;i.innerHTML=`
-      <style>${n}</style>
-
-      <story-template 
-        title="Links"
-        description="The mui-link defines a hyperlink, which is used to link from one page to another."
-        figma="https://www.figma.com/design/l0mt1lXu97XoHJCEdnrWLp/Mui-Design-System?node-id=3-663&t=fSFYVey9aCoE5oQa-1"
-        github="https://github.com/michaeltrilford/muibook/blob/b060f2c788d521abd1f16889a460822d0cf8da3d/src/components/mui-link/index.ts"
-      >
-
-      <mui-v-stack space="var(--space-700)">
-
-        <story-card title="Sizes">
-
-            <div slot="body">
-              <mui-v-stack space="var(--space-500)">
-                <div>
-                  <mui-heading size="4" >X-Small</mui-heading>
-                  <mui-link size="x-small">Link text</mui-link>
-                </div>
-                <div>
-                  <mui-heading size="4" >Small</mui-heading>
-                  <mui-link size="small">Link text</mui-link>
-                </div>
-                <div>
-                  <mui-heading size="4" >Medium</mui-heading>
-                  <mui-link size="medium">Link text</mui-link>
-                </div>
-                <div>
-                  <mui-heading size="4" >Large</mui-heading>
-                  <mui-link size="large">Link text</mui-link>
-                </div>
-              </mui-v-stack>
-            </div>
-
-            <mui-code slot="footer">
-              &lt;mui-link size="x-small"&gt;
-              <br />
-              &nbsp;&nbsp;Link text
-              <br />
-              &lt;/mui-link&gt;
-              <br />
-              <br />
-              &lt;mui-link size="small"&gt;
-              <br />
-              &nbsp;&nbsp;Link text
-              <br />
-              &lt;/mui-link&gt;
-              <br />
-              <br />
-              &lt;mui-link size="medium"&gt;
-              <br />
-              &nbsp;&nbsp;Link text
-              <br />
-              &lt;/mui-link&gt;
-              <br />
-              <br />
-              &lt;mui-link size="large"&gt;
-              <br />
-              &nbsp;&nbsp;Link text
-              <br />
-              &lt;/mui-link&gt;
-            </mui-code>
-
-        </story-card>
-
-
-
-
-        <story-card title="URL">
-          <div slot="body">
-            <mui-link target="_blank" href="links.html">Unsubscribe</mui-link>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-link href="links.html"&gt;...&lt;/mui-link&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="External link">
-          <div slot="body">
-            <mui-link target="_blank">Unsubscribe</mui-link>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-link target="_blank" href="links.html"&gt;...&lt;/mui-link&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Primary Link">
-          <div slot="body">
-            <mui-link target="_blank" variant="primary">Fork Github</mui-link>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-link variant="primary" href="links.html"&gt;...&lt;/mui-link&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Secondary Link">
-          <div slot="body">
-            <mui-link target="_blank" variant="secondary">View report</mui-link>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-link variant="secondary" href="links.html"&gt;...&lt;/mui-link&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Tertiary Link">
-          <div slot="body">
-            <mui-link target="_blank" variant="tertiary">View report</mui-link>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-link variant="tertiary" href="links.html"&gt;...&lt;/mui-link&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Attention Link">
-          <div slot="body">
-            <mui-link target="_blank" variant="attention">Fork Github</mui-link>
-          </div>
-          <mui-code slot="footer">
-            &lt;mui-link variant="attention" href="links.html"&gt;...&lt;/mui-link&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Primary Icon-Only">
-          <mui-h-stack slot="body" space="var(--space-100)">
-            <mui-link variant="primary" icon-only>
-              <mui-icon-add></mui-icon-add>
-            </mui-link>
-            <mui-link variant="primary" icon-only>
-              <mui-icon-subtract></mui-icon-subtract>
-            </mui-link>
-            <mui-link variant="primary" icon-only>
-              <mui-icon-grid></mui-icon-grid>
-            </mui-link>
-            <mui-link variant="primary" icon-only>
-              <mui-icon-notification></mui-icon-notification>
-            </mui-link>
-            <mui-link variant="primary" icon-only>
-              <mui-icon-menu></mui-icon-menu>
-            </mui-link>
-            <mui-link variant="primary" icon-only>
-              <mui-icon-message></mui-icon-message>
-            </mui-link>
-          </mui-h-stack>
-          <mui-code slot="footer">
-            &lt;mui-link variant="primary" icon-only&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-icon-add&gt;&lt;/mui-icon-add&gt;
-            <br />
-            &lt;/mui-link&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Secondary Icon-Only">
-          <mui-h-stack slot="body" space="var(--space-100)">
-            <mui-link variant="secondary" icon-only>
-              <mui-icon-add variant="secondary" size="small"></mui-icon-add>
-            </mui-link>
-            <mui-link variant="secondary" icon-only>
-              <mui-icon-subtract></mui-icon-subtract>
-            </mui-link>
-            <mui-link variant="secondary" icon-only>
-              <mui-icon-grid></mui-icon-grid>
-            </mui-link>
-            <mui-link variant="secondary" icon-only>
-              <mui-icon-notification></mui-icon-notification>
-            </mui-link>
-            <mui-link variant="secondary" icon-only>
-              <mui-icon-menu></mui-icon-menu>
-            </mui-link>
-            <mui-link variant="secondary" icon-only>
-              <mui-icon-message></mui-icon-message>
-            </mui-link>
-          </mui-h-stack>
-          <mui-code slot="footer">
-            &lt;mui-link variant="secondary" icon-only&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-icon-add&gt;&lt;/mui-icon-add&gt;
-            <br />
-            &lt;/mui-link&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Tertiary Icon-Only">
-          <mui-h-stack slot="body" space="var(--space-100)">
-            <mui-link variant="tertiary" icon-only>
-              <mui-icon-add></mui-icon-add>
-            </mui-link>
-            <mui-link variant="tertiary" icon-only>
-              <mui-icon-subtract></mui-icon-subtract>
-            </mui-link>
-            <mui-link variant="tertiary" icon-only>
-              <mui-icon-grid></mui-icon-grid>
-            </mui-link>
-            <mui-link variant="tertiary" icon-only>
-              <mui-icon-notification></mui-icon-notification>
-            </mui-link>
-            <mui-link variant="tertiary" icon-only>
-              <mui-icon-menu></mui-icon-menu>
-            </mui-link>
-            <mui-link variant="tertiary" icon-only>
-              <mui-icon-message></mui-icon-message>
-            </mui-link>
-          </mui-h-stack>
-          <mui-code slot="footer">
-            &lt;mui-link variant="tertiary" icon-only&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-icon-add&gt;&lt;/mui-icon-add&gt;
-            <br />
-            &lt;/mui-link&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Attention Icon-Only">
-          <mui-h-stack slot="body" space="var(--space-100)">
-            <mui-link variant="attention" icon-only>
-              <mui-icon-add></mui-icon-add>
-            </mui-link>
-            <mui-link variant="attention" icon-only>
-              <mui-icon-subtract></mui-icon-subtract>
-            </mui-link>
-            <mui-link variant="attention" icon-only>
-              <mui-icon-grid></mui-icon-grid>
-            </mui-link>
-            <mui-link variant="attention" icon-only>
-              <mui-icon-notification></mui-icon-notification>
-            </mui-link>
-            <mui-link variant="attention" icon-only>
-              <mui-icon-menu></mui-icon-menu>
-            </mui-link>
-            <mui-link variant="attention" icon-only>
-              <mui-icon-message></mui-icon-message>
-            </mui-link>
-          </mui-h-stack>
-          <mui-code slot="footer">
-            &lt;mui-link variant="attention" icon-only&gt;
-            <br />
-            &nbsp;&nbsp;&lt;mui-icon-add&gt;&lt;/mui-icon-add&gt;
-            <br />
-            &lt;/mui-link&gt;
-          </mui-code>
-        </story-card>
-
-        <story-card title="Part Selectors" description="Ideal for building custom web-component compositions using MUI and scoped CSS styles.">
-          <div slot="body">
-            <mui-link class="custom-wc" target="_blank" href="links.html">Unsubscribe</mui-link>
-          </div>
-          <mui-code slot="footer">
-      
-            // Scoped CSS (Web component)
-            <br />
-            <br />
-
-            class customUI extends HTMLElement {<br>
-            &nbsp;&nbsp;static get observedAttributes() {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;return [...];<br>
-            &nbsp;&nbsp;}<br><br>
-
-            &nbsp;&nbsp;constructor() {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;super();<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;const shadowRoot = this.attachShadow({
-            <br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mode: "open"
-            <br>
-            &nbsp;&nbsp;&nbsp;&nbsp;});
-            <br><br>
-
-            &nbsp;&nbsp;&nbsp;&nbsp;const styles = &#96;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:host { ... }<br><br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Part Selector<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/////////////////////////////
-            <br />
-            <br />
-
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mui-link::part(color) {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: var(--red-600);<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
-
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mui-link::part(color):hover {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: var(--red-700);<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
-
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mui-link::part(font-weight) {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: var(--font-weight-700);<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
-
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mui-link::part(text-decoration) {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
-
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mui-link::part(text-decoration):hover {<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: underline;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&#96;;<br><br>
-
-            &nbsp;&nbsp;&nbsp;&nbsp;shadowRoot.innerHTML = &#96;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;&#36;{styles}&lt;/style&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;mui-link href="..."&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/mui-link&gt;<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;&#96;;<br>
-            &nbsp;&nbsp;}<br>
-            }<br><br>
-
-            customElements.define("custom-ui", customUI);
-
-
-          </mui-code>
-        </story-card>
-
-      </mui-v-stack>
-
-      </story-template>
-    `}}customElements.define("story-link",t);