@monospaced/set-core 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,4 +1,4 @@
-const pt = /* @__PURE__ */ new Set([
+const bt = /* @__PURE__ */ new Set([
   "area",
   "base",
   "br",
@@ -13,38 +13,38 @@ const pt = /* @__PURE__ */ new Set([
   "track",
   "wbr"
 ]);
-function tt(t) {
+function ot(t) {
   return t.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 }
-function ct(t) {
-  return Object.entries(t).flatMap(([n, e]) => e === !1 || e == null ? [] : e === !0 ? [n] : [`${n}="${tt(String(e))}"`]).join(" ");
+function vt(t) {
+  return Object.entries(t).flatMap(([n, e]) => e === !1 || e == null ? [] : e === !0 ? [n] : [`${n}="${ot(String(e))}"`]).join(" ");
 }
 function h(t) {
-  if (t.kind === "text") return tt(t.value);
+  if (t.kind === "text") return ot(t.value);
   if (t.kind === "raw") return t.html;
-  const n = ct(t.attrs), e = n ? `<${t.tag} ${n}>` : `<${t.tag}>`;
-  if (pt.has(t.tag)) return e;
+  const n = vt(t.attrs), e = n ? `<${t.tag} ${n}>` : `<${t.tag}>`;
+  if (bt.has(t.tag)) return e;
   const i = t.children.map(h).join("");
   return `${e}${i}</${t.tag}>`;
 }
-function q(t) {
+function I(t) {
   return /^[A-Za-z][\w:-]*$/.test(t);
 }
 function k(t) {
   if (t === void 0) return;
   const n = t.trim();
   if (n) {
-    if (!q(n))
+    if (!I(n))
       throw new Error(
         "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
       );
     return n;
   }
 }
-function A(t) {
+function D(t) {
   return t == null ? void 0 : t.trim().replace(/\s+/g, " ") || void 0;
 }
-const et = {
+const dt = {
   adjustment: [
     {
       tag: "g",
@@ -150,6 +150,21 @@ const et = {
       ]
     }
   ],
+  check: [
+    {
+      tag: "g",
+      attrs: {},
+      children: [
+        {
+          tag: "path",
+          attrs: {
+            d: "M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211",
+            "stroke-linecap": "square"
+          }
+        }
+      ]
+    }
+  ],
   "check-circle": [
     {
       tag: "g",
@@ -508,6 +523,20 @@ const et = {
       ]
     }
   ],
+  moon: [
+    {
+      tag: "g",
+      attrs: {},
+      children: [
+        {
+          tag: "path",
+          attrs: {
+            d: "M20.5387 14.8522C20.0408 14.9492 19.5263 15 19 15C14.5817 15 11 11.4183 11 7C11 5.54296 11.3194 4.17663 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C15.9737 21 19.3459 18.4248 20.5387 14.8522Z"
+          }
+        }
+      ]
+    }
+  ],
   "panel-left": [
     {
       tag: "path",
@@ -658,6 +687,49 @@ const et = {
       ]
     }
   ],
+  "sticky-note": [
+    {
+      tag: "g",
+      attrs: {},
+      children: [
+        {
+          tag: "path",
+          attrs: {
+            d: "M20 14H14V20M3 3H21V14L14 21H3V3Z",
+            "stroke-linecap": "square"
+          }
+        },
+        {
+          tag: "path",
+          attrs: {
+            d: "M7 9H17M7 13H10",
+            "stroke-linecap": "square"
+          }
+        }
+      ]
+    }
+  ],
+  sunny: [
+    {
+      tag: "g",
+      attrs: {},
+      children: [
+        {
+          tag: "path",
+          attrs: {
+            d: "M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z"
+          }
+        },
+        {
+          tag: "path",
+          attrs: {
+            d: "M12 21V22M12 2V3M3 12H2M22 12H21M5.63603 18.3635L4.92892 19.0706M19.0711 4.92848L18.364 5.63559M5.63601 5.63563L4.9289 4.92852M19.071 19.0707L18.3639 18.3636",
+            "stroke-linecap": "square"
+          }
+        }
+      ]
+    }
+  ],
   swap: [
     {
       tag: "g",
@@ -703,13 +775,13 @@ const et = {
       ]
     }
   ]
-}, ve = Object.keys(et);
-function it(t) {
+}, Ae = Object.keys(dt);
+function st(t) {
   return t.map((n) => ({
     kind: "element",
     tag: n.tag,
     attrs: n.attrs,
-    children: n.children ? it(n.children) : []
+    children: n.children ? st(n.children) : []
   }));
 }
 function H({
@@ -720,7 +792,7 @@ function H({
   size: r = "md",
   title: a
 }) {
-  const o = et[i];
+  const o = dt[i];
   if (!o)
     throw new Error(`Unknown icon name: ${i}`);
   const d = k(n), p = a?.trim();
@@ -734,7 +806,7 @@ function H({
     tag: "title",
     attrs: { id: s },
     children: [{ kind: "text", value: p }]
-  }), l.push(...it(o)), {
+  }), l.push(...st(o)), {
     kind: "element",
     tag: "svg",
     attrs: {
@@ -755,10 +827,10 @@ function H({
     children: l
   };
 }
-function ut(t) {
+function ft(t) {
   return h(H(t));
 }
-const fe = {
+const _e = {
   name: "icon",
   description: "Use `icon` to render a Set icon.",
   output: { element: "svg", class: "set-icon" },
@@ -872,7 +944,7 @@ const fe = {
     ]
   }
 };
-function G(t) {
+function tt(t) {
   const {
     appearance: n = "outline",
     controls: e,
@@ -886,22 +958,22 @@ function G(t) {
     iconPlacement: l = "start",
     label: c,
     labelVisibility: u = "visible",
-    name: b,
+    name: g,
     size: v = "md",
     tone: m = "default",
     type: f,
-    value: z
-  } = t, S = p || void 0, g = !!S;
-  if (u !== "visible" && !g)
+    value: E
+  } = t, S = p || void 0, b = !!S;
+  if (u !== "visible" && !b)
     throw new Error("labelVisibility requires icon when label is not visible.");
-  const y = g && S ? {
+  const y = b && S ? {
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
     children: [
       {
         kind: "raw",
-        html: ut({
+        html: ft({
           ariaHidden: !0,
           mirrored: s,
           name: S,
@@ -930,17 +1002,17 @@ function G(t) {
       disabled: !!i,
       form: a || void 0,
       id: d || void 0,
-      name: b || void 0,
+      name: g || void 0,
       type: f || "button",
-      value: z || void 0
+      value: E || void 0
     },
     children: y ? l === "end" ? [w, y] : [y, w] : [w]
   };
 }
-function K(t) {
-  return h(G(t));
+function et(t) {
+  return h(tt(t));
 }
-const ye = {
+const De = {
   name: "button",
   description: "Use `button` to let users trigger actions.",
   output: { element: "button", class: "set-button" },
@@ -1123,10 +1195,10 @@ const ye = {
       }
     ]
   }
-}, O = "set-alert", nt = "set-alert-before-dismiss", rt = "set-alert-dismiss", N = "Dismiss alert";
-function ht(t, n) {
+}, P = "set-alert", lt = "set-alert-before-dismiss", pt = "set-alert-dismiss", N = "Dismiss alert";
+function yt(t, n) {
   const e = n.createElement("div");
-  return e.setAttribute("data-part", "close"), e.innerHTML = K({
+  return e.setAttribute("data-part", "close"), e.innerHTML = et({
     appearance: "text",
     icon: "close",
     label: t,
@@ -1135,7 +1207,7 @@ function ht(t, n) {
     tone: "neutral"
   }), e;
 }
-function kt(t) {
+function wt(t) {
   switch (t) {
     case "success":
       return "check-circle";
@@ -1143,14 +1215,16 @@ function kt(t) {
       return "error-triangle";
     case "error":
       return "error-circle";
-    default:
+    case "info":
       return "info-circle";
+    default:
+      return "sticky-note";
   }
 }
-function mt(t) {
+function St(t) {
   return t === "warning" || t === "error" ? "alert" : "status";
 }
-function gt({
+function xt({
   dismissible: t,
   dismissibleLabel: n = N,
   id: e,
@@ -1173,7 +1247,7 @@ function gt({
     children: [{ kind: "text", value: r }]
   }), {
     kind: "element",
-    tag: O,
+    tag: P,
     attrs: {
       class: "set-alert",
       "data-dismissible": t,
@@ -1182,7 +1256,7 @@ function gt({
       "data-size": a,
       "data-tone": o || void 0,
       id: p,
-      role: mt(o)
+      role: St(o)
     },
     children: [
       {
@@ -1192,7 +1266,7 @@ function gt({
         children: [
           H({
             ariaHidden: !0,
-            name: kt(o),
+            name: wt(o),
             size: a
           })
         ]
@@ -1206,24 +1280,24 @@ function gt({
     ]
   };
 }
-function we(t) {
-  return h(gt(t));
+function He(t) {
+  return h(xt(t));
 }
-function bt() {
-  if (customElements.get(O)) return;
+function Et() {
+  if (customElements.get(P)) return;
   class t extends HTMLElement {
     #t = (e) => {
       const i = e.target;
       if (!(i instanceof Element) || !i.closest('[data-part="close"]')) return;
       const r = new CustomEvent(
-        nt,
+        lt,
         {
           bubbles: !0,
           cancelable: !0
         }
       );
       this.dispatchEvent(r) && (this.dispatchEvent(
-        new CustomEvent(rt, {
+        new CustomEvent(pt, {
           bubbles: !0
         })
       ), this.remove());
@@ -1236,20 +1310,20 @@ function bt() {
     }
     #e() {
       this.querySelector('[data-part="close"]') || this.append(
-        ht(
+        yt(
           this.getAttribute("data-dismissible-label") ?? N,
           this.ownerDocument
         )
       );
     }
   }
-  customElements.define(O, t);
+  customElements.define(P, t);
 }
-const Se = {
+const Ne = {
   name: "alert",
   description: "Use `alert` to surface short, important messages.",
   output: {
-    element: O,
+    element: P,
     class: "set-alert"
   },
   content: {
@@ -1300,12 +1374,12 @@ const Se = {
     }
   },
   events: {
-    [nt]: {
+    [lt]: {
       bubbles: !0,
       cancelable: !0,
       description: "Fired before the alert is removed by a dismiss action. Call `preventDefault()` to keep the alert mounted."
     },
-    [rt]: {
+    [pt]: {
       bubbles: !0,
       description: "Fired after the alert has been removed by an allowed dismiss action."
     }
@@ -1394,11 +1468,11 @@ const Se = {
     ]
   }
 };
-function vt(t) {
+function zt(t) {
   if (t)
     return t === !0 ? !0 : t;
 }
-function at(t) {
+function ct(t) {
   const {
     appearance: n = "text",
     current: e,
@@ -1412,12 +1486,12 @@ function at(t) {
     rel: l,
     size: c = "md",
     target: u,
-    tone: b = "default",
+    tone: g = "default",
     underline: v
   } = t, m = k(a), f = o?.trim() || void 0;
   if (s !== "visible" && !!!f)
     throw new Error("labelVisibility requires icon when label is not visible.");
-  const S = vt(i), g = f ? {
+  const S = zt(i), b = f ? {
     kind: "element",
     tag: "span",
     attrs: { class: "icon-wrapper" },
@@ -1437,7 +1511,7 @@ function at(t) {
       "data-appearance": n === "text" ? void 0 : n,
       "data-label-visibility": s === "visible" ? void 0 : s,
       "data-size": c,
-      "data-tone": b === "neutral" ? "neutral" : void 0,
+      "data-tone": g === "neutral" ? "neutral" : void 0,
       "data-underline": v && n === "text" ? !0 : void 0,
       download: S,
       href: r,
@@ -1445,13 +1519,13 @@ function at(t) {
       rel: S ? void 0 : l || void 0,
       target: S ? void 0 : u || void 0
     },
-    children: g ? d === "end" ? [y, g] : [g, y] : [y]
+    children: b ? d === "end" ? [y, b] : [b, y] : [y]
   };
 }
-function xe(t) {
-  return h(at(t));
+function Ve(t) {
+  return h(ct(t));
 }
-const Ee = {
+const Oe = {
   name: "link",
   description: "Use `link` to navigate to another page or resource.",
   output: { element: "a", class: "set-link" },
@@ -1638,10 +1712,10 @@ const Ee = {
       }
     ]
   }
-}, B = "set-banner", ot = "set-banner-before-dismiss", dt = "set-banner-dismiss", P = "Dismiss banner";
-function ft(t, n) {
+}, B = "set-banner", ut = "set-banner-before-dismiss", ht = "set-banner-dismiss", R = "Dismiss banner";
+function Ct(t, n) {
   const e = n.createElement("div");
-  return e.setAttribute("data-part", "close"), e.innerHTML = K({
+  return e.setAttribute("data-part", "close"), e.innerHTML = et({
     appearance: "text",
     icon: "close",
     label: t,
@@ -1650,20 +1724,20 @@ function ft(t, n) {
     tone: "neutral"
   }), e;
 }
-function yt({
+function Lt({
   actionHref: t,
   actionLabel: n,
   dismissible: e = !0,
-  dismissibleLabel: i = P,
+  dismissibleLabel: i = R,
   id: r,
   message: a,
   tone: o
 }) {
   if (!!t != !!n)
     throw new Error("actionHref and actionLabel must be provided together.");
-  const d = k(r), p = i.trim() === "" ? P : i, s = [{ kind: "text", value: a }];
+  const d = k(r), p = i.trim() === "" ? R : i, s = [{ kind: "text", value: a }];
   return t && n && (s.push({ kind: "text", value: " " }), s.push(
-    at({
+    ct({
       href: t,
       label: n,
       underline: !0
@@ -1690,24 +1764,24 @@ function yt({
     ]
   };
 }
-function ze(t) {
-  return h(yt(t));
+function Pe(t) {
+  return h(Lt(t));
 }
-function wt() {
+function Mt() {
   if (customElements.get(B)) return;
   class t extends HTMLElement {
     #t = (e) => {
       const i = e.target;
       if (!(i instanceof Element) || !i.closest('[data-part="close"]')) return;
       const r = new CustomEvent(
-        ot,
+        ut,
         {
           bubbles: !0,
           cancelable: !0
         }
       );
       this.dispatchEvent(r) && (this.dispatchEvent(
-        new CustomEvent(dt, {
+        new CustomEvent(ht, {
           bubbles: !0
         })
       ), this.remove());
@@ -1720,8 +1794,8 @@ function wt() {
     }
     #e() {
       this.querySelector('[data-part="close"]') || this.append(
-        ft(
-          this.getAttribute("data-dismissible-label") ?? P,
+        Ct(
+          this.getAttribute("data-dismissible-label") ?? R,
           this.ownerDocument
         )
       );
@@ -1729,7 +1803,7 @@ function wt() {
   }
   customElements.define(B, t);
 }
-const Ce = {
+const Be = {
   name: "banner",
   description: "Use `banner` to display a prominent site-wide message.",
   output: { element: B, class: "set-banner" },
@@ -1751,7 +1825,7 @@ const Ce = {
       type: { kind: "boolean" }
     },
     dismissibleLabel: {
-      default: P,
+      default: R,
       description: "Accessible label for the dismiss control.",
       ignoredWhen: "`dismissible` is false",
       type: { kind: "string" }
@@ -1769,17 +1843,17 @@ const Ce = {
       description: "Semantic tone.",
       type: {
         kind: "enum",
-        values: ["info", "success", "warning", "error"]
+        values: ["info", "warning", "error"]
       }
     }
   },
   events: {
-    [ot]: {
+    [ut]: {
       bubbles: !0,
       cancelable: !0,
       description: "Fired before the banner is removed by a dismiss action. Call `preventDefault()` to keep the banner mounted."
     },
-    [dt]: {
+    [ht]: {
       bubbles: !0,
       description: "Fired after the banner has been removed by an allowed dismiss action."
     }
@@ -1817,8 +1891,219 @@ const Ce = {
       }
     ]
   }
-}, R = "set-menu", st = "set-menu-choose";
-function St({
+}, W = "set-lightswitch", mt = "set-lightswitch-change", K = "set-theme", Q = "Switch to dark theme", X = "Switch to light theme";
+function qt(t) {
+  return t === "dark" ? "light" : "dark";
+}
+function It(t) {
+  return t === "dark" ? "moon" : "sunny";
+}
+function nt(t, n) {
+  return {
+    kind: "element",
+    tag: "span",
+    attrs: { class: "option", "data-option": t },
+    children: [
+      {
+        kind: "element",
+        tag: "span",
+        attrs: { class: "icon-wrapper" },
+        children: [
+          H({
+            ariaHidden: !0,
+            name: It(t),
+            size: "fill"
+          })
+        ]
+      },
+      {
+        kind: "element",
+        tag: "span",
+        attrs: { class: "label" },
+        children: [{ kind: "text", value: n }]
+      }
+    ]
+  };
+}
+function Tt({
+  appearance: t = "text",
+  id: n,
+  labelDark: e = Q,
+  labelLight: i = X,
+  size: r = "md"
+}) {
+  const a = k(n), o = e.trim() === "" ? Q : e, d = i.trim() === "" ? X : i;
+  return {
+    kind: "element",
+    tag: W,
+    attrs: {
+      class: "set-lightswitch",
+      id: a
+    },
+    children: [
+      {
+        kind: "element",
+        tag: "button",
+        attrs: {
+          class: "toggle",
+          "data-appearance": t,
+          "data-size": r,
+          type: "button"
+        },
+        children: [
+          nt("dark", o),
+          nt("light", d)
+        ]
+      }
+    ]
+  };
+}
+function Re(t) {
+  return h(Tt(t));
+}
+function At() {
+  if (customElements.get(W)) return;
+  class t extends HTMLElement {
+    #t = (e) => {
+      const i = e.target;
+      if (!(i instanceof Element) || !i.closest("button")) return;
+      const r = qt(this.#u());
+      r === this.#r() ? this.#d() : this.#n(r), this.#a(), this.dispatchEvent(
+        new CustomEvent(mt, {
+          bubbles: !0,
+          detail: { stored: !!this.#i(), theme: r }
+        })
+      );
+    };
+    connectedCallback() {
+      this.removeEventListener("click", this.#t), this.addEventListener("click", this.#t), this.#i() && this.#a();
+    }
+    disconnectedCallback() {
+      this.removeEventListener("click", this.#t);
+    }
+    #e() {
+      try {
+        return this.ownerDocument.defaultView?.localStorage;
+      } catch {
+        return;
+      }
+    }
+    #i() {
+      try {
+        const e = this.#e()?.getItem(K);
+        return e === "light" || e === "dark" ? e : void 0;
+      } catch {
+        return;
+      }
+    }
+    #n(e) {
+      try {
+        this.#e()?.setItem(K, e);
+      } catch {
+      }
+    }
+    #d() {
+      try {
+        this.#e()?.removeItem(K);
+      } catch {
+      }
+    }
+    #r() {
+      const e = this.ownerDocument.defaultView;
+      return !e || typeof e.matchMedia != "function" ? "light" : e.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    #c() {
+      return this.closest(".set");
+    }
+    #s() {
+      const e = this.#c()?.getAttribute("data-set-theme");
+      return e === "light" || e === "dark" ? e : void 0;
+    }
+    #u() {
+      return this.#i() ?? this.#s() ?? this.#r();
+    }
+    #a() {
+      const e = this.#c();
+      if (!e) return;
+      const i = this.#i();
+      i ? e.setAttribute("data-set-theme", i) : e.removeAttribute("data-set-theme");
+    }
+  }
+  customElements.define(W, t);
+}
+const We = {
+  name: "lightswitch",
+  description: "Use `lightswitch` to let users toggle between light and dark themes.",
+  output: { element: W, class: "set-lightswitch" },
+  content: { kind: "none" },
+  props: {
+    appearance: {
+      default: "text",
+      description: "Visual appearance of the toggle button.",
+      type: { kind: "enum", values: ["outline", "solid", "text"] }
+    },
+    id: {
+      description: "DOM id.",
+      type: { kind: "string" }
+    },
+    labelDark: {
+      default: Q,
+      description: "Accessible label of the switch-to-dark action.",
+      type: { kind: "string" }
+    },
+    labelLight: {
+      default: X,
+      description: "Accessible label of the switch-to-light action.",
+      type: { kind: "string" }
+    },
+    size: {
+      default: "md",
+      description: "Size variant.",
+      type: { kind: "enum", values: ["sm", "md", "lg"] }
+    }
+  },
+  events: {
+    [mt]: {
+      bubbles: !0,
+      description: "Fired after activation applies a theme. `detail.theme` is the theme switched to; `detail.stored` is false when the change cleared the override to follow the system preference again."
+    }
+  },
+  rules: {
+    attributes: [
+      {
+        target: { on: "host" },
+        attribute: "id",
+        condition: { kind: "when-non-empty", prop: "id" },
+        value: { kind: "prop", prop: "id" }
+      },
+      {
+        target: { on: "descendant", selector: "button" },
+        attribute: "class",
+        condition: { kind: "always" },
+        value: { kind: "literal", text: "toggle" }
+      },
+      {
+        target: { on: "descendant", selector: "button" },
+        attribute: "data-appearance",
+        condition: { kind: "always" },
+        value: { kind: "prop", prop: "appearance" }
+      },
+      {
+        target: { on: "descendant", selector: "button" },
+        attribute: "data-size",
+        condition: { kind: "always" },
+        value: { kind: "prop", prop: "size" }
+      },
+      {
+        target: { on: "descendant", selector: "button" },
+        attribute: "type",
+        condition: { kind: "always" },
+        value: { kind: "literal", text: "button" }
+      }
+    ]
+  }
+}, U = "set-menu", kt = "set-menu-choose";
+function _t({
   align: t = "start",
   id: n,
   items: e,
@@ -1832,27 +2117,27 @@ function St({
   const s = n.trim();
   if (!s)
     throw new Error("id must be a non-empty string.");
-  if (!q(s))
+  if (!I(s))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
   if (!Array.isArray(e))
     throw new Error("items must be an array.");
-  const l = `${s}-button`, c = `${s}-popup`, u = e.map((b) => ({
+  const l = `${s}-button`, c = `${s}-popup`, u = e.map((g) => ({
     kind: "element",
     tag: "button",
     attrs: {
-      "aria-disabled": b.disabled ? "true" : void 0,
-      "data-item-id": b.id || void 0,
+      "aria-disabled": g.disabled ? "true" : void 0,
+      "data-item-id": g.id || void 0,
       role: "menuitem",
       tabindex: "-1",
       type: "button"
     },
-    children: [{ kind: "text", value: b.label }]
+    children: [{ kind: "text", value: g.label }]
   }));
   return {
     kind: "element",
-    tag: R,
+    tag: U,
     attrs: {
       class: "set-menu",
       "data-align": t === "start" ? void 0 : t,
@@ -1865,7 +2150,7 @@ function St({
         tag: "div",
         attrs: { "data-part": "trigger" },
         children: [
-          G({
+          tt({
             appearance: "outline",
             controls: c,
             disclosure: !0,
@@ -1897,61 +2182,61 @@ function St({
     ]
   };
 }
-function Me(t) {
-  return h(St(t));
+function Ue(t) {
+  return h(_t(t));
 }
-function xt() {
-  if (customElements.get(R)) return;
+function Dt() {
+  if (customElements.get(U)) return;
   class t extends HTMLElement {
     #t;
     #e;
     #i;
     #n;
     connectedCallback() {
-      this.#l(), this.#r(!1), this.#m();
+      this.#p(), this.#o(!1), this.#k();
     }
     disconnectedCallback() {
-      this.#l();
+      this.#p();
     }
-    #a() {
+    #d() {
       return this.querySelector(
         '[data-part="trigger"] .set-button'
       );
     }
-    #o() {
+    #r() {
       return this.querySelector('[role="menu"]');
     }
-    #k() {
+    #c() {
       return Array.from(
         this.querySelectorAll('[role="menuitem"]')
       );
     }
-    #p(e) {
+    #s(e) {
       return e.getAttribute("aria-disabled") === "true";
     }
-    #c() {
+    #u() {
       return this.hasAttribute("data-open");
     }
-    #d(e) {
-      const i = this.#k();
+    #a(e) {
+      const i = this.#c();
       if (i.length === 0) return;
       const r = (e % i.length + i.length) % i.length;
       i[r]?.focus();
     }
-    #s(e = 0) {
-      const i = this.#o(), r = this.#a();
-      !i || !r || (i.hidden = !1, this.setAttribute("data-open", ""), r.setAttribute("aria-expanded", "true"), this.#d(e));
+    #l(e = 0) {
+      const i = this.#r(), r = this.#d();
+      !i || !r || (i.hidden = !1, this.setAttribute("data-open", ""), r.setAttribute("aria-expanded", "true"), this.#a(e));
     }
-    #r(e = !1) {
-      const i = this.#o(), r = this.#a();
+    #o(e = !1) {
+      const i = this.#r(), r = this.#d();
       !i || !r || (i.hidden = !0, this.removeAttribute("data-open"), r.setAttribute("aria-expanded", "false"), e && r.focus());
     }
-    #u(e) {
+    #h(e) {
       const r = Array.from(
         this.querySelectorAll('[role="menuitem"]')
       ).indexOf(e);
       this.dispatchEvent(
-        new CustomEvent(st, {
+        new CustomEvent(kt, {
           bubbles: !0,
           detail: {
             id: e.getAttribute("data-item-id") || void 0,
@@ -1961,65 +2246,65 @@ function xt() {
         })
       );
     }
-    #m() {
+    #k() {
       this.#t = (e) => {
         const i = e.target;
         if (!(i instanceof Element)) return;
         if (i.closest('[data-part="trigger"] .set-button')) {
-          if (this.#c()) {
-            this.#r();
+          if (this.#u()) {
+            this.#o();
             return;
           }
-          this.#s(0);
+          this.#l(0);
           return;
         }
         const r = i.closest('[role="menuitem"]');
         if (r && this.contains(r)) {
-          this.#p(r) || (this.#u(r), this.#r(!0));
+          this.#s(r) || (this.#h(r), this.#o(!0));
           return;
         }
       }, this.#e = (e) => {
         const i = e.target;
-        i instanceof Node && this.#c() && !this.contains(i) && this.#r();
+        i instanceof Node && this.#u() && !this.contains(i) && this.#o();
       }, this.#n = (e) => {
-        const i = this.#a(), r = this.#o();
+        const i = this.#d(), r = this.#r();
         if (!i || !r) return;
-        if ((e.key === "Escape" || e.key === "Esc") && this.#c()) {
-          e.preventDefault(), this.#r(!0);
+        if ((e.key === "Escape" || e.key === "Esc") && this.#u()) {
+          e.preventDefault(), this.#o(!0);
           return;
         }
-        const a = this.ownerDocument.activeElement, o = this.#k(), d = o.indexOf(a);
+        const a = this.ownerDocument.activeElement, o = this.#c(), d = o.indexOf(a);
         if (a === i) {
-          (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#s(0)), e.key === "ArrowDown" && (e.preventDefault(), this.#s(0)), e.key === "ArrowUp" && (e.preventDefault(), this.#s(o.length - 1));
+          (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.#l(0)), e.key === "ArrowDown" && (e.preventDefault(), this.#l(0)), e.key === "ArrowUp" && (e.preventDefault(), this.#l(o.length - 1));
           return;
         }
         if (r.contains(a)) {
           if (a instanceof HTMLButtonElement && (e.key === "Enter" || e.key === " ")) {
-            e.preventDefault(), this.#p(a) || (this.#u(a), this.#r(!0));
+            e.preventDefault(), this.#s(a) || (this.#h(a), this.#o(!0));
             return;
           }
-          e.key === "ArrowDown" && (e.preventDefault(), this.#d(d + 1)), e.key === "ArrowUp" && (e.preventDefault(), this.#d(d - 1)), e.key === "Home" && (e.preventDefault(), this.#d(0)), e.key === "End" && (e.preventDefault(), this.#d(o.length - 1)), e.key === "Tab" && this.#r(!1);
+          e.key === "ArrowDown" && (e.preventDefault(), this.#a(d + 1)), e.key === "ArrowUp" && (e.preventDefault(), this.#a(d - 1)), e.key === "Home" && (e.preventDefault(), this.#a(0)), e.key === "End" && (e.preventDefault(), this.#a(o.length - 1)), e.key === "Tab" && this.#o(!1);
         }
       }, this.#i = (e) => {
         const i = e.relatedTarget;
         if (!(i instanceof Node)) {
-          this.#r();
+          this.#o();
           return;
         }
-        this.contains(i) || this.#r();
+        this.contains(i) || this.#o();
       }, this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#n), this.addEventListener("focusout", this.#i), this.ownerDocument.addEventListener("click", this.#e);
     }
-    #l() {
+    #p() {
       this.#t && this.removeEventListener("click", this.#t), this.#e && this.ownerDocument.removeEventListener("click", this.#e), this.#n && this.removeEventListener("keydown", this.#n), this.#i && this.removeEventListener("focusout", this.#i), this.#t = void 0, this.#e = void 0, this.#i = void 0, this.#n = void 0;
     }
   }
-  customElements.define(R, t);
+  customElements.define(U, t);
 }
-const Le = {
+const $e = {
   name: "menu",
   description: "Use `menu` to show a list of actions from a trigger button.",
   output: {
-    element: R,
+    element: U,
     class: "set-menu"
   },
   content: {
@@ -2093,7 +2378,7 @@ const Le = {
     }
   },
   events: {
-    [st]: {
+    [kt]: {
       bubbles: !0,
       description: "Fired when a menu item is activated.",
       detail: "{ id?: string; index: number; label: string }"
@@ -2153,15 +2438,15 @@ const Le = {
       }
     ]
   }
-}, j = "Menu";
-function Et({
+}, Y = "Menu";
+function Ht({
   controlsId: t,
   expanded: n,
   id: e,
-  label: i = j,
+  label: i = Y,
   size: r = "md"
 } = {}) {
-  const a = k(e), o = i.trim() === "" ? j : i;
+  const a = k(e), o = i.trim() === "" ? Y : i;
   return {
     kind: "element",
     tag: "button",
@@ -2196,10 +2481,10 @@ function Et({
     ]
   };
 }
-function zt(t = {}) {
-  return h(Et(t));
+function Nt(t = {}) {
+  return h(Ht(t));
 }
-const qe = {
+const Ge = {
   name: "expander",
   description: "Use `expander` as a toggle for disclosure regions such as menus.",
   output: { element: "button", class: "set-expander" },
@@ -2219,7 +2504,7 @@ const qe = {
       type: { kind: "string" }
     },
     label: {
-      default: j,
+      default: Y,
       description: "Accessible label.",
       type: { kind: "text" }
     },
@@ -2264,8 +2549,8 @@ const qe = {
       }
     ]
   }
-}, W = "set-nav", Y = "data-set-scroll-locked";
-function Ct({
+}, $ = "set-nav", rt = "data-set-scroll-locked";
+function Vt({
   collapsible: t,
   contentId: n,
   expanderLabel: e,
@@ -2280,7 +2565,7 @@ function Ct({
     throw new Error(
       "contentId must be a non-empty string when collapsible is set."
     );
-  if (l && !q(l))
+  if (l && !I(l))
     throw new Error(
       "contentId must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
@@ -2303,7 +2588,7 @@ function Ct({
   }));
   return {
     kind: "element",
-    tag: W,
+    tag: $,
     attrs: {
       class: "set-nav",
       "data-collapsible": t,
@@ -2342,79 +2627,79 @@ function Ct({
     ]
   };
 }
-function Ie(t) {
-  return h(Ct(t));
+function Ze(t) {
+  return h(Vt(t));
 }
-function Mt() {
-  if (customElements.get(W)) return;
+function Ot() {
+  if (customElements.get($)) return;
   class t extends HTMLElement {
     #t;
     #e;
     #i;
     #n;
     connectedCallback() {
-      this.#r(), this.#u(), this.#k(), this.#c(), this.#d();
+      this.#o(), this.#h(), this.#c(), this.#u(), this.#a();
     }
     disconnectedCallback() {
-      this.#p(!1), this.#r(), this.#u();
+      this.#s(!1), this.#o(), this.#h();
     }
-    #a() {
+    #d() {
       return this.hasAttribute("data-collapsible") ? this.querySelector(".nav") : null;
     }
-    #o() {
+    #r() {
       return this.querySelector(
         '[data-part="expander"] .set-expander'
       );
     }
-    #k() {
-      const e = this.#a();
+    #c() {
+      const e = this.#d();
       if (!e || e.querySelector('[data-part="expander"]')) return;
       const i = e.querySelector(".content");
       i && e.insertAdjacentHTML(
         "afterbegin",
-        `<div data-part="expander">${zt({
+        `<div data-part="expander">${Nt({
           controlsId: i.id || void 0,
           label: this.getAttribute("data-expander-label") || void 0,
           size: this.getAttribute("data-size") === "sm" ? "md" : "lg"
         })}</div>`
       );
     }
-    #p(e) {
-      const i = this.#o();
-      !i || i.getAttribute("aria-expanded") === "true" === e || (i.setAttribute("aria-expanded", e ? "true" : "false"), this.#s(e));
+    #s(e) {
+      const i = this.#r();
+      !i || i.getAttribute("aria-expanded") === "true" === e || (i.setAttribute("aria-expanded", e ? "true" : "false"), this.#l(e));
     }
-    #c() {
+    #u() {
       this.#t = (e) => {
         const i = e.target;
         if (!(i instanceof Element) || !i.closest('[data-part="expander"] .set-expander')) return;
-        const r = this.#o();
-        r && this.#p(r.getAttribute("aria-expanded") !== "true");
+        const r = this.#r();
+        r && this.#s(r.getAttribute("aria-expanded") !== "true");
       }, this.addEventListener("click", this.#t);
     }
-    #d() {
-      const e = this.#a(), i = this.ownerDocument.defaultView;
+    #a() {
+      const e = this.#d(), i = this.ownerDocument.defaultView;
       if (!e || !i || (this.#i = (a) => {
-        a.key !== "Escape" && a.key !== "Esc" || this.#p(!1);
+        a.key !== "Escape" && a.key !== "Esc" || this.#s(!1);
       }, i.addEventListener("keydown", this.#i), this.getAttribute("data-collapsible") !== "belowTablet") || typeof i.matchMedia != "function") return;
       const r = i.matchMedia("(min-width: 48em)");
       this.#e = r, this.#n = (a) => {
-        a.matches && this.#p(!1);
+        a.matches && this.#s(!1);
       }, r.addEventListener("change", this.#n);
     }
-    #s(e) {
+    #l(e) {
       const i = this.ownerDocument.documentElement;
       if (i) {
         if (e) {
-          i.setAttribute(Y, "");
+          i.setAttribute(rt, "");
           return;
         }
-        i.removeAttribute(Y);
+        i.removeAttribute(rt);
       }
     }
-    #r() {
+    #o() {
       this.#t && (this.removeEventListener("click", this.#t), this.#t = void 0);
     }
-    #u() {
+    #h() {
       const e = this.ownerDocument.defaultView;
       this.#i && e && e.removeEventListener("keydown", this.#i), this.#e && this.#n && this.#e.removeEventListener(
         "change",
@@ -2422,12 +2707,12 @@ function Mt() {
       ), this.#i = void 0, this.#n = void 0, this.#e = void 0;
     }
   }
-  customElements.define(W, t);
+  customElements.define($, t);
 }
-const Te = {
+const Fe = {
   name: "nav",
   description: "Use `nav` to render a primary navigation list.",
-  output: { element: W, class: "set-nav" },
+  output: { element: $, class: "set-nav" },
   content: { kind: "structured", prop: "items" },
   props: {
     items: {
@@ -2539,8 +2824,8 @@ const Te = {
       }
     ]
   }
-}, U = "set-range";
-function Lt({
+}, G = "set-range";
+function Pt({
   description: t,
   disabled: n,
   id: e,
@@ -2553,10 +2838,10 @@ function Lt({
   step: s,
   value: l
 }) {
-  const c = e.trim(), u = t?.trim(), b = d?.trim();
+  const c = e.trim(), u = t?.trim(), g = d?.trim();
   if (!c)
     throw new Error("id must be a non-empty string.");
-  if (!q(c))
+  if (!I(c))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
@@ -2590,7 +2875,7 @@ function Lt({
         id: c,
         max: a != null ? String(a) : void 0,
         min: o != null ? String(o) : void 0,
-        name: b || void 0,
+        name: g || void 0,
         step: s != null ? String(s) : void 0,
         type: "range",
         value: l != null ? String(l) : void 0
@@ -2605,7 +2890,7 @@ function Lt({
     children: [{ kind: "text", value: u }]
   }), {
     kind: "element",
-    tag: U,
+    tag: G,
     attrs: {
       class: "set-range",
       "data-inline-size": i === "fit" ? "fit" : void 0,
@@ -2614,11 +2899,11 @@ function Lt({
     children: m
   };
 }
-function Ae(t) {
-  return h(Lt(t));
+function je(t) {
+  return h(Pt(t));
 }
-function qt() {
-  if (customElements.get(U)) return;
+function Bt() {
+  if (customElements.get(G)) return;
   class t extends HTMLElement {
     #t;
     #e = (e) => {
@@ -2626,10 +2911,10 @@ function qt() {
       i instanceof HTMLInputElement && i.matches(".range") && this.#i();
     };
     connectedCallback() {
-      this.removeEventListener("input", this.#e), this.#a(), this.#i(), this.addEventListener("input", this.#e);
+      this.removeEventListener("input", this.#e), this.#d(), this.#i(), this.addEventListener("input", this.#e);
     }
     disconnectedCallback() {
-      this.removeEventListener("input", this.#e), this.#o();
+      this.removeEventListener("input", this.#e), this.#r();
     }
     #i() {
       const e = this.querySelector(".range"), i = this.querySelector(".output");
@@ -2647,10 +2932,10 @@ function qt() {
     // not fire an `input` event, so the output wouldn't track it. Override
     // the instance's `value` accessor to sync the output on set, restoring
     // the prototype behaviour on disconnect.
-    #a() {
+    #d() {
       const e = this.querySelector(".range");
       if (!e || e === this.#t) return;
-      this.#o();
+      this.#r();
       const i = Object.getOwnPropertyDescriptor(
         HTMLInputElement.prototype,
         "value"
@@ -2668,16 +2953,16 @@ function qt() {
         }
       }), this.#t = e;
     }
-    #o() {
+    #r() {
       this.#t && (delete this.#t.value, this.#t = void 0);
     }
   }
-  customElements.define(U, t);
+  customElements.define(G, t);
 }
-const _e = {
+const Ke = {
   name: "range",
   description: "Use `range` to let users pick a numeric value along a scale.",
-  output: { element: U, class: "set-range" },
+  output: { element: G, class: "set-range" },
   content: { kind: "text", prop: "label" },
   props: {
     description: {
@@ -2806,9 +3091,9 @@ const _e = {
       }
     ]
   }
-}, $ = "set-sidebar", It = "(min-width: 68em)", T = "Collapse sidebar", F = "Open sidebar";
-function Tt(t, n) {
-  return `<div data-part="close">${K({
+}, Z = "set-sidebar", Rt = "(min-width: 68em)", _ = "Collapse sidebar", J = "Open sidebar";
+function Wt(t, n) {
+  return `<div data-part="close">${et({
     appearance: "text",
     icon: "panel-left",
     iconMirrored: "rtl",
@@ -2819,21 +3104,21 @@ function Tt(t, n) {
     type: "button"
   })}</div>`;
 }
-function At({
+function Ut({
   aboveNotebook: t = "persistent",
   buttonSize: n = "md",
   children: e,
-  collapseLabel: i = T,
+  collapseLabel: i = _,
   footer: r,
   header: a,
   id: o,
   surface: d,
-  triggerLabel: p = F
+  triggerLabel: p = J
 }) {
-  const s = o.trim(), l = i.trim() || T, c = p.trim() || F;
+  const s = o.trim(), l = i.trim() || _, c = p.trim() || J;
   if (!s)
     throw new Error("id must be a non-empty string.");
-  if (!q(s))
+  if (!I(s))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
@@ -2857,14 +3142,14 @@ function At({
     attrs: { class: "footer" },
     children: [{ kind: "raw", html: r }]
   });
-  const b = `${s}-panel`;
+  const g = `${s}-panel`;
   return {
     kind: "element",
-    tag: $,
+    tag: Z,
     attrs: {
       class: "set-sidebar",
       "data-above-notebook": t,
-      "data-collapse-label": l !== T ? l : void 0,
+      "data-collapse-label": l !== _ ? l : void 0,
       "data-button-size": n,
       id: s
     },
@@ -2874,9 +3159,9 @@ function At({
         tag: "div",
         attrs: { "data-part": "trigger" },
         children: [
-          G({
+          tt({
             appearance: "text",
-            controls: b,
+            controls: g,
             disclosure: !0,
             icon: "panel-left",
             iconMirrored: "rtl",
@@ -2894,7 +3179,7 @@ function At({
         attrs: {
           class: "sidebar",
           "data-set-surface": d,
-          id: b,
+          id: g,
           tabindex: "-1"
         },
         children: u
@@ -2908,18 +3193,18 @@ function At({
     ]
   };
 }
-function De(t) {
-  return h(At(t));
+function Qe(t) {
+  return h(Ut(t));
 }
-function _t() {
-  if (customElements.get($)) return;
+function $t() {
+  if (customElements.get(Z)) return;
   class t extends HTMLElement {
     #t;
     #e;
     #i;
     #n;
     connectedCallback() {
-      this.#v(), this.#s(), this.#g(), this.#f();
+      this.#v(), this.#l(), this.#g(), this.#f();
     }
     disconnectedCallback() {
       this.close(), this.#v();
@@ -2930,99 +3215,99 @@ function _t() {
     close() {
       this.#b(!1);
     }
-    #a() {
+    #d() {
       return this.querySelector(".sidebar");
     }
-    #o() {
+    #r() {
       return this.querySelector(
         '[data-part="close"] .set-button'
       );
     }
-    #k() {
+    #c() {
       return this.querySelector(
         '[data-part="trigger"] .set-button'
       );
     }
-    #p() {
+    #s() {
       return this.hasAttribute("data-open");
     }
-    #c() {
+    #u() {
       return this.hasAttribute("data-collapsed");
     }
-    #d() {
+    #a() {
       const e = this.getAttribute("data-above-notebook");
       return e === "collapsible" || e === "overlay" ? e : "persistent";
     }
-    #s() {
-      const e = this.#a();
+    #l() {
+      const e = this.#d();
       if (!e || e.querySelector('[data-part="close"]')) return;
-      const i = e.querySelector(".header"), r = this.getAttribute("data-collapse-label") || T, a = this.getAttribute("data-button-size") ?? "md";
+      const i = e.querySelector(".header"), r = this.getAttribute("data-collapse-label") || _, a = this.getAttribute("data-button-size") ?? "md";
       i?.insertAdjacentHTML(
         "beforeend",
-        Tt(r, a)
+        Wt(r, a)
       );
     }
-    #r() {
+    #o() {
       this.querySelector('[data-part="close"]')?.remove();
     }
-    #u() {
-      const e = this.#o();
+    #h() {
+      const e = this.#r();
       if (e) {
         e.focus();
         return;
       }
-      this.#a()?.focus();
+      this.#d()?.focus();
     }
-    #m() {
+    #k() {
       return this.#t?.matches ?? !1;
     }
-    #l({
+    #p({
       collapsed: e,
       open: i
     }) {
-      const r = this.#k();
+      const r = this.#c();
       this.toggleAttribute("data-open", i), this.toggleAttribute("data-collapsed", e), r?.setAttribute("aria-expanded", i ? "true" : "false");
     }
     #g() {
-      const e = this.#d();
-      if (this.#m()) {
+      const e = this.#a();
+      if (this.#k()) {
         if (e === "overlay") {
-          this.#s(), this.#l({ collapsed: !1, open: !1 }), this.#h(!1);
+          this.#l(), this.#p({ collapsed: !1, open: !1 }), this.#m(!1);
           return;
         }
         if (e === "collapsible") {
-          this.#s(), this.#l({
-            collapsed: this.#c(),
+          this.#l(), this.#p({
+            collapsed: this.#u(),
             open: !0
-          }), this.#h(!1);
+          }), this.#m(!1);
           return;
         }
-        this.#r(), this.#l({ collapsed: !1, open: !0 }), this.#h(!1);
+        this.#o(), this.#p({ collapsed: !1, open: !0 }), this.#m(!1);
         return;
       }
-      this.#s(), this.#l({ collapsed: !1, open: !1 }), this.#h(!1);
+      this.#l(), this.#p({ collapsed: !1, open: !1 }), this.#m(!1);
     }
     #b(e) {
-      const i = this.#d();
-      if (this.#m()) {
+      const i = this.#a();
+      if (this.#k()) {
         if (i === "persistent") {
-          this.#l({ collapsed: !1, open: !0 }), this.#h(!1);
+          this.#p({ collapsed: !1, open: !0 }), this.#m(!1);
           return;
         }
         if (i === "collapsible") {
-          this.#l({ collapsed: !e, open: !0 }), this.#h(!1), e && this.#u();
+          this.#p({ collapsed: !e, open: !0 }), this.#m(!1), e && this.#h();
           return;
         }
       }
-      if (this.#p() !== e) {
+      if (this.#s() !== e) {
         if (e) {
-          this.#l({ collapsed: !1, open: !0 }), this.#h(!0), this.#u();
+          this.#p({ collapsed: !1, open: !0 }), this.#m(!0), this.#h();
           return;
         }
-        this.#l({ collapsed: !1, open: !1 }), this.#h(!1), this.#k()?.focus();
+        this.#p({ collapsed: !1, open: !1 }), this.#m(!1), this.#c()?.focus();
       }
     }
-    #h(e) {
+    #m(e) {
       const i = this.ownerDocument.documentElement;
       if (i) {
         if (e) {
@@ -3034,7 +3319,7 @@ function _t() {
     }
     #f() {
       const e = this.ownerDocument.defaultView;
-      e && (typeof e.matchMedia == "function" && (this.#t = e.matchMedia(It), this.#n = () => {
+      e && (typeof e.matchMedia == "function" && (this.#t = e.matchMedia(Rt), this.#n = () => {
         this.#g();
       }, this.#t.addEventListener("change", this.#n), this.#g()), this.#e = (i) => {
         const r = i.target;
@@ -3044,8 +3329,8 @@ function _t() {
             return;
           }
           if (r.closest('[data-part="close"] .set-button')) {
-            if (this.#m() && this.#d() === "collapsible") {
-              this.#b(this.#c());
+            if (this.#k() && this.#a() === "collapsible") {
+              this.#b(this.#u());
               return;
             }
             this.close();
@@ -3061,13 +3346,13 @@ function _t() {
       this.#e && this.removeEventListener("click", this.#e), this.#i && this.removeEventListener("keydown", this.#i), this.#t && this.#n && this.#t.removeEventListener("change", this.#n), this.#e = void 0, this.#i = void 0, this.#t = void 0, this.#n = void 0;
     }
   }
-  customElements.define($, t);
+  customElements.define(Z, t);
 }
-const Ne = {
+const Xe = {
   name: "sidebar",
   description: "Use `sidebar` for a side panel alongside main content.",
   output: {
-    element: $,
+    element: Z,
     class: "set-sidebar"
   },
   content: {
@@ -3097,7 +3382,7 @@ const Ne = {
       type: { kind: "html" }
     },
     collapseLabel: {
-      default: T,
+      default: _,
       description: "Accessible label for the collapse button.",
       type: { kind: "string" }
     },
@@ -3122,7 +3407,7 @@ const Ne = {
       }
     },
     triggerLabel: {
-      default: F,
+      default: J,
       description: "Accessible label for the open button.",
       type: { kind: "string" }
     }
@@ -3154,7 +3439,7 @@ const Ne = {
               of: {
                 kind: "when-equals",
                 prop: "collapseLabel",
-                to: T
+                to: _
               }
             }
           ]
@@ -3187,55 +3472,258 @@ const Ne = {
       }
     ]
   }
+}, F = "set-video";
+function Gt({
+  autoPlay: t,
+  controls: n,
+  fit: e = "intrinsic",
+  height: i,
+  id: r,
+  loop: a,
+  muted: o,
+  playsInline: d,
+  poster: p,
+  preload: s,
+  src: l,
+  width: c
+}) {
+  const u = k(r), g = l.trim(), v = p?.trim();
+  if (!g)
+    throw new Error("src must be a non-empty string.");
+  const m = {
+    kind: "element",
+    tag: "video",
+    attrs: {
+      autoplay: !!t,
+      class: "video",
+      controls: !!n,
+      height: i ? String(i) : void 0,
+      loop: !!a,
+      muted: !!o,
+      playsinline: !!d,
+      poster: v || void 0,
+      preload: s,
+      src: g,
+      width: c ? String(c) : void 0
+    },
+    children: []
+  };
+  return {
+    kind: "element",
+    tag: F,
+    attrs: {
+      class: "set-video",
+      "data-fluid": e === "fluid",
+      id: u
+    },
+    children: [m]
+  };
+}
+function Ye(t) {
+  return h(Gt(t));
+}
+const Zt = "(prefers-reduced-motion: reduce)";
+function Ft() {
+  if (customElements.get(F)) return;
+  class t extends HTMLElement {
+    #t = !1;
+    #e;
+    #i;
+    connectedCallback() {
+      const e = this.querySelector("video");
+      if (!e || (this.#t ||= e.hasAttribute("autoplay"), !this.#t)) return;
+      const i = this.ownerDocument.defaultView;
+      !i || typeof i.matchMedia != "function" || (this.#e = i.matchMedia(Zt), this.#i = () => {
+        this.#n();
+      }, this.#e.addEventListener("change", this.#i), this.#n());
+    }
+    disconnectedCallback() {
+      this.#e && this.#i && this.#e.removeEventListener("change", this.#i), this.#e = void 0, this.#i = void 0;
+    }
+    #n() {
+      const e = this.querySelector("video");
+      !e || !this.#e || (this.#e.matches ? (e.removeAttribute("autoplay"), e.pause()) : (e.setAttribute("autoplay", ""), e.paused && e.play()?.catch?.(() => {
+      })));
+    }
+  }
+  customElements.define(F, t);
+}
+const Je = {
+  name: "video",
+  description: "Use `video` to render a video with intrinsic or fluid fit and native playback behavior.",
+  output: { element: F, class: "set-video" },
+  content: { kind: "none" },
+  props: {
+    autoPlay: {
+      default: !1,
+      description: "Starts playback automatically. Browsers only honor this when `muted` is also set. Suspended when the user prefers reduced motion.",
+      type: { kind: "boolean" }
+    },
+    controls: {
+      default: !1,
+      description: "Shows the browser's native playback controls.",
+      type: { kind: "boolean" }
+    },
+    fit: {
+      default: "intrinsic",
+      description: "Layout mode. `intrinsic` renders at the video's own dimensions, `fluid` scales to the container's full inline size at the video's aspect ratio.",
+      type: { kind: "enum", values: ["intrinsic", "fluid"] }
+    },
+    height: {
+      description: "Intrinsic height in pixels. With `width`, reserves the correctly shaped box before the media loads; rendered height always follows the aspect ratio.",
+      type: { kind: "number" }
+    },
+    id: {
+      description: "DOM id.",
+      type: { kind: "string" }
+    },
+    loop: {
+      default: !1,
+      description: "Restarts playback when the video ends.",
+      type: { kind: "boolean" }
+    },
+    muted: {
+      default: !1,
+      description: "Starts playback silent. Required for `autoPlay` to take effect in most browsers.",
+      type: { kind: "boolean" }
+    },
+    playsInline: {
+      default: !1,
+      description: "Plays inline instead of fullscreen on iOS. Required for `autoPlay` on iOS.",
+      type: { kind: "boolean" }
+    },
+    poster: {
+      description: "Image URL shown before playback begins.",
+      type: { kind: "string" }
+    },
+    preload: {
+      description: "Preload hint. Omitted by default, deferring to the browser.",
+      type: { kind: "enum", values: ["auto", "metadata", "none"] }
+    },
+    src: {
+      description: "Video source URL.",
+      required: !0,
+      type: { kind: "string" }
+    },
+    width: {
+      description: "Intrinsic width in pixels. Sets the rendered width, capped at the container; under `fluid`, an aspect-ratio hint only.",
+      type: { kind: "number" }
+    }
+  },
+  events: {},
+  rules: {
+    attributes: [
+      {
+        target: { on: "host" },
+        attribute: "data-fluid",
+        condition: { kind: "when-equals", prop: "fit", to: "fluid" }
+      },
+      {
+        target: { on: "host" },
+        attribute: "id",
+        condition: { kind: "when-non-empty", prop: "id" },
+        value: { kind: "prop", prop: "id" }
+      },
+      {
+        target: { on: "descendant", selector: "video" },
+        attribute: "class",
+        condition: { kind: "always" },
+        value: { kind: "literal", text: "video" }
+      },
+      {
+        target: { on: "descendant", selector: "video" },
+        attribute: "src",
+        condition: { kind: "always" },
+        value: { kind: "template", pattern: "{src}" }
+      },
+      {
+        target: { on: "descendant", selector: "video" },
+        attribute: "autoplay",
+        condition: { kind: "when-truthy", prop: "autoPlay" }
+      },
+      {
+        target: { on: "descendant", selector: "video" },
+        attribute: "controls",
+        condition: { kind: "when-truthy", prop: "controls" }
+      },
+      {
+        target: { on: "descendant", selector: "video" },
+        attribute: "loop",
+        condition: { kind: "when-truthy", prop: "loop" }
+      },
+      {
+        target: { on: "descendant", selector: "video" },
+        attribute: "muted",
+        condition: { kind: "when-truthy", prop: "muted" }
+      },
+      {
+        target: { on: "descendant", selector: "video" },
+        attribute: "playsinline",
+        condition: { kind: "when-truthy", prop: "playsInline" }
+      },
+      {
+        target: { on: "descendant", selector: "video" },
+        attribute: "poster",
+        condition: { kind: "when-non-empty", prop: "poster" },
+        value: { kind: "prop", prop: "poster" }
+      },
+      {
+        target: { on: "descendant", selector: "video" },
+        attribute: "preload",
+        condition: { kind: "when-provided", prop: "preload" },
+        value: { kind: "prop", prop: "preload" }
+      }
+    ]
+  }
 };
-function Dt(t) {
+function jt(t) {
   return t ? /[A-Za-z]/.test(t) : !1;
 }
-function Nt(t) {
+function Kt(t) {
   return /^[a-z]/.test(t);
 }
-function I(t) {
+function T(t) {
   const n = t.charAt(0);
-  return Dt(n) ? n : void 0;
+  return jt(n) ? n : void 0;
 }
-function Ht(t) {
-  const n = A(t);
+function Qt(t) {
+  const n = D(t);
   if (!n) return;
-  const e = n.split(" "), i = I(e[0]);
+  const e = n.split(" "), i = T(e[0]);
   if (!i) return;
   const r = [i.toUpperCase()];
   if (e.length === 1)
     return r[0];
-  const a = e.slice(1).find(Nt);
+  const a = e.slice(1).find(Kt);
   if (a) {
-    const d = I(a);
+    const d = T(a);
     return d ? `${r[0]}${d}` : void 0;
   }
   if (e.length === 2) {
-    const d = I(e[1]);
+    const d = T(e[1]);
     if (!d) return;
     r.push(d);
     const p = e[1].split("-").filter(Boolean);
     if (p.length === 2) {
-      const s = I(p[1]);
+      const s = T(p[1]);
       s && r.push(s);
     }
     return r.slice(0, 3).join("");
   }
   if (e.length === 3) {
-    const d = I(e[1]), p = I(e[2]);
+    const d = T(e[1]), p = T(e[2]);
     return !d || !p ? void 0 : (r.push(d, p), r.slice(0, 3).join(""));
   }
-  const o = I(e.at(-1) || "");
+  const o = T(e.at(-1) || "");
   if (o)
     return r.push(o), r.slice(0, 3).join("");
 }
-const Vt = {
+const Xt = {
   bot: "robot-1",
   organization: "city-6",
   person: "user-1",
   team: "member"
-}, J = [
+}, at = [
   "01",
   "02",
   "03",
@@ -3246,15 +3734,15 @@ const Vt = {
   "08",
   "09"
 ];
-function Ot(t) {
+function Yt(t) {
   let n = 5381;
   for (const e of t)
     n = n * 33 ^ e.charCodeAt(0);
   return n >>> 0;
 }
-function Bt(t) {
+function Jt(t) {
   if (t == null) return;
-  const n = A(t);
+  const n = D(t);
   if (n) {
     if (n.length > 3)
       throw new Error("initials must normalize to 3 characters or fewer.");
@@ -3263,26 +3751,26 @@ function Bt(t) {
     return n;
   }
 }
-function Pt({
+function te({
   alt: t,
   ariaHidden: n,
   name: e
 }) {
   if (!n)
-    return A(t) || A(e) || "Avatar";
+    return D(t) || D(e) || "Avatar";
 }
-function Rt({
+function ee({
   color: t,
   name: n
 }) {
   if (t) return t;
   if (n) {
-    const e = Ot(n) % J.length;
-    return J[e];
+    const e = Yt(n) % at.length;
+    return at[e];
   }
   return "neutral";
 }
-function Wt({
+function ie({
   alt: t,
   ariaHidden: n,
   color: e,
@@ -3293,16 +3781,16 @@ function Wt({
   size: d = "md",
   src: p
 }) {
-  const s = k(r), l = Bt(a), c = A(o), u = A(p), b = Pt({
+  const s = k(r), l = Jt(a), c = D(o), u = D(p), g = te({
     alt: t,
     ariaHidden: n,
     name: c
-  }), v = l || Ht(c), m = !!u, f = Rt({
+  }), v = l || Qt(c), m = !!u, f = ee({
     color: e,
     name: c
-  }), z = {
+  }), E = {
     "aria-hidden": n ? "true" : void 0,
-    "aria-label": !n && !m ? b : void 0,
+    "aria-label": !n && !m ? g : void 0,
     class: "set-avatar",
     "data-color": f === "neutral" ? void 0 : f,
     "data-entity": i === "person" ? void 0 : i,
@@ -3315,7 +3803,7 @@ function Wt({
     kind: "element",
     tag: "img",
     attrs: {
-      alt: n ? "" : b || "",
+      alt: n ? "" : g || "",
       class: "img",
       src: u
     },
@@ -3332,21 +3820,21 @@ function Wt({
     children: [
       H({
         ariaHidden: !0,
-        name: Vt[i],
+        name: Xt[i],
         size: "fill"
       })
     ]
   }, {
     kind: "element",
     tag: "span",
-    attrs: z,
+    attrs: E,
     children: [S]
   };
 }
-function He(t) {
-  return h(Wt(t));
+function ti(t) {
+  return h(ie(t));
 }
-const Ve = {
+const ei = {
   name: "avatar",
   description: "Use `avatar` to visually represent a person, team, or entity.",
   output: { element: "span", class: "set-avatar" },
@@ -3453,7 +3941,7 @@ const Ve = {
     ]
   }
 };
-function Ut({
+function ne({
   floating: t,
   id: n,
   label: e,
@@ -3474,10 +3962,10 @@ function Ut({
     children: [{ kind: "text", value: e }]
   };
 }
-function Oe(t) {
-  return h(Ut(t));
+function ii(t) {
+  return h(ne(t));
 }
-const Be = {
+const ni = {
   name: "badge",
   description: "Use `badge` to annotate content with a short label.",
   output: { element: "span", class: "set-badge" },
@@ -3504,7 +3992,17 @@ const Be = {
     },
     tone: {
       description: "Semantic tone.",
-      type: { kind: "enum", values: ["info", "success", "warning", "error"] }
+      type: {
+        kind: "enum",
+        values: [
+          "notification",
+          "live",
+          "pending",
+          "success",
+          "warning",
+          "error"
+        ]
+      }
     }
   },
   events: {},
@@ -3536,7 +4034,7 @@ const Be = {
     ]
   }
 };
-function Z({
+function j({
   align: t,
   as: n,
   children: e,
@@ -3564,10 +4062,10 @@ function Z({
     children: [{ kind: "raw", html: e }]
   };
 }
-function Pe(t) {
-  return h(Z(t));
+function ri(t) {
+  return h(j(t));
 }
-const Re = {
+const ai = {
   name: "text",
   description: "Use `text` for inline or paragraph body copy.",
   output: {
@@ -3681,7 +4179,7 @@ const Re = {
     ]
   }
 };
-function $t({
+function re({
   align: t = "start",
   attribution: n,
   id: e,
@@ -3705,7 +4203,7 @@ function $t({
         tag: "blockquote",
         attrs: { class: "quote" },
         children: [
-          Z({
+          j({
             align: t,
             as: "p",
             children: r,
@@ -3720,7 +4218,7 @@ function $t({
         tag: "figcaption",
         attrs: { class: "attribution" },
         children: [
-          Z({
+          j({
             as: "span",
             children: n,
             responsive: a,
@@ -3731,10 +4229,10 @@ function $t({
     ]
   };
 }
-function We(t) {
-  return h($t(t));
+function oi(t) {
+  return h(re(t));
 }
-const Ue = {
+const di = {
   name: "blockquote",
   description: "Use `blockquote` to display a quote with attribution.",
   output: { element: "figure", class: "set-blockquote" },
@@ -3803,7 +4301,7 @@ const Ue = {
     ]
   }
 };
-function Zt({
+function ae({
   background: t = "default",
   border: n,
   children: e,
@@ -3832,10 +4330,10 @@ function Zt({
     children: e ? [{ kind: "raw", html: e }] : []
   };
 }
-function $e(t) {
-  return h(Zt(t));
+function si(t) {
+  return h(ae(t));
 }
-const Ze = {
+const li = {
   name: "box",
   description: "Use `box` to inset content.",
   output: { element: "div", class: "set-box" },
@@ -3948,7 +4446,7 @@ const Ze = {
     ]
   }
 };
-function jt({
+function oe({
   description: t,
   headingLevel: n,
   href: e,
@@ -4014,10 +4512,10 @@ function jt({
     children: c
   };
 }
-function je(t) {
-  return h(jt(t));
+function pi(t) {
+  return h(oe(t));
 }
-const Fe = {
+const ci = {
   name: "card",
   description: "Use `card` to display a summary for a single topic.",
   output: {
@@ -4085,7 +4583,7 @@ const Fe = {
     ]
   }
 };
-function Ft({
+function de({
   checked: t,
   description: n,
   disabled: e,
@@ -4100,7 +4598,7 @@ function Ft({
   const l = k(i), c = n?.trim();
   if (c && !l)
     throw new Error("id must be provided when description is provided.");
-  const u = c ? `${l}-description` : void 0, b = !!e, m = [
+  const u = c ? `${l}-description` : void 0, g = !!e, m = [
     {
       kind: "element",
       tag: "label",
@@ -4111,10 +4609,10 @@ function Ft({
           tag: "input",
           attrs: {
             "aria-describedby": u,
-            "aria-invalid": !b && !!r ? "true" : void 0,
+            "aria-invalid": !g && !!r ? "true" : void 0,
             checked: !!t,
             class: "checkbox",
-            disabled: b,
+            disabled: g,
             id: l,
             name: o || void 0,
             required: !!d,
@@ -4144,10 +4642,10 @@ function Ft({
     children: m
   };
 }
-function Ge(t) {
-  return h(Ft(t));
+function ui(t) {
+  return h(de(t));
 }
-const Ke = {
+const hi = {
   name: "checkbox",
   description: "Use `checkbox` to let users toggle a single option on or off.",
   output: { element: "div", class: "set-checkbox" },
@@ -4277,7 +4775,7 @@ const Ke = {
     ]
   }
 };
-function Gt({
+function se({
   children: t,
   gutter: n = "default",
   id: e,
@@ -4296,10 +4794,10 @@ function Gt({
     children: t ? [{ kind: "raw", html: t }] : []
   };
 }
-function Qe(t) {
-  return h(Gt(t));
+function mi(t) {
+  return h(se(t));
 }
-const Xe = {
+const ki = {
   name: "container",
   description: "Use `container` to wrap page-level content.",
   output: { element: "div", class: "set-container" },
@@ -4356,7 +4854,7 @@ const Xe = {
     ]
   }
 };
-function Kt({
+function le({
   children: t,
   id: n,
   open: e,
@@ -4408,10 +4906,10 @@ function Kt({
     ]
   };
 }
-function Ye(t) {
-  return h(Kt(t));
+function gi(t) {
+  return h(le(t));
 }
-const Je = {
+const bi = {
   name: "details",
   description: "Use `details` to let users expand and collapse a section of content.",
   output: { element: "details", class: "set-details" },
@@ -4470,7 +4968,7 @@ const Je = {
     ]
   }
 };
-function Qt({
+function pe({
   id: t,
   orientation: n = "horizontal",
   tone: e = "default"
@@ -4489,10 +4987,10 @@ function Qt({
     children: []
   };
 }
-function ti(t = {}) {
-  return h(Qt(t));
+function vi(t = {}) {
+  return h(pe(t));
 }
-const ei = {
+const fi = {
   name: "divider",
   description: "Use `divider` to separate sections with a rule.",
   output: {
@@ -4554,7 +5052,7 @@ const ei = {
     ]
   }
 };
-function lt({
+function gt({
   children: t,
   description: n,
   disabled: e,
@@ -4566,7 +5064,7 @@ function lt({
   const d = n?.trim(), p = i.trim();
   if (!p)
     throw new Error("id must be a non-empty string.");
-  if (!q(p))
+  if (!I(p))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
@@ -4597,10 +5095,10 @@ function lt({
     children: u
   };
 }
-function ii(t) {
-  return h(lt(t));
+function yi(t) {
+  return h(gt(t));
 }
-const ni = {
+const wi = {
   name: "fieldset",
   description: "Use `fieldset` to group related form controls under a legend.",
   output: { element: "fieldset", class: "set-fieldset" },
@@ -4688,7 +5186,7 @@ const ni = {
     ]
   }
 };
-function Xt({
+function ce({
   align: t = "start",
   caption: n,
   children: e,
@@ -4711,7 +5209,7 @@ function Xt({
         tag: "figcaption",
         attrs: { class: "figcaption" },
         children: [
-          Z({
+          j({
             as: "span",
             children: n,
             responsive: r,
@@ -4722,10 +5220,10 @@ function Xt({
     ]
   };
 }
-function ri(t) {
-  return h(Xt(t));
+function Si(t) {
+  return h(ce(t));
 }
-const ai = {
+const xi = {
   name: "figure",
   description: "Use `figure` to present media with a caption.",
   output: { element: "figure", class: "set-figure" },
@@ -4783,11 +5281,11 @@ const ai = {
       }
     ]
   }
-}, M = (t) => {
+}, L = (t) => {
   if (t !== void 0)
     return String(t);
 };
-function Yt({
+function ue({
   children: t,
   gap: n = "default",
   id: e
@@ -4811,10 +5309,10 @@ function Yt({
     ]
   };
 }
-function oi(t) {
-  return h(Yt(t));
+function Ei(t) {
+  return h(ue(t));
 }
-function Jt({
+function he({
   align: t,
   children: n,
   colSpan: e,
@@ -4828,7 +5326,7 @@ function Jt({
   rowSpan: l,
   rowSpanNarrow: c,
   rowSpanWide: u,
-  rowStart: b,
+  rowStart: g,
   rowStartNarrow: v,
   rowStartWide: m
 }) {
@@ -4840,27 +5338,27 @@ function Jt({
       class: "set-grid-item",
       "data-align": t,
       "data-justify": s,
-      "data-col-span-narrow": M(i),
-      "data-col-start-narrow": M(o),
-      "data-col-span": M(e),
-      "data-col-start": M(a),
-      "data-col-span-wide": M(r),
-      "data-col-start-wide": M(d),
-      "data-row-span-narrow": M(c),
-      "data-row-start-narrow": M(v),
-      "data-row-span": M(l),
-      "data-row-start": M(b),
-      "data-row-span-wide": M(u),
-      "data-row-start-wide": M(m),
+      "data-col-span-narrow": L(i),
+      "data-col-start-narrow": L(o),
+      "data-col-span": L(e),
+      "data-col-start": L(a),
+      "data-col-span-wide": L(r),
+      "data-col-start-wide": L(d),
+      "data-row-span-narrow": L(c),
+      "data-row-start-narrow": L(v),
+      "data-row-span": L(l),
+      "data-row-start": L(g),
+      "data-row-span-wide": L(u),
+      "data-row-start-wide": L(m),
       id: f
     },
     children: n ? [{ kind: "raw", html: n }] : []
   };
 }
-function di(t) {
-  return h(Jt(t));
+function zi(t) {
+  return h(he(t));
 }
-const si = {
+const Ci = {
   name: "grid",
   description: "Use `grid` to lay out content in a 12-column responsive grid.",
   output: { element: "div", class: "set-grid" },
@@ -4901,12 +5399,12 @@ const si = {
       }
     ]
   }
-}, L = {
+}, M = {
   kind: "number",
   min: 1,
   max: 12,
   integer: !0
-}, li = {
+}, Li = {
   name: "grid-item",
   description: "Use `grid-item` to place content within a `grid` layout.",
   output: { element: "div", class: "set-grid-item" },
@@ -4926,11 +5424,11 @@ const si = {
     },
     colSpan: {
       description: "Columns spanned at the default breakpoint.",
-      type: L
+      type: M
     },
     colStart: {
       description: "Starting column at the default breakpoint.",
-      type: L
+      type: M
     },
     id: {
       description: "DOM id.",
@@ -4938,43 +5436,43 @@ const si = {
     },
     rowSpan: {
       description: "Rows spanned at the default breakpoint.",
-      type: L
+      type: M
     },
     rowSpanNarrow: {
       description: "Rows spanned at the narrow breakpoint.",
-      type: L
+      type: M
     },
     rowSpanWide: {
       description: "Rows spanned at the wide breakpoint. Effect is only visible above the wide breakpoint.",
-      type: L
+      type: M
     },
     rowStart: {
       description: "Starting row at the default breakpoint.",
-      type: L
+      type: M
     },
     rowStartNarrow: {
       description: "Starting row at the narrow breakpoint.",
-      type: L
+      type: M
     },
     rowStartWide: {
       description: "Starting row at the wide breakpoint. Effect is only visible above the wide breakpoint.",
-      type: L
+      type: M
     },
     colSpanNarrow: {
       description: "Columns spanned at the narrow breakpoint.",
-      type: L
+      type: M
     },
     colStartNarrow: {
       description: "Starting column at the narrow breakpoint.",
-      type: L
+      type: M
     },
     colSpanWide: {
       description: "Columns spanned at the wide breakpoint. Effect is only visible above the wide breakpoint.",
-      type: L
+      type: M
     },
     colStartWide: {
       description: "Starting column at the wide breakpoint. Effect is only visible above the wide breakpoint.",
-      type: L
+      type: M
     }
   },
   events: {},
@@ -5073,7 +5571,7 @@ const si = {
     ]
   }
 };
-function te({
+function me({
   align: t = "start",
   id: n,
   level: e,
@@ -5095,10 +5593,10 @@ function te({
     children: [{ kind: "text", value: a }]
   };
 }
-function pi(t) {
-  return h(te(t));
+function Mi(t) {
+  return h(me(t));
 }
-const ci = {
+const qi = {
   name: "heading",
   description: "Use `heading` to render heading text with consistent type.",
   output: {
@@ -5183,10 +5681,10 @@ const ci = {
     ]
   }
 };
-function ee({
+function ke({
   alt: t = "",
   aspectRatio: n,
-  cover: e,
+  fit: e = "intrinsic",
   gravity: i = "C",
   height: r,
   id: a,
@@ -5197,86 +5695,87 @@ function ee({
   sizes: l,
   sources: c,
   src: u,
-  srcSet: b,
+  srcSet: g,
   width: v
 }) {
-  const m = k(a), f = u.trim(), z = b?.trim(), S = l?.trim(), g = c?.map((C, E) => {
-    const _ = C.srcSet.trim(), D = C.media?.trim(), V = C.type?.trim(), Q = C.sizes?.trim();
-    if (!_)
-      throw new Error(`sources[${E}].srcSet must be non-empty.`);
+  const m = e === "cover", f = k(a), E = u.trim(), S = g?.trim(), b = l?.trim(), y = c?.map((z, C) => {
+    const A = z.srcSet.trim(), V = z.media?.trim(), it = z.type?.trim(), O = z.sizes?.trim();
+    if (!A)
+      throw new Error(`sources[${C}].srcSet must be non-empty.`);
     return {
-      height: C.height,
-      media: D || void 0,
-      sizes: Q || void 0,
-      srcSet: _,
-      type: V || void 0,
-      width: C.width
+      height: z.height,
+      media: V || void 0,
+      sizes: O || void 0,
+      srcSet: A,
+      type: it || void 0,
+      width: z.width
     };
   }) || [];
-  if (!f)
+  if (!E)
     throw new Error("src must be a non-empty string.");
-  const y = {
+  const w = {
     kind: "element",
     tag: "img",
     attrs: {
       alt: t,
       class: "img",
       fetchpriority: d ? "high" : void 0,
-      height: e ? void 0 : r ? String(r) : void 0,
+      height: m ? void 0 : r ? String(r) : void 0,
       loading: o && !d ? "lazy" : void 0,
-      sizes: g.length > 0 ? void 0 : S || void 0,
-      src: f,
-      srcset: z || void 0,
-      width: e ? void 0 : v ? String(v) : void 0
+      sizes: y.length > 0 ? void 0 : b || void 0,
+      src: E,
+      srcset: S || void 0,
+      width: m ? void 0 : v ? String(v) : void 0
     },
     children: []
   };
-  let w;
-  if (g.length > 0) {
-    const C = g.map((E) => ({
+  let x;
+  if (y.length > 0) {
+    const z = y.map((C) => ({
       kind: "element",
       tag: "source",
       attrs: {
-        height: E.height ? String(E.height) : void 0,
-        media: E.media,
-        sizes: E.sizes,
-        srcset: E.srcSet,
-        type: E.type,
-        width: E.width ? String(E.width) : void 0
+        height: C.height ? String(C.height) : void 0,
+        media: C.media,
+        sizes: C.sizes,
+        srcset: C.srcSet,
+        type: C.type,
+        width: C.width ? String(C.width) : void 0
       },
       children: []
     }));
-    w = {
+    x = {
       kind: "element",
       tag: "picture",
       attrs: {},
-      children: [...C, y]
+      children: [...z, w]
     };
   } else
-    w = y;
-  const x = [];
-  return r && x.push(`--set-image-block-size: ${r / 16}rem`), v && x.push(`--set-image-inline-size: ${v / 16}rem`), {
+    x = w;
+  const q = [];
+  return r && q.push(`--set-image-block-size: ${r / 16}rem`), v && q.push(`--set-image-inline-size: ${v / 16}rem`), {
     kind: "element",
     tag: "div",
     attrs: {
       class: "set-image",
-      "data-aspect-ratio": e && !(r && v) ? n : void 0,
-      "data-gravity": e && i !== "C" ? i : void 0,
+      "data-aspect-ratio": m && !r ? n : void 0,
+      "data-fluid": e === "fluid",
+      "data-gravity": m && i !== "C" ? i : void 0,
       "data-shadow": !!s,
-      "data-object-fit": e ? "cover" : void 0,
-      "data-radius": p,
-      id: m,
-      style: x.length > 0 ? x.join("; ") : void 0
+      "data-object-fit": m ? "cover" : void 0,
+      "data-radius": !!p,
+      id: f,
+      style: q.length > 0 ? q.join("; ") : void 0
     },
-    children: [w]
+    children: [x]
   };
 }
-function ie(t) {
-  return h(ee(t));
+function ge(t) {
+  return h(ke(t));
 }
-const ui = {
+const Ii = {
   name: "image",
-  description: "Use `image` to render a responsive image with optional cover fit.",
+  description: "Use `image` to render a responsive image with intrinsic, fluid, or cover fit, and optional art-directed `sources`.",
   output: { element: "div", class: "set-image" },
   content: { kind: "none" },
   props: {
@@ -5288,28 +5787,29 @@ const ui = {
     gravity: {
       default: "C",
       description: "Focal point used when cropping.",
-      ignoredWhen: "`cover` is false",
+      ignoredWhen: '`fit` is not `"cover"`',
       type: {
         kind: "enum",
         values: ["N", "NE", "E", "SE", "S", "SW", "W", "NW", "C"]
       }
     },
     radius: {
-      description: "Corner radius treatment. `ratio` scales with the image's shortest side — requires `width`/`height` (or `cover` with `aspectRatio`) to determine this, otherwise falls back to `xs`.",
-      type: { kind: "enum", values: ["xs", "ratio"] }
+      default: !1,
+      description: "Applies the default corner radius.",
+      type: { kind: "boolean" }
     },
     aspectRatio: {
       description: "Aspect ratio applied to the wrapper.",
-      ignoredWhen: "`cover` is false, or both `width` and `height` are set",
+      ignoredWhen: '`fit` is not `"cover"`, or `height` is set',
       type: {
         kind: "enum",
         values: ["1:1", "4:5", "3:2", "16:9", "21:9"]
       }
     },
-    cover: {
-      default: !1,
-      description: "Renders the image as a cropped fill (`object-fit: cover`). Switches `width`/`height` from intrinsic `<img>` dimensions to wrapper sizing.",
-      type: { kind: "boolean" }
+    fit: {
+      default: "intrinsic",
+      description: "Layout mode. `intrinsic` renders at the image's own dimensions, `fluid` scales to the container's full inline size at the active source's aspect ratio, `cover` renders a cropped fill (`object-fit: cover`) sized by the wrapper. For `fluid`, provide candidates sized for large viewports via `srcSet`/`sources` so upscaled rendering stays sharp.",
+      type: { kind: "enum", values: ["intrinsic", "fluid", "cover"] }
     },
     shadow: {
       default: !1,
@@ -5317,7 +5817,7 @@ const ui = {
       type: { kind: "boolean" }
     },
     height: {
-      description: "Height in pixels. When `cover` is false, sets the intrinsic `<img>` height. When `cover` is true, sizes the wrapper — alone it defers to `aspectRatio`, together with `width` it overrides `aspectRatio`.",
+      description: "Height in pixels. Under `intrinsic` and `fluid`, an aspect-ratio hint — with `width`, reserves the correctly shaped box before load; rendered height follows the aspect ratio. Under `cover`, the wrapper's block size, overriding `aspectRatio`.",
       type: { kind: "number" }
     },
     id: {
@@ -5336,6 +5836,7 @@ const ui = {
     },
     sizes: {
       description: "`sizes` attribute used with `srcSet`.",
+      ignoredWhen: "`sources` are provided",
       type: { kind: "string" }
     },
     sources: {
@@ -5381,7 +5882,7 @@ const ui = {
       type: { kind: "string" }
     },
     width: {
-      description: "Width in pixels. When `cover` is false, sets the intrinsic `<img>` width. When `cover` is true, sizes the wrapper — alone it defers to `aspectRatio`, together with `height` it overrides `aspectRatio`.",
+      description: "Width in pixels. Under `intrinsic`, the rendered width, capped at the container; under `fluid`, an aspect-ratio hint; under `cover`, the wrapper's inline size (`aspectRatio` still derives the block size while `height` is unset).",
       type: { kind: "number" }
     }
   },
@@ -5391,7 +5892,7 @@ const ui = {
       {
         target: { on: "host" },
         attribute: "data-object-fit",
-        condition: { kind: "when-truthy", prop: "cover" },
+        condition: { kind: "when-equals", prop: "fit", to: "cover" },
         value: { kind: "literal", text: "cover" }
       },
       {
@@ -5402,8 +5903,12 @@ const ui = {
       {
         target: { on: "host" },
         attribute: "data-radius",
-        condition: { kind: "when-provided", prop: "radius" },
-        value: { kind: "prop", prop: "radius" }
+        condition: { kind: "when-truthy", prop: "radius" }
+      },
+      {
+        target: { on: "host" },
+        attribute: "data-fluid",
+        condition: { kind: "when-equals", prop: "fit", to: "fluid" }
       },
       {
         target: { on: "descendant", selector: "img" },
@@ -5456,7 +5961,7 @@ const ui = {
     ]
   }
 };
-function ne({
+function be({
   align: t = "center",
   as: n = "div",
   children: e,
@@ -5480,10 +5985,10 @@ function ne({
     children: e ? [{ kind: "raw", html: e }] : []
   };
 }
-function hi(t) {
-  return h(ne(t));
+function Ti(t) {
+  return h(be(t));
 }
-const ki = {
+const Ai = {
   name: "inline",
   description: "Use `inline` to lay out content in a horizontal row.",
   output: {
@@ -5568,7 +6073,7 @@ const ki = {
     ]
   }
 };
-function re({
+function ve({
   autocomplete: t,
   description: n,
   disabled: e,
@@ -5582,17 +6087,17 @@ function re({
   size: l = "md",
   spellcheck: c,
   type: u = "text",
-  value: b,
+  value: g,
   inlineSize: v = "full"
 }) {
-  const m = i.trim(), f = n?.trim(), z = t === !1 ? !1 : t?.trim(), S = o?.trim(), g = d?.trim(), y = b;
+  const m = i.trim(), f = n?.trim(), E = t === !1 ? !1 : t?.trim(), S = o?.trim(), b = d?.trim(), y = g;
   if (!m)
     throw new Error("id must be a non-empty string.");
-  if (!q(m))
+  if (!I(m))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
-  const w = f ? `${m}-description` : void 0, x = u === "numeric", C = x ? "text" : u, E = g || (x ? "^[0-9]*$" : void 0), _ = c === void 0 && x ? !1 : c, D = !!e, V = !D && !!p, X = [
+  const w = f ? `${m}-description` : void 0, x = u === "numeric", q = x ? "text" : u, z = b || (x ? "^[0-9]*$" : void 0), C = c === void 0 && x ? !1 : c, A = !!e, V = !A && !!p, O = [
     {
       kind: "element",
       tag: "label",
@@ -5604,24 +6109,24 @@ function re({
       tag: "input",
       attrs: {
         "aria-describedby": w,
-        "aria-invalid": !D && !V && !!r ? "true" : void 0,
-        autocomplete: z === !1 ? "off" : z || void 0,
+        "aria-invalid": !A && !V && !!r ? "true" : void 0,
+        autocomplete: E === !1 ? "off" : E || void 0,
         class: "input",
-        disabled: D,
+        disabled: A,
         id: m,
         inputmode: x ? "numeric" : void 0,
         name: S || void 0,
-        pattern: E,
+        pattern: z,
         readonly: V,
         required: !!s,
-        spellcheck: _ === void 0 ? void 0 : String(_),
-        type: C,
+        spellcheck: C === void 0 ? void 0 : String(C),
+        type: q,
         value: y
       },
       children: []
     }
   ];
-  return f && X.push({
+  return f && O.push({
     kind: "element",
     tag: "p",
     attrs: { class: "description", id: w },
@@ -5634,13 +6139,13 @@ function re({
       "data-size": l,
       "data-inline-size": v === "fit" ? "fit" : void 0
     },
-    children: X
+    children: O
   };
 }
-function mi(t) {
-  return h(re(t));
+function _i(t) {
+  return h(ve(t));
 }
-const gi = {
+const Di = {
   name: "input",
   description: "Use `input` to collect a single line of text from users.",
   output: { element: "div", class: "set-input" },
@@ -5836,7 +6341,7 @@ const gi = {
     ]
   }
 };
-function ae({
+function fe({
   id: t,
   label: n,
   size: e = "md",
@@ -5864,10 +6369,10 @@ function ae({
     ]
   };
 }
-function bi(t) {
-  return h(ae(t));
+function Hi(t) {
+  return h(fe(t));
 }
-const vi = {
+const Ni = {
   name: "logo",
   description: "Use `logo` to display the brand mark.",
   output: { element: "div", class: "set-logo" },
@@ -5935,7 +6440,7 @@ const vi = {
     ]
   }
 };
-function oe({
+function ye({
   banner: t,
   centerMain: n,
   children: e,
@@ -5976,10 +6481,10 @@ function oe({
     children: l
   };
 }
-function fi(t) {
-  return h(oe(t));
+function Vi(t) {
+  return h(ye(t));
 }
-const yi = {
+const Oi = {
   name: "page",
   description: "Use `page` as the primary layout for header, main, and footer regions.",
   output: { element: "div", class: "set-page" },
@@ -6069,7 +6574,7 @@ const yi = {
     ]
   }
 };
-function de({
+function we({
   children: t,
   id: n,
   padding: e = "md",
@@ -6088,10 +6593,10 @@ function de({
     children: t ? [{ kind: "raw", html: t }] : []
   };
 }
-function wi(t) {
-  return h(de(t));
+function Pi(t) {
+  return h(we(t));
 }
-const Si = {
+const Bi = {
   name: "panel",
   description: "Use `panel` to group related content in a contained region.",
   output: { element: "div", class: "set-panel" },
@@ -6142,7 +6647,7 @@ const Si = {
     ]
   }
 };
-function se({
+function Se({
   children: t,
   id: n,
   size: e = "md",
@@ -6163,10 +6668,10 @@ function se({
     children: t ? [{ kind: "raw", html: t }] : []
   };
 }
-function xi(t = {}) {
-  return h(se(t));
+function Ri(t = {}) {
+  return h(Se(t));
 }
-const Ei = {
+const Wi = {
   name: "pattern",
   description: "Use `pattern` to render repeated visual language components behind content.",
   output: { element: "div", class: "set-pattern" },
@@ -6233,15 +6738,15 @@ const Ei = {
     ]
   }
 };
-function zi(t) {
-  return ie({
+function Ui(t) {
+  return ge({
     ...t,
     alt: "",
-    cover: !0,
+    fit: "cover",
     priority: !0
   });
 }
-function le({
+function xe({
   children: t,
   contentTheme: n,
   id: e,
@@ -6273,10 +6778,10 @@ function le({
     children: d
   };
 }
-function Ci(t) {
-  return h(le(t));
+function $i(t) {
+  return h(xe(t));
 }
-const Mi = {
+const Gi = {
   name: "poster",
   description: "Use `poster` to layer content over background media.",
   output: { element: "div", class: "set-poster" },
@@ -6346,7 +6851,7 @@ const Mi = {
     ]
   }
 };
-function pe({
+function Ee({
   align: t = "start",
   children: n,
   hangingPunctuation: e,
@@ -6369,10 +6874,10 @@ function pe({
     children: [{ kind: "raw", html: n }]
   };
 }
-function Li(t) {
-  return h(pe(t));
+function Zi(t) {
+  return h(Ee(t));
 }
-const qi = {
+const Fi = {
   name: "prose",
   description: "Use `prose` to style rich-text markup.",
   output: { element: "div", class: "set-prose" },
@@ -6445,7 +6950,7 @@ const qi = {
     ]
   }
 };
-function ce({
+function ze({
   description: t,
   disabled: n,
   id: e,
@@ -6458,10 +6963,10 @@ function ce({
   size: s = "md",
   value: l
 }) {
-  const c = e.trim(), u = o.trim(), b = l?.trim();
+  const c = e.trim(), u = o.trim(), g = l?.trim();
   if (!c)
     throw new Error("id must be a non-empty string.");
-  if (!q(c))
+  if (!I(c))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
@@ -6469,23 +6974,23 @@ function ce({
     throw new Error("name must be a non-empty string.");
   if (r.length < 2)
     throw new Error("radios must include at least 2 options.");
-  const v = r.map((g, y) => {
-    const w = g.value.trim(), x = g.label.trim(), C = g.description?.trim();
+  const v = r.map((b, y) => {
+    const w = b.value.trim(), x = b.label.trim(), q = b.description?.trim();
     if (!w)
       throw new Error(`radios[${y}].value must be non-empty.`);
     if (!x)
       throw new Error(`radios[${y}].label must be non-empty.`);
     return {
-      description: C,
-      disabled: !!g.disabled,
+      description: q,
+      disabled: !!b.disabled,
       label: x,
       value: w
     };
   });
-  if (new Set(v.map((g) => g.value)).size !== v.length)
+  if (new Set(v.map((b) => b.value)).size !== v.length)
     throw new Error("radios values must be unique.");
-  const f = !!n, z = v.map((g) => {
-    const y = !!g.disabled, w = g.description ? `${c}-${g.value}-description` : void 0, x = [
+  const f = !!n, E = v.map((b) => {
+    const y = !!b.disabled, w = b.description ? `${c}-${b.value}-description` : void 0, x = [
       {
         kind: "element",
         tag: "label",
@@ -6496,13 +7001,13 @@ function ce({
             tag: "input",
             attrs: {
               "aria-describedby": w,
-              checked: b === g.value,
+              checked: g === b.value,
               class: "radio",
               disabled: y,
               name: u,
               required: !!p && !f && !y,
               type: "radio",
-              value: g.value
+              value: b.value
             },
             children: []
           },
@@ -6510,16 +7015,16 @@ function ce({
             kind: "element",
             tag: "span",
             attrs: {},
-            children: [{ kind: "text", value: g.label }]
+            children: [{ kind: "text", value: b.label }]
           }
         ]
       }
     ];
-    return g.description && x.push({
+    return b.description && x.push({
       kind: "element",
       tag: "p",
       attrs: { class: "radio-description", id: w },
-      children: [{ kind: "text", value: g.description }]
+      children: [{ kind: "text", value: b.description }]
     }), {
       kind: "element",
       tag: "div",
@@ -6527,7 +7032,7 @@ function ce({
       children: x
     };
   });
-  return lt({
+  return gt({
     children: h({
       kind: "element",
       tag: "div",
@@ -6536,7 +7041,7 @@ function ce({
         "data-orientation": d,
         "data-size": s
       },
-      children: z
+      children: E
     }),
     description: t,
     disabled: f,
@@ -6545,10 +7050,10 @@ function ce({
     legend: a
   });
 }
-function Ii(t) {
-  return h(ce(t));
+function ji(t) {
+  return h(ze(t));
 }
-const Ti = {
+const Ki = {
   name: "radios",
   description: "Use `radios` to let users select one option from a short list.",
   output: { element: "fieldset", class: "set-fieldset" },
@@ -6697,7 +7202,7 @@ const Ti = {
     ]
   }
 };
-function ue({
+function Ce({
   appOverscrollBehavior: t,
   appRoot: n,
   brand: e = "mnsp",
@@ -6724,10 +7229,10 @@ function ue({
     children: i ? [{ kind: "raw", html: i }] : []
   };
 }
-function Ai(t) {
-  return h(ue(t));
+function Qi(t) {
+  return h(Ce(t));
 }
-const _i = {
+const Xi = {
   name: "root",
   description: "Mandatory top-level `root` wrapper for the Set system.",
   output: { element: "div", class: "set" },
@@ -6820,7 +7325,7 @@ const _i = {
     ]
   }
 };
-function he({
+function Le({
   id: t,
   label: n,
   size: e = "md",
@@ -6877,10 +7382,10 @@ function he({
     children: o
   };
 }
-function Di(t = {}) {
-  return h(he(t));
+function Yi(t = {}) {
+  return h(Le(t));
 }
-const Ni = {
+const Ji = {
   name: "spinner",
   description: "Use `spinner` to indicate loading or in-progress state.",
   output: { element: "span", class: "set-spinner" },
@@ -6938,7 +7443,7 @@ const Ni = {
     ]
   }
 };
-function ke({
+function Me({
   align: t = "stretch",
   as: n = "div",
   children: e,
@@ -6960,10 +7465,10 @@ function ke({
     children: e ? [{ kind: "raw", html: e }] : []
   };
 }
-function Hi(t) {
-  return h(ke(t));
+function tn(t) {
+  return h(Me(t));
 }
-const Vi = {
+const en = {
   name: "stack",
   description: "Use `stack` to lay out content in a vertical column.",
   output: {
@@ -7034,7 +7539,7 @@ const Vi = {
     ]
   }
 };
-function me({
+function qe({
   children: t,
   contentTheme: n,
   id: e,
@@ -7053,10 +7558,10 @@ function me({
     children: [{ kind: "raw", html: t }]
   };
 }
-function Oi(t) {
-  return h(me(t));
+function nn(t) {
+  return h(qe(t));
 }
-const Bi = {
+const rn = {
   name: "surface",
   description: "Use `surface` to set a colour context for nested content.",
   output: { element: "div", class: "set-surface" },
@@ -7108,7 +7613,7 @@ const Bi = {
     ]
   }
 };
-function ge({
+function Ie({
   checked: t,
   description: n,
   disabled: e,
@@ -7164,10 +7669,10 @@ function ge({
     children: c
   };
 }
-function Pi(t) {
-  return h(ge(t));
+function an(t) {
+  return h(Ie(t));
 }
-const Ri = {
+const on = {
   name: "switch",
   description: "Use `switch` to let users instantly toggle a setting on or off.",
   output: { element: "div", class: "set-switch" },
@@ -7275,7 +7780,7 @@ const Ri = {
     ]
   }
 };
-function be({
+function Te({
   autocomplete: t,
   description: n,
   disabled: e,
@@ -7289,19 +7794,19 @@ function be({
   rows: l = 2,
   size: c = "md",
   spellcheck: u,
-  value: b,
+  value: g,
   inlineSize: v = "full"
 }) {
-  const m = i.trim(), f = n?.trim(), z = t === !1 ? !1 : t?.trim(), S = o?.trim(), g = b;
+  const m = i.trim(), f = n?.trim(), E = t === !1 ? !1 : t?.trim(), S = o?.trim(), b = g;
   if (!m)
     throw new Error("id must be a non-empty string.");
-  if (!q(m))
+  if (!I(m))
     throw new Error(
       "id must start with a letter and contain only letters, numbers, '_', '-', or ':'."
     );
   if (!Number.isInteger(l) || l < 2)
     throw new Error("rows must be an integer greater than or equal to 2.");
-  const y = f ? `${m}-description` : void 0, w = !!e, x = !w && !!d, E = [
+  const y = f ? `${m}-description` : void 0, w = !!e, x = !w && !!d, z = [
     {
       kind: "element",
       tag: "label",
@@ -7314,7 +7819,7 @@ function be({
       attrs: {
         "aria-describedby": y,
         "aria-invalid": !w && !x && !!r ? "true" : void 0,
-        autocomplete: z === !1 ? "off" : z || void 0,
+        autocomplete: E === !1 ? "off" : E || void 0,
         class: "textarea",
         disabled: w,
         id: m,
@@ -7324,10 +7829,10 @@ function be({
         rows: String(l),
         spellcheck: u === void 0 ? void 0 : String(u)
       },
-      children: [{ kind: "text", value: g || "" }]
+      children: [{ kind: "text", value: b || "" }]
     }
   ];
-  return f && E.push({
+  return f && z.push({
     kind: "element",
     tag: "p",
     attrs: { class: "description", id: y },
@@ -7341,13 +7846,13 @@ function be({
       "data-size": c,
       "data-inline-size": v === "fit" ? "fit" : void 0
     },
-    children: E
+    children: z
   };
 }
-function Wi(t) {
-  return h(be(t));
+function dn(t) {
+  return h(Te(t));
 }
-const Ui = {
+const sn = {
   name: "textarea",
   description: "Use `textarea` to collect multiple lines of text from users.",
   output: { element: "div", class: "set-textarea" },
@@ -7536,154 +8041,166 @@ const Ui = {
     ]
   }
 };
-function $i() {
-  bt(), wt(), xt(), Mt(), qt(), _t();
+function ln() {
+  Et(), Mt(), At(), Dt(), Ot(), Bt(), $t(), Ft();
 }
 export {
-  nt as SET_ALERT_EVENT_BEFORE_DISMISS,
-  rt as SET_ALERT_EVENT_DISMISS,
-  Se as SET_ALERT_SPEC,
-  O as SET_ALERT_TAG_NAME,
-  Ve as SET_AVATAR_SPEC,
-  Be as SET_BADGE_SPEC,
-  ot as SET_BANNER_EVENT_BEFORE_DISMISS,
-  dt as SET_BANNER_EVENT_DISMISS,
-  Ce as SET_BANNER_SPEC,
+  lt as SET_ALERT_EVENT_BEFORE_DISMISS,
+  pt as SET_ALERT_EVENT_DISMISS,
+  Ne as SET_ALERT_SPEC,
+  P as SET_ALERT_TAG_NAME,
+  ei as SET_AVATAR_SPEC,
+  ni as SET_BADGE_SPEC,
+  ut as SET_BANNER_EVENT_BEFORE_DISMISS,
+  ht as SET_BANNER_EVENT_DISMISS,
+  Be as SET_BANNER_SPEC,
   B as SET_BANNER_TAG_NAME,
-  Ue as SET_BLOCKQUOTE_SPEC,
-  Ze as SET_BOX_SPEC,
-  ye as SET_BUTTON_SPEC,
-  Fe as SET_CARD_SPEC,
-  Ke as SET_CHECKBOX_SPEC,
-  Xe as SET_CONTAINER_SPEC,
-  Je as SET_DETAILS_SPEC,
-  ei as SET_DIVIDER_SPEC,
-  qe as SET_EXPANDER_SPEC,
-  ni as SET_FIELDSET_SPEC,
-  ai as SET_FIGURE_SPEC,
-  li as SET_GRID_ITEM_SPEC,
-  si as SET_GRID_SPEC,
-  ci as SET_HEADING_SPEC,
-  ve as SET_ICON_NAMES,
-  fe as SET_ICON_SPEC,
-  ui as SET_IMAGE_SPEC,
-  ki as SET_INLINE_SPEC,
-  gi as SET_INPUT_SPEC,
-  Ee as SET_LINK_SPEC,
-  vi as SET_LOGO_SPEC,
-  st as SET_MENU_EVENT_CHOOSE,
-  Le as SET_MENU_SPEC,
-  R as SET_MENU_TAG_NAME,
-  Te as SET_NAV_SPEC,
-  W as SET_NAV_TAG_NAME,
-  yi as SET_PAGE_SPEC,
-  Si as SET_PANEL_SPEC,
-  Ei as SET_PATTERN_SPEC,
-  Mi as SET_POSTER_SPEC,
-  qi as SET_PROSE_SPEC,
-  Ti as SET_RADIOS_SPEC,
-  _e as SET_RANGE_SPEC,
-  U as SET_RANGE_TAG_NAME,
-  _i as SET_ROOT_SPEC,
-  Ne as SET_SIDEBAR_SPEC,
-  $ as SET_SIDEBAR_TAG_NAME,
-  Ni as SET_SPINNER_SPEC,
-  Vi as SET_STACK_SPEC,
-  Bi as SET_SURFACE_SPEC,
-  Ri as SET_SWITCH_SPEC,
-  Ui as SET_TEXTAREA_SPEC,
-  Re as SET_TEXT_SPEC,
-  gt as buildSetAlert,
-  Wt as buildSetAvatar,
-  Ut as buildSetBadge,
-  yt as buildSetBanner,
-  $t as buildSetBlockquote,
-  Zt as buildSetBox,
-  G as buildSetButton,
-  jt as buildSetCard,
-  Ft as buildSetCheckbox,
-  Gt as buildSetContainer,
-  Kt as buildSetDetails,
-  Qt as buildSetDivider,
-  Et as buildSetExpander,
-  lt as buildSetFieldset,
-  Xt as buildSetFigure,
-  Yt as buildSetGrid,
-  Jt as buildSetGridItem,
-  te as buildSetHeading,
+  di as SET_BLOCKQUOTE_SPEC,
+  li as SET_BOX_SPEC,
+  De as SET_BUTTON_SPEC,
+  ci as SET_CARD_SPEC,
+  hi as SET_CHECKBOX_SPEC,
+  ki as SET_CONTAINER_SPEC,
+  bi as SET_DETAILS_SPEC,
+  fi as SET_DIVIDER_SPEC,
+  Ge as SET_EXPANDER_SPEC,
+  wi as SET_FIELDSET_SPEC,
+  xi as SET_FIGURE_SPEC,
+  Li as SET_GRID_ITEM_SPEC,
+  Ci as SET_GRID_SPEC,
+  qi as SET_HEADING_SPEC,
+  Ae as SET_ICON_NAMES,
+  _e as SET_ICON_SPEC,
+  Ii as SET_IMAGE_SPEC,
+  Ai as SET_INLINE_SPEC,
+  Di as SET_INPUT_SPEC,
+  mt as SET_LIGHTSWITCH_EVENT_CHANGE,
+  We as SET_LIGHTSWITCH_SPEC,
+  K as SET_LIGHTSWITCH_STORAGE_KEY,
+  W as SET_LIGHTSWITCH_TAG_NAME,
+  Oe as SET_LINK_SPEC,
+  Ni as SET_LOGO_SPEC,
+  kt as SET_MENU_EVENT_CHOOSE,
+  $e as SET_MENU_SPEC,
+  U as SET_MENU_TAG_NAME,
+  Fe as SET_NAV_SPEC,
+  $ as SET_NAV_TAG_NAME,
+  Oi as SET_PAGE_SPEC,
+  Bi as SET_PANEL_SPEC,
+  Wi as SET_PATTERN_SPEC,
+  Gi as SET_POSTER_SPEC,
+  Fi as SET_PROSE_SPEC,
+  Ki as SET_RADIOS_SPEC,
+  Ke as SET_RANGE_SPEC,
+  G as SET_RANGE_TAG_NAME,
+  Xi as SET_ROOT_SPEC,
+  Xe as SET_SIDEBAR_SPEC,
+  Z as SET_SIDEBAR_TAG_NAME,
+  Ji as SET_SPINNER_SPEC,
+  en as SET_STACK_SPEC,
+  rn as SET_SURFACE_SPEC,
+  on as SET_SWITCH_SPEC,
+  sn as SET_TEXTAREA_SPEC,
+  ai as SET_TEXT_SPEC,
+  Je as SET_VIDEO_SPEC,
+  F as SET_VIDEO_TAG_NAME,
+  xt as buildSetAlert,
+  ie as buildSetAvatar,
+  ne as buildSetBadge,
+  Lt as buildSetBanner,
+  re as buildSetBlockquote,
+  ae as buildSetBox,
+  tt as buildSetButton,
+  oe as buildSetCard,
+  de as buildSetCheckbox,
+  se as buildSetContainer,
+  le as buildSetDetails,
+  pe as buildSetDivider,
+  Ht as buildSetExpander,
+  gt as buildSetFieldset,
+  ce as buildSetFigure,
+  ue as buildSetGrid,
+  he as buildSetGridItem,
+  me as buildSetHeading,
   H as buildSetIcon,
-  ee as buildSetImage,
-  ne as buildSetInline,
-  re as buildSetInput,
-  at as buildSetLink,
-  ae as buildSetLogo,
-  St as buildSetMenu,
-  Ct as buildSetNav,
-  oe as buildSetPage,
-  de as buildSetPanel,
-  se as buildSetPattern,
-  le as buildSetPoster,
-  pe as buildSetProse,
-  ce as buildSetRadios,
-  Lt as buildSetRange,
-  ue as buildSetRoot,
-  At as buildSetSidebar,
-  he as buildSetSpinner,
-  ke as buildSetStack,
-  me as buildSetSurface,
-  ge as buildSetSwitch,
-  Z as buildSetText,
-  be as buildSetTextarea,
-  bt as defineSetAlert,
-  wt as defineSetBanner,
-  $i as defineSetComponents,
-  xt as defineSetMenu,
-  Mt as defineSetNav,
-  qt as defineSetRange,
-  _t as defineSetSidebar,
-  Ht as getSetInitials,
-  we as renderSetAlert,
-  He as renderSetAvatar,
-  Oe as renderSetBadge,
-  ze as renderSetBanner,
-  We as renderSetBlockquote,
-  $e as renderSetBox,
-  K as renderSetButton,
-  je as renderSetCard,
-  Ge as renderSetCheckbox,
-  Qe as renderSetContainer,
-  Ye as renderSetDetails,
-  ti as renderSetDivider,
-  zt as renderSetExpander,
-  ii as renderSetFieldset,
-  ri as renderSetFigure,
-  oi as renderSetGrid,
-  di as renderSetGridItem,
-  pi as renderSetHeading,
-  ut as renderSetIcon,
-  ie as renderSetImage,
-  hi as renderSetInline,
-  mi as renderSetInput,
-  xe as renderSetLink,
-  bi as renderSetLogo,
-  Me as renderSetMenu,
-  Ie as renderSetNav,
-  fi as renderSetPage,
-  wi as renderSetPanel,
-  xi as renderSetPattern,
-  Ci as renderSetPoster,
-  zi as renderSetPosterImage,
-  Li as renderSetProse,
-  Ii as renderSetRadios,
-  Ae as renderSetRange,
-  Ai as renderSetRoot,
-  De as renderSetSidebar,
-  Di as renderSetSpinner,
-  Hi as renderSetStack,
-  Oi as renderSetSurface,
-  Pi as renderSetSwitch,
-  Pe as renderSetText,
-  Wi as renderSetTextarea,
+  ke as buildSetImage,
+  be as buildSetInline,
+  ve as buildSetInput,
+  Tt as buildSetLightswitch,
+  ct as buildSetLink,
+  fe as buildSetLogo,
+  _t as buildSetMenu,
+  Vt as buildSetNav,
+  ye as buildSetPage,
+  we as buildSetPanel,
+  Se as buildSetPattern,
+  xe as buildSetPoster,
+  Ee as buildSetProse,
+  ze as buildSetRadios,
+  Pt as buildSetRange,
+  Ce as buildSetRoot,
+  Ut as buildSetSidebar,
+  Le as buildSetSpinner,
+  Me as buildSetStack,
+  qe as buildSetSurface,
+  Ie as buildSetSwitch,
+  j as buildSetText,
+  Te as buildSetTextarea,
+  Gt as buildSetVideo,
+  Et as defineSetAlert,
+  Mt as defineSetBanner,
+  ln as defineSetComponents,
+  At as defineSetLightswitch,
+  Dt as defineSetMenu,
+  Ot as defineSetNav,
+  Bt as defineSetRange,
+  $t as defineSetSidebar,
+  Ft as defineSetVideo,
+  Qt as getSetInitials,
+  He as renderSetAlert,
+  ti as renderSetAvatar,
+  ii as renderSetBadge,
+  Pe as renderSetBanner,
+  oi as renderSetBlockquote,
+  si as renderSetBox,
+  et as renderSetButton,
+  pi as renderSetCard,
+  ui as renderSetCheckbox,
+  mi as renderSetContainer,
+  gi as renderSetDetails,
+  vi as renderSetDivider,
+  Nt as renderSetExpander,
+  yi as renderSetFieldset,
+  Si as renderSetFigure,
+  Ei as renderSetGrid,
+  zi as renderSetGridItem,
+  Mi as renderSetHeading,
+  ft as renderSetIcon,
+  ge as renderSetImage,
+  Ti as renderSetInline,
+  _i as renderSetInput,
+  Re as renderSetLightswitch,
+  Ve as renderSetLink,
+  Hi as renderSetLogo,
+  Ue as renderSetMenu,
+  Ze as renderSetNav,
+  Vi as renderSetPage,
+  Pi as renderSetPanel,
+  Ri as renderSetPattern,
+  $i as renderSetPoster,
+  Ui as renderSetPosterImage,
+  Zi as renderSetProse,
+  ji as renderSetRadios,
+  je as renderSetRange,
+  Qi as renderSetRoot,
+  Qe as renderSetSidebar,
+  Yi as renderSetSpinner,
+  tn as renderSetStack,
+  nn as renderSetSurface,
+  an as renderSetSwitch,
+  ri as renderSetText,
+  dn as renderSetTextarea,
+  Ye as renderSetVideo,
   h as serializeSetNode
 };
 //# sourceMappingURL=index.js.map