@salesql/sql_components_vue3 1.0.0 → 2.1.0

package/dist/index.es.js

@@ -1,53 +1,79 @@
-import { defineComponent as k, openBlock as t, createElementBlock as a, normalizeStyle as w, normalizeClass as v, toDisplayString as y, createCommentVNode as r, computed as S, createBlock as D, unref as g, renderSlot as I, createElementVNode as s, Fragment as B, renderList as M, createTextVNode as A, useModel as W, useSlots as le, ref as N, withDirectives as q, vModelDynamic as ce, mergeModels as O, vModelText as ue, onMounted as fe, watch as ie, vModelCheckbox as ye, Teleport as ne, nextTick as ve, onBeforeUnmount as oe, withModifiers as se, createVNode as de, withCtx as be } from "vue";
-const Y = {
+import { defineComponent as x, computed as g, openBlock as a, createElementBlock as l, normalizeStyle as F, normalizeClass as $, createBlock as G, unref as _, createCommentVNode as m, createElementVNode as s, renderSlot as A, toDisplayString as S, withModifiers as ve, useModel as de, ref as U, onMounted as Qe, watch as te, withDirectives as Be, vModelCheckbox as st, createTextVNode as H, mergeModels as Q, onBeforeUnmount as be, nextTick as ue, createVNode as j, Fragment as z, renderList as Y, useSlots as Ee, vModelDynamic as ot, useAttrs as dt, mergeProps as he, vModelText as rt, Transition as Le, withCtx as ie, Teleport as Je, useId as xe, withKeys as ct, reactive as ut, resolveDynamicComponent as ft } from "vue";
+const ge = {
   DARK: "dark",
   // slate ring — for light surfaces (default)
   LIGHT: "light",
   // white ring — for dark surfaces / solid buttons
   ACCENT: "accent"
   // accent ring
-}, me = ["aria-label", "aria-hidden"], ge = {
-  key: 0,
-  class: "ds-spinner__sr-only"
-}, he = /* @__PURE__ */ k({
+}, Ce = {
+  SMALL: "small",
+  // 20px
+  MEDIUM: "medium",
+  // 32px
+  LARGE: "large"
+  // 48px
+}, bt = ["aria-label"], vt = /* @__PURE__ */ x({
   __name: "DsSpinner",
   props: {
-    size: { type: Number, default: 24 },
+    // Diameter in px, or a named size ("small" 20 / "medium" 32 / "large" 48).
+    // Default (24) is unchanged and isn't one of the named steps.
+    size: { type: [Number, String], default: 24 },
     tone: {
       type: String,
-      default: Y.DARK
+      default: ge.DARK
     },
-    // Optional accessible text; without it the spinner is aria-hidden.
-    label: { type: String, default: "" }
+    // Accessible name (DS default "Loading"); the consuming app can override for
+    // i18n. role="status" + aria-label are always present, never opt-in.
+    label: { type: String, default: "Loading" }
   },
   setup(e) {
-    return (n, o) => (t(), a("span", {
-      class: v(["ds-spinner", `ds-spinner--${e.tone}`]),
+    const n = {
+      [Ce.SMALL]: 20,
+      [Ce.MEDIUM]: 32,
+      [Ce.LARGE]: 48
+    }, t = e, o = g(
+      () => {
+        var i;
+        return typeof t.size == "string" ? (i = n[t.size]) != null ? i : 24 : t.size;
+      }
+    );
+    return (i, c) => (a(), l("span", {
+      class: $(["ds-spinner", `ds-spinner--${e.tone}`]),
       role: "status",
-      style: w({ width: `${e.size}px`, height: `${e.size}px` }),
-      "aria-label": e.label || void 0,
-      "aria-hidden": e.label ? void 0 : "true"
-    }, [
-      e.label ? (t(), a("span", ge, y(e.label), 1)) : r("", !0)
-    ], 14, me));
+      style: F({ width: `${o.value}px`, height: `${o.value}px` }),
+      "aria-label": e.label || void 0
+    }, null, 14, bt));
   }
-}), $ = (e, n) => {
-  const o = e.__vccOpts || e;
-  for (const [l, i] of n)
-    o[l] = i;
-  return o;
-}, Se = /* @__PURE__ */ $(he, [["__scopeId", "data-v-190a8af4"]]), Z = "click", C = "close", V = "focus", U = "blur", F = "copy", z = "correct", _ = "incorrect", j = "sort", Q = "edit", J = {
+}), M = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [o, i] of n)
+    t[o] = i;
+  return t;
+}, fe = /* @__PURE__ */ M(vt, [["__scopeId", "data-v-aaf2f048"]]), Z = "click", X = "close", Se = "focus", ke = "blur", Me = "change", Oe = "field-blur", pe = "copy", $e = "correct", Te = "incorrect", Pe = "sort", Fe = "edit", ze = "select-all", Ve = "page-change", Ue = "page-size-change", _e = "search", Ge = "select", De = "step", He = "final-step", We = "navigate", Ae = {
+  DEFAULT: "default",
+  // white surface, dark text (the default value; == tertiary)
   PRIMARY: "primary",
-  // solid accent fill, white text
+  // solid accent fill, white text — the main CTA
   SECONDARY: "secondary",
   // slate surface fill, dark text
   TERTIARY: "tertiary",
-  // transparent ghost, dark text
+  // white surface, dark text (low-emphasis row action)
   QUATERNARY: "quaternary",
-  // accent border + accent text, light fill
-  SPECIAL: "special"
-  // accent text only, no fill/border (link-style)
-}, ee = {
+  // accent text + accent-mid border on white (former "special")
+  QUINARY: "quinary",
+  // accent text on white, no border (link-style) (former "special2")
+  SENARY: "senary",
+  // accent text on accent-tint; hover fills solid accent (former "special3")
+  DOTTED: "dotted",
+  // transparent, dashed border, 24px radius — "add" affordance
+  DANGER: "danger",
+  // destructive/delete — error text on error-tint (DS tint style)
+  // Legacy: solid-red fill (white text) kept for back-compat. The DS treats
+  // `warning` as a deprecated alias of `danger` (tint), but app consumers already
+  // ship this solid look — kept unchanged to avoid a visual regression. Prefer `danger`.
+  WARNING: "warning"
+}, Ke = {
   SMALL: "small",
   // 24px
   MEDIUM: "medium",
@@ -56,62 +82,72 @@ const Y = {
   // 36px
   XLARGE: "xlarge"
   // 48px
-}, ke = {
+}, yt = {
   BUTTON: "button",
   SUBMIT: "submit",
   RESET: "reset"
-}, $e = ["type", "disabled", "autofocus", "aria-busy", "aria-disabled", "aria-label"], Te = {
-  key: 1,
+}, mt = ["type", "disabled", "autofocus", "aria-busy", "aria-disabled", "aria-pressed", "aria-label"], ht = ["aria-hidden"], gt = {
+  key: 0,
   class: "ds-button__icon ds-button__icon--leading"
-}, Ie = {
+}, St = {
   class: "material-icons",
   "aria-hidden": "true"
-}, Ce = {
-  key: 2,
+}, kt = {
+  key: 1,
   class: "ds-button__label"
-}, Ee = {
-  key: 3,
+}, pt = {
+  key: 2,
   class: "ds-button__icon ds-button__icon--trailing"
-}, Le = {
+}, $t = {
   class: "material-icons",
   "aria-hidden": "true"
-}, De = /* @__PURE__ */ k({
+}, Tt = /* @__PURE__ */ x({
   __name: "DsButton",
   props: {
-    variant: { type: String, default: J.PRIMARY },
-    size: { type: String, default: ee.MEDIUM },
+    variant: { type: String, default: Ae.DEFAULT },
+    size: { type: String, default: Ke.MEDIUM },
     nativeType: {
       type: String,
-      default: ke.BUTTON
+      default: yt.BUTTON
     },
     // Material Icon names (rendered via <i class="material-icons">); a leading/
-    // trailing slot overrides. Icon-only buttons need ariaLabel.
+    // trailing slot overrides. Icon-only buttons (circle/square) need ariaLabel.
     leftIcon: { type: String, default: "" },
     rightIcon: { type: String, default: "" },
     ariaLabel: { type: String, default: "" },
     disabled: Boolean,
     loading: Boolean,
+    // Round icon-only button (width === height, fully circular).
     circle: Boolean,
-    dashed: Boolean,
+    // Flat 4px-radius icon-only button (the DS `*-square` sizes): symmetric padding
+    // per size, height === width.
+    square: Boolean,
+    // Zero the square padding for a tight, edge-to-edge glyph (DS `small-square-no-padding`).
+    // Only takes effect together with `square`.
+    noPadding: Boolean,
+    // Toggle state: accent outline + fill; sets aria-pressed (DS `selected`).
+    selected: Boolean,
     autofocus: Boolean
   },
   emits: [Z],
   setup(e, { emit: n }) {
-    const o = e, l = n, i = S(() => o.size === ee.SMALL ? 14 : 20), d = S(
-      () => o.variant === J.PRIMARY ? Y.LIGHT : Y.DARK
+    const t = e, o = n, i = g(() => t.size === Ke.SMALL ? 14 : 20), c = g(
+      () => t.variant === Ae.PRIMARY || t.variant === Ae.WARNING ? ge.LIGHT : ge.DARK
     );
-    function c(u) {
-      o.disabled || o.loading || l(Z, u);
+    function k(f) {
+      t.disabled || t.loading || o(Z, f);
     }
-    return (u, b) => (t(), a("button", {
-      class: v(["ds-button", [
+    return (f, y) => (a(), l("button", {
+      class: $(["ds-button", [
         `ds-button--${e.variant}`,
         `ds-button--${e.size}`,
         {
           "is-disabled": e.disabled || e.loading,
           "is-loading": e.loading,
           "is-circle": e.circle,
-          "is-dashed": e.dashed
+          "is-square": e.square,
+          "is-no-padding": e.noPadding,
+          "is-selected": e.selected
         }
       ]]),
       type: e.nativeType,
@@ -119,33 +155,41 @@ const Y = {
       autofocus: e.autofocus,
       "aria-busy": e.loading || void 0,
       "aria-disabled": e.disabled || e.loading || void 0,
+      "aria-pressed": e.selected || void 0,
       "aria-label": e.ariaLabel || void 0,
-      onClick: c
+      onClick: k
     }, [
-      e.loading ? (t(), D(g(Se), {
+      e.loading ? (a(), G(_(fe), {
         key: 0,
         class: "ds-button__spinner",
         size: i.value,
-        tone: d.value
-      }, null, 8, ["size", "tone"])) : r("", !0),
-      !e.loading && (e.leftIcon || u.$slots.leading) ? (t(), a("span", Te, [
-        I(u.$slots, "leading", {}, () => [
-          s("i", Ie, y(e.leftIcon), 1)
-        ], !0)
-      ])) : r("", !0),
-      !e.loading && u.$slots.default ? (t(), a("span", Ce, [
-        I(u.$slots, "default", {}, void 0, !0)
-      ])) : r("", !0),
-      !e.loading && (e.rightIcon || u.$slots.trailing) ? (t(), a("span", Ee, [
-        I(u.$slots, "trailing", {}, () => [
-          s("i", Le, y(e.rightIcon), 1)
-        ], !0)
-      ])) : r("", !0)
-    ], 10, $e));
+        tone: c.value
+      }, null, 8, ["size", "tone"])) : m("", !0),
+      s("span", {
+        class: "ds-button__content",
+        "aria-hidden": e.loading || void 0
+      }, [
+        e.leftIcon || f.$slots.leading ? (a(), l("span", gt, [
+          A(f.$slots, "leading", {}, () => [
+            s("i", St, S(e.leftIcon), 1)
+          ], !0)
+        ])) : m("", !0),
+        f.$slots.default && !e.circle && !e.square ? (a(), l("span", kt, [
+          A(f.$slots, "default", {}, void 0, !0)
+        ])) : m("", !0),
+        e.rightIcon || f.$slots.trailing ? (a(), l("span", pt, [
+          A(f.$slots, "trailing", {}, () => [
+            s("i", $t, S(e.rightIcon), 1)
+          ], !0)
+        ])) : m("", !0)
+      ], 8, ht)
+    ], 10, mt));
   }
-}), K = /* @__PURE__ */ $(De, [["__scopeId", "data-v-662e5512"]]), we = {
+}), oe = /* @__PURE__ */ M(Tt, [["__scopeId", "data-v-61354b19"]]), Et = {
   DEFAULT: "default",
   // white bg, slate-tint border, muted text
+  GREY: "grey",
+  // alias of `default` — the DS app passes tone="grey" (ApiApp.jsx)
   SUCCESS: "success",
   // e.g. Verified
   INFO: "info",
@@ -154,17 +198,26 @@ const Y = {
   // e.g. Pending
   ERROR: "error"
   // e.g. Bounced
-}, Ne = ["aria-label"], Re = /* @__PURE__ */ k({
+}, Lt = { class: "ds-tag__label" }, wt = ["aria-label"], It = /* @__PURE__ */ x({
   __name: "DsTag",
   props: {
     tone: {
       type: String,
-      default: we.DEFAULT
+      default: Et.DEFAULT
     },
     // Semicircular sides (DS `rounded`): radius-round vs the default radius-control.
     rounded: Boolean,
     // Show a × close control that emits `close`.
     closable: Boolean,
+    // Clickable affordance (DS: presence of `onClick` toggles cursor: pointer).
+    // Vue can't cheaply detect an attached native @click listener, so this is an
+    // explicit opt-in; it only sets cursor styling and doesn't touch the native
+    // @click fallthrough behavior.
+    clickable: Boolean,
+    // Opt-in single-line truncation for long labels (default off). The consuming
+    // app sets the ceiling via the `--ds-tag-max-width` CSS custom property; the
+    // label then clips with an ellipsis while the close control stays intact.
+    truncate: Boolean,
     // Accessible name for the × control (the app owns the wording / i18n).
     closeLabel: {
       type: String,
@@ -172,26 +225,31 @@ const Y = {
     }
   },
   setup(e, { emit: n }) {
-    const o = n;
-    return (l, i) => (t(), a("span", {
-      class: v(["ds-tag", [`ds-tag--${e.tone}`, { "is-rounded": e.rounded }]])
+    const t = n;
+    return (o, i) => (a(), l("span", {
+      class: $(["ds-tag", [
+        `ds-tag--${e.tone}`,
+        { "is-rounded": e.rounded, "is-clickable": e.clickable, "is-truncate": e.truncate }
+      ]])
     }, [
-      I(l.$slots, "default", {}, void 0, !0),
-      e.closable ? (t(), a("button", {
+      s("span", Lt, [
+        A(o.$slots, "default", {}, void 0, !0)
+      ]),
+      e.closable ? (a(), l("button", {
         key: 0,
         type: "button",
         class: "ds-tag__close",
         "aria-label": e.closeLabel || void 0,
-        onClick: i[0] || (i[0] = (d) => o(g(C)))
+        onClick: i[0] || (i[0] = ve((c) => t(_(X)), ["stop"]))
       }, [...i[1] || (i[1] = [
         s("i", {
           class: "material-icons",
           "aria-hidden": "true"
         }, "close", -1)
-      ])], 8, Ne)) : r("", !0)
+      ])], 8, wt)) : m("", !0)
     ], 2));
   }
-}), ta = /* @__PURE__ */ $(Re, [["__scopeId", "data-v-4507fdca"]]), H = {
+}), xi = /* @__PURE__ */ M(It, [["__scopeId", "data-v-0540d9b3"]]), Re = {
   ACCENT: "accent",
   // e.g. Work (purple)
   GREY: "grey",
@@ -204,82 +262,193 @@ const Y = {
   // coral
   WARNING: "warning"
   // orange
-}, Be = /* @__PURE__ */ k({
+}, Ct = /* @__PURE__ */ x({
   __name: "DsBadge",
   props: {
     tone: {
       type: String,
-      default: H.ACCENT
+      default: Re.ACCENT
     }
   },
   setup(e) {
-    return (n, o) => (t(), a("span", {
-      class: v(["ds-badge", `ds-badge--${e.tone}`])
+    return (n, t) => (a(), l("span", {
+      class: $(["ds-badge", `ds-badge--${e.tone}`])
     }, [
-      I(n.$slots, "default", {}, void 0, !0)
+      A(n.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), Ae = /* @__PURE__ */ $(Be, [["__scopeId", "data-v-f10a17a0"]]), Oe = ["src", "alt"], xe = ["aria-label"], Me = /* @__PURE__ */ k({
+}), _t = /* @__PURE__ */ M(Ct, [["__scopeId", "data-v-f10a17a0"]]), Dt = ["src", "alt"], At = ["aria-label"], Nt = /* @__PURE__ */ x({
   __name: "DsAvatar",
   props: {
     image: { type: String, default: "" },
     firstName: { type: String, default: "" },
     lastName: { type: String, default: "" },
+    // Explicit initials (DS `letters`) — overrides the computed firstName+lastName
+    // initials when non-empty. Passed through as-is (no uppercase transform),
+    // matching the DS: only the firstName+lastName path uppercases.
+    letters: { type: String, default: "" },
     uid: { type: String, default: "" },
     size: { type: Number, default: 40 },
+    // Explicit width/height (DS parity) — override `size` per-axis when present.
+    width: { type: Number, default: void 0 },
+    height: { type: Number, default: void 0 },
+    // Initials font-size in px — overrides the computed ~40%-of-box value when present.
+    textSize: { type: Number, default: void 0 },
+    // Initials font-weight — overrides the default token weight (900) when present.
+    fontWeight: { type: [Number, String], default: void 0 },
     circular: Boolean,
-    // Accessible label (defaults to "firstName lastName").
-    alt: { type: String, default: "" }
+    // Accessible label. Omitted → falls back to the computed name/letters. An explicit
+    // value wins — including `alt=""` for a deliberately decorative image (default is
+    // `undefined`, so "" is distinguishable from "not provided").
+    alt: { type: String, default: void 0 }
   },
   setup(e) {
-    const n = e, o = S(
-      () => n.firstName && n.lastName ? (n.firstName.charAt(0) + n.lastName.charAt(0)).toUpperCase() : ""
-    ), l = S(() => n.alt || `${n.firstName} ${n.lastName}`.trim()), i = S(() => ({ width: `${n.size}px`, height: `${n.size}px` })), d = S(() => {
-      const c = n.uid || n.firstName + n.lastName;
-      let u = 0;
-      for (let f = 0; f < c.length; f++)
-        u = c.charCodeAt(f) + ((u << 5) - u), u = u & u;
-      const b = [0, 0, 0];
-      for (let f = 0; f < 3; f++) b[f] = u >> f * 8 & 255;
-      const m = b[0] >= 200 && b[1] >= 200 && b[2] >= 200;
-      return { bg: `rgb(${b[0]}, ${b[1]}, ${b[2]})`, fg: m ? "#323f4b" : "#fff" };
+    const n = e, t = g(() => n.letters ? n.letters : n.firstName && n.lastName ? (n.firstName.charAt(0) + n.lastName.charAt(0)).toUpperCase() : ""), o = g(() => `${n.firstName} ${n.lastName}`.trim() || n.letters), i = g(() => {
+      var d;
+      return (d = n.alt) != null ? d : o.value;
+    }), c = g(() => {
+      var d;
+      return (d = n.width) != null ? d : n.size;
+    }), k = g(() => {
+      var d;
+      return (d = n.height) != null ? d : n.size;
+    }), f = g(() => ({ width: `${c.value}px`, height: `${k.value}px` })), y = g(
+      () => {
+        var d;
+        return (d = n.textSize) != null ? d : Math.round(Math.min(c.value, k.value) * 0.4);
+      }
+    ), r = g(() => {
+      const d = n.uid || n.firstName + n.lastName || n.letters;
+      let b = 0;
+      for (let p = 0; p < d.length; p++)
+        b = d.charCodeAt(p) + ((b << 5) - b), b = b & b;
+      const h = [0, 0, 0];
+      for (let p = 0; p < 3; p++) h[p] = b >> p * 8 & 255;
+      const T = h[0] >= 200 && h[1] >= 200 && h[2] >= 200;
+      return { bg: `rgb(${h[0]}, ${h[1]}, ${h[2]})`, fg: T ? "#323f4b" : "#fff" };
     });
-    return (c, u) => e.image ? (t(), a("img", {
+    return (d, b) => e.image ? (a(), l("img", {
       key: 0,
-      class: v(["ds-avatar", { "is-circular": e.circular }]),
+      class: $(["ds-avatar", { "is-circular": e.circular }]),
       src: e.image,
-      alt: e.alt,
-      style: w(i.value)
-    }, null, 14, Oe)) : o.value ? (t(), a("div", {
+      alt: i.value,
+      style: F(f.value)
+    }, null, 14, Dt)) : t.value ? (a(), l("div", {
       key: 1,
-      class: v(["ds-avatar ds-avatar--initials", { "is-circular": e.circular }]),
+      class: $(["ds-avatar ds-avatar--initials", { "is-circular": e.circular }]),
       role: "img",
-      "aria-label": l.value || void 0,
-      style: w([
-        i.value,
-        { background: d.value.bg, color: d.value.fg, fontSize: `${Math.round(e.size * 0.4)}px` }
+      "aria-label": i.value || void 0,
+      style: F([
+        f.value,
+        {
+          background: r.value.bg,
+          color: r.value.fg,
+          fontSize: `${y.value}px`,
+          fontWeight: e.fontWeight
+        }
       ])
-    }, y(o.value), 15, xe)) : (t(), a("div", {
+    }, S(t.value), 15, At)) : (a(), l("div", {
       key: 2,
-      class: v(["ds-avatar ds-avatar--placeholder", { "is-circular": e.circular }]),
-      style: w(i.value),
+      class: $(["ds-avatar ds-avatar--placeholder", { "is-circular": e.circular }]),
+      style: F(f.value),
       "aria-hidden": "true"
     }, null, 6));
   }
-}), aa = /* @__PURE__ */ $(Me, [["__scopeId", "data-v-e965ed47"]]), te = {
+}), Mi = /* @__PURE__ */ M(Nt, [["__scopeId", "data-v-4faae4da"]]), Rt = ["disabled", "name", "aria-label"], Bt = {
+  key: 0,
+  class: "ds-checkbox__mark",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2.5"
+}, xt = {
+  key: 1,
+  class: "ds-checkbox__mark",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2.5"
+}, Mt = {
+  key: 0,
+  class: "ds-checkbox__label"
+}, Ot = /* @__PURE__ */ x({
+  __name: "DsCheckbox",
+  props: /* @__PURE__ */ Q({
+    indeterminate: Boolean,
+    disabled: Boolean,
+    name: { type: String, default: "" },
+    // Label text (DS `label` prop); a default slot overrides it.
+    label: { type: String, default: "" },
+    // Accessible name when there is no visible label (e.g. a select-all in a table).
+    ariaLabel: { type: String, default: "" }
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const n = de(e, "modelValue"), t = e, o = U(null);
+    function i() {
+      o.value && (o.value.indeterminate = t.indeterminate);
+    }
+    return Qe(i), te(() => t.indeterminate, i), (c, k) => (a(), l("label", {
+      class: $(["ds-checkbox", { "is-disabled": e.disabled }])
+    }, [
+      Be(s("input", {
+        ref_key: "inputRef",
+        ref: o,
+        "onUpdate:modelValue": k[0] || (k[0] = (f) => n.value = f),
+        type: "checkbox",
+        class: "ds-checkbox__native",
+        disabled: e.disabled,
+        name: e.name || void 0,
+        "aria-label": e.ariaLabel || void 0
+      }, null, 8, Rt), [
+        [st, n.value]
+      ]),
+      s("span", {
+        class: $(["ds-checkbox__box", { "is-active": n.value || e.indeterminate }]),
+        "aria-hidden": "true"
+      }, [
+        e.indeterminate ? (a(), l("svg", Bt, [...k[1] || (k[1] = [
+          s("line", {
+            x1: "4",
+            y1: "8",
+            x2: "12",
+            y2: "8"
+          }, null, -1)
+        ])])) : n.value ? (a(), l("svg", xt, [...k[2] || (k[2] = [
+          s("path", { d: "M3.5 8.5l3 3 6-6" }, null, -1)
+        ])])) : m("", !0)
+      ], 2),
+      c.$slots.default || e.label ? (a(), l("span", Mt, [
+        A(c.$slots, "default", {}, () => [
+          H(S(e.label), 1)
+        ], !0)
+      ])) : m("", !0)
+    ], 2));
+  }
+}), et = /* @__PURE__ */ M(Ot, [["__scopeId", "data-v-2da3772e"]]), Ye = {
   LEFT: "left",
   CENTER: "center",
   RIGHT: "right"
-}, Ve = { class: "ds-table" }, Ue = { class: "ds-table__wrapper" }, Fe = { class: "ds-table__table" }, ze = { key: 0 }, _e = ["colspan"], Pe = /* @__PURE__ */ k({
+}, ee = {
+  LEFT: "left",
+  RIGHT: "right"
+}, Pt = ["aria-busy"], Ft = { class: "ds-table__table" }, zt = { class: "ds-table__head" }, Vt = {
+  key: 0,
+  class: "ds-table__select-all"
+}, Ut = { key: 0 }, Gt = ["colspan"], Ht = ["aria-busy"], Wt = { key: 0 }, Kt = ["colspan"], Yt = { key: 1 }, qt = ["colspan"], jt = ["title"], Xt = /* @__PURE__ */ x({
   __name: "DsTable",
   props: {
+    // --- Declarative API (default): the table builds itself from columns + rows. ---
     columns: {
       type: Array,
-      required: !0
+      default: () => []
     },
     rows: {
       type: Array,
-      required: !0
+      default: () => []
     },
     emptyMessage: {
       type: String,
@@ -289,59 +458,266 @@ const Y = {
     highlightRowId: {
       type: [String, Number],
       default: null
-    }
+    },
+    // Optional fixed row height (number → px, or any CSS length). Rows are
+    // content-driven by default; when set, this pins the height AND truncates
+    // overflowing cell text with an ellipsis.
+    rowHeight: {
+      type: [String, Number],
+      default: null
+    },
+    // --- Compound API (opt-in): compose DsTableRow + DsTableCell in the default slot. ---
+    // When true, the table renders a shell (headers + a sticky thead) and the body
+    // comes from the default slot instead of `rows`. Coexists with the declarative API.
+    compound: { type: Boolean, default: !1 },
+    // Header labels for the compound shell. Plain strings, or the DsTableHeader
+    // object form when a header column needs to be pinned (mirror its `width` on
+    // the matching DsCell so the sticky columns line up).
+    headers: { type: Array, default: () => [] },
+    // Render a leading select-all checkbox column (compound mode).
+    selectable: { type: Boolean, default: !1 },
+    allSelected: { type: Boolean, default: !1 },
+    someSelected: { type: Boolean, default: !1 },
+    // Accessible name for the select-all checkbox (no visible text in a 52px column).
+    selectAllLabel: { type: String, default: "" },
+    // Fixed height enabling the sticky-header scroll (compound mode).
+    height: {
+      type: [String, Number],
+      default: null
+    },
+    // --- Loading state (both APIs) ---
+    // When true, the body is a single centered spinner row spanning every column,
+    // shown INSTEAD of the empty state or the rows/slot (loading wins over both).
+    loading: { type: Boolean, default: !1 },
+    // Accessible name for the loading spinner (the app owns i18n); when omitted it
+    // falls back to DsSpinner's own default. Overridable per row via the #loading slot.
+    loadingLabel: { type: String, default: "" }
   },
-  setup(e) {
-    return (n, o) => (t(), a("div", Ve, [
-      s("div", Ue, [
-        s("table", Fe, [
+  emits: [ze],
+  setup(e, { emit: n }) {
+    const t = e, o = n, i = g(
+      () => Math.max(1, t.headers.length + (t.selectable ? 1 : 0))
+    ), c = g(
+      () => t.rowHeight == null ? void 0 : {
+        "--ds-table-row-height": typeof t.rowHeight == "number" ? `${t.rowHeight}px` : t.rowHeight
+      }
+    ), k = g(
+      () => t.height == null ? void 0 : { height: typeof t.height == "number" ? `${t.height}px` : t.height }
+    );
+    function f(v) {
+      o(ze, v);
+    }
+    function y(v) {
+      if (!v) return 0;
+      const D = /^(\d+(?:\.\d+)?)px$/.exec(v.trim());
+      return D ? parseFloat(D[1]) : 0;
+    }
+    const r = g(() => {
+      const v = {};
+      let D = 0;
+      for (const I of t.columns)
+        I.pinned === ee.LEFT && (v[I.key] = { position: "sticky", left: `${D}px` }, D += y(I.width));
+      let w = 0;
+      for (let I = t.columns.length - 1; I >= 0; I--) {
+        const P = t.columns[I];
+        P.pinned === ee.RIGHT && (v[P.key] = { position: "sticky", right: `${w}px` }, w += y(P.width));
+      }
+      return v;
+    }), d = g(() => {
+      const v = t.columns.filter((I) => I.pinned === ee.LEFT), D = t.columns.filter((I) => I.pinned === ee.RIGHT), w = /* @__PURE__ */ new Set();
+      return v.length && w.add(v[v.length - 1].key), D.length && w.add(D[0].key), w;
+    });
+    function b(v) {
+      if (v.pinned)
+        return {
+          "ds-table__pin": !0,
+          [`ds-table__pin--${v.pinned}`]: !0,
+          "ds-table__pin--edge": d.value.has(v.key)
+        };
+    }
+    function h(v) {
+      const D = r.value[v.key], w = v.width ? { width: v.width } : void 0;
+      if (!(!D && !w))
+        return { ...w, ...D };
+    }
+    function T(v) {
+      const D = r.value[v.key];
+      if (D)
+        return v.width ? { ...D, width: v.width } : D;
+    }
+    const p = g(
+      () => t.headers.map((v) => typeof v == "string" ? { label: v } : v)
+    ), V = g(() => {
+      const v = {}, D = p.value;
+      let w = 0;
+      D.forEach((P, ne) => {
+        P.pinned === ee.LEFT && (v[ne] = { position: "sticky", left: `${w}px` }, w += y(P.width));
+      });
+      let I = 0;
+      for (let P = D.length - 1; P >= 0; P--)
+        D[P].pinned === ee.RIGHT && (v[P] = { position: "sticky", right: `${I}px` }, I += y(D[P].width));
+      return v;
+    }), C = g(() => {
+      const v = p.value, D = v.map((P, ne) => ({ h: P, i: ne })).filter(({ h: P }) => P.pinned === ee.LEFT), w = v.map((P, ne) => ({ h: P, i: ne })).filter(({ h: P }) => P.pinned === ee.RIGHT), I = /* @__PURE__ */ new Set();
+      return D.length && I.add(D[D.length - 1].i), w.length && I.add(w[0].i), I;
+    });
+    function E(v, D) {
+      if (v.pinned)
+        return {
+          "ds-table__pin": !0,
+          [`ds-table__pin--${v.pinned}`]: !0,
+          "ds-table__pin--edge": C.value.has(D)
+        };
+    }
+    function N(v, D) {
+      const w = V.value[D], I = v.width ? { width: v.width } : void 0;
+      if (!(!w && !I))
+        return { ...I, ...w };
+    }
+    const R = U(null), q = U(!1), J = U(!1);
+    let W = null;
+    function ae() {
+      const v = R.value;
+      v && (q.value = v.scrollLeft > 0, J.value = v.scrollLeft + v.clientWidth < v.scrollWidth - 1);
+    }
+    function re(v) {
+      v == null || v.removeEventListener("scroll", ae), W == null || W.disconnect(), W = null;
+    }
+    return te(
+      R,
+      (v, D) => {
+        re(D != null ? D : null), v && (v.addEventListener("scroll", ae, { passive: !0 }), typeof ResizeObserver != "undefined" && (W = new ResizeObserver(ae), W.observe(v)), ae());
+      },
+      { immediate: !0 }
+    ), be(() => re(R.value)), te(
+      () => [t.columns.length, t.rows.length, t.headers.length, t.compound],
+      () => ue(ae)
+    ), (v, D) => e.compound ? (a(), l("div", {
+      key: 0,
+      class: "ds-table ds-table--compound",
+      "aria-busy": e.loading ? "true" : void 0
+    }, [
+      s("div", {
+        ref_key: "wrapperRef",
+        ref: R,
+        class: $(["ds-table__wrapper", { "is-scrolled-start": q.value, "is-scrolled-end": J.value }]),
+        style: F(k.value)
+      }, [
+        s("table", Ft, [
+          s("thead", zt, [
+            s("tr", null, [
+              e.selectable ? (a(), l("th", Vt, [
+                j(_(et), {
+                  "model-value": e.allSelected,
+                  indeterminate: !e.allSelected && e.someSelected,
+                  "aria-label": e.selectAllLabel || void 0,
+                  "onUpdate:modelValue": f
+                }, null, 8, ["model-value", "indeterminate", "aria-label"])
+              ])) : m("", !0),
+              (a(!0), l(z, null, Y(p.value, (w, I) => (a(), l("th", {
+                key: w.label,
+                class: $(E(w, I)),
+                style: F(N(w, I))
+              }, S(w.label), 7))), 128))
+            ])
+          ]),
+          s("tbody", null, [
+            e.loading ? (a(), l("tr", Ut, [
+              s("td", {
+                class: "ds-table__loading",
+                colspan: i.value,
+                "data-testid": "ds-table-loading"
+              }, [
+                A(v.$slots, "loading", {}, () => [
+                  j(_(fe), {
+                    label: e.loadingLabel || void 0
+                  }, null, 8, ["label"])
+                ], !0)
+              ], 8, Gt)
+            ])) : A(v.$slots, "default", { key: 1 }, void 0, !0)
+          ])
+        ])
+      ], 6)
+    ], 8, Pt)) : (a(), l("div", {
+      key: 1,
+      class: "ds-table",
+      "aria-busy": e.loading ? "true" : void 0
+    }, [
+      s("div", {
+        ref_key: "wrapperRef",
+        ref: R,
+        class: $(["ds-table__wrapper", { "is-scrolled-start": q.value, "is-scrolled-end": J.value }])
+      }, [
+        s("table", {
+          class: $(["ds-table__table", { "has-row-height": e.rowHeight != null }]),
+          style: F(c.value)
+        }, [
           s("thead", null, [
             s("tr", null, [
-              (t(!0), a(B, null, M(e.columns, (l) => {
-                var i;
-                return t(), a("th", {
-                  key: l.key,
-                  class: v(`ds-table__th--${(i = l.align) != null ? i : g(te).LEFT}`),
-                  style: w(l.width ? { width: l.width } : void 0)
-                }, y(l.label), 7);
+              (a(!0), l(z, null, Y(e.columns, (w) => {
+                var I;
+                return a(), l("th", {
+                  key: w.key,
+                  class: $([
+                    `ds-table__th--${(I = w.align) != null ? I : _(Ye).LEFT}`,
+                    b(w)
+                  ]),
+                  style: F(h(w))
+                }, S(w.label), 7);
               }), 128))
             ])
           ]),
           s("tbody", null, [
-            e.rows.length === 0 ? (t(), a("tr", ze, [
+            e.loading ? (a(), l("tr", Wt, [
+              s("td", {
+                class: "ds-table__loading",
+                colspan: Math.max(1, e.columns.length),
+                "data-testid": "ds-table-loading"
+              }, [
+                A(v.$slots, "loading", {}, () => [
+                  j(_(fe), {
+                    label: e.loadingLabel || void 0
+                  }, null, 8, ["label"])
+                ], !0)
+              ], 8, Kt)
+            ])) : e.rows.length === 0 ? (a(), l("tr", Yt, [
               s("td", {
                 class: "ds-table__empty",
-                colspan: e.columns.length,
+                colspan: Math.max(1, e.columns.length),
                 "data-testid": "ds-table-empty"
               }, [
-                I(n.$slots, "empty", {}, () => [
-                  A(y(e.emptyMessage), 1)
+                A(v.$slots, "empty", {}, () => [
+                  H(S(e.emptyMessage), 1)
                 ], !0)
-              ], 8, _e)
-            ])) : r("", !0),
-            (t(!0), a(B, null, M(e.rows, (l) => (t(), a("tr", {
-              key: l.id,
-              class: v({ "is-highlighted": l.id === e.highlightRowId }),
+              ], 8, qt)
+            ])) : (a(!0), l(z, { key: 2 }, Y(e.rows, (w) => (a(), l("tr", {
+              key: w.id,
+              class: $({ "is-highlighted": w.id === e.highlightRowId }),
               "data-testid": "ds-table-row"
             }, [
-              (t(!0), a(B, null, M(e.columns, (i) => {
-                var d;
-                return t(), a("td", {
-                  key: i.key,
-                  class: v(`ds-table__td--${(d = i.align) != null ? d : g(te).LEFT}`)
+              (a(!0), l(z, null, Y(e.columns, (I) => {
+                var P;
+                return a(), l("td", {
+                  key: I.key,
+                  class: $([
+                    `ds-table__td--${(P = I.align) != null ? P : _(Ye).LEFT}`,
+                    b(I)
+                  ]),
+                  style: F(T(I)),
+                  title: e.rowHeight != null && !v.$slots[`cell-${I.key}`] && w[I.key] != null ? String(w[I.key]) : void 0
                 }, [
-                  I(n.$slots, `cell-${i.key}`, { row: l }, () => [
-                    A(y(l[i.key]), 1)
+                  A(v.$slots, `cell-${I.key}`, { row: w }, () => [
+                    H(S(w[I.key]), 1)
                   ], !0)
-                ], 2);
+                ], 14, jt);
               }), 128))
             ], 2))), 128))
           ])
-        ])
-      ])
-    ]));
+        ], 6)
+      ], 2)
+    ], 8, Ht));
   }
-}), la = /* @__PURE__ */ $(Pe, [["__scopeId", "data-v-1735ff35"]]), P = {
+}), Oi = /* @__PURE__ */ M(Xt, [["__scopeId", "data-v-7a5bb12f"]]), ce = {
   TEXT: "text",
   EMAIL: "email",
   PASSWORD: "password",
@@ -349,26 +725,30 @@ const Y = {
   NUMBER: "number",
   SEARCH: "search",
   URL: "url"
-}, Ge = {
+}, Zt = {
   SM: "sm",
   // 36px
   MD: "md"
   // 48px
-}, Ye = { class: "ds-input__wrap" }, Ke = ["id", "type", "placeholder", "disabled", "name", "autocomplete", "aria-invalid", "aria-describedby"], He = {
+}, Qt = { class: "ds-input__wrap" }, Jt = {
   key: 0,
+  class: "material-icons ds-input__search-icon",
+  "aria-hidden": "true"
+}, ea = ["id", "type", "placeholder", "min", "max", "step", "disabled", "name", "autocomplete", "aria-invalid", "aria-describedby"], ta = {
+  key: 1,
   class: "ds-input__suffix"
-}, We = {
+}, aa = {
   key: 0,
   class: "material-icons ds-input__error-icon",
   "aria-hidden": "true"
-}, qe = ["aria-label", "aria-pressed"], pe = {
+}, la = ["disabled", "aria-label", "aria-pressed"], ia = {
   class: "material-icons",
   "aria-hidden": "true"
-}, Xe = ["id"], Ze = /* @__PURE__ */ k({
+}, na = ["id"], sa = /* @__PURE__ */ x({
   __name: "DsInput",
-  props: /* @__PURE__ */ O({
-    type: { type: String, default: P.TEXT },
-    size: { type: String, default: Ge.SM },
+  props: /* @__PURE__ */ Q({
+    type: { type: String, default: ce.TEXT },
+    size: { type: String, default: Zt.SM },
     placeholder: { type: String, default: "" },
     disabled: Boolean,
     error: Boolean,
@@ -378,82 +758,134 @@ const Y = {
     id: { type: String, default: "" },
     autocomplete: { type: String, default: "" },
     // Accessible name for the password visibility toggle.
-    toggleLabel: { type: String, default: "" }
+    toggleLabel: { type: String, default: "" },
+    // Native number-input constraints — only meaningful for type="number", forwarded
+    // to the real <input>. String is allowed so `step="any"` is expressible.
+    min: { type: [Number, String], default: void 0 },
+    max: { type: [Number, String], default: void 0 },
+    step: { type: [Number, String], default: void 0 }
   }, {
     modelValue: { default: "" },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ O([V, U], ["update:modelValue"]),
-  setup(e, { emit: n }) {
-    const o = W(e, "modelValue"), l = e, i = n, d = le(), c = N(!1), u = S(() => l.type === P.PASSWORD), b = S(
-      () => u.value && c.value ? P.TEXT : l.type
-    ), m = S(
-      () => !!d.suffix || l.error && l.showErrorIcon || u.value
+  emits: /* @__PURE__ */ Q([Se, ke, Me, Oe], ["update:modelValue"]),
+  setup(e, { expose: n, emit: t }) {
+    const o = de(e, "modelValue"), i = e, c = t, k = U();
+    function f(C) {
+      const E = C.relatedTarget, N = C.currentTarget;
+      E && (N != null && N.contains(E)) || c(Oe, C);
+    }
+    const y = Ee(), r = U(!1);
+    function d() {
+      i.disabled || (r.value = !r.value);
+    }
+    const b = g(() => i.type === ce.PASSWORD), h = g(() => i.type === ce.SEARCH), T = g(() => b.value ? r.value ? ce.TEXT : ce.PASSWORD : h.value ? ce.TEXT : i.type), p = g(() => b.value && !!i.toggleLabel), V = g(
+      () => !!y.suffix || i.error && i.showErrorIcon || p.value
     );
-    return (f, h) => (t(), a("div", {
-      class: v(["ds-input", [`ds-input--${e.size}`, { "is-error": e.error, "is-disabled": e.disabled }]])
+    return n({
+      focus: () => {
+        var C;
+        return (C = k.value) == null ? void 0 : C.focus();
+      },
+      focusAtEnd: async () => {
+        await ue();
+        const C = k.value;
+        if (!C) return;
+        C.focus();
+        const E = C.value.length;
+        try {
+          C.setSelectionRange(E, E);
+        } catch {
+        }
+      }
+    }), (C, E) => (a(), l("div", {
+      class: $(["ds-input", [
+        `ds-input--${e.size}`,
+        { "is-error": e.error, "is-disabled": e.disabled, "is-search": h.value }
+      ]]),
+      onFocusout: f
     }, [
-      s("div", Ye, [
-        q(s("input", {
+      s("div", Qt, [
+        h.value ? (a(), l("i", Jt, "search")) : m("", !0),
+        Be(s("input", {
           id: e.id || void 0,
-          "onUpdate:modelValue": h[0] || (h[0] = (T) => o.value = T),
-          class: v(["ds-input__control", { "has-suffix": m.value }]),
-          type: b.value,
+          ref_key: "inputEl",
+          ref: k,
+          "onUpdate:modelValue": E[0] || (E[0] = (N) => o.value = N),
+          class: $(["ds-input__control", { "has-suffix": V.value }]),
+          type: T.value,
           placeholder: e.placeholder,
+          min: e.min,
+          max: e.max,
+          step: e.step,
           disabled: e.disabled,
           name: e.name || void 0,
           autocomplete: e.autocomplete || void 0,
           "aria-invalid": e.error || void 0,
           "aria-describedby": e.error && e.errorMessage && e.id ? `${e.id}-error` : void 0,
-          onFocus: h[1] || (h[1] = (T) => i(g(V), T)),
-          onBlur: h[2] || (h[2] = (T) => i(g(U), T))
-        }, null, 42, Ke), [
-          [ce, o.value]
+          onFocus: E[1] || (E[1] = (N) => c(_(Se), N)),
+          onBlur: E[2] || (E[2] = (N) => c(_(ke), N)),
+          onChange: E[3] || (E[3] = (N) => c(_(Me), N))
+        }, null, 42, ea), [
+          [ot, o.value]
         ]),
-        m.value ? (t(), a("div", He, [
-          I(f.$slots, "suffix", {}, void 0, !0),
-          e.error && e.showErrorIcon ? (t(), a("i", We, "warning")) : u.value ? (t(), a("button", {
+        V.value ? (a(), l("div", ta, [
+          A(C.$slots, "suffix", {}, void 0, !0),
+          e.error && e.showErrorIcon ? (a(), l("i", aa, "warning")) : p.value ? (a(), l("button", {
             key: 1,
             type: "button",
             class: "ds-input__toggle",
+            disabled: e.disabled,
             "aria-label": e.toggleLabel || void 0,
-            "aria-pressed": c.value,
-            onClick: h[3] || (h[3] = (T) => c.value = !c.value)
+            "aria-pressed": r.value,
+            onClick: d
           }, [
-            s("i", pe, y(c.value ? "visibility" : "visibility_off"), 1)
-          ], 8, qe)) : r("", !0)
-        ])) : r("", !0)
+            s("i", ia, S(r.value ? "visibility" : "visibility_off"), 1)
+          ], 8, la)) : m("", !0)
+        ])) : m("", !0)
       ]),
-      e.error && e.errorMessage ? (t(), a("p", {
+      e.error && e.errorMessage ? (a(), l("p", {
         key: 0,
         id: e.id ? `${e.id}-error` : void 0,
         class: "ds-input__error"
-      }, y(e.errorMessage), 9, Xe)) : r("", !0)
-    ], 2));
+      }, S(e.errorMessage), 9, na)) : m("", !0)
+    ], 34));
   }
-}), ia = /* @__PURE__ */ $(Ze, [["__scopeId", "data-v-d4b27b55"]]), je = ["id", "placeholder", "rows", "disabled", "name", "aria-invalid", "aria-describedby"], Qe = ["id"], Je = /* @__PURE__ */ k({
+}), Pi = /* @__PURE__ */ M(sa, [["__scopeId", "data-v-a7832472"]]), oa = {
+  VERTICAL: "vertical"
+}, da = ["id", "placeholder", "rows", "disabled", "name", "aria-invalid", "aria-describedby"], ra = ["id"], ca = /* @__PURE__ */ x({
+  inheritAttrs: !1,
   __name: "DsTextarea",
-  props: /* @__PURE__ */ O({
+  props: /* @__PURE__ */ Q({
     placeholder: { type: String, default: "" },
     rows: { type: Number, default: 4 },
     disabled: Boolean,
     error: Boolean,
     errorMessage: { type: String, default: "" },
     name: { type: String, default: "" },
-    id: { type: String, default: "" }
+    id: { type: String, default: "" },
+    // CSS resize behavior of the control (default vertical, mirrors the DS).
+    resize: {
+      type: String,
+      default: oa.VERTICAL
+    }
   }, {
     modelValue: { default: "" },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ O([V, U], ["update:modelValue"]),
+  emits: /* @__PURE__ */ Q([Se, ke], ["update:modelValue"]),
   setup(e, { emit: n }) {
-    const o = W(e, "modelValue"), l = n;
-    return (i, d) => (t(), a("div", {
-      class: v(["ds-textarea", { "is-error": e.error, "is-disabled": e.disabled }])
-    }, [
-      q(s("textarea", {
+    const t = de(e, "modelValue"), o = n, i = dt(), c = (y) => y === "class" || y === "style" || y.startsWith("data-"), k = g(
+      () => Object.fromEntries(Object.entries(i).filter(([y]) => c(y)))
+    ), f = g(
+      () => Object.fromEntries(Object.entries(i).filter(([y]) => !c(y)))
+    );
+    return (y, r) => (a(), l("div", he({
+      class: ["ds-textarea", [`ds-textarea--resize-${e.resize}`, { "is-error": e.error, "is-disabled": e.disabled }]]
+    }, k.value), [
+      Be(s("textarea", he(f.value, {
         id: e.id || void 0,
-        "onUpdate:modelValue": d[0] || (d[0] = (c) => o.value = c),
+        "onUpdate:modelValue": r[0] || (r[0] = (d) => t.value = d),
         class: "ds-textarea__control",
         placeholder: e.placeholder,
         rows: e.rows,
@@ -461,339 +893,459 @@ const Y = {
         name: e.name || void 0,
         "aria-invalid": e.error || void 0,
         "aria-describedby": e.error && e.errorMessage && e.id ? `${e.id}-error` : void 0,
-        onFocus: d[1] || (d[1] = (c) => l(g(V), c)),
-        onBlur: d[2] || (d[2] = (c) => l(g(U), c))
-      }, null, 40, je), [
-        [ue, o.value]
+        onFocus: r[1] || (r[1] = (d) => o(_(Se), d)),
+        onBlur: r[2] || (r[2] = (d) => o(_(ke), d))
+      }), null, 16, da), [
+        [rt, t.value]
       ]),
-      e.error && e.errorMessage ? (t(), a("p", {
+      e.error && e.errorMessage ? (a(), l("p", {
         key: 0,
         id: e.id ? `${e.id}-error` : void 0,
         class: "ds-textarea__error"
-      }, y(e.errorMessage), 9, Qe)) : r("", !0)
-    ], 2));
-  }
-}), na = /* @__PURE__ */ $(Je, [["__scopeId", "data-v-cfa74e3d"]]), et = ["disabled", "name"], tt = {
-  key: 0,
-  class: "ds-checkbox__mark",
-  viewBox: "0 0 16 16",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "2.5"
-}, at = {
-  key: 1,
-  class: "ds-checkbox__mark",
-  viewBox: "0 0 16 16",
-  fill: "none",
-  stroke: "currentColor",
-  "stroke-width": "2.5"
-}, lt = {
-  key: 0,
-  class: "ds-checkbox__label"
-}, it = /* @__PURE__ */ k({
-  __name: "DsCheckbox",
-  props: /* @__PURE__ */ O({
-    indeterminate: Boolean,
-    disabled: Boolean,
-    name: { type: String, default: "" },
-    // Label text (DS `label` prop); a default slot overrides it.
-    label: { type: String, default: "" }
-  }, {
-    modelValue: { type: Boolean, default: !1 },
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(e) {
-    const n = W(e, "modelValue"), o = e, l = N(null);
-    function i() {
-      l.value && (l.value.indeterminate = o.indeterminate);
-    }
-    return fe(i), ie(() => o.indeterminate, i), (d, c) => (t(), a("label", {
-      class: v(["ds-checkbox", { "is-disabled": e.disabled }])
-    }, [
-      q(s("input", {
-        ref_key: "inputRef",
-        ref: l,
-        "onUpdate:modelValue": c[0] || (c[0] = (u) => n.value = u),
-        type: "checkbox",
-        class: "ds-checkbox__native",
-        disabled: e.disabled,
-        name: e.name || void 0
-      }, null, 8, et), [
-        [ye, n.value]
-      ]),
-      s("span", {
-        class: v(["ds-checkbox__box", { "is-active": n.value || e.indeterminate }]),
-        "aria-hidden": "true"
-      }, [
-        e.indeterminate ? (t(), a("svg", tt, [...c[1] || (c[1] = [
-          s("line", {
-            x1: "4",
-            y1: "8",
-            x2: "12",
-            y2: "8"
-          }, null, -1)
-        ])])) : n.value ? (t(), a("svg", at, [...c[2] || (c[2] = [
-          s("path", { d: "M3.5 8.5l3 3 6-6" }, null, -1)
-        ])])) : r("", !0)
-      ], 2),
-      d.$slots.default || e.label ? (t(), a("span", lt, [
-        I(d.$slots, "default", {}, () => [
-          A(y(e.label), 1)
-        ], !0)
-      ])) : r("", !0)
-    ], 2));
+      }, S(e.errorMessage), 9, ra)) : m("", !0)
+    ], 16));
   }
-}), oa = /* @__PURE__ */ $(it, [["__scopeId", "data-v-0c1a3c0a"]]), nt = {
+}), Fi = /* @__PURE__ */ M(ca, [["__scopeId", "data-v-745c01de"]]), ua = {
   SUCCESS: "success",
   INFO: "info",
   WARNING: "warning",
   ERROR: "error"
-}, ot = {
+}, fa = {
   LIGHT: "light",
   // tinted: family tint bg + mid border + shadow text
   DARK: "dark"
   // solid: family shadow bg + white text
-}, st = {
+}, ba = {
   success: "check_circle",
   info: "info",
   warning: "warning",
   error: "error"
-}, dt = {
+}, va = {
   key: 0,
   class: "material-icons ds-alert__icon",
   "aria-hidden": "true"
-}, rt = { class: "ds-alert__content" }, ct = {
+}, ya = { class: "ds-alert__content" }, ma = {
   key: 1,
   class: "ds-alert__body"
-}, ut = ["aria-label"], ft = /* @__PURE__ */ k({
+}, ha = ["aria-label"], ga = /* @__PURE__ */ x({
   __name: "DsAlert",
-  props: {
-    type: { type: String, default: nt.INFO },
-    effect: { type: String, default: ot.LIGHT },
+  props: /* @__PURE__ */ Q({
+    type: { type: String, default: ua.INFO },
+    effect: { type: String, default: fa.LIGHT },
     title: { type: String, default: "" },
     description: { type: String, default: "" },
     showIcon: Boolean,
     closable: Boolean,
     center: Boolean,
+    // Bold the title even without a body (DS: fontWeight = body || boldTitle ? 700 : 400).
+    boldTitle: Boolean,
     closeLabel: { type: String, default: "" }
-  },
-  emits: [C],
+  }, {
+    visible: { type: Boolean, default: !0 },
+    visibleModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Q([X], ["update:visible"]),
   setup(e, { emit: n }) {
-    const o = e, l = n, i = le(), d = N(!0), c = S(() => st[o.type]), u = S(() => !!i.default || o.description.length > 0);
-    function b() {
-      d.value = !1, l(C);
+    const t = e, o = n, i = de(e, "visible"), c = Ee(), k = g(() => ba[t.type]), f = g(() => !!c.default || t.description.length > 0), y = g(() => !!c.title || t.title.length > 0);
+    function r() {
+      i.value = !1, o(X);
     }
-    return (m, f) => d.value ? (t(), a("div", {
-      key: 0,
-      class: v(["ds-alert", [`ds-alert--${e.type}`, `ds-alert--${e.effect}`, { "is-center": e.center }]]),
-      role: "alert"
-    }, [
-      e.showIcon ? (t(), a("i", dt, y(c.value), 1)) : r("", !0),
-      s("div", rt, [
-        e.title ? (t(), a("div", {
+    return (d, b) => (a(), G(Le, { name: "ds-alert-fade" }, {
+      default: ie(() => [
+        i.value ? (a(), l("div", {
           key: 0,
-          class: v(["ds-alert__title", { "has-body": u.value }])
-        }, y(e.title), 3)) : r("", !0),
-        u.value ? (t(), a("div", ct, [
-          I(m.$slots, "default", {}, () => [
-            A(y(e.description), 1)
-          ], !0)
-        ])) : r("", !0)
+          class: $(["ds-alert", [`ds-alert--${e.type}`, `ds-alert--${e.effect}`, { "is-center": e.center }]]),
+          role: "alert"
+        }, [
+          e.showIcon ? (a(), l("i", va, S(k.value), 1)) : m("", !0),
+          s("div", ya, [
+            y.value ? (a(), l("div", {
+              key: 0,
+              class: $(["ds-alert__title", { "has-body": f.value, "is-bold": f.value || e.boldTitle }])
+            }, [
+              A(d.$slots, "title", {}, () => [
+                H(S(e.title), 1)
+              ], !0)
+            ], 2)) : m("", !0),
+            f.value ? (a(), l("div", ma, [
+              A(d.$slots, "default", {}, () => [
+                H(S(e.description), 1)
+              ], !0)
+            ])) : m("", !0)
+          ]),
+          e.closable ? (a(), l("button", {
+            key: 1,
+            type: "button",
+            class: "ds-alert__close",
+            "aria-label": e.closeLabel || void 0,
+            onClick: r
+          }, [...b[0] || (b[0] = [
+            s("i", {
+              class: "material-icons",
+              "aria-hidden": "true"
+            }, "close", -1)
+          ])], 8, ha)) : m("", !0)
+        ], 2)) : m("", !0)
       ]),
-      e.closable ? (t(), a("button", {
-        key: 1,
-        type: "button",
-        class: "ds-alert__close",
-        "aria-label": e.closeLabel || void 0,
-        onClick: b
-      }, [...f[0] || (f[0] = [
-        s("i", {
-          class: "material-icons",
-          "aria-hidden": "true"
-        }, "close", -1)
-      ])], 8, ut)) : r("", !0)
-    ], 2)) : r("", !0);
+      _: 3
+    }));
   }
-}), sa = /* @__PURE__ */ $(ft, [["__scopeId", "data-v-58ce7b87"]]), yt = {
+}), zi = /* @__PURE__ */ M(ga, [["__scopeId", "data-v-9ced26d6"]]), Sa = {
+  SUCCESS: "success",
   INFO: "info",
   WARNING: "warning",
   ERROR: "error"
-}, vt = {
+}, ka = {
   TOP_LEFT: "top-left",
   TOP_RIGHT: "top-right",
   BOTTOM_LEFT: "bottom-left",
   BOTTOM_RIGHT: "bottom-right"
-}, bt = {
+}, pa = {
+  success: "check_circle",
   info: "mode_edit",
   warning: "warning",
-  error: "warning"
-}, mt = {
+  error: "error"
+}, qe = {
+  BLANK: "_blank",
+  SELF: "_self",
+  PARENT: "_parent",
+  TOP: "_top"
+}, $a = {
   class: "material-icons ds-notification__icon",
   "aria-hidden": "true"
-}, gt = { class: "ds-notification__content" }, ht = {
+}, Ta = { class: "ds-notification__content" }, Ea = {
   key: 0,
   class: "ds-notification__title"
-}, St = {
+}, La = {
   key: 1,
   class: "ds-notification__desc"
-}, kt = ["href"], $t = ["aria-label"], Tt = /* @__PURE__ */ k({
+}, wa = ["href", "target", "rel"], Ia = ["aria-label"], Ca = /* @__PURE__ */ x({
   __name: "DsNotification",
   props: {
-    type: { type: String, default: yt.INFO },
+    type: { type: String, default: Sa.INFO },
     position: {
       type: String,
-      default: vt.BOTTOM_LEFT
+      default: ka.BOTTOM_LEFT
     },
     title: { type: String, default: "" },
     description: { type: String, default: "" },
     linkTitle: { type: String, default: "" },
     link: { type: String, default: "" },
+    // `target` del <a> del link. Default `_blank` para no romper el comportamiento
+    // histórico. Con `_blank` se emite `rel="noopener noreferrer"` (seguridad). Para
+    // navegación in-app (SPA) escuchá `navigate` y enrutá con el router de la app.
+    linkTarget: {
+      type: String,
+      default: qe.BLANK
+    },
     showClose: { type: Boolean, default: !0 },
-    closeLabel: { type: String, default: "" }
+    // Accessible name for the icon-only close button — provide it whenever
+    // `showClose` is on, or the button has no name for screen readers (as with any
+    // icon-only control, cf. DsButton circle/square requiring `ariaLabel`). The
+    // library never hardcodes copy; the consuming app owns i18n.
+    closeLabel: { type: String, default: "" },
+    // Auto-dismiss delay in ms (DS default 3500). 0 disables it. The timer pauses
+    // while the pointer is over the card and resumes with the remaining time.
+    duration: { type: Number, default: 3500 }
   },
-  emits: [C],
+  emits: [X, We],
   setup(e, { emit: n }) {
-    const o = e, l = n, i = N(!0), d = S(() => bt[o.type]);
-    function c() {
-      i.value = !1, l(C);
+    const t = e, o = n, i = U(!0), c = g(() => pa[t.type]), k = g(
+      () => t.linkTarget === qe.BLANK ? "noopener noreferrer" : void 0
+    );
+    let f, y = 0, r = t.duration;
+    function d() {
+      f && (clearTimeout(f), f = void 0);
     }
-    return (u, b) => (t(), D(ne, { to: "body" }, [
-      i.value ? (t(), a("div", {
-        key: 0,
-        class: v(["ds-notification", `ds-notification--${e.position}`])
-      }, [
-        s("div", {
-          class: v(["ds-notification__card", `ds-notification__card--${e.type}`]),
-          role: "alert"
-        }, [
-          s("i", mt, y(d.value), 1),
-          s("div", gt, [
-            e.title ? (t(), a("span", ht, y(e.title), 1)) : r("", !0),
-            e.description ? (t(), a("p", St, y(e.description), 1)) : r("", !0),
-            e.linkTitle ? (t(), a("a", {
-              key: 2,
-              class: "ds-notification__link",
-              href: e.link || void 0,
-              target: "_blank",
-              rel: "noreferrer"
-            }, y(e.linkTitle), 9, kt)) : r("", !0)
-          ]),
-          e.showClose ? (t(), a("button", {
+    function b(C) {
+      d(), !(t.duration <= 0 || !i.value) && (y = Date.now(), f = setTimeout(p, C));
+    }
+    function h() {
+      f && (r -= Date.now() - y, d());
+    }
+    function T() {
+      b(r > 0 ? r : t.duration);
+    }
+    function p() {
+      d(), i.value = !1, o(X);
+    }
+    function V(C) {
+      o(We, C);
+    }
+    return Qe(() => b(t.duration)), be(d), (C, E) => (a(), G(Je, { to: "body" }, [
+      j(Le, {
+        name: "ds-notification",
+        appear: ""
+      }, {
+        default: ie(() => [
+          i.value ? (a(), l("div", {
             key: 0,
-            type: "button",
-            class: "ds-notification__close",
-            "aria-label": e.closeLabel || void 0,
-            onClick: c
-          }, [...b[0] || (b[0] = [
-            s("i", {
-              class: "material-icons",
-              "aria-hidden": "true"
-            }, "close", -1)
-          ])], 8, $t)) : r("", !0)
-        ], 2)
-      ], 2)) : r("", !0)
+            class: $(["ds-notification", `ds-notification--${e.position}`])
+          }, [
+            s("div", {
+              class: $(["ds-notification__card", `ds-notification__card--${e.type}`]),
+              role: "alert",
+              onMouseenter: h,
+              onMouseleave: T
+            }, [
+              s("i", $a, S(c.value), 1),
+              s("div", Ta, [
+                e.title ? (a(), l("span", Ea, S(e.title), 1)) : m("", !0),
+                e.description ? (a(), l("p", La, S(e.description), 1)) : m("", !0),
+                e.linkTitle ? (a(), l("a", {
+                  key: 2,
+                  class: "ds-notification__link",
+                  href: e.link || void 0,
+                  target: e.linkTarget,
+                  rel: k.value,
+                  onClick: V
+                }, S(e.linkTitle), 9, wa)) : m("", !0)
+              ]),
+              e.showClose ? (a(), l("button", {
+                key: 0,
+                type: "button",
+                class: "ds-notification__close",
+                "aria-label": e.closeLabel || void 0,
+                onClick: p
+              }, [...E[0] || (E[0] = [
+                s("i", {
+                  class: "material-icons",
+                  "aria-hidden": "true"
+                }, "close", -1)
+              ])], 8, Ia)) : m("", !0)
+            ], 34)
+          ], 2)) : m("", !0)
+        ]),
+        _: 1
+      })
     ]));
   }
-}), da = /* @__PURE__ */ $(Tt, [["__scopeId", "data-v-287d5c06"]]), It = ["aria-label"], Ct = {
+}), Vi = /* @__PURE__ */ M(Ca, [["__scopeId", "data-v-f1d76da5"]]), _a = ["aria-modal", "aria-labelledby", "aria-label"], Da = {
   key: 0,
   class: "ds-modal__header"
-}, Et = { class: "ds-modal__title" }, Lt = { class: "ds-modal__body" }, Dt = {
+}, Aa = ["id"], Na = { class: "ds-modal__body" }, Ra = {
   key: 1,
   class: "ds-modal__footer"
-}, wt = /* @__PURE__ */ k({
+}, Ba = /* @__PURE__ */ x({
   __name: "DsModal",
   props: {
     open: Boolean,
     title: { type: String, default: "" },
     showClose: { type: Boolean, default: !0 },
     width: { type: String, default: "440px" },
+    // Explicit dialog height (any CSS length). Unset = content height.
+    height: { type: String, default: "" },
+    // Top offset of the dialog inside the fixed backdrop.
+    top: { type: String, default: "15vh" },
+    // Center the body text.
+    center: Boolean,
+    // false = render in-flow (no backdrop / portal / scroll-lock) for specimen cards.
+    fixed: { type: Boolean, default: !0 },
     closeOnBackdrop: { type: Boolean, default: !0 },
-    closeLabel: { type: String, default: "" }
+    // Symmetric with closeOnBackdrop: a non-dismissable flow (closeOnBackdrop=false)
+    // can also opt out of Escape-to-close. Default true (Escape closes).
+    closeOnEscape: { type: Boolean, default: !0 },
+    // Accessible name for the icon-only close button; English default (app owns i18n),
+    // matching DsDataCard so the control is never unnamed.
+    closeLabel: { type: String, default: "Close" }
   },
-  emits: [C],
+  emits: [X],
   setup(e, { emit: n }) {
-    const o = e, l = n, i = N(null);
-    let d = null;
-    function c() {
-      o.closeOnBackdrop && l(C);
+    const t = e, o = n, i = U(null);
+    let c = null;
+    const k = xe(), f = g(() => ({
+      width: t.width,
+      ...t.height ? { height: t.height } : {}
+    }));
+    function y() {
+      t.fixed && t.closeOnBackdrop && o(X);
     }
-    function u() {
+    function r() {
       return i.value ? Array.from(i.value.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter(
-        (f) => f.offsetParent !== null
+        (p) => p.offsetParent !== null
       ) : [];
     }
-    function b(m) {
-      var x;
-      if (m.key === "Escape") {
-        l(C);
+    function d(T) {
+      var E;
+      if (T.key === "Escape") {
+        t.closeOnEscape && o(X);
         return;
       }
-      if (m.key !== "Tab") return;
-      const f = u();
-      if (f.length === 0) {
-        m.preventDefault(), (x = i.value) == null || x.focus();
+      if (T.key !== "Tab") return;
+      const p = r();
+      if (p.length === 0) {
+        T.preventDefault(), (E = i.value) == null || E.focus();
         return;
       }
-      const h = f[0], T = f[f.length - 1];
-      m.shiftKey && document.activeElement === h ? (m.preventDefault(), T.focus()) : !m.shiftKey && document.activeElement === T && (m.preventDefault(), h.focus());
-    }
-    return ie(
-      () => o.open,
-      (m) => {
-        var f;
-        typeof document != "undefined" && (m ? (d = document.activeElement, document.addEventListener("keydown", b), document.body.style.overflow = "hidden", ve(() => {
-          var h, T;
-          return (T = (h = u()[0]) != null ? h : i.value) == null ? void 0 : T.focus();
-        })) : (document.removeEventListener("keydown", b), document.body.style.overflow = "", (f = d == null ? void 0 : d.focus) == null || f.call(d)));
+      const V = p[0], C = p[p.length - 1];
+      T.shiftKey && document.activeElement === V ? (T.preventDefault(), C.focus()) : !T.shiftKey && document.activeElement === C && (T.preventDefault(), V.focus());
+    }
+    function b() {
+      c = document.activeElement, document.addEventListener("keydown", d), document.body.style.overflow = "hidden", ue(() => {
+        var T, p;
+        return (p = (T = r()[0]) != null ? T : i.value) == null ? void 0 : p.focus();
+      });
+    }
+    function h(T = !0) {
+      var p;
+      document.removeEventListener("keydown", d), document.body.style.overflow = "", T && ((p = c == null ? void 0 : c.focus) == null || p.call(c));
+    }
+    return te(
+      () => t.open && t.fixed,
+      (T, p) => {
+        typeof document != "undefined" && (T ? b() : p && h());
       },
       { immediate: !0 }
-    ), oe(() => {
-      typeof document != "undefined" && (document.removeEventListener("keydown", b), document.body.style.overflow = "");
-    }), (m, f) => (t(), D(ne, { to: "body" }, [
-      e.open ? (t(), a("div", {
-        key: 0,
-        class: "ds-modal",
-        onClick: c
-      }, [
-        s("div", {
-          ref_key: "dialogRef",
-          ref: i,
-          class: "ds-modal__dialog",
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": e.title || "dialog",
-          tabindex: "-1",
-          style: w({ width: e.width }),
-          onClick: f[1] || (f[1] = se(() => {
-          }, ["stop"]))
-        }, [
-          e.title || e.showClose ? (t(), a("div", Ct, [
-            s("span", Et, y(e.title), 1),
-            e.showClose ? (t(), D(g(K), {
-              key: 0,
-              variant: "tertiary",
-              circle: "",
-              "left-icon": "close",
-              "aria-label": e.closeLabel || void 0,
-              onClick: f[0] || (f[0] = (h) => l(g(C)))
-            }, null, 8, ["aria-label"])) : r("", !0)
-          ])) : r("", !0),
-          s("div", Lt, [
-            I(m.$slots, "default", {}, void 0, !0)
-          ]),
-          m.$slots.footer ? (t(), a("div", Dt, [
-            I(m.$slots, "footer", {}, void 0, !0)
-          ])) : r("", !0)
-        ], 12, It)
-      ])) : r("", !0)
-    ]));
+    ), be(() => {
+      typeof document != "undefined" && h(!1);
+    }), (T, p) => (a(), G(Je, {
+      to: "body",
+      disabled: !e.fixed
+    }, [
+      j(Le, { name: "ds-modal" }, {
+        default: ie(() => [
+          e.open ? (a(), l("div", {
+            key: 0,
+            class: $(["ds-modal", { "is-fixed": e.fixed }]),
+            style: F(e.fixed ? { paddingTop: e.top } : void 0),
+            onClick: y
+          }, [
+            s("div", {
+              ref_key: "dialogRef",
+              ref: i,
+              class: $(["ds-modal__dialog", { "is-center": e.center }]),
+              role: "dialog",
+              "aria-modal": e.fixed ? "true" : "false",
+              "aria-labelledby": e.title ? _(k) : void 0,
+              "aria-label": e.title ? void 0 : "dialog",
+              tabindex: "-1",
+              style: F(f.value),
+              onClick: p[1] || (p[1] = ve(() => {
+              }, ["stop"]))
+            }, [
+              e.title || e.showClose ? (a(), l("div", Da, [
+                s("span", {
+                  id: _(k),
+                  class: "ds-modal__title"
+                }, S(e.title), 9, Aa),
+                e.showClose ? (a(), G(_(oe), {
+                  key: 0,
+                  variant: "tertiary",
+                  circle: "",
+                  "left-icon": "close",
+                  "aria-label": e.closeLabel || void 0,
+                  onClick: p[0] || (p[0] = (V) => o(_(X)))
+                }, null, 8, ["aria-label"])) : m("", !0)
+              ])) : m("", !0),
+              s("div", Na, [
+                A(T.$slots, "default", {}, void 0, !0)
+              ]),
+              T.$slots.footer ? (a(), l("div", Ra, [
+                A(T.$slots, "footer", {}, void 0, !0)
+              ])) : m("", !0)
+            ], 14, _a)
+          ], 6)) : m("", !0)
+        ]),
+        _: 3
+      })
+    ], 8, ["disabled"]));
   }
-}), ra = /* @__PURE__ */ $(wt, [["__scopeId", "data-v-6eecaabb"]]), G = {
+}), Ui = /* @__PURE__ */ M(Ba, [["__scopeId", "data-v-a759ae72"]]), xa = {
+  TOP: "top",
+  BOTTOM: "bottom",
+  LEFT: "left",
+  RIGHT: "right"
+}, Ma = ["id"], Oa = /* @__PURE__ */ x({
+  __name: "DsTooltip",
+  props: {
+    // Bubble text. Rich content can be provided via the #content slot instead.
+    content: { type: String, default: "" },
+    placement: {
+      type: String,
+      default: xa.TOP
+    },
+    // Hover delay before showing, ms. Focus always shows immediately (no delay).
+    delay: { type: Number, default: 300 },
+    // Wrap a full-width/block trigger (DsInput/DsTextarea) — the wrapper becomes
+    // `display: block` instead of the default inline-flex, so it doesn't squash the control.
+    block: { type: Boolean, default: !1 },
+    // Force the tooltip off regardless of content/slot. Lets a consumer show it only
+    // under a condition (e.g. only-if-truncated) without emptying the content prop —
+    // the #content slot is always truthy, so it's the only way to suppress that path.
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const n = e, t = Ee(), o = xe(), i = U(!1), c = g(() => !n.disabled && (n.content.length > 0 || !!t.content));
+    te(
+      () => n.disabled,
+      (R) => {
+        R && N();
+      }
+    );
+    let k = !1, f = !1, y = null, r = null, d = null;
+    function b() {
+      y !== null && (clearTimeout(y), y = null);
+    }
+    function h(R) {
+      R && (r && r !== R && T(), r !== R && (r = R, d = R.getAttribute("aria-describedby"), R.setAttribute(
+        "aria-describedby",
+        d ? `${d} ${o}` : o
+      )));
+    }
+    function T() {
+      r && (d !== null ? r.setAttribute("aria-describedby", d) : r.removeAttribute("aria-describedby"), r = null, d = null);
+    }
+    function p() {
+      c.value && (k = !0, b(), y = setTimeout(() => {
+        i.value = !0;
+      }, n.delay));
+    }
+    function V() {
+      k = !1, b(), f || N();
+    }
+    function C(R) {
+      c.value && (f = !0, b(), i.value = !0, h(R.target));
+    }
+    function E(R) {
+      const q = R.relatedTarget, J = R.currentTarget;
+      q && (J != null && J.contains(q)) || (f = !1, k || N());
+    }
+    function N() {
+      b(), i.value = !1, T();
+    }
+    return be(() => {
+      b(), T();
+    }), (R, q) => (a(), l("div", {
+      class: $(["ds-tooltip", { "ds-tooltip--block": e.block }]),
+      onMouseenter: p,
+      onMouseleave: V,
+      onFocusin: C,
+      onFocusout: E,
+      onKeydown: ct(N, ["esc"])
+    }, [
+      A(R.$slots, "default", {}, void 0, !0),
+      j(Le, { name: "ds-tooltip-fade" }, {
+        default: ie(() => [
+          i.value ? (a(), l("div", {
+            key: 0,
+            id: _(o),
+            class: $(["ds-tooltip__bubble", `ds-tooltip__bubble--${e.placement}`]),
+            role: "tooltip"
+          }, [
+            A(R.$slots, "content", {}, () => [
+              H(S(e.content), 1)
+            ], !0)
+          ], 10, Ma)) : m("", !0)
+        ]),
+        _: 3
+      })
+    ], 34));
+  }
+}), Gi = /* @__PURE__ */ M(Oa, [["__scopeId", "data-v-26c35ba5"]]), Ne = {
   VERIFIED: "verified",
   UNVERIFIED: "unverified",
   NEW: "new"
-}, Nt = ["aria-label", "title"], Rt = /* @__PURE__ */ k({
+}, Pa = ["aria-label", "title"], Fa = /* @__PURE__ */ x({
   __name: "DsVerificationIcon",
   props: {
     // true = verified · false = not verified · null/undefined = newly found.
@@ -818,38 +1370,38 @@ const Y = {
     }
   },
   setup(e) {
-    const n = e, o = S(() => n.verified === null || n.verified === void 0 ? {
-      state: G.NEW,
+    const n = e, t = g(() => n.verified === null || n.verified === void 0 ? {
+      state: Ne.NEW,
       icon: "new_releases",
       label: "Newly found"
     } : n.verified ? {
-      state: G.VERIFIED,
+      state: Ne.VERIFIED,
       icon: "verified",
       label: "Verified"
     } : {
-      state: G.UNVERIFIED,
+      state: Ne.UNVERIFIED,
       icon: n.isContactData ? "dangerous" : "error",
       label: "Not verified"
     });
-    return (l, i) => (t(), a("i", {
-      class: v(["material-icons ds-verification-icon", [
-        `ds-verification-icon--${o.value.state}`,
+    return (o, i) => (a(), l("i", {
+      class: $(["material-icons ds-verification-icon", [
+        `ds-verification-icon--${t.value.state}`,
         { "ds-verification-icon--email": e.isContactData }
       ]]),
-      style: w({ fontSize: `${e.size}px` }),
+      style: F({ fontSize: `${e.size}px` }),
       role: "img",
-      "aria-label": e.label || o.value.label,
-      title: e.label || o.value.label
+      "aria-label": e.label || t.value.label,
+      title: e.label || t.value.label
     }, [
-      I(l.$slots, "default", {}, () => [
-        A(y(o.value.icon), 1)
+      A(o.$slots, "default", {}, () => [
+        H(S(t.value.icon), 1)
       ], !0)
-    ], 14, Nt));
+    ], 14, Pa));
   }
-}), Bt = /* @__PURE__ */ $(Rt, [["__scopeId", "data-v-0fd84040"]]), At = ["title"], Ot = { class: "ds-contact-value__marquee" }, xt = { class: "ds-contact-value__actions" }, Mt = ["aria-label", "title"], Vt = {
+}), za = /* @__PURE__ */ M(Fa, [["__scopeId", "data-v-0fd84040"]]), Va = ["title"], Ua = { class: "ds-contact-value__marquee" }, Ga = { class: "ds-contact-value__actions" }, Ha = ["role", "aria-label", "aria-hidden"], Wa = ["aria-label", "title"], Ka = {
   class: "material-icons",
   "aria-hidden": "true"
-}, Ut = ["aria-label", "aria-pressed", "title"], Ft = ["aria-label", "aria-pressed", "title"], zt = /* @__PURE__ */ k({
+}, Ya = ["aria-label", "aria-pressed", "title"], qa = ["aria-label", "aria-pressed", "title"], ja = /* @__PURE__ */ x({
   __name: "DsContactValue",
   props: {
     value: { type: String, required: !0 },
@@ -859,117 +1411,150 @@ const Y = {
     isContactData: { type: Boolean, default: !1 },
     showRate: { type: Boolean, default: !1 },
     correct: { type: Boolean, default: null },
+    // Locks the value: on hover a static lock glyph shows instead of copy/rate.
+    hideValue: { type: Boolean, default: !1 },
     // User-facing labels (the app owns i18n); English DS defaults.
     copyLabel: { type: String, default: "Copy" },
     copiedLabel: { type: String, default: "Copied!" },
     correctLabel: { type: String, default: "Correct" },
-    incorrectLabel: { type: String, default: "Incorrect" }
+    incorrectLabel: { type: String, default: "Incorrect" },
+    // Accessible name for the lock glyph (empty → decorative/aria-hidden).
+    hideValueLabel: { type: String, default: "" }
   },
-  emits: [F, z, _],
+  emits: [pe, $e, Te],
   setup(e, { emit: n }) {
-    const o = e, l = n, i = N(!1);
-    let d;
-    function c() {
-      typeof navigator != "undefined" && navigator.clipboard && navigator.clipboard.writeText(o.value).catch(() => {
-      }), i.value = !0, clearTimeout(d), d = setTimeout(() => {
+    const t = e, o = n, i = U(!1);
+    let c;
+    function k() {
+      typeof navigator != "undefined" && navigator.clipboard && navigator.clipboard.writeText(t.value).catch(() => {
+      }), i.value = !0, clearTimeout(c), c = setTimeout(() => {
         i.value = !1;
-      }, 1200), l(F, o.value);
+      }, 1200), o(pe, t.value);
     }
-    function u() {
-      l(z);
+    function f() {
+      o($e);
     }
-    function b() {
-      l(_);
+    function y() {
+      o(Te);
     }
-    return oe(() => clearTimeout(d)), (m, f) => (t(), a("div", {
-      class: v(["ds-contact-value", { "ds-contact-value--main": e.main }])
+    return be(() => clearTimeout(c)), (r, d) => (a(), l("div", {
+      class: $(["ds-contact-value", { "ds-contact-value--main": e.main }])
     }, [
-      de(g(Bt), {
+      j(_(za), {
         verified: e.verified,
         "is-contact-data": e.isContactData
       }, null, 8, ["verified", "is-contact-data"]),
       s("span", {
         class: "ds-contact-value__value",
         title: e.value
-      }, y(e.value), 9, At),
-      s("span", Ot, [
-        e.valueType ? (t(), D(g(Ae), {
+      }, S(e.value), 9, Va),
+      s("span", Ua, [
+        e.valueType ? (a(), G(_(_t), {
           key: 0,
           class: "ds-contact-value__badge",
-          tone: e.main ? g(H).ACCENT : g(H).GREY,
-          "aria-hidden": "true"
+          tone: e.main ? _(Re).ACCENT : _(Re).GREY,
+          title: e.valueType
         }, {
-          default: be(() => [
-            A(y(e.valueType), 1)
+          default: ie(() => [
+            H(S(e.valueType), 1)
           ]),
           _: 1
-        }, 8, ["tone"])) : r("", !0),
-        s("span", xt, [
-          s("button", {
-            type: "button",
-            class: v(["ds-contact-value__action", { "is-copied": i.value }]),
-            "aria-label": i.value ? e.copiedLabel : e.copyLabel,
-            title: i.value ? e.copiedLabel : e.copyLabel,
-            onClick: c
-          }, [
-            s("i", Vt, y(i.value ? "check" : "content_copy"), 1)
-          ], 10, Mt),
-          e.showRate ? (t(), a(B, { key: 0 }, [
-            s("button", {
-              type: "button",
-              class: v(["ds-contact-value__action", { "is-active": e.correct === !0 }]),
-              "aria-label": e.correctLabel,
-              "aria-pressed": e.correct === !0,
-              title: e.correctLabel,
-              onClick: u
-            }, [
-              s("i", {
-                class: v(e.correct === !0 ? "material-icons" : "material-icons-outlined"),
-                "aria-hidden": "true"
-              }, "thumb_up", 2)
-            ], 10, Ut),
+        }, 8, ["tone", "title"])) : m("", !0),
+        s("span", Ga, [
+          e.hideValue ? (a(), l("i", {
+            key: 0,
+            class: "material-icons ds-contact-value__lock",
+            role: e.hideValueLabel ? "img" : void 0,
+            "aria-label": e.hideValueLabel || void 0,
+            "aria-hidden": e.hideValueLabel ? void 0 : "true"
+          }, "lock", 8, Ha)) : (a(), l(z, { key: 1 }, [
             s("button", {
               type: "button",
-              class: v(["ds-contact-value__action", { "is-active": e.correct === !1 }]),
-              "aria-label": e.incorrectLabel,
-              "aria-pressed": e.correct === !1,
-              title: e.incorrectLabel,
-              onClick: b
+              class: $(["ds-contact-value__action", { "is-copied": i.value }]),
+              "aria-label": i.value ? e.copiedLabel : e.copyLabel,
+              title: i.value ? e.copiedLabel : e.copyLabel,
+              onClick: k
             }, [
-              s("i", {
-                class: v(e.correct === !1 ? "material-icons" : "material-icons-outlined"),
-                "aria-hidden": "true"
-              }, "thumb_down", 2)
-            ], 10, Ft)
-          ], 64)) : r("", !0)
+              s("i", Ka, S(i.value ? "check" : "content_copy"), 1)
+            ], 10, Wa),
+            e.showRate ? (a(), l(z, { key: 0 }, [
+              s("button", {
+                type: "button",
+                class: "ds-contact-value__action",
+                "aria-label": e.correctLabel,
+                "aria-pressed": e.correct === !0,
+                title: e.correctLabel,
+                onClick: f
+              }, [
+                s("i", {
+                  class: $(e.correct === !0 ? "material-icons" : "material-icons-outlined"),
+                  "aria-hidden": "true"
+                }, "thumb_up", 2)
+              ], 8, Ya),
+              s("button", {
+                type: "button",
+                class: "ds-contact-value__action",
+                "aria-label": e.incorrectLabel,
+                "aria-pressed": e.correct === !1,
+                title: e.incorrectLabel,
+                onClick: y
+              }, [
+                s("i", {
+                  class: $(e.correct === !1 ? "material-icons" : "material-icons-outlined"),
+                  "aria-hidden": "true"
+                }, "thumb_down", 2)
+              ], 8, qa)
+            ], 64)) : m("", !0)
+          ], 64))
         ])
       ])
     ], 2));
   }
-}), ae = /* @__PURE__ */ $(zt, [["__scopeId", "data-v-014e772b"]]), _t = ["aria-label"], Pt = { class: "ds-data-card__heading" }, Gt = {
+}), je = /* @__PURE__ */ M(ja, [["__scopeId", "data-v-4f2d5d85"]]), Xa = ["aria-label", "aria-busy"], Za = { class: "ds-data-card__heading" }, Qa = {
   class: "material-icons ds-data-card__icon",
   "aria-hidden": "true"
-}, Yt = { class: "ds-data-card__title" }, Kt = ["aria-label"], Ht = {
+}, Ja = { class: "ds-data-card__title" }, el = ["aria-label"], tl = {
   key: 0,
   class: "ds-data-card__body"
-}, Wt = {
+}, al = {
   key: 0,
+  class: "ds-data-card__loading"
+}, ll = {
+  key: 1,
+  class: "ds-data-card__locked"
+}, il = { class: "ds-data-card__state-text" }, nl = { class: "ds-data-card__state-title" }, sl = {
+  key: 2,
   class: "ds-data-card__empty"
-}, qt = {
-  class: "material-icons-outlined ds-data-card__empty-icon",
+}, ol = { class: "ds-data-card__state-badge" }, dl = {
+  class: "material-icons ds-data-card__state-icon",
   "aria-hidden": "true"
-}, pt = { key: 0 }, Xt = {
+}, rl = { class: "ds-data-card__state-text" }, cl = { class: "ds-data-card__state-title" }, ul = {
+  key: 0,
+  class: "ds-data-card__state-subtitle"
+}, fl = { key: 0 }, bl = {
   key: 0,
   class: "ds-data-card__section"
-}, Zt = { key: 1 }, jt = {
+}, vl = { key: 1 }, yl = {
   key: 0,
   class: "ds-data-card__section"
-}, Qt = { class: "ds-data-card__more" }, Jt = /* @__PURE__ */ k({
+}, ml = { class: "ds-data-card__more" }, hl = /* @__PURE__ */ x({
   __name: "DsDataCard",
   props: {
     title: { type: String, required: !0 },
     // Material Icon name for the header (e.g. "email", "call").
     icon: { type: String, default: "email" },
+    // Loading state: swaps the body for a centered spinner (wins over empty/data).
+    // Override the spinner (e.g. an i18n'd label) via the #loading slot.
+    loading: { type: Boolean, default: !1 },
+    // Accessible name for the loading spinner (the app owns i18n); when omitted it
+    // falls back to DsSpinner's own default. Overridable via the #loading slot.
+    loadingLabel: { type: String, default: "" },
+    // Locked/upsell state: the data is gated (plan/permission), so the body shows a
+    // banner instead of the content (wins over empty/data; loading still wins over
+    // it). Presentational only — the app decides when to gate and supplies the CTA
+    // via the #locked slot. Additive/opt-in. NB: the header actions still render
+    // while locked — turn them off yourself (showSort / showEdit) when gating.
+    locked: { type: Boolean, default: !1 },
     mostLikely: { type: Object, default: null },
     more: { type: Array, default: () => [] },
     collapsible: { type: Boolean, default: !1 },
@@ -981,164 +1566,1224 @@ const Y = {
     // User-facing labels (the app owns i18n); English DS defaults.
     editLabel: { type: String, default: "Edit" },
     emptyLabel: { type: String, default: "No data found" },
+    // Optional muted line under the empty title (DS DsDataCard `emptySubtitle`),
+    // e.g. "We couldn't find any phone numbers for this contact."
+    emptySubtitle: { type: String, default: "" },
+    // Fallback text for the locked banner when no #locked slot is provided.
+    lockedLabel: { type: String, default: "Locked" },
     mostLikelyLabel: { type: String, default: "MOST LIKELY" },
     moreLabel: { type: String, default: "MORE" },
     sortLabel: { type: String, default: "Sort" },
     toggleLabel: { type: String, default: "Toggle" },
     closeLabel: { type: String, default: "Close" }
   },
-  emits: [F, j, Q, C, z, _],
+  emits: [pe, Pe, Fe, X, $e, Te],
   setup(e, { emit: n }) {
-    const o = e, l = n, i = N(!1), d = S(() => o.more.length + (o.mostLikely ? 1 : 0)), c = S(() => d.value > 3), u = S(() => d.value === 0), b = S(() => o.collapsible && i.value);
-    function m() {
+    const t = e, o = n, i = U(!1), c = g(() => t.more.length + (t.mostLikely ? 1 : 0)), k = g(() => c.value > 3), f = g(() => c.value === 0), y = g(() => t.collapsible && i.value);
+    function r() {
       i.value = !i.value;
     }
-    function f(R) {
-      l(F, R);
+    function d(C) {
+      o(pe, C);
+    }
+    function b() {
+      o(Pe);
     }
     function h() {
-      l(j);
+      o(Fe);
     }
     function T() {
-      l(Q);
+      o(X);
     }
-    function x() {
-      l(C);
+    function p(C) {
+      o($e, C);
     }
-    function p(R) {
-      l(z, R);
+    function V(C) {
+      o(Te, C);
     }
-    function X(R) {
-      l(_, R);
-    }
-    return (R, E) => (t(), a("section", {
+    return (C, E) => (a(), l("section", {
       class: "ds-data-card",
-      "aria-label": e.title
+      "aria-label": e.title,
+      "aria-busy": e.loading ? "true" : void 0
     }, [
       s("div", {
-        class: v(["ds-data-card__header", { "is-collapsed": b.value, "is-collapsible": e.collapsible }]),
-        onClick: E[1] || (E[1] = (L) => e.collapsible && m())
+        class: $(["ds-data-card__header", { "is-collapsed": y.value, "is-collapsible": e.collapsible }]),
+        onClick: E[1] || (E[1] = (N) => e.collapsible && r())
       }, [
-        s("div", Pt, [
-          s("i", Gt, y(e.icon), 1),
-          s("span", Yt, y(e.title), 1)
+        s("div", Za, [
+          s("i", Qa, S(e.icon), 1),
+          s("span", Ja, S(e.title), 1)
         ]),
         s("div", {
           class: "ds-data-card__actions",
-          onClick: E[0] || (E[0] = se(() => {
+          onClick: E[0] || (E[0] = ve(() => {
           }, ["stop"]))
         }, [
-          !b.value && e.showEdit ? (t(), a("button", {
+          !y.value && e.showEdit ? (a(), l("button", {
             key: 0,
             type: "button",
             class: "ds-data-card__edit",
-            onClick: T
-          }, y(e.editLabel), 1)) : r("", !0),
-          !b.value && e.showSort ? (t(), D(g(K), {
+            onClick: h
+          }, S(e.editLabel), 1)) : m("", !0),
+          !y.value && e.showSort ? (a(), G(_(oe), {
             key: 1,
             variant: "tertiary",
             size: "medium",
             circle: "",
             "left-icon": "swap_vert",
             "aria-label": e.sortLabel,
-            onClick: h
-          }, null, 8, ["aria-label"])) : r("", !0),
-          e.collapsible ? (t(), D(g(K), {
+            onClick: b
+          }, null, 8, ["aria-label"])) : m("", !0),
+          e.collapsible ? (a(), G(_(oe), {
             key: 2,
             variant: "tertiary",
             size: "medium",
             circle: "",
             "left-icon": i.value ? "keyboard_arrow_down" : "keyboard_arrow_up",
             "aria-label": e.toggleLabel,
-            onClick: m
-          }, null, 8, ["left-icon", "aria-label"])) : r("", !0),
-          e.showClose ? (t(), a("button", {
+            onClick: r
+          }, null, 8, ["left-icon", "aria-label"])) : m("", !0),
+          e.showClose ? (a(), l("button", {
             key: 3,
             type: "button",
             class: "ds-data-card__close",
             "aria-label": e.closeLabel,
-            onClick: x
+            onClick: T
           }, [...E[4] || (E[4] = [
             s("i", {
               class: "material-icons",
               "aria-hidden": "true"
             }, "close", -1)
-          ])], 8, Kt)) : r("", !0)
+          ])], 8, el)) : m("", !0)
         ])
       ], 2),
-      b.value ? r("", !0) : (t(), a("div", Ht, [
-        u.value ? (t(), a("div", Wt, [
-          s("i", qt, y(e.icon), 1),
-          s("span", null, y(e.emptyLabel), 1)
-        ])) : (t(), a(B, { key: 1 }, [
-          e.mostLikely ? (t(), a("div", pt, [
-            c.value ? (t(), a("div", Xt, y(e.mostLikelyLabel), 1)) : r("", !0),
-            de(g(ae), {
+      y.value ? m("", !0) : (a(), l("div", tl, [
+        e.loading ? (a(), l("div", al, [
+          A(C.$slots, "loading", {}, () => [
+            j(_(fe), {
+              label: e.loadingLabel || void 0
+            }, null, 8, ["label"])
+          ], !0)
+        ])) : e.locked ? (a(), l("div", ll, [
+          A(C.$slots, "locked", {}, () => [
+            E[5] || (E[5] = s("span", { class: "ds-data-card__state-badge ds-data-card__state-badge--accent" }, [
+              s("i", {
+                class: "material-icons ds-data-card__state-icon",
+                "aria-hidden": "true"
+              }, "lock")
+            ], -1)),
+            s("div", il, [
+              s("span", nl, S(e.lockedLabel), 1)
+            ])
+          ], !0)
+        ])) : f.value ? (a(), l("div", sl, [
+          s("span", ol, [
+            s("i", dl, S(e.icon), 1)
+          ]),
+          s("div", rl, [
+            s("span", cl, S(e.emptyLabel), 1),
+            e.emptySubtitle ? (a(), l("span", ul, S(e.emptySubtitle), 1)) : m("", !0)
+          ])
+        ])) : (a(), l(z, { key: 3 }, [
+          e.mostLikely ? (a(), l("div", fl, [
+            k.value ? (a(), l("div", bl, S(e.mostLikelyLabel), 1)) : m("", !0),
+            j(_(je), {
               value: e.mostLikely.value,
               "value-type": e.mostLikely.type,
               verified: e.mostLikely.verified,
               correct: e.mostLikely.correct,
+              "hide-value": e.mostLikely.hideValue,
               main: "",
               "is-contact-data": e.isContactData,
               "show-rate": e.showRate,
-              onCopy: f,
-              onCorrect: E[2] || (E[2] = (L) => p(e.mostLikely)),
-              onIncorrect: E[3] || (E[3] = (L) => X(e.mostLikely))
-            }, null, 8, ["value", "value-type", "verified", "correct", "is-contact-data", "show-rate"])
-          ])) : r("", !0),
-          e.more.length > 0 ? (t(), a("div", Zt, [
-            c.value ? (t(), a("div", jt, y(e.moreLabel), 1)) : r("", !0),
-            s("div", Qt, [
-              (t(!0), a(B, null, M(e.more, (L) => (t(), D(g(ae), {
-                key: L.value,
-                value: L.value,
-                "value-type": L.type,
-                verified: L.verified,
-                correct: L.correct,
+              onCopy: d,
+              onCorrect: E[2] || (E[2] = (N) => p(e.mostLikely)),
+              onIncorrect: E[3] || (E[3] = (N) => V(e.mostLikely))
+            }, null, 8, ["value", "value-type", "verified", "correct", "hide-value", "is-contact-data", "show-rate"])
+          ])) : m("", !0),
+          e.more.length > 0 ? (a(), l("div", vl, [
+            k.value ? (a(), l("div", yl, S(e.moreLabel), 1)) : m("", !0),
+            s("div", ml, [
+              (a(!0), l(z, null, Y(e.more, (N) => (a(), G(_(je), {
+                key: N.value,
+                value: N.value,
+                "value-type": N.type,
+                verified: N.verified,
+                correct: N.correct,
+                "hide-value": N.hideValue,
                 "is-contact-data": e.isContactData,
                 "show-rate": e.showRate,
-                onCopy: f,
-                onCorrect: (re) => p(L),
-                onIncorrect: (re) => X(L)
-              }, null, 8, ["value", "value-type", "verified", "correct", "is-contact-data", "show-rate", "onCorrect", "onIncorrect"]))), 128))
+                onCopy: d,
+                onCorrect: (R) => p(N),
+                onIncorrect: (R) => V(N)
+              }, null, 8, ["value", "value-type", "verified", "correct", "hide-value", "is-contact-data", "show-rate", "onCorrect", "onIncorrect"]))), 128))
             ])
-          ])) : r("", !0)
+          ])) : m("", !0)
         ], 64))
       ]))
-    ], 8, _t));
+    ], 8, Xa));
+  }
+}), Hi = /* @__PURE__ */ M(hl, [["__scopeId", "data-v-a062c3ae"]]), gl = ["name", "value", "checked", "disabled"], Sl = {
+  key: 0,
+  class: "ds-radio__label"
+}, kl = /* @__PURE__ */ x({
+  __name: "DsRadio",
+  props: /* @__PURE__ */ Q({
+    disabled: Boolean,
+    // Label text (DS `label` prop); a default slot overrides it.
+    label: { type: String, default: "" },
+    name: { type: String, default: "" },
+    value: { type: String, default: "" }
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const n = de(e, "modelValue"), t = e;
+    function o() {
+      t.disabled || (n.value = !0);
+    }
+    return (i, c) => (a(), l("label", {
+      class: $(["ds-radio", { "is-disabled": e.disabled }])
+    }, [
+      s("input", {
+        type: "radio",
+        class: "ds-radio__native",
+        name: e.name || void 0,
+        value: e.value || void 0,
+        checked: n.value,
+        disabled: e.disabled,
+        onChange: o
+      }, null, 40, gl),
+      s("span", {
+        class: $(["ds-radio__dot", { "is-active": n.value }]),
+        "aria-hidden": "true"
+      }, null, 2),
+      i.$slots.default || e.label ? (a(), l("span", Sl, [
+        A(i.$slots, "default", {}, () => [
+          H(S(e.label), 1)
+        ], !0)
+      ])) : m("", !0)
+    ], 2));
+  }
+}), Wi = /* @__PURE__ */ M(kl, [["__scopeId", "data-v-96b70404"]]), pl = ["aria-checked", "aria-busy", "aria-disabled", "aria-label", "disabled"], $l = {
+  class: "ds-switch__thumb",
+  "aria-hidden": "true"
+}, Tl = /* @__PURE__ */ x({
+  __name: "DsSwitch",
+  props: /* @__PURE__ */ Q({
+    disabled: Boolean,
+    // Async busy state for a toggle whose commit is pending (e.g. a server round-trip
+    // that may revert). Blocks interaction and shows a spinner in the thumb while it
+    // resolves. Presentational-only: the app owns the optimistic value + revert; the
+    // component just reflects the `loading` and `modelValue` it's handed.
+    loading: Boolean,
+    // Accessible name for the switch (a control with no visible text). See
+    // DsSwitch.types.ts for why this stays optional rather than a required prop.
+    ariaLabel: { type: String, default: "" }
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const n = de(e, "modelValue"), t = e;
+    function o() {
+      t.disabled || t.loading || (n.value = !n.value);
+    }
+    return (i, c) => (a(), l("button", {
+      type: "button",
+      role: "switch",
+      class: $(["ds-switch", { "is-disabled": e.disabled, "is-loading": e.loading }]),
+      "aria-checked": n.value,
+      "aria-busy": e.loading || void 0,
+      "aria-disabled": e.disabled || e.loading || void 0,
+      "aria-label": e.ariaLabel || void 0,
+      disabled: e.disabled || e.loading,
+      onClick: o
+    }, [
+      s("span", $l, [
+        e.loading ? (a(), G(_(fe), {
+          key: 0,
+          class: "ds-switch__spinner",
+          size: 12,
+          tone: _(ge).DARK,
+          label: ""
+        }, null, 8, ["tone"])) : m("", !0)
+      ])
+    ], 10, pl));
+  }
+}), Ki = /* @__PURE__ */ M(Tl, [["__scopeId", "data-v-f8073b3b"]]), El = ["aria-label", "disabled"], Ll = { class: "ds-item-selector-button__label" }, wl = /* @__PURE__ */ x({
+  __name: "DsItemSelectorButton",
+  props: {
+    item: { type: Object, default: null },
+    // Material Icons ligature (e.g. `folder`); omitted entirely when unset.
+    icon: { type: String, default: "" },
+    emptyTitle: { type: String, default: "" },
+    // Accessible name (see .types.ts). Required in the empty state when there's no
+    // `emptyTitle`; the visible text (item.name / emptyTitle) names it otherwise.
+    ariaLabel: { type: String, default: "" },
+    disabled: Boolean
+  },
+  emits: [Z],
+  setup(e, { emit: n }) {
+    const t = e, o = n;
+    function i(c) {
+      t.disabled || o(Z, c);
+    }
+    return (c, k) => {
+      var f;
+      return a(), l("button", {
+        type: "button",
+        class: $(["ds-item-selector-button", { "is-empty": !e.item, "is-disabled": e.disabled }]),
+        "aria-haspopup": "listbox",
+        "aria-label": e.ariaLabel || void 0,
+        disabled: e.disabled,
+        onClick: i
+      }, [
+        s("span", Ll, S(e.item ? e.item.name : e.emptyTitle), 1),
+        e.icon ? (a(), l("i", {
+          key: 0,
+          class: $(["ds-item-selector-button__icon", e.item ? "material-icons" : "material-icons-outlined"]),
+          style: F((f = e.item) != null && f.color ? { color: e.item.color } : void 0),
+          "aria-hidden": "true"
+        }, S(e.icon), 7)) : m("", !0)
+      ], 10, El);
+    };
+  }
+}), Yi = /* @__PURE__ */ M(wl, [["__scopeId", "data-v-92d8d822"]]), Xe = {
+  DEFAULT: "default",
+  FILTER_SUMMARY: "filterSummary"
+}, Ze = {
+  AUTO: "auto",
+  // shrink to content — resizes with the selected label (default)
+  SMALL: "small",
+  // 128px
+  MEDIUM: "medium",
+  // 200px
+  LARGE: "large",
+  // 280px
+  FULL: "full"
+  // 100% of the container
+}, Il = ["disabled", "aria-expanded", "aria-controls", "aria-activedescendant"], Cl = ["title"], _l = ["disabled", "aria-label"], Dl = {
+  key: 1,
+  class: "material-icons ds-select__chevron",
+  "aria-hidden": "true"
+}, Al = {
+  key: 0,
+  class: "ds-select__popup"
+}, Nl = {
+  key: 0,
+  class: "ds-select__search"
+}, Rl = ["aria-activedescendant", "aria-label", "placeholder", "value"], Bl = ["aria-multiselectable", "aria-busy"], xl = {
+  key: 0,
+  class: "ds-select__loading",
+  role: "presentation"
+}, Ml = ["role", "aria-labelledby"], Ol = ["id"], Pl = ["id", "aria-selected", "onClick", "onMouseenter"], Fl = { class: "ds-select__option-label" }, zl = {
+  key: 0,
+  class: "ds-select__option-sublabel"
+}, Vl = {
+  key: 0,
+  class: "ds-select__empty",
+  role: "presentation"
+}, Ul = /* @__PURE__ */ x({
+  __name: "DsSelect",
+  props: /* @__PURE__ */ Q({
+    options: { type: Array, required: !0 },
+    placeholder: { type: String, default: "Select an option" },
+    multiple: Boolean,
+    selectType: { type: String, default: Xe.DEFAULT },
+    showCheckbox: Boolean,
+    // Named step ('small'|'medium'|'large'|'full'|'auto') for a STABLE width, or a
+    // custom width (number → px, or any CSS string). Defaults to 'auto'
+    // (shrink-to-content — the historical behaviour, kept so this stays a
+    // non-breaking, opt-in feature); pass a fixed step for a width that doesn't
+    // resize with the selected label. See DsSelect.types.ts `DS_SELECT_WIDTHS`.
+    width: {
+      type: [Number, String],
+      default: Ze.AUTO
+    },
+    disabled: Boolean,
+    // Opt-in type-to-filter: renders a search input inside the open dropdown.
+    // Off by default, so existing usages keep the plain select-only behaviour.
+    filterable: Boolean,
+    // Remote filtering: skip the built-in local filter and let the app own it by
+    // replacing `options` in response to the `search` event. Prevents a double
+    // filter (local re-filtering of already server-filtered results). No effect
+    // unless `filterable` is also set.
+    remote: Boolean,
+    // Async loading state: while true the listbox shows a spinner + aria-busy
+    // instead of options/empty. A #loading slot overrides the default DsSpinner.
+    loading: Boolean,
+    // Accessible name for the filter search input (a placeholder is not a reliable
+    // accessible name). English default; the app owns i18n.
+    searchLabel: { type: String, default: "Filter options" },
+    // Visible placeholder for the filter search input.
+    searchPlaceholder: { type: String, default: "Search" },
+    // Accessible name for the filterSummary clear (×) control. The app can override
+    // the wording (e.g. localized), but we default to a non-empty fallback so the
+    // icon-only button is never left without an accessible name for screen readers.
+    clearLabel: { type: String, default: "Clear selection" },
+    // Shown when the visible list is empty (no options, or a filtered list with no
+    // matches). English default (the app owns i18n); a #empty slot overrides it.
+    emptyText: { type: String, default: "No options" }
+  }, {
+    modelValue: { default: null },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Q([_e], ["update:modelValue"]),
+  setup(e, { emit: n }) {
+    const t = e, o = n, i = de(e, "modelValue"), c = `ds-select-${xe()}`, k = `${c}-listbox`, f = (u) => `${c}-option-${u}`, y = U(null), r = U(null), d = U(null), b = U(!1), h = U(-1), T = U(""), p = g(() => t.selectType === Xe.FILTER_SUMMARY), V = g(() => t.filterable && !t.remote), C = g(() => {
+      if (!V.value) return t.options;
+      const u = T.value.trim().toLowerCase();
+      return u ? t.options.filter(
+        (L) => L.label.toLowerCase().includes(u) || (L.subLabel ? L.subLabel.toLowerCase().includes(u) : !1)
+      ) : t.options;
+    }), E = g(
+      () => t.loading ? [] : C.value
+    ), N = g(() => {
+      const u = [];
+      return E.value.forEach((L, O) => {
+        const B = L.group, K = u[u.length - 1];
+        B ? (K == null ? void 0 : K.kind) === "group" && K.label === B ? K.items.push({ option: L, index: O }) : u.push({
+          kind: "group",
+          label: B,
+          headerId: `${c}-group-${O}`,
+          key: `g-${O}`,
+          items: [{ option: L, index: O }]
+        }) : (K == null ? void 0 : K.kind) === "plain" ? K.items.push({ option: L, index: O }) : u.push({ kind: "plain", key: `p-${O}`, items: [{ option: L, index: O }] });
+      }), u;
+    }), R = g(() => t.multiple ? Array.isArray(i.value) ? i.value : [] : i.value !== null && i.value !== void 0 ? [i.value] : []), q = g(() => R.value.length > 0), J = g(() => p.value && q.value);
+    function W(u) {
+      return R.value.includes(u);
+    }
+    const ae = ut(/* @__PURE__ */ new Map());
+    te(
+      () => t.options,
+      (u) => u.forEach((L) => ae.set(L.value, L.label)),
+      { immediate: !0, deep: !0 }
+    );
+    function re(u) {
+      var L, O, B;
+      return (B = (O = (L = t.options.find((K) => K.value === u)) == null ? void 0 : L.label) != null ? O : ae.get(u)) != null ? B : String(u);
+    }
+    const v = g(() => p.value ? q.value ? t.multiple ? `${t.placeholder} (${R.value.length})` : re(R.value[0]) : t.placeholder : q.value ? t.multiple ? R.value.map(re).join(", ") : re(R.value[0]) : t.placeholder), D = Object.values(Ze), w = g(
+      () => typeof t.width == "string" && D.includes(t.width) ? `ds-select--w-${t.width}` : null
+    ), I = g(() => {
+      if (!w.value)
+        return { width: typeof t.width == "number" ? `${t.width}px` : t.width };
+    }), P = g(
+      () => b.value && h.value >= 0 ? f(h.value) : void 0
+    );
+    function ne() {
+      if (E.value.length === 0) return -1;
+      const u = E.value.findIndex((L) => W(L.value));
+      return u >= 0 ? u : 0;
+    }
+    function ye() {
+      t.disabled || (b.value = !0, h.value = ne(), t.filterable && ue(() => {
+        var u;
+        return (u = d.value) == null ? void 0 : u.focus();
+      }));
+    }
+    function le(u = !0) {
+      b.value = !1, h.value = -1, T.value && (T.value = "", o(_e, "")), u && ue(() => {
+        var L;
+        return (L = r.value) == null ? void 0 : L.focus();
+      });
+    }
+    function tt() {
+      t.disabled || (b.value ? le() : ye());
+    }
+    function we(u) {
+      if (t.disabled) return;
+      if (t.multiple) {
+        const O = R.value;
+        i.value = O.includes(u) ? O.filter((B) => B !== u) : [...O, u];
+        return;
+      }
+      const L = W(u);
+      i.value = L && t.showCheckbox ? null : u, le();
+    }
+    function at() {
+      t.disabled || (i.value = t.multiple ? [] : null);
+    }
+    function me(u) {
+      const L = E.value.length;
+      L !== 0 && (h.value < 0 ? h.value = u > 0 ? 0 : L - 1 : h.value = (h.value + u + L) % L, ue(() => {
+        var O, B;
+        (B = (O = document.getElementById(f(h.value))) == null ? void 0 : O.scrollIntoView) == null || B.call(O, { block: "nearest" });
+      }));
+    }
+    function lt(u) {
+      if (!t.disabled)
+        switch (u.key) {
+          case "ArrowDown":
+            u.preventDefault(), b.value ? me(1) : ye();
+            break;
+          case "ArrowUp":
+            u.preventDefault(), b.value ? me(-1) : ye();
+            break;
+          case "Home":
+            b.value && (u.preventDefault(), h.value = 0);
+            break;
+          case "End":
+            b.value && (u.preventDefault(), h.value = E.value.length - 1);
+            break;
+          case "Enter":
+          case " ":
+          case "Spacebar":
+            if (u.preventDefault(), !b.value)
+              ye();
+            else if (h.value >= 0) {
+              const L = E.value[h.value];
+              L && we(L.value);
+            }
+            break;
+          case "Escape":
+            b.value && (u.preventDefault(), u.stopPropagation(), le());
+            break;
+          case "Tab":
+            b.value && le(!1);
+            break;
+        }
+    }
+    function it(u) {
+      if (!t.disabled)
+        switch (u.key) {
+          case "ArrowDown":
+            u.preventDefault(), me(1);
+            break;
+          case "ArrowUp":
+            u.preventDefault(), me(-1);
+            break;
+          case "Enter":
+            if (u.preventDefault(), h.value >= 0) {
+              const L = E.value[h.value];
+              L && we(L.value);
+            }
+            break;
+          case "Escape":
+            u.preventDefault(), u.stopPropagation(), le();
+            break;
+          case "Tab":
+            b.value && le(!1);
+            break;
+        }
+    }
+    function nt(u) {
+      T.value = u.target.value, o(_e, T.value);
+    }
+    te(E, (u) => {
+      b.value && (u.length === 0 ? h.value = -1 : (h.value < 0 || h.value >= u.length) && (h.value = 0));
+    });
+    function Ie(u) {
+      y.value && !y.value.contains(u.target) && le(!1);
+    }
+    return te(b, (u) => {
+      typeof document != "undefined" && (u ? document.addEventListener("mousedown", Ie) : document.removeEventListener("mousedown", Ie));
+    }), te(
+      () => t.disabled,
+      (u) => {
+        u && b.value && le(!1);
+      }
+    ), be(() => {
+      typeof document != "undefined" && document.removeEventListener("mousedown", Ie);
+    }), (u, L) => (a(), l("div", {
+      ref_key: "rootRef",
+      ref: y,
+      class: $(["ds-select", [`ds-select--${e.selectType}`, w.value, { "is-open": b.value }]]),
+      style: F(I.value)
+    }, [
+      s("div", {
+        class: $(["ds-select__control", { "is-disabled": e.disabled, "is-filter-selected": J.value }])
+      }, [
+        s("button", {
+          ref_key: "triggerRef",
+          ref: r,
+          type: "button",
+          class: "ds-select__trigger",
+          disabled: e.disabled,
+          "aria-haspopup": "listbox",
+          "aria-expanded": b.value,
+          "aria-controls": b.value ? k : void 0,
+          "aria-activedescendant": e.filterable ? void 0 : P.value,
+          onClick: tt,
+          onKeydown: lt
+        }, [
+          s("span", {
+            class: "ds-select__summary",
+            title: v.value
+          }, S(v.value), 9, Cl)
+        ], 40, Il),
+        p.value && q.value ? (a(), l("button", {
+          key: 0,
+          type: "button",
+          class: "ds-select__clear",
+          disabled: e.disabled,
+          "aria-label": e.clearLabel || void 0,
+          onClick: at
+        }, [...L[1] || (L[1] = [
+          s("i", {
+            class: "material-icons",
+            "aria-hidden": "true"
+          }, "close", -1)
+        ])], 8, _l)) : (a(), l("i", Dl, "keyboard_arrow_down"))
+      ], 2),
+      b.value ? (a(), l("div", Al, [
+        e.filterable ? (a(), l("div", Nl, [
+          L[2] || (L[2] = s("i", {
+            class: "material-icons ds-select__search-icon",
+            "aria-hidden": "true"
+          }, "search", -1)),
+          s("input", {
+            ref_key: "searchRef",
+            ref: d,
+            type: "text",
+            class: "ds-select__search-input",
+            role: "combobox",
+            "aria-expanded": "true",
+            "aria-controls": k,
+            "aria-activedescendant": P.value,
+            "aria-autocomplete": "list",
+            autocomplete: "off",
+            "aria-label": e.searchLabel,
+            placeholder: e.searchPlaceholder,
+            value: T.value,
+            onInput: nt,
+            onKeydown: it
+          }, null, 40, Rl)
+        ])) : m("", !0),
+        s("ul", {
+          id: k,
+          class: "ds-select__listbox",
+          role: "listbox",
+          "aria-multiselectable": e.multiple || void 0,
+          "aria-busy": e.loading || void 0,
+          onMousedown: L[0] || (L[0] = ve(() => {
+          }, ["prevent"]))
+        }, [
+          e.loading ? (a(), l("li", xl, [
+            A(u.$slots, "loading", {}, () => [
+              j(_(fe), { size: "small" })
+            ], !0)
+          ])) : (a(), l(z, { key: 1 }, [
+            (a(!0), l(z, null, Y(N.value, (O) => (a(), l("li", {
+              key: O.key,
+              role: O.kind === "group" ? "group" : "presentation",
+              "aria-labelledby": O.kind === "group" ? O.headerId : void 0,
+              class: $(O.kind === "group" ? "ds-select__group" : "ds-select__run")
+            }, [
+              O.kind === "group" ? (a(), l("span", {
+                key: 0,
+                id: O.headerId,
+                class: "ds-select__group-header"
+              }, S(O.label), 9, Ol)) : m("", !0),
+              (a(!0), l(z, null, Y(O.items, (B) => (a(), l("div", {
+                id: f(B.index),
+                key: B.option.value,
+                class: $(["ds-select__option", {
+                  "is-selected": W(B.option.value),
+                  "is-active": B.index === h.value,
+                  "ds-select__option--checkbox": e.showCheckbox
+                }]),
+                role: "option",
+                "aria-selected": W(B.option.value),
+                onClick: ve((K) => we(B.option.value), ["prevent"]),
+                onMouseenter: (K) => h.value = B.index
+              }, [
+                e.showCheckbox ? (a(), G(_(et), {
+                  key: 0,
+                  class: "ds-select__option-check",
+                  "model-value": W(B.option.value),
+                  disabled: "",
+                  "aria-hidden": "true"
+                }, null, 8, ["model-value"])) : m("", !0),
+                A(u.$slots, "option", {
+                  option: B.option,
+                  selected: W(B.option.value),
+                  active: B.index === h.value
+                }, () => [
+                  B.option.icon ? (a(), l("i", {
+                    key: 0,
+                    class: "material-icons ds-select__option-icon",
+                    style: F(B.option.color ? { color: B.option.color } : void 0),
+                    "aria-hidden": "true"
+                  }, S(B.option.icon), 5)) : m("", !0),
+                  s("span", Fl, [
+                    H(S(B.option.label), 1),
+                    B.option.subLabel ? (a(), l("span", zl, ", " + S(B.option.subLabel), 1)) : m("", !0)
+                  ])
+                ], !0)
+              ], 42, Pl))), 128))
+            ], 10, Ml))), 128)),
+            E.value.length === 0 ? (a(), l("li", Vl, [
+              A(u.$slots, "empty", {}, () => [
+                H(S(e.emptyText), 1)
+              ], !0)
+            ])) : m("", !0)
+          ], 64))
+        ], 40, Bl)
+      ])) : m("", !0)
+    ], 6));
+  }
+}), qi = /* @__PURE__ */ M(Ul, [["__scopeId", "data-v-47964929"]]), Gl = ["tabindex"], Hl = /* @__PURE__ */ x({
+  __name: "DsRow",
+  props: {
+    selected: { type: Boolean, default: !1 },
+    clickable: { type: Boolean, default: !1 }
+  },
+  emits: [Z],
+  setup(e, { emit: n }) {
+    const t = e, o = n;
+    function i() {
+      t.clickable && o(Z);
+    }
+    function c(k) {
+      t.clickable && (k.key === "Enter" || k.key === " ") && (k.preventDefault(), o(Z));
+    }
+    return (k, f) => (a(), l("tr", {
+      class: $(["ds-row", { "is-selected": e.selected, "is-clickable": e.clickable }]),
+      tabindex: e.clickable ? 0 : void 0,
+      onClick: i,
+      onKeydown: c
+    }, [
+      A(k.$slots, "default", {}, void 0, !0)
+    ], 42, Gl));
+  }
+}), ji = /* @__PURE__ */ M(Hl, [["__scopeId", "data-v-c2d6c50b"]]), Wl = /* @__PURE__ */ x({
+  __name: "DsCell",
+  props: {
+    first: { type: Boolean, default: !1 },
+    selected: { type: Boolean, default: !1 },
+    width: { type: [String, Number], default: null },
+    // Opt-in single-line ellipsis. Default off preserves the 72px multi-line cell.
+    truncate: { type: Boolean, default: !1 },
+    // Pin to the left/right edge (position: sticky) for horizontal scroll.
+    pinned: { type: String, default: null },
+    // Cumulative offset from the pinned edge when stacking multiple pins per side
+    // (number → px, or any CSS length). Defaults to 0 (single pin per side).
+    pinnedOffset: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  setup(e) {
+    const n = e, t = (i) => typeof i == "number" ? `${i}px` : i, o = g(() => {
+      const i = {};
+      if (n.width != null && (i.width = t(n.width)), n.pinned) {
+        i.position = "sticky";
+        const c = n.pinnedOffset == null ? "0px" : t(n.pinnedOffset);
+        i[n.pinned === ee.LEFT ? "left" : "right"] = c;
+      }
+      return Object.keys(i).length ? i : void 0;
+    });
+    return (i, c) => (a(), l("td", {
+      class: $(["ds-cell", {
+        "is-accent": e.first && e.selected,
+        "is-truncated": e.truncate,
+        "is-selected": e.selected,
+        "is-pinned": !!e.pinned,
+        [`is-pinned--${e.pinned}`]: !!e.pinned
+      }]),
+      style: F(o.value)
+    }, [
+      A(i.$slots, "default", {}, void 0, !0)
+    ], 6));
+  }
+}), Xi = /* @__PURE__ */ M(Wl, [["__scopeId", "data-v-727b775d"]]), Kl = {
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger",
+  // maps to $error-* tokens, not $danger-*
+  INFO: "info",
+  DRAFT: "draft",
+  // the only solid-fill variant
+  ACCENT: "accent"
+  // maps to $info-* tokens, not $accent-*
+}, Yl = /* @__PURE__ */ x({
+  __name: "DsCustomTag",
+  props: {
+    type: {
+      type: String,
+      default: Kl.INFO
+    },
+    // Fully rounded (radius-full) sides vs the default radius-control.
+    round: Boolean
+  },
+  setup(e) {
+    return (n, t) => (a(), l("span", {
+      class: $(["ds-custom-tag", [`ds-custom-tag--${e.type}`, { "is-round": e.round }]])
+    }, [
+      A(n.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), Zi = /* @__PURE__ */ M(Yl, [["__scopeId", "data-v-c0220631"]]), ql = { class: "ds-pill__text" }, jl = ["aria-label"], Xl = {
+  class: "material-icons",
+  "aria-hidden": "true"
+}, Zl = /* @__PURE__ */ x({
+  __name: "DsPill",
+  props: {
+    // Material Icons ligature name; when set, renders a trailing icon button.
+    icon: {
+      type: String,
+      default: ""
+    },
+    // Free-form CSS color (e.g. a dynamic tag/folder color); when empty, falls
+    // back to the default token background ($slate-soft).
+    background: {
+      type: String,
+      default: ""
+    },
+    // Accessible name for the trailing icon button (icon-only control).
+    iconLabel: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [Z],
+  setup(e, { emit: n }) {
+    const t = n;
+    return (o, i) => (a(), l("span", {
+      class: $(["ds-pill", { "ds-pill--has-icon": e.icon }]),
+      style: F(e.background ? { background: e.background } : void 0)
+    }, [
+      s("span", ql, [
+        A(o.$slots, "default", {}, void 0, !0)
+      ]),
+      e.icon ? (a(), l("button", {
+        key: 0,
+        type: "button",
+        class: "ds-pill__icon",
+        "aria-label": e.iconLabel || void 0,
+        onClick: i[0] || (i[0] = (c) => t(_(Z)))
+      }, [
+        s("i", Xl, S(e.icon), 1)
+      ], 8, jl)) : m("", !0)
+    ], 6));
+  }
+}), Qi = /* @__PURE__ */ M(Zl, [["__scopeId", "data-v-a8d4ddbb"]]), Ql = {
+  key: 0,
+  class: "ds-pill-with-border__icon"
+}, Jl = { class: "ds-pill-with-border__label" }, ei = /* @__PURE__ */ x({
+  __name: "DsPillWithBorder",
+  emits: [Z],
+  setup(e, { emit: n }) {
+    const t = n;
+    return (o, i) => (a(), l("button", {
+      type: "button",
+      class: "ds-pill-with-border",
+      onClick: i[0] || (i[0] = (c) => t(_(Z)))
+    }, [
+      o.$slots.icon ? (a(), l("span", Ql, [
+        A(o.$slots, "icon", {}, void 0, !0)
+      ])) : m("", !0),
+      s("span", Jl, [
+        A(o.$slots, "default", {}, void 0, !0)
+      ])
+    ]));
+  }
+}), Ji = /* @__PURE__ */ M(ei, [["__scopeId", "data-v-8db4dcaf"]]), ti = ["aria-label"], ai = ["title"], li = {
+  key: 1,
+  class: "ds-segmented-progress-bar-wrapper"
+}, ii = ["aria-label"], ni = ["title"], si = {
+  class: "ds-segmented-progress-bar__legend",
+  "aria-hidden": "true"
+}, oi = { class: "ds-segmented-progress-bar__legend-label" }, di = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "DsSegmentedProgressBar",
+  props: {
+    segments: {
+      type: Array,
+      default: () => []
+    },
+    total: { type: Number, default: 100 },
+    height: { type: Number, default: 8 },
+    // Accessible name for the whole track — the DS source has zero ARIA on this
+    // element, so role="img" + this label are the only a11y surface. Left empty
+    // by default: omitted from the DOM until the consumer supplies a meaningful
+    // summary (e.g. "55% verified, 25% risky, 20% invalid").
+    label: { type: String, default: "" },
+    // Opt-in: render a legend (color swatch + name) summarising every segment
+    // below the track. Off by default so the render stays identical. A `#legend`
+    // slot also opts in and replaces the auto legend with custom content.
+    showLegend: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const n = e, t = Ee(), o = g(() => n.segments.filter((c) => !!c.name)), i = g(
+      () => !!t.legend || n.showLegend && o.value.length > 0
+    );
+    return (c, k) => i.value ? (a(), l("div", li, [
+      s("div", he(c.$attrs, {
+        class: "ds-segmented-progress-bar",
+        role: "img",
+        "aria-label": e.label || void 0,
+        style: { height: `${e.height}px` }
+      }), [
+        (a(!0), l(z, null, Y(e.segments, (f, y) => {
+          var r;
+          return a(), l("div", {
+            key: `${(r = f.name) != null ? r : ""}-${y}`,
+            class: "ds-segmented-progress-bar__segment",
+            style: F({
+              width: `${e.total > 0 ? f.amount * 100 / e.total : 0}%`,
+              backgroundColor: f.color
+            }),
+            title: f.name || void 0
+          }, null, 12, ni);
+        }), 128))
+      ], 16, ii),
+      A(c.$slots, "legend", {}, () => [
+        s("ul", si, [
+          (a(!0), l(z, null, Y(o.value, (f, y) => (a(), l("li", {
+            key: `${f.name}-${y}`,
+            class: "ds-segmented-progress-bar__legend-item"
+          }, [
+            s("span", {
+              class: "ds-segmented-progress-bar__legend-swatch",
+              style: F({ backgroundColor: f.color })
+            }, null, 4),
+            s("span", oi, S(f.name), 1)
+          ]))), 128))
+        ])
+      ], !0)
+    ])) : (a(), l("div", he({ key: 0 }, c.$attrs, {
+      class: "ds-segmented-progress-bar",
+      role: "img",
+      "aria-label": e.label || void 0,
+      style: { height: `${e.height}px` }
+    }), [
+      (a(!0), l(z, null, Y(e.segments, (f, y) => {
+        var r;
+        return a(), l("div", {
+          key: `${(r = f.name) != null ? r : ""}-${y}`,
+          class: "ds-segmented-progress-bar__segment",
+          style: F({
+            width: `${e.total > 0 ? f.amount * 100 / e.total : 0}%`,
+            backgroundColor: f.color
+          }),
+          title: f.name || void 0
+        }, null, 12, ai);
+      }), 128))
+    ], 16, ti));
+  }
+}), en = /* @__PURE__ */ M(di, [["__scopeId", "data-v-89dc768c"]]), ri = {
+  key: 0,
+  class: "ds-empty-state__header"
+}, ci = { class: "ds-empty-state__body" }, ui = ["src"], fi = { class: "ds-empty-state__title" }, bi = {
+  key: 1,
+  class: "ds-empty-state__subtitle"
+}, vi = /* @__PURE__ */ x({
+  __name: "DsEmptyState",
+  props: {
+    // Illustration URL; decorative (rendered with alt="").
+    image: { type: String, default: "" },
+    title: { type: String, default: "" },
+    subtitle: { type: String, default: "" },
+    // DS `radius-card-lg` corners instead of the default square edge.
+    roundedBorder: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (n, t) => (a(), l("div", {
+      class: $(["ds-empty-state", { "is-rounded": e.roundedBorder }])
+    }, [
+      n.$slots["table-header"] ? (a(), l("div", ri, [
+        A(n.$slots, "table-header", {}, void 0, !0)
+      ])) : m("", !0),
+      s("div", ci, [
+        e.image ? (a(), l("img", {
+          key: 0,
+          src: e.image,
+          alt: "",
+          class: "ds-empty-state__image"
+        }, null, 8, ui)) : m("", !0),
+        s("p", fi, S(e.title), 1),
+        e.subtitle ? (a(), l("p", bi, S(e.subtitle), 1)) : m("", !0),
+        A(n.$slots, "button", {}, void 0, !0)
+      ])
+    ], 2));
+  }
+}), tn = /* @__PURE__ */ M(vi, [["__scopeId", "data-v-159c48f9"]]), yi = ["aria-label"], mi = {
+  key: 0,
+  class: "ds-paginator__limit-message"
+}, hi = { class: "ds-paginator__pager" }, gi = {
+  key: 0,
+  class: "ds-paginator__ellipsis",
+  "aria-hidden": "true"
+}, Si = ["aria-current", "onClick"], ki = ["aria-label", "value"], pi = ["value"], $i = "…l", Ti = "…r", Ei = /* @__PURE__ */ x({
+  __name: "DsPaginator",
+  props: {
+    total: { type: Number, required: !0 },
+    pageSize: { type: Number, default: 25 },
+    currentPage: { type: Number, default: 1 },
+    pageSizes: { type: Array, default: () => [10, 25, 50, 100] },
+    limitMessage: { type: String, default: "" },
+    // Appended to each page-size option label (e.g. consumer passes "/page").
+    pageSizeSuffix: { type: String, default: "" },
+    // aria-labels for the icon-only chevron buttons — DS has none; empty unless
+    // the consumer supplies one (see the a11y note on `.types.ts`).
+    prevLabel: { type: String, default: "" },
+    nextLabel: { type: String, default: "" },
+    paginationLabel: { type: String, default: "" },
+    pageSizeLabel: { type: String, default: "" }
+  },
+  emits: [Ve, Ue],
+  setup(e, { emit: n }) {
+    const t = e, o = n, i = g(() => Math.max(1, Math.ceil(t.total / t.pageSize))), c = g(() => {
+      const y = i.value;
+      if (y <= 7)
+        return Array.from({ length: y }, (T, p) => p + 1);
+      const r = t.currentPage, d = [1];
+      r > 4 && d.push($i);
+      const b = Math.max(2, r - 2), h = Math.min(y - 1, r + 2);
+      for (let T = b; T <= h; T++)
+        d.push(T);
+      return r < y - 3 && d.push(Ti), d.push(y), d;
+    });
+    function k(y) {
+      y < 1 || y > i.value || o(Ve, y);
+    }
+    function f(y) {
+      const r = y.target;
+      o(Ue, Number(r.value));
+    }
+    return (y, r) => (a(), l("nav", {
+      class: "ds-paginator",
+      "aria-label": e.paginationLabel || void 0
+    }, [
+      e.limitMessage ? (a(), l("span", mi, S(e.limitMessage), 1)) : m("", !0),
+      s("div", hi, [
+        j(_(oe), {
+          variant: "tertiary",
+          circle: "",
+          size: "medium",
+          "left-icon": "chevron_left",
+          "aria-label": e.prevLabel || void 0,
+          disabled: e.currentPage <= 1,
+          onClick: r[0] || (r[0] = (d) => k(e.currentPage - 1))
+        }, null, 8, ["aria-label", "disabled"]),
+        (a(!0), l(z, null, Y(c.value, (d) => (a(), l(z, { key: d }, [
+          typeof d == "string" ? (a(), l("span", gi, "…")) : (a(), l("button", {
+            key: 1,
+            type: "button",
+            class: $(["ds-paginator__page", { "is-active": d === e.currentPage }]),
+            "aria-current": d === e.currentPage ? "page" : void 0,
+            onClick: (b) => k(d)
+          }, S(d), 11, Si))
+        ], 64))), 128)),
+        j(_(oe), {
+          variant: "tertiary",
+          circle: "",
+          size: "medium",
+          "left-icon": "chevron_right",
+          "aria-label": e.nextLabel || void 0,
+          disabled: e.currentPage >= i.value,
+          onClick: r[1] || (r[1] = (d) => k(e.currentPage + 1))
+        }, null, 8, ["aria-label", "disabled"])
+      ]),
+      s("select", {
+        class: "ds-paginator__page-size",
+        "aria-label": e.pageSizeLabel || void 0,
+        value: e.pageSize,
+        onChange: f
+      }, [
+        (a(!0), l(z, null, Y(e.pageSizes, (d) => (a(), l("option", {
+          key: d,
+          value: d
+        }, S(d) + S(e.pageSizeSuffix), 9, pi))), 128))
+      ], 40, ki)
+    ], 8, yi));
+  }
+}), an = /* @__PURE__ */ M(Ei, [["__scopeId", "data-v-a42e7bb4"]]), Li = ["aria-current", "title"], wi = {
+  class: "ds-menu-item__icon material-icons",
+  "aria-hidden": "true"
+}, Ii = {
+  key: 0,
+  class: "ds-menu-item__label"
+}, Ci = /* @__PURE__ */ x({
+  __name: "DsMenuItem",
+  props: {
+    // Material Icons ligature name (rendered via <i class="material-icons">).
+    icon: { type: String, required: !0 },
+    // Row label; a default slot overrides it. Hidden (not removed) when collapsed.
+    text: { type: String, default: "" },
+    // Current row: white surface + tint border, aria-current="page".
+    active: Boolean,
+    // Icon-only collapsed rail.
+    collapsed: Boolean
+  },
+  emits: [Ge],
+  setup(e, { emit: n }) {
+    const t = n;
+    function o(i) {
+      t(Ge, i);
+    }
+    return (i, c) => (a(), l("button", {
+      type: "button",
+      class: $(["ds-menu-item", { "is-active": e.active, "is-collapsed": e.collapsed }]),
+      "aria-current": e.active ? "page" : void 0,
+      title: e.text || void 0,
+      onClick: o
+    }, [
+      s("i", wi, S(e.icon), 1),
+      e.text || i.$slots.default ? (a(), l("span", Ii, [
+        A(i.$slots, "default", {}, () => [
+          H(S(e.text), 1)
+        ], !0)
+      ])) : m("", !0)
+    ], 10, Li));
+  }
+}), ln = /* @__PURE__ */ M(Ci, [["__scopeId", "data-v-0fe17e63"]]), se = {
+  ACTIVE: "active",
+  // current step — accent-tint chip, filled marker
+  COMPLETED: "completed",
+  // done — filled accent marker
+  INCOMPLETE: "incomplete",
+  // visited but unfinished — red "!" chip
+  NEUTRAL: "neutral"
+  // upcoming — outlined marker
+}, _i = { class: "ds-wizard-stepper" }, Di = { class: "ds-wizard-stepper__steps" }, Ai = {
+  class: "ds-wizard-step__marker",
+  "aria-hidden": "true"
+}, Ni = { class: "ds-wizard-step__label" }, Ri = /* @__PURE__ */ x({
+  __name: "DsWizardStepper",
+  props: {
+    steps: { type: Array, default: () => [] },
+    // Current step (1-based).
+    value: { type: Number, default: 1 },
+    // Button labels — consumer-owned copy (no hardcoded text in the library).
+    nextLabel: { type: String, default: "" },
+    finalStepLabel: { type: String, default: "" },
+    // Whether the step chips are interactive (advance buttons are always active).
+    clickable: { type: Boolean, default: !0 }
+  },
+  emits: [De, He],
+  setup(e, { emit: n }) {
+    const t = e, o = n, i = g(() => t.value === t.steps.length), c = g(
+      () => t.steps.map((r, d) => {
+        var T;
+        const b = d + 1;
+        let h;
+        return b === t.value ? h = se.ACTIVE : r.completed ? h = se.COMPLETED : r.visited ? h = se.INCOMPLETE : b < t.value ? h = se.COMPLETED : h = se.NEUTRAL, {
+          key: (T = r.key) != null ? T : b,
+          index: b,
+          label: r.label,
+          state: h,
+          current: h === se.ACTIVE,
+          marker: h === se.INCOMPLETE ? "!" : String(b)
+        };
+      })
+    );
+    function k(r) {
+      t.clickable && o(De, r);
+    }
+    function f() {
+      t.value < t.steps.length && o(De, t.value + 1);
+    }
+    function y() {
+      o(He);
+    }
+    return (r, d) => (a(), l("div", _i, [
+      s("ol", Di, [
+        (a(!0), l(z, null, Y(c.value, (b) => (a(), l("li", {
+          key: b.key,
+          class: "ds-wizard-stepper__item"
+        }, [
+          (a(), G(ft(e.clickable ? "button" : "div"), {
+            type: e.clickable ? "button" : void 0,
+            class: $(["ds-wizard-step", [`ds-wizard-step--${b.state}`, { "is-clickable": e.clickable }]]),
+            "aria-current": b.current ? "step" : void 0,
+            onClick: (h) => k(b.index)
+          }, {
+            default: ie(() => [
+              s("span", Ai, S(b.marker), 1),
+              s("span", Ni, S(b.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["type", "class", "aria-current", "onClick"]))
+        ]))), 128))
+      ]),
+      !i.value && e.nextLabel ? (a(), G(_(oe), {
+        key: 0,
+        variant: "primary",
+        size: "large",
+        "right-icon": "keyboard_arrow_right",
+        onClick: f
+      }, {
+        default: ie(() => [
+          H(S(e.nextLabel), 1)
+        ]),
+        _: 1
+      })) : m("", !0),
+      i.value && e.finalStepLabel ? (a(), G(_(oe), {
+        key: 1,
+        variant: "primary",
+        size: "large",
+        onClick: y
+      }, {
+        default: ie(() => [
+          H(S(e.finalStepLabel), 1)
+        ]),
+        _: 1
+      })) : m("", !0)
+    ]));
   }
-}), ca = /* @__PURE__ */ $(Jt, [["__scopeId", "data-v-86467226"]]);
+}), nn = /* @__PURE__ */ M(Ri, [["__scopeId", "data-v-d6f1e6d7"]]);
 export {
-  ot as DS_ALERT_EFFECTS,
-  st as DS_ALERT_ICONS,
-  nt as DS_ALERT_TYPES,
-  H as DS_BADGE_TONES,
-  ke as DS_BUTTON_NATIVE_TYPES,
-  ee as DS_BUTTON_SIZES,
-  J as DS_BUTTON_VARIANTS,
-  Ge as DS_INPUT_SIZES,
-  P as DS_INPUT_TYPES,
-  bt as DS_NOTIFICATION_ICONS,
-  vt as DS_NOTIFICATION_POSITIONS,
-  yt as DS_NOTIFICATION_TYPES,
-  Y as DS_SPINNER_TONES,
-  te as DS_TABLE_ALIGN,
-  we as DS_TAG_TONES,
-  G as DS_VERIFICATION_STATES,
-  sa as DsAlert,
-  aa as DsAvatar,
-  Ae as DsBadge,
-  K as DsButton,
-  oa as DsCheckbox,
-  ae as DsContactValue,
-  ca as DsDataCard,
-  ia as DsInput,
-  ra as DsModal,
-  da as DsNotification,
-  Se as DsSpinner,
-  la as DsTable,
-  ta as DsTag,
-  na as DsTextarea,
-  Bt as DsVerificationIcon
+  fa as DS_ALERT_EFFECTS,
+  ba as DS_ALERT_ICONS,
+  ua as DS_ALERT_TYPES,
+  Re as DS_BADGE_TONES,
+  yt as DS_BUTTON_NATIVE_TYPES,
+  Ke as DS_BUTTON_SIZES,
+  Ae as DS_BUTTON_VARIANTS,
+  Kl as DS_CUSTOM_TAG_TYPES,
+  Zt as DS_INPUT_SIZES,
+  ce as DS_INPUT_TYPES,
+  pa as DS_NOTIFICATION_ICONS,
+  qe as DS_NOTIFICATION_LINK_TARGETS,
+  ka as DS_NOTIFICATION_POSITIONS,
+  Sa as DS_NOTIFICATION_TYPES,
+  Xe as DS_SELECT_TYPES,
+  Ze as DS_SELECT_WIDTHS,
+  Ce as DS_SPINNER_SIZES,
+  ge as DS_SPINNER_TONES,
+  Ye as DS_TABLE_ALIGN,
+  ee as DS_TABLE_PIN,
+  Et as DS_TAG_TONES,
+  xa as DS_TOOLTIP_PLACEMENTS,
+  Ne as DS_VERIFICATION_STATES,
+  se as DS_WIZARD_STEP_STATES,
+  zi as DsAlert,
+  Mi as DsAvatar,
+  _t as DsBadge,
+  oe as DsButton,
+  Xi as DsCell,
+  et as DsCheckbox,
+  je as DsContactValue,
+  Zi as DsCustomTag,
+  Hi as DsDataCard,
+  tn as DsEmptyState,
+  Pi as DsInput,
+  Yi as DsItemSelectorButton,
+  ln as DsMenuItem,
+  Ui as DsModal,
+  Vi as DsNotification,
+  an as DsPaginator,
+  Qi as DsPill,
+  Ji as DsPillWithBorder,
+  Wi as DsRadio,
+  ji as DsRow,
+  en as DsSegmentedProgressBar,
+  qi as DsSelect,
+  fe as DsSpinner,
+  Ki as DsSwitch,
+  Oi as DsTable,
+  xi as DsTag,
+  Fi as DsTextarea,
+  Gi as DsTooltip,
+  za as DsVerificationIcon,
+  nn as DsWizardStepper
 };
 //# sourceMappingURL=index.es.js.map