@muibook/components 1.0.0

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

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

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