@muibook/components 10.0.0 → 11.0.0

package/dist/esm/components/mui-textarea/index.js

@@ -0,0 +1,257 @@
+class p extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      "name",
+      "value",
+      "placeholder",
+      "id",
+      "label",
+      "disabled",
+      "hide-label",
+      "variant",
+      "rows",
+      "optional",
+      "max-length",
+      "size"
+    ];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
+  }
+  disconnectedCallback() {
+    this.cleanupListeners();
+  }
+  attributeChangedCallback(e, a, r) {
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("textarea");
+    if (t) {
+      if (e === "value") {
+        t.value = r ?? "", this.updateCharacterCount();
+        return;
+      }
+      if (e === "disabled") {
+        r === null || r === "false" ? t.removeAttribute("disabled") : t.setAttribute("disabled", "");
+        return;
+      }
+      if (e === "rows") {
+        r && t.setAttribute("rows", r);
+        return;
+      }
+      ["placeholder", "label", "hide-label", "variant", "optional", "max-length", "size"].includes(e) && (this.render(), this.setupListener());
+    }
+  }
+  cleanupListeners() {
+    var a;
+    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("textarea");
+    e && this._changeHandler && (e.removeEventListener("change", this._changeHandler), e.removeEventListener("input", this._changeHandler));
+  }
+  setupListener() {
+    if (!this.shadowRoot) return;
+    const e = this.shadowRoot.querySelector("textarea");
+    e && (this.cleanupListeners(), this._changeHandler = (a) => {
+      const r = a.target;
+      this.setAttribute("value", r.value);
+      const t = {
+        detail: { value: r.value },
+        bubbles: !0,
+        composed: !0
+      };
+      this.dispatchEvent(new CustomEvent("change", t)), this.dispatchEvent(new CustomEvent("input", t)), this.updateCharacterCount();
+    }, e.addEventListener("change", this._changeHandler), e.addEventListener("input", this._changeHandler), this.updateCharacterCount());
+  }
+  updateCharacterCount() {
+    var r, t;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("textarea"), a = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".char-count");
+    !e || !a || e.maxLength <= 0 || (a.textContent = `${e.value.length}/${e.maxLength}`);
+  }
+  render() {
+    const e = this.getAttribute("name") || "", a = this.getAttribute("value") || "", r = this.getAttribute("placeholder") || "", t = this.getAttribute("id") || `mui-textarea-${Math.random().toString(36).substr(2, 9)}`, o = this.getAttribute("label") || "", h = this.hasAttribute("optional"), l = this.hasAttribute("hide-label"), d = this.hasAttribute("disabled"), u = this.getAttribute("rows") || "4", i = this.getAttribute("max-length"), s = i && Number(i) > 0 ? String(Number(i)) : "", n = this.getAttribute("size") || "medium", v = ["x-small", "small", "medium", "large"].includes(n) ? n : "medium", x = l && o ? `aria-label="${o}"` : "", c = this.getAttribute("variant") || "", b = c || "", m = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: inline-block;
+          width: 100%;
+        }
+
+        label {
+          display: block;
+          font-size: var(--text-font-size);
+          font-weight: var(--font-weight-medium);
+          margin-bottom: var(--space-100);
+          color: var(--text-color);
+        }
+
+        textarea {
+          width: 100%;
+          min-height: 9.6rem;
+          line-height: var(--text-line-height);
+          padding: var(--space-200) var(--space-300);
+          box-sizing: border-box;
+          font-size: var(--text-font-size);
+          border-radius: var(--radius-100);
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          color: var(--form-default-text-color);
+          background: var(--input-background);
+          resize: vertical;
+          font-family: var(--font-family);
+        }
+        textarea.size-x-small {
+          min-height: 7.2rem;
+          padding: var(--action-padding-x-small);
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+        }
+        textarea.size-small {
+          min-height: 8.4rem;
+          padding: var(--action-padding-small);
+          font-size: var(--text-font-size-s);
+          line-height: var(--text-line-height-s);
+        }
+        textarea.size-medium {
+          min-height: 9.6rem;
+          padding: var(--space-200) var(--space-300);
+          font-size: var(--text-font-size);
+          line-height: var(--text-line-height);
+        }
+        textarea.size-large {
+          min-height: 11.2rem;
+          padding: var(--space-300) var(--space-400);
+          font-size: var(--text-font-size-l);
+          line-height: var(--text-line-height-l);
+        }
+
+        textarea:hover {
+          border-color: var(--form-default-border-color-hover);
+          color: var(--form-default-text-color-hover);
+        }
+
+        textarea:focus {
+          outline: var(--outline-thick);
+        }
+
+        textarea:disabled {
+          opacity: 0.4;
+          cursor: not-allowed;
+          background-color: var(--input-background-disabled);
+        }
+
+        textarea.success {
+          color: var(--form-success-text-color);
+          border-color: var(--form-success-border-color);
+          box-shadow: 0 0 0 2px var(--form-success-border-color);
+        }
+
+        textarea.warning {
+          color: var(--form-warning-text-color);
+          border-color: var(--form-warning-border-color);
+          box-shadow: 0 0 0 2px var(--form-warning-border-color);
+        }
+
+        textarea.error {
+          color: var(--form-error-text-color);
+          border-color: var(--form-error-border-color);
+          box-shadow: 0 0 0 2px var(--form-error-border-color);
+        }
+
+        textarea.success:hover {
+          color: var(--form-success-text-color-hover);
+          border-color: var(--form-success-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-success-border-color-hover);
+        }
+
+        textarea.warning:hover {
+          color: var(--form-warning-text-color-hover);
+          border-color: var(--form-warning-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-warning-border-color-hover);
+        }
+
+        textarea.error:hover {
+          color: var(--form-error-text-color-hover);
+          border-color: var(--form-error-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-error-border-color-hover);
+        }
+
+        textarea::placeholder {
+          color: var(--form-default-placeholder-color);
+          opacity: 1;
+        }
+
+        textarea:hover::placeholder {
+          color: var(--form-default-placeholder-color-hover);
+        }
+
+        textarea:focus::placeholder {
+          color: var(--form-default-placeholder-color-focus);
+        }
+
+        textarea:disabled::placeholder {
+          color: var(--form-default-placeholder-color-disabled);
+        }
+
+        .vh {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+          border: 0;
+        }
+        .meta {
+          display: flex;
+          justify-content: flex-end;
+          margin-top: var(--space-100);
+          min-height: 1.8rem;
+        }
+        .char-count {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          color: var(--text-color);
+          opacity: 0.7;
+        }
+        .optional {
+          color: var(--text-color-optional);
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-050);
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          text-transform: uppercase;
+          font-weight: var(--font-weight-medium);
+        }
+        .optional-dot {
+          display: inline-flex;
+          align-items: center;
+          line-height: 1;
+        }
+        .optional-text {
+          transform: translateY(calc(var(--stroke-size-100) * -1));
+        }
+      </style>
+
+      ${o ? `<label for="${t}" class="${l ? "vh" : ""}">${o}${h ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
+
+      <textarea
+        id="${t}"
+        name="${e}"
+        class="${[b, `size-${v}`].filter(Boolean).join(" ")}"
+        rows="${u}"
+        placeholder="${r}"
+        ${s ? `maxlength="${s}"` : ""}
+        ${d ? "disabled" : ""}
+        ${x}
+      >${a}</textarea>
+      ${s ? '<div class="meta"><span class="char-count"></span></div>' : ""}
+    `
+    );
+    this.shadowRoot.innerHTML = m, o || console.warn("mui-textarea: Missing required 'label' attribute for accessibility.");
+  }
+}
+customElements.get("mui-textarea") || customElements.define("mui-textarea", p);

package/dist/esm/css/mui-base.css

@@ -108,3 +108,30 @@ button[type="submit"] {
   border-radius: var(--radius-100);
   border: var(--border-thick);
 }
+
+/* Global minimal scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--border-color) 55%, transparent) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: var(--space-100);
+  height: var(--space-100);
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--border-color) 55%, transparent);
+  border-radius: var(--radius-300);
+  border: var(--stroke-size-100) solid transparent;
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--border-color) 75%, transparent);
+  background-clip: padding-box;
+}

package/dist/esm/css/mui-brand.css

@@ -1,6 +1,6 @@
 
 /* ================================================================================================== */
-/*  Don't edit directly • Generated on Wed, 04 Feb 2026 04:53:47 GMT • muibook.com                                        */
+/*  Don't edit directly • Generated on Wed, 25 Feb 2026 01:13:26 GMT • muibook.com                                        */
 /* ================================================================================================== */
 
 /* ================================================================================================== */
@@ -72,6 +72,7 @@
   --line-height-1000: 1.125;
   --black: black;
   --black-opacity-0: oklch(0% 0 0 / 0);
+  --black-opacity-5: oklch(0% 0 0 / 0.05);
   --black-opacity-10: oklch(0% 0 0 / 0.1);
   --black-opacity-20: oklch(0% 0 0 / 0.2);
   --black-opacity-30: oklch(0% 0 0 / 0.3);
@@ -95,6 +96,7 @@
   --white-opacity-90: oklch(100% 0.00011 271.152 / 0.9);
   --white-opacity-100: oklch(100% 0.00011 271.152);
   --grey-100: oklch(97.015% 0.00011 271.152);
+  --grey-150: oklch(94.047% 0.00009 271.152);
   --grey-200: oklch(92.191% 0.0001 271.152);
   --grey-300: oklch(84.522% 0.0001 271.152);
   --grey-400: oklch(73.802% 0.00008 271.152);

package/dist/esm/css/mui-tokens.css

@@ -137,6 +137,19 @@ html[data-theme="light"] {
   --action-tertiary-text-color-hover: var(--grey-1000);
   --action-tertiary-text-color-focus: var(--grey-1000);
   --action-tertiary-text-color-disabled: var(--grey-400);
+  /* Action - Overlay (Button & Link) */
+  --action-overlay-border-color: var(--white-opacity-30);
+  --action-overlay-border-color-hover: var(--white-opacity-30);
+  --action-overlay-border-color-focus: var(--white-opacity-30);
+  --action-overlay-border-color-disabled: var(--white-opacity-20);
+  --action-overlay-background: var(--black-opacity-60);
+  --action-overlay-background-hover: var(--black-opacity-70);
+  --action-overlay-background-focus: var(--black-opacity-70);
+  --action-overlay-background-disabled: var(--black-opacity-40);
+  --action-overlay-text-color: var(--white);
+  --action-overlay-text-color-hover: var(--white);
+  --action-overlay-text-color-focus: var(--white);
+  --action-overlay-text-color-disabled: var(--white-opacity-40);
   /* Action - Attention (Button & Link) */
   --action-attention-border-color: var(--black-opacity-0);
   --action-attention-border-color-hover: var(--black-opacity-0);
@@ -158,6 +171,49 @@ html[data-theme="light"] {
   --surface-elevated-alpha: var(--white-opacity-50);
   --surface-elevated-100: var(--white);
   --surface-elevated-200: var(--grey-100);
+  --prompt-preview-dismiss-border-color: var(--black-opacity-30);
+  --prompt-preview-box-drop-shadow: drop-shadow(
+    0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-10)
+  );
+  --prompt-preview-surface: var(--surface-elevated-100);
+  --prompt-preview-accent-mix-100: 10%;
+  --prompt-preview-accent-mix-200: 8%;
+  --prompt-preview-accent-mix-300: 6%;
+  --prompt-preview-accent-mix-400: 8%;
+  --prompt-preview-accent-mix-500: 4%;
+  --prompt-preview-dismiss-secondary-background: var(--grey-100);
+  --prompt-preview-dismiss-secondary-background-hover: var(--grey-200);
+  --prompt-preview-dismiss-secondary-border: var(--stroke-size-100) var(--stroke-solid) var(--black-opacity-30);
+  --prompt-preview-dismiss-secondary-border-hover: var(--stroke-size-100) var(--stroke-solid) var(--black-opacity-50);
+  --prompt-preview-top-shade-height: calc(var(--space-600) + var(--space-100));
+  --prompt-preview-top-shade-start: var(--black-opacity-10);
+  --prompt-preview-top-shade-end: var(--black-opacity-0);
+  --prompt-preview-top-shade-start-overlay: var(--black-opacity-50);
+  --prompt-preview-top-shade-end-overlay: var(--black-opacity-0);
+  --prompt-border-color-hover: var(--form-default-border-color-hover);
+  --prompt-border-color-focus: var(--blue-500);
+  --prompt-hover-ring-color: var(--outline-color);
+  --prompt-hover-glow-color: var(--mui-brand-400);
+  --prompt-focus-ring-color: var(--mui-brand-400);
+  --prompt-focus-glow-color: var(--mui-brand-400);
+  --prompt-spectrum-start: var(--mui-brand-400);
+  --prompt-spectrum-mid: var(--outline-color);
+  --prompt-spectrum-end: var(--blue-500);
+  --prompt-focus-surface-background: var(--surface-elevated-100);
+  --prompt-accent-primary: var(--prompt-spectrum-start);
+  --prompt-accent-secondary: var(--prompt-spectrum-end);
+  --prompt-hover-sweep-speed: 1400ms;
+  --prompt-focus-pulse-speed: 1400ms;
+  --prompt-surface-filter: drop-shadow(0 var(--stroke-size-100) 0 var(--black-opacity-5));
+  --prompt-placeholder-color: var(--form-default-placeholder-color);
+  --prompt-placeholder-color-hover: var(--form-default-placeholder-color-hover);
+  --prompt-placeholder-color-focus: var(--form-default-placeholder-color-focus);
+  --media-player-seek-color: var(--grey-1200);
+  --media-player-seek-time-background: var(--surface-elevated-100);
+  --media-player-seek-time-border-color: var(--border-color);
+  --range-input-accent-color: var(--media-player-seek-color);
+  --range-input-bubble-background: var(--media-player-seek-time-background);
+  --range-input-bubble-border-color: var(--media-player-seek-time-border-color);
   --surface-recessed-alpha: var(--black-opacity-10);
   --surface-recessed-100: var(--grey-300);
   --surface-recessed-200: var(--grey-400);
@@ -189,6 +245,9 @@ html[data-theme="light"] {
   --badge-background-positive: var(--green-600);
   --badge-background-warning: var(--orange-600);
   --badge-background-attention: var(--red-600);
+  --badge-background-overlay: var(--black-opacity-60);
+  --badge-text-color-overlay: var(--white);
+  --badge-border-overlay: var(--stroke-size-100) var(--stroke-solid) var(--white-opacity-30);
   /* Heading */
   --heading-text-color: var(--grey-1000);
   /* Link */
@@ -208,6 +267,15 @@ html[data-theme="light"] {
   --checkbox-background-disabled: var(--grey-100);
   --checkbox-background-checked-disabled: var(--grey-800);
   --checkbox-icon-color-checked-disabled: var(--grey-100);
+  /* Radio */
+  --radio-background: var(--white);
+  --radio-border-color: var(--form-default-border-color);
+  --radio-border-color-hover: var(--form-default-border-color-hover);
+  --radio-border-color-checked: var(--grey-900);
+  --radio-dot-color-checked: var(--grey-900);
+  --radio-background-disabled: var(--grey-100);
+  --radio-border-color-disabled: var(--grey-300);
+  --radio-dot-color-checked-disabled: var(--grey-500);
 
   /* Addon */
   --addon-background: var(--grey-100);
@@ -262,14 +330,16 @@ html[data-theme="light"] {
   --chip-background-hover: var(--white);
   --chip-background-focus: var(--white);
   --chip-background-active: var(--white);
-  --chip-border-color: var(--grey-300);
+  --chip-border-color: var(--grey-200);
   --chip-border-color-hover: var(--grey-300);
   --chip-border-color-focus: var(--grey-300);
   --chip-border-color-active: var(--grey-1000);
   --chip-text-color-active: var(--grey-1000);
   --chip-icon-fill: var(--black);
-  --chip-dismiss-action-background: var(--grey-100);
+  --chip-filter: drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-5));
+  --chip-dismiss-action-background: var(--grey-150);
   --chip-dismiss-action-background-hover: var(--black-opacity-0);
+  --chip-dismiss-action-filter: drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-0));
 
   /* Dropdown */
   --dropdown-background: var(--grey-100);
@@ -282,13 +352,20 @@ html[data-theme="light"] {
   --progress-track-background: var(--grey-200);
   --progress-loading-bar-100: var(--grey-200);
   --progress-loading-bar-200: var(--grey-300);
+  --progress-syncing-bar-background: var(--progress-bar-background);
 
   /* Stepper */
-  --stepper-color: var(--blue-600);
+  --stepper-color: var(--grey-700);
   --stepper-background-active: var(--stepper-color);
   --stepper-background-inactive: var(--white);
   --stepper-border-color: var(--stepper-color);
   --stepper-text-color-active: var(--stepper-color);
+  --stepper-icon-color: var(--white);
+  --stepper-success-color: var(--stepper-color);
+  --stepper-warning-color: var(--orange-700);
+  --stepper-error-color: var(--text-color-error);
+  --stepper-disabled-color: var(--text-color-optional);
+  --stepper-disabled-opacity: 0.75;
 
   /* Dialog */
   --dialog-background: var(--white);
@@ -391,6 +468,19 @@ html[data-theme="dark"] {
   --action-tertiary-text-color-hover: var(--grey-100);
   --action-tertiary-text-color-focus: var(--grey-100);
   --action-tertiary-text-color-disabled: var(--grey-600);
+  /* Action - Overlay (Button & Link) */
+  --action-overlay-border-color: var(--white-opacity-30);
+  --action-overlay-border-color-hover: var(--white-opacity-30);
+  --action-overlay-border-color-focus: var(--white-opacity-30);
+  --action-overlay-border-color-disabled: var(--white-opacity-20);
+  --action-overlay-background: var(--black-opacity-60);
+  --action-overlay-background-hover: var(--black-opacity-70);
+  --action-overlay-background-focus: var(--black-opacity-70);
+  --action-overlay-background-disabled: var(--black-opacity-40);
+  --action-overlay-text-color: var(--white);
+  --action-overlay-text-color-hover: var(--white);
+  --action-overlay-text-color-focus: var(--white);
+  --action-overlay-text-color-disabled: var(--white-opacity-40);
   /* Action - Attention (Button & Link) */
   --action-attention-border-color: var(--black-opacity-0);
   --action-attention-border-color-hover: var(--black-opacity-0);
@@ -413,6 +503,49 @@ html[data-theme="dark"] {
   --surface-elevated-alpha: var(--white-opacity-10);
   --surface-elevated-100: var(--grey-800);
   --surface-elevated-200: var(--grey-900);
+  --prompt-preview-dismiss-border-color: var(--white-opacity-30);
+  --prompt-preview-box-drop-shadow: drop-shadow(
+    0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20)
+  );
+  --prompt-preview-surface: var(--surface-elevated-200);
+  --prompt-preview-accent-mix-100: 14%;
+  --prompt-preview-accent-mix-200: 10%;
+  --prompt-preview-accent-mix-300: 8%;
+  --prompt-preview-accent-mix-400: 12%;
+  --prompt-preview-accent-mix-500: 6%;
+  --prompt-preview-dismiss-secondary-background: var(--surface-recessed-100);
+  --prompt-preview-dismiss-secondary-background-hover: var(--surface-recessed-200);
+  --prompt-preview-dismiss-secondary-border: var(--stroke-size-100) var(--stroke-solid) var(--white-opacity-30);
+  --prompt-preview-dismiss-secondary-border-hover: var(--stroke-size-100) var(--stroke-solid) var(--white-opacity-50);
+  --prompt-preview-top-shade-height: calc(var(--space-600) + var(--space-100));
+  --prompt-preview-top-shade-start: var(--black-opacity-30);
+  --prompt-preview-top-shade-end: var(--black-opacity-0);
+  --prompt-preview-top-shade-start-overlay: var(--black-opacity-50);
+  --prompt-preview-top-shade-end-overlay: var(--black-opacity-0);
+  --prompt-border-color-hover: var(--form-default-border-color-hover);
+  --prompt-border-color-focus: var(--blue-300);
+  --prompt-hover-ring-color: var(--outline-color);
+  --prompt-hover-glow-color: var(--mui-brand-300);
+  --prompt-focus-ring-color: var(--mui-brand-300);
+  --prompt-focus-glow-color: var(--mui-brand-300);
+  --prompt-spectrum-start: var(--mui-brand-300);
+  --prompt-spectrum-mid: var(--outline-color);
+  --prompt-spectrum-end: var(--blue-300);
+  --prompt-focus-surface-background: var(--grey-1200);
+  --prompt-accent-primary: var(--prompt-spectrum-start);
+  --prompt-accent-secondary: var(--prompt-spectrum-end);
+  --prompt-hover-sweep-speed: 1400ms;
+  --prompt-focus-pulse-speed: 1400ms;
+  --prompt-surface-filter: drop-shadow(0 var(--stroke-size-100) 0 var(--black-opacity-10));
+  --prompt-placeholder-color: var(--form-default-placeholder-color);
+  --prompt-placeholder-color-hover: var(--form-default-placeholder-color-hover);
+  --prompt-placeholder-color-focus: var(--form-default-placeholder-color-focus);
+  --media-player-seek-color: var(--white);
+  --media-player-seek-time-background: var(--surface-recessed-100);
+  --media-player-seek-time-border-color: var(--white-opacity-20);
+  --range-input-accent-color: var(--media-player-seek-color);
+  --range-input-bubble-background: var(--media-player-seek-time-background);
+  --range-input-bubble-border-color: var(--media-player-seek-time-border-color);
   --surface-elevated-300: var(--grey-1000);
   --surface-recessed-alpha: var(--black-opacity-30);
   --surface-recessed-100: var(--grey-1000);
@@ -446,6 +579,9 @@ html[data-theme="dark"] {
   --badge-background-positive: var(--green-400);
   --badge-background-warning: var(--orange-400);
   --badge-background-attention: var(--red-400);
+  --badge-background-overlay: var(--black-opacity-60);
+  --badge-text-color-overlay: var(--grey-300);
+  --badge-border-overlay: var(--stroke-size-100) var(--stroke-solid) var(--white-opacity-30);
   /* Heading */
   --heading-text-color: var(--grey-100);
   /* Link */
@@ -463,6 +599,15 @@ html[data-theme="dark"] {
   --checkbox-background-disabled: var(--grey-800);
   --checkbox-background-checked-disabled: var(--grey-500);
   --checkbox-icon-color-checked-disabled: var(--grey-900);
+  /* Radio */
+  --radio-background: var(--grey-900);
+  --radio-border-color: var(--form-default-border-color);
+  --radio-border-color-hover: var(--form-default-border-color-hover);
+  --radio-border-color-checked: var(--grey-200);
+  --radio-dot-color-checked: var(--grey-200);
+  --radio-background-disabled: var(--grey-800);
+  --radio-border-color-disabled: var(--grey-600);
+  --radio-dot-color-checked-disabled: var(--grey-500);
   /* Addon */
   --addon-background: var(--grey-1000);
   /* Tabs */
@@ -522,8 +667,10 @@ html[data-theme="dark"] {
   --chip-border-color-active: var(--grey-100);
   --chip-text-color-active: var(--grey-100);
   --chip-icon-fill: var(--white);
+  --chip-filter: drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20));
   --chip-dismiss-action-background: var(--grey-700);
   --chip-dismiss-action-background-hover: var(--white-opacity-0);
+  --chip-dismiss-action-filter: drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-5));
 
   /* Dropdown */
   --dropdown-background: var(--grey-1000);
@@ -536,13 +683,20 @@ html[data-theme="dark"] {
   --progress-track-background: var(--grey-700);
   --progress-loading-bar-100: var(--grey-900);
   --progress-loading-bar-200: var(--grey-1000);
+  --progress-syncing-bar-background: var(--progress-bar-background);
 
   /* Stepper */
-  --stepper-color: var(--blue-500);
+  --stepper-color: var(--white);
   --stepper-background-active: var(--stepper-color);
   --stepper-background-inactive: var(--black);
   --stepper-border-color: var(--stepper-color);
   --stepper-text-color-active: var(--stepper-color);
+  --stepper-icon-color: var(--grey-1100);
+  --stepper-success-color: var(--stepper-color);
+  --stepper-warning-color: var(--orange-300);
+  --stepper-error-color: var(--red-300);
+  --stepper-disabled-color: var(--text-color-optional);
+  --stepper-disabled-opacity: 0.8;
 
   /* Dialog */
   --dialog-background: var(--grey-800);
@@ -581,6 +735,11 @@ html[data-theme="dark"] {
   --action-tertiary-border-focus: var(--stroke-size-200) var(--stroke-solid) var(--action-tertiary-border-color-focus);
   --action-tertiary-border-disabled: var(--stroke-size-200) var(--stroke-solid)
     var(--action-tertiary-border-color-disabled);
+  --action-overlay-border: var(--stroke-size-100) var(--stroke-solid) var(--action-overlay-border-color);
+  --action-overlay-border-hover: var(--stroke-size-100) var(--stroke-solid) var(--action-overlay-border-color-hover);
+  --action-overlay-border-focus: var(--stroke-size-100) var(--stroke-solid) var(--action-overlay-border-color-focus);
+  --action-overlay-border-disabled: var(--stroke-size-100) var(--stroke-solid)
+    var(--action-overlay-border-color-disabled);
   --action-attention-border: var(--stroke-size-200) var(--stroke-solid) var(--action-attention-border-color);
   --action-attention-border-hover: var(--stroke-size-200) var(--stroke-solid) var(--action-attention-border-color-hover);
   --action-attention-border-focus: var(--stroke-size-200) var(--stroke-solid) var(--action-attention-border-color-focus);
@@ -671,7 +830,9 @@ html[data-theme="dark"] {
   --heading-line-height-600: var(--line-height-100);
   /* Alert */
   --alert-radius: var(--radius-100);
-  --alert-padding: var(--space-400);
+  --alert-padding-large: var(--space-400);
+  --alert-padding-medium: var(--space-300);
+  --alert-padding-small: var(--space-200);
   --alert-gap-horizontal-mobile: var(--space-300);
   --alert-gap-horizontal-desktop: var(--space-100);
   /* Messages */
@@ -679,8 +840,56 @@ html[data-theme="dark"] {
   --message-padding: var(--space-400);
   --message-gap-horizontal: var(--space-300);
   --message-gap-vertical: var(--space-100);
+  /* Progress */
+  --progress-radius: var(--space-300);
+  --progress-syncing-width: 30%;
+  --progress-pending-stripe-size: 1rem;
+  /* Stepper */
+  --stepper-dot-size: var(--action-icon-only-size-x-small);
+  --stepper-dot-size-small: calc(var(--stepper-dot-size) - var(--space-050));
+  --stepper-dot-size-x-small: calc(var(--stepper-dot-size-small) - var(--space-050));
   /* Tab */
   --tab-radius: var(--radius-200);
+  --tab-font-size: var(--text-font-size-m);
+  --tab-line-height: var(--text-line-height-m);
+  --tab-font-weight: var(--font-weight-medium);
+  --tab-padding: var(--space-200) calc(var(--space-300) + var(--space-100));
+  --tab-before-slot-padding: var(--space-300);
+  --tab-after-slot-padding: var(--space-300);
+  --tab-min-height: 4.4rem;
+  --tab-gap: var(--space-100);
+  --tab-gap-x-small: var(--space-050);
+  --tab-gap-small: var(--space-100);
+  --tab-gap-large: var(--space-200);
+  --tab-font-size-x-small: var(--text-font-size-xs);
+  --tab-line-height-x-small: var(--text-line-height-xs);
+  --tab-font-weight-x-small: var(--font-weight-semi-bold);
+  --tab-padding-x-small: var(--space-050) var(--space-200);
+  --tab-before-slot-padding-x-small: var(--space-100);
+  --tab-after-slot-padding-x-small: var(--space-100);
+  --tab-min-height-x-small: 2.8rem;
+  --tab-font-size-small: var(--text-font-size-s);
+  --tab-line-height-small: var(--text-line-height-s);
+  --tab-padding-small: calc(var(--space-100) - (var(--stroke-size-100) / 2)) var(--space-300);
+  --tab-before-slot-padding-small: var(--space-200);
+  --tab-after-slot-padding-small: var(--space-200);
+  --tab-min-height-small: 3.6rem;
+  --tab-font-size-large: var(--text-font-size-l);
+  --tab-line-height-large: var(--text-line-height-l);
+  --tab-padding-large: var(--space-300) var(--space-500);
+  --tab-before-slot-padding-large: var(--space-400);
+  --tab-after-slot-padding-large: var(--space-400);
+  --tab-min-height-large: 5.2rem;
+  --tab-edge-padding-extra: var(--space-050);
+  --tab-edge-padding-extra-x-small: var(--space-025);
+  --tab-edge-padding-extra-small: var(--space-050);
+  --tab-edge-padding-extra-large: var(--space-100);
+  --tab-badge-offset: var(--space-025);
+  --tab-badge-offset-large: var(--space-050);
+  --tab-dot-size: 1rem;
+  --tab-dot-gap: var(--space-100);
+  --tab-dot-color: var(--tab-icon);
+  --tab-dot-color-active: var(--tab-icon-active);
   /* Carousel */
   --carousel-radius: var(--radius-300);
   --carousel-tab-position: var(--space-400);
@@ -689,10 +898,28 @@ html[data-theme="dark"] {
   --slat-radius: var(--radius-200);
   /* Checkbox */
   --checkbox-radius: var(--radius-100);
-  --checkbox-size: calc(var(--space-400) + (var(--stroke-size-100) * 3));
+  --checkbox-size: calc(var(--space-500) - var(--stroke-size-500));
+  /* Radio */
+  --radio-size: calc(var(--space-500) - 2px);
 
   /* Chip */
-  --chip-radius: var(--radius-400);
+  --chip-radius: var(--chip-radius-medium);
+  --chip-radius-x-small: var(--radius-300);
+  --chip-radius-small: var(--radius-400);
+  --chip-radius-medium: var(--radius-500);
+  --chip-radius-large: var(--radius-600);
+  --chip-height-x-small: 2.8rem;
+  --chip-height-small: 3.6rem;
+  --chip-height-medium: 4rem;
+  --chip-height-large: 5.2rem;
+  --chip-padding-x-small: 0 var(--space-200);
+  --chip-padding-small: var(--space-100) var(--space-300);
+  --chip-padding-medium: var(--space-100) var(--space-300);
+  --chip-padding-large: var(--space-200) var(--space-400);
+  --chip-gap-x-small: var(--space-100);
+  --chip-gap-small: var(--space-200);
+  --chip-gap-medium: var(--space-200);
+  --chip-gap-large: var(--space-300);
   /* Dropdown */
   --dropdown-radius: var(--radius-100);
   /* Dialog */