@muibook/components 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muibook/components",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A library of MUI-based design system components.",
   "author": "Michael Trilford",
   "homepage": "https://muibook.com",
@@ -334,8 +334,8 @@
     "preview:create-mui-app": "vite preview --config vite.create-mui-app.config.ts"
   },
   "files": [
-    "dist",
-    "!src/muibook"
+    "dist/esm",
+    "dist/types"
   ],
   "devDependencies": {
     "@types/node": "^22.15.24",

package/readme.md

@@ -75,6 +75,18 @@ Install [es6-string-html](https://marketplace.visualstudio.com/items?itemName=To
 
 ---
 
+## Packages
+
+Publish
+
+`npm publish`
+
+Version Patch
+
+`npm version patch`
+
+---
+
 ## Notes
 
 - Add any new components to `vite.config.ts` to include them in builds

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

@@ -1,597 +0,0 @@
-(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>
-`;