@muibook/components 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Michael Trilford
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/create-mui-app/assets/index-DfcB3F-s.js

@@ -0,0 +1,597 @@
+(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))i(o);new MutationObserver(o=>{for(const a of o)if(a.type==="childList")for(const n of a.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&i(n)}).observe(document,{childList:!0,subtree:!0});function e(o){const a={};return o.integrity&&(a.integrity=o.integrity),o.referrerPolicy&&(a.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?a.credentials="include":o.crossOrigin==="anonymous"?a.credentials="omit":a.credentials="same-origin",a}function i(o){if(o.ep)return;o.ep=!0;const a=e(o);fetch(o.href,a)}})();class l extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),o=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",a={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},n=a[t]??a.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${n};
+          height: ${n};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${o};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M18.692 8.106c-1.081 0-1.994-.914-1.994-1.996V3.524c0-1.096.913-2.024 1.994-2.024 1.096 0 2.009.928 2.009 2.024V6.11c0 1.082-.913 1.996-2.009 1.996m7.373 3.12c-.772-.773-.786-2.094-.042-2.839l1.84-1.841c.758-.76 2.064-.787 2.809-.042.772.773.786 2.08.042 2.839l-1.826 1.841c-.772.773-2.079.787-2.823.042m-14.746 0c-.744.745-2.05.731-2.809-.042L6.685 9.33c-.745-.745-.73-2.052.042-2.825.744-.745 2.05-.717 2.809.042l1.825 1.841c.745.745.73 2.066-.042 2.84m7.373 15.377c-4.424 0-8.075-3.655-8.075-8.096s3.651-8.096 8.075-8.096c4.438 0 8.09 3.655 8.09 8.096s-3.652 8.096-8.09 8.096m10.42-8.096c0-1.082.914-1.996 1.995-1.996h2.584c1.095 0 2.008.914 2.008 1.996s-.913 1.996-2.008 1.996h-2.584c-1.081 0-1.994-.914-1.994-1.996m-20.812 0c0 1.082-.927 1.996-2.023 1.996H3.693c-1.08 0-1.994-.914-1.994-1.996s.913-1.996 1.994-1.996h2.584c1.096 0 2.023.914 2.023 1.996m17.723 7.337c.773-.773 2.079-.787 2.837-.042l1.84 1.841c.772.759.786 2.066.042 2.811-.773.773-2.079.787-2.837.042l-1.84-1.827c-.772-.773-.786-2.08-.042-2.825m-14.662 0c.745.745.73 2.052-.042 2.825l-1.84 1.827c-.744.745-2.05.731-2.836-.042-.73-.745-.73-2.066.042-2.825l1.854-1.827c.744-.745 2.05-.731 2.822.042m7.331 3.05c1.096 0 2.009.914 2.009 2.01v2.586c0 1.082-.913 2.01-2.009 2.01-1.081 0-1.994-.928-1.994-2.01v-2.586c0-1.096.913-2.01 1.994-2.01"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-sun",l);class h extends HTMLElement{static get observedAttributes(){return["size","color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){(t==="size"||t==="color")&&e!==i&&this.render()}render(){const t=this.getAttribute("size")||"small",e=this.getAttribute("color"),o=e&&{default:"var(--icon-color-default)",inverted:"var(--icon-color-inverted)"}[e]||e||"var(--icon-color-default)",a={"x-small":"1.6rem",small:"2.4rem",medium:"3.6rem",large:"4.8rem"},n=a[t]??a.small;this.classList.add("mui-icon"),this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: ${n};
+          height: ${n};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${o};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M26.68 23.013c1.698 0 3.457-.32 4.466-.776.55-.274 1.024-.411 1.468-.411.642 0 1.085.456 1.085 1.157 0 .365-.107.867-.352 1.43C31.04 29.801 25.488 33.5 19.22 33.5 10.32 33.5 3.7 27.031 3.7 18.157c0-6.27 3.808-12.054 9.572-14.368.49-.198.933-.289 1.284-.289.765 0 1.224.518 1.224 1.187 0 .396-.138.853-.398 1.37-.596 1.142-.963 3.227-.963 5.069 0 7.351 4.725 11.887 12.263 11.887"
+        ></path>
+      </svg>
+
+
+    `)}}customElements.define("mui-icon-moon",h);class d extends HTMLElement{constructor(){super(),this._checked=!1,this._checkbox=null,this.attachShadow({mode:"open"}),this._checked=!1}connectedCallback(){var t;this.render(),this._checkbox=this.shadowRoot.querySelector('input[type="checkbox"]'),this._checked=this.hasAttribute("checked"),this._checkbox&&(this._checkbox.checked=this._checked),this._updateIcons(),this._updateDisabledState(),(t=this._checkbox)==null||t.addEventListener("change",()=>{this._checkbox&&(this.checked=this._checkbox.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))})}static get observedAttributes(){return["label","disabled","checked"]}attributeChangedCallback(t,e,i){if(t==="checked"&&e!==i&&(this._checked=i!==null,this._checkbox&&(this._checkbox.checked=this._checked,this._updateIcons())),t==="disabled"&&e!==i){const o=i!==null;this._checkbox&&(this._checkbox.disabled=o,this._checkbox.setAttribute("aria-disabled",o.toString())),this._updateDisabledState()}}get checked(){return this._checked}set checked(t){const e=!!t;this._checked!==e&&(this._checked=e,e?this.setAttribute("checked",""):this.removeAttribute("checked"),this._checkbox&&(this._checkbox.checked=this._checked,this._checkbox.setAttribute("aria-checked",this._checked.toString()),this._updateIcons()))}_updateDisabledState(){var e,i,o,a;this.hasAttribute("disabled")?(this.shadowRoot.host.classList.add("disabled"),(e=this._checkbox)==null||e.setAttribute("aria-disabled","true"),(i=this._checkbox)==null||i.setAttribute("tabindex","-1")):(this.shadowRoot.host.classList.remove("disabled"),(o=this._checkbox)==null||o.removeAttribute("aria-disabled"),(a=this._checkbox)==null||a.removeAttribute("tabindex"))}_updateIcons(){const t=this.shadowRoot.querySelector('slot[name="on-icon"]'),e=this.shadowRoot.querySelector('slot[name="off-icon"]');t&&t.assignedElements().forEach(i=>{i.style.display=this._checked?"inline":"none"}),e&&e.assignedElements().forEach(i=>{i.style.display=this._checked?"none":"inline"})}render(){const t=this.getAttribute("label");t||console.warn("mui-switch Accessibility warning: Provide a 'label' to ensure the switch is described for assistive technologies."),this.shadowRoot.innerHTML=`
+      <style>
+        :host { display: inline-block; }
+
+        .switch {
+          position: relative;
+          display: inline-block;
+          width: var(--switch-width);
+          height: var(--switch-height);
+        }
+
+        .switch input {
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        .switch input:focus-visible + .track {
+          outline: var(--outline-thick);
+        }
+
+        .track {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: var(--switch-track-background);
+          transition: background-color var(--speed-200);
+          border-radius: var(--switch-height);
+        }
+
+        .thumb {
+          position: absolute;
+          top: var(--switch-offset);
+          left: var(--switch-offset);
+          width: var(--switch-thumb-size);
+          height: var(--switch-thumb-size);
+          background-color: var(--switch-thumb-bg);
+          transition: transform var(--speed-200);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        input:checked + .track {
+          background-color: var(--switch-track-background-checked);
+        }
+
+        input:checked + .track .thumb {
+          transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - (var(--switch-offset) * 2)));
+        }
+
+        ::slotted([slot="on-icon"]),
+        ::slotted([slot="off-icon"]) {
+          width: 16px;
+          height: 16px;
+          fill: var(--switch-icon);
+        }
+
+        :host(.disabled) {
+          cursor: not-allowed;
+        }
+
+        :host(.disabled) .switch {
+          opacity: 0.4;
+          pointer-events: none;
+        }
+
+      </style>
+      <label class="switch">
+        <input 
+          type="checkbox"
+          role="switch"
+          aria-checked="${this._checked}"
+          ${t?`aria-label="${t}"`:""}
+        >
+        <span class="track">
+          <span class="thumb">
+            <slot name="on-icon"></slot>
+            <slot name="off-icon"></slot>
+          </span>
+        </span>
+      </label>
+    `}}customElements.define("mui-switch",d);class u extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){let t=`
+    <style>
+
+      :host {
+        display: block;
+        width: 95%;
+        width: calc( 100% - 4.8rem );
+        max-width: 118.0rem;
+        padding-top: 2.4rem;
+        padding-bottom: 2.4rem;
+        min-width: 27.2rem;
+        margin: 0 2.4rem; }
+
+      /* Center
+      ========================================= */
+      :host([center]) {
+        margin: 0 auto; }
+      /* ===================================== */
+
+      /* Fluid
+      ========================================= */
+      :host([fluid]) {
+        max-width: 100%; }
+      /* ===================================== */
+
+      /* Small
+      ========================================= */
+      :host([small]) {
+        max-width: 54.0rem; }
+      /* ===================================== */
+
+      /* Medium
+      ========================================= */
+      :host([medium]) {
+        max-width: 70.0rem; }
+      /* ===================================== */
+
+      /* Large
+      ========================================= */
+      :host([large]) {
+        max-width: 118.0rem; }
+      /* ===================================== */
+    </style>
+    <slot></slot>
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=t)}}customElements.define("mui-container",u);class g extends HTMLElement{static get observedAttributes(){return["size","level"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){if(!this.shadowRoot)return;const t=this.getAttribute("size")||"1",i=`h${this.getAttribute("level")||t}`;this.shadowRoot.innerHTML=`
+      <style>
+        @import url("./css/mui-reset.css");
+        :host { display: block; }
+
+        h1, h2, h3, h4, h5, h6 {
+          margin: var(--space-000);
+          font-weight: var(--heading-font-weight);
+          color: var(--heading-text-color);
+        }
+
+        .size-1 { font-size: var(--heading-font-size-100); line-height: var(--heading-line-height-100); }
+        .size-2 { font-size: var(--heading-font-size-200); line-height: var(--heading-line-height-200); }
+        .size-3 { font-size: var(--heading-font-size-300); line-height: var(--heading-line-height-300); }
+        .size-4 { font-size: var(--heading-font-size-400); line-height: var(--heading-line-height-400); }
+        .size-5 { font-size: var(--heading-font-size-500); line-height: var(--heading-line-height-500); }
+        .size-6 { font-size: var(--heading-font-size-600); line-height: var(--heading-line-height-600); }
+      </style>
+      <${i} class="size-${t}">
+        <slot></slot>
+      </${i}>
+    `}}customElements.define("mui-heading",g);const c={text:["color","font-family","font-size","font-weight","letter-spacing","line-height","text-transform","text-decoration","text-align"],spacing:["padding","margin","gap","width","height","box-sizing"],layout:["display","flex","flex-direction","flex-wrap","justify-content","align-items","align-content","align-self","grid-template-columns","grid-template-rows","grid-column","grid-row","place-items","place-content","vertical-align"],visual:["background","border","border-radius","box-shadow","opacity","transition","outline","color"]};Object.values(c).flat();function s(...r){return r.map(t=>c[t]||[]).flat().join(" ")}class m extends HTMLElement{static get observedAttributes(){return["size","weight","variant"]}constructor(){super(),this.attachShadow({mode:"open"});const t=this.getAttribute("size")||"medium",e=this.getAttribute("weight")||"regular",i=this.getAttribute("variant")||"default";this.setAttribute("size",t),this.setAttribute("variant",i),this.setAttribute("weight",e)}async connectedCallback(){await this.waitForPartMap();let e=`
+    <style>
+      :host { display: block; }
+
+      :host p {
+        color: var(--text-color);
+        margin: var(--space-000);
+        display: block;
+        width: 100%;
+      }
+
+      :host([size="x-small"]) p {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+      }
+
+      :host([size="small"]) p {
+        font-size: var(--text-font-size-s); 
+        line-height: var(--text-line-height-s);
+      }
+
+      :host([size="medium"]) p {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+      }
+
+      :host([size="large"]) p {
+        font-size: var(--text-font-size-l); 
+        line-height: var(--text-line-height-l);
+      }
+
+      :host([weight="regular"]) p { font-weight: var(--font-weight-regular); }
+      :host([weight="medium"]) p { font-weight: var(--font-weight-medium); }
+      :host([weight="bold"]) p { font-weight: var(--font-weight-bold); }
+
+      /* Variant */
+      :host([variant="default"]) p {
+        color: var(--text-color);
+      }
+      :host([variant="success"]) p {
+        color: var(--text-color-success);
+      }
+      :host([variant="warning"]) p {
+        color: var(--text-color-warning);
+      }
+      :host([variant="error"]) p {
+        color: var(--text-color-error);
+      }
+
+    </style>
+    
+    <p part="${s("spacing","layout","visual")}"><slot></slot></p>
+
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=e)}waitForPartMap(){return new Promise(t=>{if(typeof s=="function")return t();const e=()=>{typeof s=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-body",m);class v extends HTMLElement{static get observedAttributes(){return["target","href","variant","weight","size"]}constructor(){super(),this.attachShadow({mode:"open"});const t=this.getAttribute("size")||"medium",e=this.getAttribute("weight")||"regular";this.setAttribute("size",t),this.setAttribute("weight",e)}async connectedCallback(){if(!this.shadowRoot)return;await this.waitForPartMap();let e=`
+    <style>
+
+      :host { display: inline-flex; }
+
+      a {
+        color: var(--link-text-color-default);
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        box-sizing: border-box;
+      }
+
+      /* Turned back on for focus-visible */
+      a:focus, a:active, a:hover { outline: var(--space-000); }
+      a:hover { color: var(--link-text-color-default-hover); }
+      a:focus { color: var(--link-text-color-default-focus); }
+      a:disabled { color: var(--link-text-color-default-disabled); cursor: not-allowed; }
+      a, a:before, a:after {box-sizing: border-box;}
+      a:focus-visible { outline: var(--outline-thick); }
+
+      :host([size="x-small"]) a {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+      }
+
+      :host([size="small"]) a {
+        font-size: var(--text-font-size-s); 
+        line-height: var(--text-line-height-s);
+      }
+
+      :host([size="medium"]) a {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+      }
+      :host([size="large"]) a {
+        font-size: var(--text-font-size-l); 
+        line-height: var(--text-line-height-l);
+      }
+
+      :host([weight="regular"]) a { font-weight: var(--font-weight-regular); }
+      :host([weight="medium"]) a { font-weight: var(--font-weight-medium); }
+      :host([weight="bold"]) a { font-weight: var(--font-weight-bold); }
+
+
+
+      /* Button  
+      ========================================= */
+
+      :host([variant="primary"]) a,
+      :host([variant="secondary"]) a,
+      :host([variant="tertiary"]) a,
+      :host([variant="attention"]) a {
+        display: inline-block;
+        text-decoration: none;
+        padding: var(--space-200) var(--space-500);
+        border-radius: var(--action-radius);
+        font-size: var(--action-font-size);
+        font-weight: var(--action-font-weight);
+        line-height: var(--action-line-height);
+      }
+
+      :host([variant="primary"]),
+      :host([variant="secondary"])
+      :host([variant="tertiary"]),
+      :host([variant="attention"]) { display: inline-block; }
+
+      /* Button Primary 
+      ========================================= */
+
+      :host([variant="primary"]) a {
+        background: var(--action-primary-background);
+        color: var(--action-primary-text-color);
+        border: var(--action-primary-stroke);
+      }
+
+      :host([variant="primary"]) a:hover {
+        background: var(--action-primary-background-hover);
+        color: var(--action-primary-text-color-hover);
+        border: var(--action-primary-stroke-hover);
+      }
+
+      :host([variant="primary"]) a:focus,
+      :host([variant="tertiary"]) a:focus-visible {
+        background: var(--action-primary-background-focus); 
+        color: var(--action-primary-text-color-focus);
+        border: var(--action-primary-stroke-focus);
+      }
+
+      :host([variant="primary"]) a:disabled {
+        background: var(--action-primary-background-disabled); 
+        color: var(--action-primary-text-color-disabled);
+        border: var(--action-primary-stroke-disabled);
+        cursor: not-allowed;
+      }
+
+      :host([variant="primary"]) a ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
+      :host([variant="primary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
+      :host([variant="primary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
+      :host([variant="primary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
+
+      /* Button Secondary 
+      ========================================= */
+      :host([variant="secondary"]) a {
+        background: var(--action-secondary-background);
+        color: var(--action-secondary-text-color);
+        border: var(--action-secondary-stroke); 
+      }
+
+      :host([variant="secondary"]) a:hover {
+        background: var(--action-secondary-background-hover);
+        color: var(--action-secondary-text-color-hover);
+        border: var(--action-secondary-stroke-hover); 
+      }
+
+      :host([variant="secondary"]) a:focus,
+      :host([variant="secondary"]) a:focus-visible {
+        background: var(--action-secondary-background-focus);
+        color: var(--action-secondary-text-color-focus);
+        border: var(--action-secondary-stroke-focus); 
+      }
+
+      :host([variant="secondary"]) a:disabled {
+        background: var(--action-secondary-background-disabled);
+        color: var(--action-secondary-text-color-disabled);
+        border: var(--action-secondary-stroke-disabled); 
+        cursor: not-allowed;
+      }
+
+      :host([variant="secondary"]) a ::slotted(.mui-icon) { fill: var(--action-secondary-text-color); }
+      :host([variant="secondary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-hover); }
+      :host([variant="secondary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-focus); }
+      :host([variant="secondary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
+
+      /* Button Tertiary
+      ========================================= */
+      :host([variant="tertiary"]) a {
+        background: var(--action-tertiary-background);
+        color: var(--action-tertiary-text-color);
+        border: var(--action-tertiary-stroke);
+      }
+
+      :host([variant="tertiary"]) a:hover {
+        color: var(--action-tertiary-text-color-hover);
+        background: var(--action-tertiary-background-hover);
+        border: var(--action-tertiary-stroke-hover);
+      }
+
+      :host([variant="tertiary"]) a:focus,
+      :host([variant="tertiary"]) a:focus-visible {
+        color: var(--action-tertiary-text-color-focus);
+        background: var(--action-tertiary-background-focus); 
+        border: var(--action-tertiary-stroke-focus);
+      }
+
+      :host([variant="tertiary"]) a:disabled {
+        background: var(--action-tertiary-background-disabled);
+        color: var(--action-tertiary-text-color-disabled);
+        border: var(--action-tertiary-stroke-disabled);
+        cursor: not-allowed;
+      }
+
+      :host([variant="tertiary"]) a ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color); }
+      :host([variant="tertiary"]) a:hover ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-hover); }
+      :host([variant="tertiary"]) a:focus ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
+      :host([variant="tertiary"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
+
+      /* Button Attention
+      ========================================= */
+      :host([variant="attention"]) a {
+        background: var(--action-attention-background);
+        color: var(--action-attention-text-color);
+        border: var(--action-attention-stroke);
+      }
+
+      :host([variant="attention"]) a:hover {
+        background: var(--action-attention-background-hover);
+        color: var(--action-attention-text-color-hover);
+        border: var(--action-attention-stroke-hover);
+      }
+
+      :host([variant="attention"]) a:focus,
+      :host([variant="attention"]) a:focus-visible  {
+        background: var(--action-attention-background-focus);
+        color: var(--action-attention-text-color-focus);
+        border: var(--action-attention-stroke-focus);
+      }
+
+      :host([variant="attention"]) a:disabled {
+        background: var(--action-attention-background-disabled);
+        color: var(--action-attention-text-color-disabled);
+        border: var(--action-attention-stroke-disabled);
+        cursor: not-allowed;
+      }
+
+      :host([variant="attention"]) a ::slotted(.mui-icon) { fill: var(--action-attention-text-color); }
+      :host([variant="attention"]) a:hover ::slotted(.mui-icon) { fill: var(--action-attention-text-color-hover); }
+      :host([variant="attention"]) a:focus ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
+      :host([variant="attention"]) a:disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
+
+      /* Icon only
+      ========================================= */
+      :host([icon-only]) a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 44px;
+        width: 44px;
+        padding: var(--action-icon-only-padding);
+      }
+      /* ===================================== */
+
+
+    </style>
+
+    <a
+      part="${s("text","spacing","layout","visual")}" 
+      target="${this.getAttribute("target")||"_self"}" 
+      href="${this.getAttribute("href")||"#"}"
+      >
+      <slot></slot>
+    </a>
+    `;this.shadowRoot.innerHTML=e}waitForPartMap(){return new Promise(t=>{if(typeof s=="function")return t();const e=()=>{typeof s=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-link",v);class b extends HTMLElement{static get observedAttributes(){return["space","alignY","alignX"]}constructor(){super(),this.attachShadow({mode:"open"}),this.space="var(--space-500)",this.alignY="flex-start",this.alignX="flex-start",this.styles=`
+      :host {
+        display: block;
+      }
+      slot {
+        display: flex;
+        gap: var(--space);
+        align-items: var(--alignY);
+        justify-content: var(--alignX);
+      }
+    `}async connectedCallback(){if(!this.shadowRoot)return;await this.waitForPartMap();const t=s("spacing","layout","visual");this.shadowRoot.innerHTML=`
+      <style>${this.styles}</style>
+      <slot 
+        part="${t}" 
+        style="
+          --space: ${this.getAttribute("space")||this.space};
+          --alignY: ${this.getAttribute("alignY")||this.alignY};
+          --alignX: ${this.getAttribute("alignX")||this.alignX};
+        ">
+      </slot>
+    `}attributeChangedCallback(t,e){if(!this.shadowRoot)return;const i=this.shadowRoot.querySelector("slot");i&&(t==="space"&&i.style.setProperty("--space",e||this.space),t==="alignY"&&i.style.setProperty("--alignY",e||this.alignY),t==="alignX"&&i.style.setProperty("--alignX",e||this.alignX))}waitForPartMap(){return new Promise(t=>{if(typeof s=="function")return t();const e=()=>{typeof s=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-h-stack",b);class f extends HTMLElement{static get observedAttributes(){return["space","alignX","alignY"]}constructor(){super(),this.attachShadow({mode:"open"}),this.space="var(--space-500)",this.alignX="normal",this.alignY="normal",this.styles=`
+      :host {
+        display: block;
+      }
+      slot {
+        display: grid;
+        gap: var(--space);
+        justify-items: var(--alignX);
+        align-items: var(--alignY);
+      }
+    `}async connectedCallback(){if(!this.shadowRoot)return;await this.waitForPartMap();const t=s("spacing","layout","visual");this.shadowRoot.innerHTML=`
+      <style>${this.styles}</style>
+      <slot 
+        part="${t}" 
+        style="
+          --space: ${this.getAttribute("space")||this.space};
+          --alignX: ${this.getAttribute("alignX")||this.alignX};
+          --alignY: ${this.getAttribute("alignY")||this.alignY};
+        ">
+      </slot>
+    `}attributeChangedCallback(t,e){if(!this.shadowRoot)return;const i=this.shadowRoot.querySelector("slot");i&&(t==="space"&&i.style.setProperty("--space",e||this.space),t==="alignX"&&i.style.setProperty("--alignX",e||this.alignX),t==="alignY"&&i.style.setProperty("--alignY",e||this.alignY))}waitForPartMap(){return new Promise(t=>{if(typeof s=="function")return t();const e=()=>{typeof s=="function"?t():requestAnimationFrame(e)};e()})}}customElements.define("mui-v-stack",f);class p extends HTMLElement{static get observedAttributes(){return["color"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,e,i){t==="color"&&e!==i&&this.render()}render(){let e=this.getAttribute("color");this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          width: 200px;
+          height: auto;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${e};
+        }
+        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("create-mui-app-logo",p);class y extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render();const t=localStorage.getItem("theme")||"light";document.documentElement.setAttribute("data-theme",t),this.render(t),customElements.whenDefined("mui-switch").then(()=>{const e=this.shadowRoot.querySelector("mui-switch");e.checked=t==="dark",e.addEventListener("change",i=>{const a=i.detail.checked?"dark":"light";localStorage.setItem("theme",a),document.documentElement.setAttribute("data-theme",a)}),window.addEventListener("brand-theme-capability",i=>{e.disabled=!i.detail.themeEnabled})})}render(t){const e=t==="dark";this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+        display: block;
+        }
+
+        mui-switch {
+        --switch-track-background-checked: #ffeb3b;
+        }
+
+      </style>
+
+      <mui-switch label="Dark mode toggle" ${e?"checked":""}>
+        <mui-icon-sun slot="off-icon"></mui-icon-sun>
+        <mui-icon-moon slot="on-icon"></mui-icon-moon>
+      </mui-switch>
+    `}set disabled(t){const e=this.shadowRoot.querySelector("mui-switch");e&&(e.disabled=t)}get disabled(){const t=this.shadowRoot.querySelector("mui-switch");return t?t.disabled:!1}}customElements.define("dark-mode-toggle",y);document.querySelector("#app").innerHTML=`
+  <mui-container small>
+    <mui-v-stack space="var(--space-600)" alignX="center">
+      <create-mui-app-logo color="var(--logo-color)"></create-mui-app-logo>
+      <mui-body weight="medium" class="introduction">
+        Create fast, accessible, and themeable components with MUI styling,
+        without the need for React or other dependencies.
+      </mui-body>
+      <mui-h-stack space="var(--space-300)">
+        <mui-link
+          variant="primary"
+          href="https://muibook.com"
+          target="_blank"
+        >
+          Mui Docs
+        </mui-link>
+        <mui-link
+          variant="secondary"
+          href="https://github.com/michaeltrilford/create-mui-app"
+          target="_blank"
+        >
+          Get Started
+        </mui-link>
+      </mui-h-stack>
+      <mui-h-stack space="var(--space-300)" alignY="center">
+        <mui-body weight="bold">Toggle Theme</mui-body>
+        <dark-mode-toggle></dark-mode-toggle>
+      </mui-h-stack>
+    </mui-v-stack>
+  </mui-container>
+`;