@salesql/sql_components_vue3 1.0.0 → 2.0.0

package/dist/index.es.js

@@ -1,53 +1,54 @@
-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 $, openBlock as t, createElementBlock as a, normalizeStyle as L, normalizeClass as m, computed as h, createBlock as D, unref as S, createCommentVNode as u, renderSlot as I, createElementVNode as d, toDisplayString as v, Fragment as A, renderList as V, createTextVNode as O, useModel as Q, useSlots as oe, ref as R, withDirectives as Z, vModelDynamic as ye, mergeModels as U, vModelText as ve, onMounted as se, watch as de, vModelCheckbox as be, onBeforeUnmount as j, Teleport as re, createVNode as p, Transition as ce, withCtx as J, nextTick as me, withModifiers as ue } from "vue";
+const W = {
   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({
+}, ge = ["aria-label"], he = /* @__PURE__ */ $({
   __name: "DsSpinner",
   props: {
     size: { type: Number, default: 24 },
     tone: {
       type: String,
-      default: Y.DARK
+      default: W.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}`]),
+    return (i, l) => (t(), a("span", {
+      class: m(["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: L({ width: `${e.size}px`, height: `${e.size}px` }),
+      "aria-label": e.label || void 0
+    }, null, 14, ge));
   }
-}), $ = (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 = {
+}), T = (e, i) => {
+  const l = e.__vccOpts || e;
+  for (const [r, s] of i)
+    l[r] = s;
+  return l;
+}, Se = /* @__PURE__ */ T(he, [["__scopeId", "data-v-4d32b0a5"]]), ee = "click", C = "close", F = "focus", z = "blur", G = "copy", _ = "correct", P = "incorrect", te = "sort", ae = "edit", H = {
+  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
+  QUINARY: "quinary",
+  // accent text on white, no border (link-style)
+  WARNING: "warning",
+  // solid red fill, white text — destructive / delete
+  DOTTED: "dotted"
+  // transparent, dashed border, 24px radius — "add" affordance
+}, ie = {
   SMALL: "small",
   // 24px
   MEDIUM: "medium",
@@ -60,7 +61,7 @@ const Y = {
   BUTTON: "button",
   SUBMIT: "submit",
   RESET: "reset"
-}, $e = ["type", "disabled", "autofocus", "aria-busy", "aria-disabled", "aria-label"], Te = {
+}, $e = ["type", "disabled", "autofocus", "aria-busy", "aria-disabled", "aria-pressed", "aria-label"], Te = {
   key: 1,
   class: "ds-button__icon ds-button__icon--leading"
 }, Ie = {
@@ -72,46 +73,52 @@ const Y = {
 }, Ee = {
   key: 3,
   class: "ds-button__icon ds-button__icon--trailing"
-}, Le = {
+}, we = {
   class: "material-icons",
   "aria-hidden": "true"
-}, De = /* @__PURE__ */ k({
+}, Le = /* @__PURE__ */ $({
   __name: "DsButton",
   props: {
-    variant: { type: String, default: J.PRIMARY },
-    size: { type: String, default: ee.MEDIUM },
+    variant: { type: String, default: H.DEFAULT },
+    size: { type: String, default: ie.MEDIUM },
     nativeType: {
       type: String,
       default: ke.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,
+    // 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
+  emits: [ee],
+  setup(e, { emit: i }) {
+    const l = e, r = i, s = h(() => l.size === ie.SMALL ? 14 : 20), n = h(
+      () => l.variant === H.PRIMARY || l.variant === H.WARNING ? W.LIGHT : W.DARK
     );
-    function c(u) {
-      o.disabled || o.loading || l(Z, u);
+    function o(c) {
+      l.disabled || l.loading || r(ee, c);
     }
-    return (u, b) => (t(), a("button", {
-      class: v(["ds-button", [
+    return (c, b) => (t(), a("button", {
+      class: m(["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-selected": e.selected
         }
       ]]),
       type: e.nativeType,
@@ -119,33 +126,36 @@ 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: o
     }, [
-      e.loading ? (t(), D(g(Se), {
+      e.loading ? (t(), D(S(Se), {
         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)
+        size: s.value,
+        tone: n.value
+      }, null, 8, ["size", "tone"])) : u("", !0),
+      !e.loading && (e.leftIcon || c.$slots.leading) ? (t(), a("span", Te, [
+        I(c.$slots, "leading", {}, () => [
+          d("i", Ie, v(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)
+      ])) : u("", !0),
+      !e.loading && c.$slots.default ? (t(), a("span", Ce, [
+        I(c.$slots, "default", {}, void 0, !0)
+      ])) : u("", !0),
+      !e.loading && (e.rightIcon || c.$slots.trailing) ? (t(), a("span", Ee, [
+        I(c.$slots, "trailing", {}, () => [
+          d("i", we, v(e.rightIcon), 1)
         ], !0)
-      ])) : r("", !0)
+      ])) : u("", !0)
     ], 10, $e));
   }
-}), K = /* @__PURE__ */ $(De, [["__scopeId", "data-v-662e5512"]]), we = {
+}), K = /* @__PURE__ */ T(Le, [["__scopeId", "data-v-2d17382d"]]), De = {
   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,12 +164,12 @@ const Y = {
   // e.g. Pending
   ERROR: "error"
   // e.g. Bounced
-}, Ne = ["aria-label"], Re = /* @__PURE__ */ k({
+}, Ne = ["aria-label"], Re = /* @__PURE__ */ $({
   __name: "DsTag",
   props: {
     tone: {
       type: String,
-      default: we.DEFAULT
+      default: De.DEFAULT
     },
     // Semicircular sides (DS `rounded`): radius-round vs the default radius-control.
     rounded: Boolean,
@@ -171,27 +181,27 @@ const Y = {
       default: ""
     }
   },
-  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 }]])
+  setup(e, { emit: i }) {
+    const l = i;
+    return (r, s) => (t(), a("span", {
+      class: m(["ds-tag", [`ds-tag--${e.tone}`, { "is-rounded": e.rounded }]])
     }, [
-      I(l.$slots, "default", {}, void 0, !0),
+      I(r.$slots, "default", {}, void 0, !0),
       e.closable ? (t(), a("button", {
         key: 0,
         type: "button",
         class: "ds-tag__close",
         "aria-label": e.closeLabel || void 0,
-        onClick: i[0] || (i[0] = (d) => o(g(C)))
-      }, [...i[1] || (i[1] = [
-        s("i", {
+        onClick: s[0] || (s[0] = (n) => l(S(C)))
+      }, [...s[1] || (s[1] = [
+        d("i", {
           class: "material-icons",
           "aria-hidden": "true"
         }, "close", -1)
-      ])], 8, Ne)) : r("", !0)
+      ])], 8, Ne)) : u("", !0)
     ], 2));
   }
-}), ta = /* @__PURE__ */ $(Re, [["__scopeId", "data-v-4507fdca"]]), H = {
+}), ea = /* @__PURE__ */ T(Re, [["__scopeId", "data-v-fc383bb9"]]), X = {
   ACCENT: "accent",
   // e.g. Work (purple)
   GREY: "grey",
@@ -204,22 +214,22 @@ const Y = {
   // coral
   WARNING: "warning"
   // orange
-}, Be = /* @__PURE__ */ k({
+}, Be = /* @__PURE__ */ $({
   __name: "DsBadge",
   props: {
     tone: {
       type: String,
-      default: H.ACCENT
+      default: X.ACCENT
     }
   },
   setup(e) {
-    return (n, o) => (t(), a("span", {
-      class: v(["ds-badge", `ds-badge--${e.tone}`])
+    return (i, l) => (t(), a("span", {
+      class: m(["ds-badge", `ds-badge--${e.tone}`])
     }, [
-      I(n.$slots, "default", {}, void 0, !0)
+      I(i.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), Ae = /* @__PURE__ */ $(Be, [["__scopeId", "data-v-f10a17a0"]]), Oe = ["src", "alt"], xe = ["aria-label"], Me = /* @__PURE__ */ k({
+}), Ae = /* @__PURE__ */ T(Be, [["__scopeId", "data-v-f10a17a0"]]), Oe = ["src", "alt"], xe = ["aria-label"], Me = /* @__PURE__ */ $({
   __name: "DsAvatar",
   props: {
     image: { type: String, default: "" },
@@ -232,45 +242,45 @@ const Y = {
     alt: { type: String, default: "" }
   },
   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 i = e, l = h(
+      () => i.firstName && i.lastName ? (i.firstName.charAt(0) + i.lastName.charAt(0)).toUpperCase() : ""
+    ), r = h(() => i.alt || `${i.firstName} ${i.lastName}`.trim()), s = h(() => ({ width: `${i.size}px`, height: `${i.size}px` })), n = h(() => {
+      const o = i.uid || i.firstName + i.lastName;
+      let c = 0;
+      for (let f = 0; f < o.length; f++)
+        c = o.charCodeAt(f) + ((c << 5) - c), c = c & c;
       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" };
+      for (let f = 0; f < 3; f++) b[f] = c >> f * 8 & 255;
+      const y = b[0] >= 200 && b[1] >= 200 && b[2] >= 200;
+      return { bg: `rgb(${b[0]}, ${b[1]}, ${b[2]})`, fg: y ? "#323f4b" : "#fff" };
     });
-    return (c, u) => e.image ? (t(), a("img", {
+    return (o, c) => e.image ? (t(), a("img", {
       key: 0,
-      class: v(["ds-avatar", { "is-circular": e.circular }]),
+      class: m(["ds-avatar", { "is-circular": e.circular }]),
       src: e.image,
       alt: e.alt,
-      style: w(i.value)
-    }, null, 14, Oe)) : o.value ? (t(), a("div", {
+      style: L(s.value)
+    }, null, 14, Oe)) : l.value ? (t(), a("div", {
       key: 1,
-      class: v(["ds-avatar ds-avatar--initials", { "is-circular": e.circular }]),
+      class: m(["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": r.value || void 0,
+      style: L([
+        s.value,
+        { background: n.value.bg, color: n.value.fg, fontSize: `${Math.round(e.size * 0.4)}px` }
       ])
-    }, y(o.value), 15, xe)) : (t(), a("div", {
+    }, v(l.value), 15, xe)) : (t(), a("div", {
       key: 2,
-      class: v(["ds-avatar ds-avatar--placeholder", { "is-circular": e.circular }]),
-      style: w(i.value),
+      class: m(["ds-avatar ds-avatar--placeholder", { "is-circular": e.circular }]),
+      style: L(s.value),
       "aria-hidden": "true"
     }, null, 6));
   }
-}), aa = /* @__PURE__ */ $(Me, [["__scopeId", "data-v-e965ed47"]]), te = {
+}), ta = /* @__PURE__ */ T(Me, [["__scopeId", "data-v-e965ed47"]]), le = {
   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({
+}, Ue = { class: "ds-table" }, Ve = { class: "ds-table__wrapper" }, Fe = { key: 0 }, ze = ["colspan"], Ge = /* @__PURE__ */ $({
   __name: "DsTable",
   props: {
     columns: {
@@ -289,59 +299,74 @@ 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
     }
   },
   setup(e) {
-    return (n, o) => (t(), a("div", Ve, [
-      s("div", Ue, [
-        s("table", Fe, [
-          s("thead", null, [
-            s("tr", null, [
-              (t(!0), a(B, null, M(e.columns, (l) => {
-                var i;
+    const i = e, l = h(
+      () => i.rowHeight == null ? void 0 : {
+        "--ds-table-row-height": typeof i.rowHeight == "number" ? `${i.rowHeight}px` : i.rowHeight
+      }
+    );
+    return (r, s) => (t(), a("div", Ue, [
+      d("div", Ve, [
+        d("table", {
+          class: m(["ds-table__table", { "has-row-height": e.rowHeight != null }]),
+          style: L(l.value)
+        }, [
+          d("thead", null, [
+            d("tr", null, [
+              (t(!0), a(A, null, V(e.columns, (n) => {
+                var o;
                 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);
+                  key: n.key,
+                  class: m(`ds-table__th--${(o = n.align) != null ? o : S(le).LEFT}`),
+                  style: L(n.width ? { width: n.width } : void 0)
+                }, v(n.label), 7);
               }), 128))
             ])
           ]),
-          s("tbody", null, [
-            e.rows.length === 0 ? (t(), a("tr", ze, [
-              s("td", {
+          d("tbody", null, [
+            e.rows.length === 0 ? (t(), a("tr", Fe, [
+              d("td", {
                 class: "ds-table__empty",
                 colspan: e.columns.length,
                 "data-testid": "ds-table-empty"
               }, [
-                I(n.$slots, "empty", {}, () => [
-                  A(y(e.emptyMessage), 1)
+                I(r.$slots, "empty", {}, () => [
+                  O(v(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, ze)
+            ])) : u("", !0),
+            (t(!0), a(A, null, V(e.rows, (n) => (t(), a("tr", {
+              key: n.id,
+              class: m({ "is-highlighted": n.id === e.highlightRowId }),
               "data-testid": "ds-table-row"
             }, [
-              (t(!0), a(B, null, M(e.columns, (i) => {
-                var d;
+              (t(!0), a(A, null, V(e.columns, (o) => {
+                var c;
                 return t(), a("td", {
-                  key: i.key,
-                  class: v(`ds-table__td--${(d = i.align) != null ? d : g(te).LEFT}`)
+                  key: o.key,
+                  class: m(`ds-table__td--${(c = o.align) != null ? c : S(le).LEFT}`)
                 }, [
-                  I(n.$slots, `cell-${i.key}`, { row: l }, () => [
-                    A(y(l[i.key]), 1)
+                  I(r.$slots, `cell-${o.key}`, { row: n }, () => [
+                    O(v(n[o.key]), 1)
                   ], !0)
                 ], 2);
               }), 128))
             ], 2))), 128))
           ])
-        ])
+        ], 6)
       ])
     ]));
   }
-}), la = /* @__PURE__ */ $(Pe, [["__scopeId", "data-v-1735ff35"]]), P = {
+}), aa = /* @__PURE__ */ T(Ge, [["__scopeId", "data-v-45342363"]]), Y = {
   TEXT: "text",
   EMAIL: "email",
   PASSWORD: "password",
@@ -349,26 +374,26 @@ const Y = {
   NUMBER: "number",
   SEARCH: "search",
   URL: "url"
-}, Ge = {
+}, _e = {
   SM: "sm",
   // 36px
   MD: "md"
   // 48px
-}, Ye = { class: "ds-input__wrap" }, Ke = ["id", "type", "placeholder", "disabled", "name", "autocomplete", "aria-invalid", "aria-describedby"], He = {
+}, Pe = { class: "ds-input__wrap" }, pe = ["id", "type", "placeholder", "disabled", "name", "autocomplete", "aria-invalid", "aria-describedby"], He = {
   key: 0,
   class: "ds-input__suffix"
-}, We = {
+}, Ye = {
   key: 0,
   class: "material-icons ds-input__error-icon",
   "aria-hidden": "true"
-}, qe = ["aria-label", "aria-pressed"], pe = {
+}, qe = ["aria-label", "aria-pressed"], We = {
   class: "material-icons",
   "aria-hidden": "true"
-}, Xe = ["id"], Ze = /* @__PURE__ */ k({
+}, Ke = ["id"], Xe = /* @__PURE__ */ $({
   __name: "DsInput",
-  props: /* @__PURE__ */ O({
-    type: { type: String, default: P.TEXT },
-    size: { type: String, default: Ge.SM },
+  props: /* @__PURE__ */ U({
+    type: { type: String, default: Y.TEXT },
+    size: { type: String, default: _e.SM },
     placeholder: { type: String, default: "" },
     disabled: Boolean,
     error: Boolean,
@@ -383,21 +408,21 @@ const Y = {
     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__ */ U([F, z], ["update:modelValue"]),
+  setup(e, { emit: i }) {
+    const l = Q(e, "modelValue"), r = e, s = i, n = oe(), o = R(!1), c = h(() => r.type === Y.PASSWORD), b = h(
+      () => c.value && o.value ? Y.TEXT : r.type
+    ), y = h(
+      () => !!n.suffix || r.error && r.showErrorIcon || c.value
     );
-    return (f, h) => (t(), a("div", {
-      class: v(["ds-input", [`ds-input--${e.size}`, { "is-error": e.error, "is-disabled": e.disabled }]])
+    return (f, g) => (t(), a("div", {
+      class: m(["ds-input", [`ds-input--${e.size}`, { "is-error": e.error, "is-disabled": e.disabled }]])
     }, [
-      s("div", Ye, [
-        q(s("input", {
+      d("div", Pe, [
+        Z(d("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 }]),
+          "onUpdate:modelValue": g[0] || (g[0] = (k) => l.value = k),
+          class: m(["ds-input__control", { "has-suffix": y.value }]),
           type: b.value,
           placeholder: e.placeholder,
           disabled: e.disabled,
@@ -405,35 +430,35 @@ const Y = {
           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: g[1] || (g[1] = (k) => s(S(F), k)),
+          onBlur: g[2] || (g[2] = (k) => s(S(z), k))
+        }, null, 42, pe), [
+          [ye, l.value]
         ]),
-        m.value ? (t(), a("div", He, [
+        y.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", {
+          e.error && e.showErrorIcon ? (t(), a("i", Ye, "warning")) : c.value ? (t(), a("button", {
             key: 1,
             type: "button",
             class: "ds-input__toggle",
             "aria-label": e.toggleLabel || void 0,
-            "aria-pressed": c.value,
-            onClick: h[3] || (h[3] = (T) => c.value = !c.value)
+            "aria-pressed": o.value,
+            onClick: g[3] || (g[3] = (k) => o.value = !o.value)
           }, [
-            s("i", pe, y(c.value ? "visibility" : "visibility_off"), 1)
-          ], 8, qe)) : r("", !0)
-        ])) : r("", !0)
+            d("i", We, v(o.value ? "visibility" : "visibility_off"), 1)
+          ], 8, qe)) : u("", !0)
+        ])) : u("", !0)
       ]),
       e.error && e.errorMessage ? (t(), a("p", {
         key: 0,
         id: e.id ? `${e.id}-error` : void 0,
         class: "ds-input__error"
-      }, y(e.errorMessage), 9, Xe)) : r("", !0)
+      }, v(e.errorMessage), 9, Ke)) : u("", !0)
     ], 2));
   }
-}), ia = /* @__PURE__ */ $(Ze, [["__scopeId", "data-v-d4b27b55"]]), je = ["id", "placeholder", "rows", "disabled", "name", "aria-invalid", "aria-describedby"], Qe = ["id"], Je = /* @__PURE__ */ k({
+}), ia = /* @__PURE__ */ T(Xe, [["__scopeId", "data-v-fb36e573"]]), Qe = ["id", "placeholder", "rows", "disabled", "name", "aria-invalid", "aria-describedby"], Ze = ["id"], je = /* @__PURE__ */ $({
   __name: "DsTextarea",
-  props: /* @__PURE__ */ O({
+  props: /* @__PURE__ */ U({
     placeholder: { type: String, default: "" },
     rows: { type: Number, default: 4 },
     disabled: Boolean,
@@ -445,15 +470,15 @@ const Y = {
     modelValue: { default: "" },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ O([V, U], ["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 }])
+  emits: /* @__PURE__ */ U([F, z], ["update:modelValue"]),
+  setup(e, { emit: i }) {
+    const l = Q(e, "modelValue"), r = i;
+    return (s, n) => (t(), a("div", {
+      class: m(["ds-textarea", { "is-error": e.error, "is-disabled": e.disabled }])
     }, [
-      q(s("textarea", {
+      Z(d("textarea", {
         id: e.id || void 0,
-        "onUpdate:modelValue": d[0] || (d[0] = (c) => o.value = c),
+        "onUpdate:modelValue": n[0] || (n[0] = (o) => l.value = o),
         class: "ds-textarea__control",
         placeholder: e.placeholder,
         rows: e.rows,
@@ -461,38 +486,38 @@ 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: n[1] || (n[1] = (o) => r(S(F), o)),
+        onBlur: n[2] || (n[2] = (o) => r(S(z), o))
+      }, null, 40, Qe), [
+        [ve, l.value]
       ]),
       e.error && e.errorMessage ? (t(), a("p", {
         key: 0,
         id: e.id ? `${e.id}-error` : void 0,
         class: "ds-textarea__error"
-      }, y(e.errorMessage), 9, Qe)) : r("", !0)
+      }, v(e.errorMessage), 9, Ze)) : u("", !0)
     ], 2));
   }
-}), na = /* @__PURE__ */ $(Je, [["__scopeId", "data-v-cfa74e3d"]]), et = ["disabled", "name"], tt = {
+}), la = /* @__PURE__ */ T(je, [["__scopeId", "data-v-54fc312a"]]), Je = ["disabled", "name"], et = {
   key: 0,
   class: "ds-checkbox__mark",
   viewBox: "0 0 16 16",
   fill: "none",
   stroke: "currentColor",
   "stroke-width": "2.5"
-}, at = {
+}, tt = {
   key: 1,
   class: "ds-checkbox__mark",
   viewBox: "0 0 16 16",
   fill: "none",
   stroke: "currentColor",
   "stroke-width": "2.5"
-}, lt = {
+}, at = {
   key: 0,
   class: "ds-checkbox__label"
-}, it = /* @__PURE__ */ k({
+}, it = /* @__PURE__ */ $({
   __name: "DsCheckbox",
-  props: /* @__PURE__ */ O({
+  props: /* @__PURE__ */ U({
     indeterminate: Boolean,
     disabled: Boolean,
     name: { type: String, default: "" },
@@ -504,73 +529,73 @@ const Y = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const n = W(e, "modelValue"), o = e, l = N(null);
-    function i() {
-      l.value && (l.value.indeterminate = o.indeterminate);
+    const i = Q(e, "modelValue"), l = e, r = R(null);
+    function s() {
+      r.value && (r.value.indeterminate = l.indeterminate);
     }
-    return fe(i), ie(() => o.indeterminate, i), (d, c) => (t(), a("label", {
-      class: v(["ds-checkbox", { "is-disabled": e.disabled }])
+    return se(s), de(() => l.indeterminate, s), (n, o) => (t(), a("label", {
+      class: m(["ds-checkbox", { "is-disabled": e.disabled }])
     }, [
-      q(s("input", {
+      Z(d("input", {
         ref_key: "inputRef",
-        ref: l,
-        "onUpdate:modelValue": c[0] || (c[0] = (u) => n.value = u),
+        ref: r,
+        "onUpdate:modelValue": o[0] || (o[0] = (c) => i.value = c),
         type: "checkbox",
         class: "ds-checkbox__native",
         disabled: e.disabled,
         name: e.name || void 0
-      }, null, 8, et), [
-        [ye, n.value]
+      }, null, 8, Je), [
+        [be, i.value]
       ]),
-      s("span", {
-        class: v(["ds-checkbox__box", { "is-active": n.value || e.indeterminate }]),
+      d("span", {
+        class: m(["ds-checkbox__box", { "is-active": i.value || e.indeterminate }]),
         "aria-hidden": "true"
       }, [
-        e.indeterminate ? (t(), a("svg", tt, [...c[1] || (c[1] = [
-          s("line", {
+        e.indeterminate ? (t(), a("svg", et, [...o[1] || (o[1] = [
+          d("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)
+        ])])) : i.value ? (t(), a("svg", tt, [...o[2] || (o[2] = [
+          d("path", { d: "M3.5 8.5l3 3 6-6" }, null, -1)
+        ])])) : u("", !0)
       ], 2),
-      d.$slots.default || e.label ? (t(), a("span", lt, [
-        I(d.$slots, "default", {}, () => [
-          A(y(e.label), 1)
+      n.$slots.default || e.label ? (t(), a("span", at, [
+        I(n.$slots, "default", {}, () => [
+          O(v(e.label), 1)
         ], !0)
-      ])) : r("", !0)
+      ])) : u("", !0)
     ], 2));
   }
-}), oa = /* @__PURE__ */ $(it, [["__scopeId", "data-v-0c1a3c0a"]]), nt = {
+}), na = /* @__PURE__ */ T(it, [["__scopeId", "data-v-8ccdf847"]]), lt = {
   SUCCESS: "success",
   INFO: "info",
   WARNING: "warning",
   ERROR: "error"
-}, ot = {
+}, nt = {
   LIGHT: "light",
   // tinted: family tint bg + mid border + shadow text
   DARK: "dark"
   // solid: family shadow bg + white text
-}, st = {
+}, ot = {
   success: "check_circle",
   info: "info",
   warning: "warning",
   error: "error"
-}, dt = {
+}, st = {
   key: 0,
   class: "material-icons ds-alert__icon",
   "aria-hidden": "true"
-}, rt = { class: "ds-alert__content" }, ct = {
+}, dt = { class: "ds-alert__content" }, rt = {
   key: 1,
   class: "ds-alert__body"
-}, ut = ["aria-label"], ft = /* @__PURE__ */ k({
+}, ct = ["aria-label"], ut = /* @__PURE__ */ $({
   __name: "DsAlert",
   props: {
-    type: { type: String, default: nt.INFO },
-    effect: { type: String, default: ot.LIGHT },
+    type: { type: String, default: lt.INFO },
+    effect: { type: String, default: nt.LIGHT },
     title: { type: String, default: "" },
     description: { type: String, default: "" },
     showIcon: Boolean,
@@ -579,27 +604,27 @@ const Y = {
     closeLabel: { type: String, default: "" }
   },
   emits: [C],
-  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);
+  setup(e, { emit: i }) {
+    const l = e, r = i, s = oe(), n = R(!0), o = h(() => ot[l.type]), c = h(() => !!s.default || l.description.length > 0);
     function b() {
-      d.value = !1, l(C);
+      n.value = !1, r(C);
     }
-    return (m, f) => d.value ? (t(), a("div", {
+    return (y, f) => n.value ? (t(), a("div", {
       key: 0,
-      class: v(["ds-alert", [`ds-alert--${e.type}`, `ds-alert--${e.effect}`, { "is-center": e.center }]]),
+      class: m(["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.showIcon ? (t(), a("i", st, v(o.value), 1)) : u("", !0),
+      d("div", dt, [
         e.title ? (t(), a("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)
+          class: m(["ds-alert__title", { "has-body": c.value }])
+        }, v(e.title), 3)) : u("", !0),
+        c.value ? (t(), a("div", rt, [
+          I(y.$slots, "default", {}, () => [
+            O(v(e.description), 1)
           ], !0)
-        ])) : r("", !0)
+        ])) : u("", !0)
       ]),
       e.closable ? (t(), a("button", {
         key: 1,
@@ -608,100 +633,128 @@ const Y = {
         "aria-label": e.closeLabel || void 0,
         onClick: b
       }, [...f[0] || (f[0] = [
-        s("i", {
+        d("i", {
           class: "material-icons",
           "aria-hidden": "true"
         }, "close", -1)
-      ])], 8, ut)) : r("", !0)
-    ], 2)) : r("", !0);
+      ])], 8, ct)) : u("", !0)
+    ], 2)) : u("", !0);
   }
-}), sa = /* @__PURE__ */ $(ft, [["__scopeId", "data-v-58ce7b87"]]), yt = {
+}), oa = /* @__PURE__ */ T(ut, [["__scopeId", "data-v-03bbe700"]]), ft = {
+  SUCCESS: "success",
   INFO: "info",
   WARNING: "warning",
   ERROR: "error"
-}, vt = {
+}, yt = {
   TOP_LEFT: "top-left",
   TOP_RIGHT: "top-right",
   BOTTOM_LEFT: "bottom-left",
   BOTTOM_RIGHT: "bottom-right"
-}, bt = {
+}, vt = {
+  success: "check_circle",
   info: "mode_edit",
   warning: "warning",
-  error: "warning"
-}, mt = {
+  error: "error"
+}, bt = {
   class: "material-icons ds-notification__icon",
   "aria-hidden": "true"
-}, gt = { class: "ds-notification__content" }, ht = {
+}, mt = { class: "ds-notification__content" }, gt = {
   key: 0,
   class: "ds-notification__title"
-}, St = {
+}, ht = {
   key: 1,
   class: "ds-notification__desc"
-}, kt = ["href"], $t = ["aria-label"], Tt = /* @__PURE__ */ k({
+}, St = ["href"], kt = ["aria-label"], $t = /* @__PURE__ */ $({
   __name: "DsNotification",
   props: {
-    type: { type: String, default: yt.INFO },
+    type: { type: String, default: ft.INFO },
     position: {
       type: String,
-      default: vt.BOTTOM_LEFT
+      default: yt.BOTTOM_LEFT
     },
     title: { type: String, default: "" },
     description: { type: String, default: "" },
     linkTitle: { type: String, default: "" },
     link: { type: String, default: "" },
     showClose: { type: Boolean, default: !0 },
-    closeLabel: { type: String, default: "" }
+    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],
-  setup(e, { emit: n }) {
-    const o = e, l = n, i = N(!0), d = S(() => bt[o.type]);
-    function c() {
-      i.value = !1, l(C);
+  setup(e, { emit: i }) {
+    const l = e, r = i, s = R(!0), n = h(() => vt[l.type]);
+    let o, c = 0, b = l.duration;
+    function y() {
+      o && (clearTimeout(o), o = 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 f(x) {
+      y(), !(l.duration <= 0 || !s.value) && (c = Date.now(), o = setTimeout(N, x));
+    }
+    function g() {
+      o && (b -= Date.now() - c, y());
+    }
+    function k() {
+      f(b > 0 ? b : l.duration);
+    }
+    function N() {
+      y(), s.value = !1, r(C);
+    }
+    return se(() => f(l.duration)), j(y), (x, M) => (t(), D(re, { to: "body" }, [
+      p(ce, {
+        name: "ds-notification",
+        appear: ""
+      }, {
+        default: J(() => [
+          s.value ? (t(), a("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: m(["ds-notification", `ds-notification--${e.position}`])
+          }, [
+            d("div", {
+              class: m(["ds-notification__card", `ds-notification__card--${e.type}`]),
+              role: "alert",
+              onMouseenter: g,
+              onMouseleave: k
+            }, [
+              d("i", bt, v(n.value), 1),
+              d("div", mt, [
+                e.title ? (t(), a("span", gt, v(e.title), 1)) : u("", !0),
+                e.description ? (t(), a("p", ht, v(e.description), 1)) : u("", !0),
+                e.linkTitle ? (t(), a("a", {
+                  key: 2,
+                  class: "ds-notification__link",
+                  href: e.link || void 0,
+                  target: "_blank",
+                  rel: "noreferrer"
+                }, v(e.linkTitle), 9, St)) : u("", !0)
+              ]),
+              e.showClose ? (t(), a("button", {
+                key: 0,
+                type: "button",
+                class: "ds-notification__close",
+                "aria-label": e.closeLabel || void 0,
+                onClick: N
+              }, [...M[0] || (M[0] = [
+                d("i", {
+                  class: "material-icons",
+                  "aria-hidden": "true"
+                }, "close", -1)
+              ])], 8, kt)) : u("", !0)
+            ], 34)
+          ], 2)) : u("", !0)
+        ]),
+        _: 1
+      })
     ]));
   }
-}), da = /* @__PURE__ */ $(Tt, [["__scopeId", "data-v-287d5c06"]]), It = ["aria-label"], Ct = {
+}), sa = /* @__PURE__ */ T($t, [["__scopeId", "data-v-dff620c6"]]), Tt = ["aria-label"], It = {
   key: 0,
   class: "ds-modal__header"
-}, Et = { class: "ds-modal__title" }, Lt = { class: "ds-modal__body" }, Dt = {
+}, Ct = { class: "ds-modal__title" }, Et = { class: "ds-modal__body" }, wt = {
   key: 1,
   class: "ds-modal__footer"
-}, wt = /* @__PURE__ */ k({
+}, Lt = /* @__PURE__ */ $({
   __name: "DsModal",
   props: {
     open: Boolean,
@@ -712,88 +765,93 @@ const Y = {
     closeLabel: { type: String, default: "" }
   },
   emits: [C],
-  setup(e, { emit: n }) {
-    const o = e, l = n, i = N(null);
-    let d = null;
-    function c() {
-      o.closeOnBackdrop && l(C);
+  setup(e, { emit: i }) {
+    const l = e, r = i, s = R(null);
+    let n = null;
+    function o() {
+      l.closeOnBackdrop && r(C);
     }
-    function u() {
-      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(
+    function c() {
+      return s.value ? Array.from(s.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
       ) : [];
     }
-    function b(m) {
-      var x;
-      if (m.key === "Escape") {
-        l(C);
+    function b(y) {
+      var N;
+      if (y.key === "Escape") {
+        r(C);
         return;
       }
-      if (m.key !== "Tab") return;
-      const f = u();
+      if (y.key !== "Tab") return;
+      const f = c();
       if (f.length === 0) {
-        m.preventDefault(), (x = i.value) == null || x.focus();
+        y.preventDefault(), (N = s.value) == null || N.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());
+      const g = f[0], k = f[f.length - 1];
+      y.shiftKey && document.activeElement === g ? (y.preventDefault(), k.focus()) : !y.shiftKey && document.activeElement === k && (y.preventDefault(), g.focus());
     }
-    return ie(
-      () => o.open,
-      (m) => {
+    return de(
+      () => l.open,
+      (y) => {
         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)));
+        typeof document != "undefined" && (y ? (n = document.activeElement, document.addEventListener("keydown", b), document.body.style.overflow = "hidden", me(() => {
+          var g, k;
+          return (k = (g = c()[0]) != null ? g : s.value) == null ? void 0 : k.focus();
+        })) : (document.removeEventListener("keydown", b), document.body.style.overflow = "", (f = n == null ? void 0 : n.focus) == null || f.call(n)));
       },
       { immediate: !0 }
-    ), oe(() => {
+    ), j(() => {
       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)
+    }), (y, f) => (t(), D(re, { to: "body" }, [
+      p(ce, { name: "ds-modal" }, {
+        default: J(() => [
+          e.open ? (t(), a("div", {
+            key: 0,
+            class: "ds-modal",
+            onClick: o
+          }, [
+            d("div", {
+              ref_key: "dialogRef",
+              ref: s,
+              class: "ds-modal__dialog",
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": e.title || "dialog",
+              tabindex: "-1",
+              style: L({ width: e.width }),
+              onClick: f[1] || (f[1] = ue(() => {
+              }, ["stop"]))
+            }, [
+              e.title || e.showClose ? (t(), a("div", It, [
+                d("span", Ct, v(e.title), 1),
+                e.showClose ? (t(), D(S(K), {
+                  key: 0,
+                  variant: "tertiary",
+                  circle: "",
+                  "left-icon": "close",
+                  "aria-label": e.closeLabel || void 0,
+                  onClick: f[0] || (f[0] = (g) => r(S(C)))
+                }, null, 8, ["aria-label"])) : u("", !0)
+              ])) : u("", !0),
+              d("div", Et, [
+                I(y.$slots, "default", {}, void 0, !0)
+              ]),
+              y.$slots.footer ? (t(), a("div", wt, [
+                I(y.$slots, "footer", {}, void 0, !0)
+              ])) : u("", !0)
+            ], 12, Tt)
+          ])) : u("", !0)
+        ]),
+        _: 3
+      })
     ]));
   }
-}), ra = /* @__PURE__ */ $(wt, [["__scopeId", "data-v-6eecaabb"]]), G = {
+}), da = /* @__PURE__ */ T(Lt, [["__scopeId", "data-v-19866588"]]), q = {
   VERIFIED: "verified",
   UNVERIFIED: "unverified",
   NEW: "new"
-}, Nt = ["aria-label", "title"], Rt = /* @__PURE__ */ k({
+}, Dt = ["aria-label", "title"], Nt = /* @__PURE__ */ $({
   __name: "DsVerificationIcon",
   props: {
     // true = verified · false = not verified · null/undefined = newly found.
@@ -818,38 +876,38 @@ const Y = {
     }
   },
   setup(e) {
-    const n = e, o = S(() => n.verified === null || n.verified === void 0 ? {
-      state: G.NEW,
+    const i = e, l = h(() => i.verified === null || i.verified === void 0 ? {
+      state: q.NEW,
       icon: "new_releases",
       label: "Newly found"
-    } : n.verified ? {
-      state: G.VERIFIED,
+    } : i.verified ? {
+      state: q.VERIFIED,
       icon: "verified",
       label: "Verified"
     } : {
-      state: G.UNVERIFIED,
-      icon: n.isContactData ? "dangerous" : "error",
+      state: q.UNVERIFIED,
+      icon: i.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 (r, s) => (t(), a("i", {
+      class: m(["material-icons ds-verification-icon", [
+        `ds-verification-icon--${l.value.state}`,
         { "ds-verification-icon--email": e.isContactData }
       ]]),
-      style: w({ fontSize: `${e.size}px` }),
+      style: L({ fontSize: `${e.size}px` }),
       role: "img",
-      "aria-label": e.label || o.value.label,
-      title: e.label || o.value.label
+      "aria-label": e.label || l.value.label,
+      title: e.label || l.value.label
     }, [
-      I(l.$slots, "default", {}, () => [
-        A(y(o.value.icon), 1)
+      I(r.$slots, "default", {}, () => [
+        O(v(l.value.icon), 1)
       ], !0)
-    ], 14, Nt));
+    ], 14, Dt));
   }
-}), 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 = {
+}), Rt = /* @__PURE__ */ T(Nt, [["__scopeId", "data-v-0fd84040"]]), Bt = ["title"], At = { class: "ds-contact-value__marquee" }, Ot = { class: "ds-contact-value__actions" }, xt = ["aria-label", "title"], Mt = {
   class: "material-icons",
   "aria-hidden": "true"
-}, Ut = ["aria-label", "aria-pressed", "title"], Ft = ["aria-label", "aria-pressed", "title"], zt = /* @__PURE__ */ k({
+}, Ut = ["aria-label", "aria-pressed", "title"], Vt = ["aria-label", "aria-pressed", "title"], Ft = /* @__PURE__ */ $({
   __name: "DsContactValue",
   props: {
     value: { type: String, required: !0 },
@@ -865,106 +923,106 @@ const Y = {
     correctLabel: { type: String, default: "Correct" },
     incorrectLabel: { type: String, default: "Incorrect" }
   },
-  emits: [F, z, _],
-  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(() => {
-        i.value = !1;
-      }, 1200), l(F, o.value);
+  emits: [G, _, P],
+  setup(e, { emit: i }) {
+    const l = e, r = i, s = R(!1);
+    let n;
+    function o() {
+      typeof navigator != "undefined" && navigator.clipboard && navigator.clipboard.writeText(l.value).catch(() => {
+      }), s.value = !0, clearTimeout(n), n = setTimeout(() => {
+        s.value = !1;
+      }, 1200), r(G, l.value);
     }
-    function u() {
-      l(z);
+    function c() {
+      r(_);
     }
     function b() {
-      l(_);
+      r(P);
     }
-    return oe(() => clearTimeout(d)), (m, f) => (t(), a("div", {
-      class: v(["ds-contact-value", { "ds-contact-value--main": e.main }])
+    return j(() => clearTimeout(n)), (y, f) => (t(), a("div", {
+      class: m(["ds-contact-value", { "ds-contact-value--main": e.main }])
     }, [
-      de(g(Bt), {
+      p(S(Rt), {
         verified: e.verified,
         "is-contact-data": e.isContactData
       }, null, 8, ["verified", "is-contact-data"]),
-      s("span", {
+      d("span", {
         class: "ds-contact-value__value",
         title: e.value
-      }, y(e.value), 9, At),
-      s("span", Ot, [
-        e.valueType ? (t(), D(g(Ae), {
+      }, v(e.value), 9, Bt),
+      d("span", At, [
+        e.valueType ? (t(), D(S(Ae), {
           key: 0,
           class: "ds-contact-value__badge",
-          tone: e.main ? g(H).ACCENT : g(H).GREY,
+          tone: e.main ? S(X).ACCENT : S(X).GREY,
           "aria-hidden": "true"
         }, {
-          default: be(() => [
-            A(y(e.valueType), 1)
+          default: J(() => [
+            O(v(e.valueType), 1)
           ]),
           _: 1
-        }, 8, ["tone"])) : r("", !0),
-        s("span", xt, [
-          s("button", {
+        }, 8, ["tone"])) : u("", !0),
+        d("span", Ot, [
+          d("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
+            class: m(["ds-contact-value__action", { "is-copied": s.value }]),
+            "aria-label": s.value ? e.copiedLabel : e.copyLabel,
+            title: s.value ? e.copiedLabel : e.copyLabel,
+            onClick: o
           }, [
-            s("i", Vt, y(i.value ? "check" : "content_copy"), 1)
-          ], 10, Mt),
-          e.showRate ? (t(), a(B, { key: 0 }, [
-            s("button", {
+            d("i", Mt, v(s.value ? "check" : "content_copy"), 1)
+          ], 10, xt),
+          e.showRate ? (t(), a(A, { key: 0 }, [
+            d("button", {
               type: "button",
-              class: v(["ds-contact-value__action", { "is-active": e.correct === !0 }]),
+              class: "ds-contact-value__action",
               "aria-label": e.correctLabel,
               "aria-pressed": e.correct === !0,
               title: e.correctLabel,
-              onClick: u
+              onClick: c
             }, [
-              s("i", {
-                class: v(e.correct === !0 ? "material-icons" : "material-icons-outlined"),
+              d("i", {
+                class: m(e.correct === !0 ? "material-icons" : "material-icons-outlined"),
                 "aria-hidden": "true"
               }, "thumb_up", 2)
-            ], 10, Ut),
-            s("button", {
+            ], 8, Ut),
+            d("button", {
               type: "button",
-              class: v(["ds-contact-value__action", { "is-active": e.correct === !1 }]),
+              class: "ds-contact-value__action",
               "aria-label": e.incorrectLabel,
               "aria-pressed": e.correct === !1,
               title: e.incorrectLabel,
               onClick: b
             }, [
-              s("i", {
-                class: v(e.correct === !1 ? "material-icons" : "material-icons-outlined"),
+              d("i", {
+                class: m(e.correct === !1 ? "material-icons" : "material-icons-outlined"),
                 "aria-hidden": "true"
               }, "thumb_down", 2)
-            ], 10, Ft)
-          ], 64)) : r("", !0)
+            ], 8, Vt)
+          ], 64)) : u("", !0)
         ])
       ])
     ], 2));
   }
-}), ae = /* @__PURE__ */ $(zt, [["__scopeId", "data-v-014e772b"]]), _t = ["aria-label"], Pt = { class: "ds-data-card__heading" }, Gt = {
+}), ne = /* @__PURE__ */ T(Ft, [["__scopeId", "data-v-75a78ae2"]]), zt = ["aria-label"], Gt = { class: "ds-data-card__heading" }, _t = {
   class: "material-icons ds-data-card__icon",
   "aria-hidden": "true"
-}, Yt = { class: "ds-data-card__title" }, Kt = ["aria-label"], Ht = {
+}, Pt = { class: "ds-data-card__title" }, pt = ["aria-label"], Ht = {
   key: 0,
   class: "ds-data-card__body"
-}, Wt = {
+}, Yt = {
   key: 0,
   class: "ds-data-card__empty"
 }, qt = {
   class: "material-icons-outlined ds-data-card__empty-icon",
   "aria-hidden": "true"
-}, pt = { key: 0 }, Xt = {
+}, Wt = { key: 0 }, Kt = {
   key: 0,
   class: "ds-data-card__section"
-}, Zt = { key: 1 }, jt = {
+}, Xt = { key: 1 }, Qt = {
   key: 0,
   class: "ds-data-card__section"
-}, Qt = { class: "ds-data-card__more" }, Jt = /* @__PURE__ */ k({
+}, Zt = { class: "ds-data-card__more" }, jt = /* @__PURE__ */ $({
   __name: "DsDataCard",
   props: {
     title: { type: String, required: !0 },
@@ -987,93 +1045,93 @@ const Y = {
     toggleLabel: { type: String, default: "Toggle" },
     closeLabel: { type: String, default: "Close" }
   },
-  emits: [F, j, Q, C, z, _],
-  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() {
-      i.value = !i.value;
+  emits: [G, te, ae, C, _, P],
+  setup(e, { emit: i }) {
+    const l = e, r = i, s = R(!1), n = h(() => l.more.length + (l.mostLikely ? 1 : 0)), o = h(() => n.value > 3), c = h(() => n.value === 0), b = h(() => l.collapsible && s.value);
+    function y() {
+      s.value = !s.value;
     }
-    function f(R) {
-      l(F, R);
+    function f(B) {
+      r(G, B);
     }
-    function h() {
-      l(j);
+    function g() {
+      r(te);
     }
-    function T() {
-      l(Q);
+    function k() {
+      r(ae);
     }
-    function x() {
-      l(C);
+    function N() {
+      r(C);
     }
-    function p(R) {
-      l(z, R);
+    function x(B) {
+      r(_, B);
     }
-    function X(R) {
-      l(_, R);
+    function M(B) {
+      r(P, B);
     }
-    return (R, E) => (t(), a("section", {
+    return (B, E) => (t(), a("section", {
       class: "ds-data-card",
       "aria-label": e.title
     }, [
-      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())
+      d("div", {
+        class: m(["ds-data-card__header", { "is-collapsed": b.value, "is-collapsible": e.collapsible }]),
+        onClick: E[1] || (E[1] = (w) => e.collapsible && y())
       }, [
-        s("div", Pt, [
-          s("i", Gt, y(e.icon), 1),
-          s("span", Yt, y(e.title), 1)
+        d("div", Gt, [
+          d("i", _t, v(e.icon), 1),
+          d("span", Pt, v(e.title), 1)
         ]),
-        s("div", {
+        d("div", {
           class: "ds-data-card__actions",
-          onClick: E[0] || (E[0] = se(() => {
+          onClick: E[0] || (E[0] = ue(() => {
           }, ["stop"]))
         }, [
           !b.value && e.showEdit ? (t(), a("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: k
+          }, v(e.editLabel), 1)) : u("", !0),
+          !b.value && e.showSort ? (t(), D(S(K), {
             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: g
+          }, null, 8, ["aria-label"])) : u("", !0),
+          e.collapsible ? (t(), D(S(K), {
             key: 2,
             variant: "tertiary",
             size: "medium",
             circle: "",
-            "left-icon": i.value ? "keyboard_arrow_down" : "keyboard_arrow_up",
+            "left-icon": s.value ? "keyboard_arrow_down" : "keyboard_arrow_up",
             "aria-label": e.toggleLabel,
-            onClick: m
-          }, null, 8, ["left-icon", "aria-label"])) : r("", !0),
+            onClick: y
+          }, null, 8, ["left-icon", "aria-label"])) : u("", !0),
           e.showClose ? (t(), a("button", {
             key: 3,
             type: "button",
             class: "ds-data-card__close",
             "aria-label": e.closeLabel,
-            onClick: x
+            onClick: N
           }, [...E[4] || (E[4] = [
-            s("i", {
+            d("i", {
               class: "material-icons",
               "aria-hidden": "true"
             }, "close", -1)
-          ])], 8, Kt)) : r("", !0)
+          ])], 8, pt)) : u("", !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), {
+      b.value ? u("", !0) : (t(), a("div", Ht, [
+        c.value ? (t(), a("div", Yt, [
+          d("i", qt, v(e.icon), 1),
+          d("span", null, v(e.emptyLabel), 1)
+        ])) : (t(), a(A, { key: 1 }, [
+          e.mostLikely ? (t(), a("div", Wt, [
+            o.value ? (t(), a("div", Kt, v(e.mostLikelyLabel), 1)) : u("", !0),
+            p(S(ne), {
               value: e.mostLikely.value,
               "value-type": e.mostLikely.type,
               verified: e.mostLikely.verified,
@@ -1082,63 +1140,63 @@ const Y = {
               "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))
+              onCorrect: E[2] || (E[2] = (w) => x(e.mostLikely)),
+              onIncorrect: E[3] || (E[3] = (w) => M(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,
+          ])) : u("", !0),
+          e.more.length > 0 ? (t(), a("div", Xt, [
+            o.value ? (t(), a("div", Qt, v(e.moreLabel), 1)) : u("", !0),
+            d("div", Zt, [
+              (t(!0), a(A, null, V(e.more, (w) => (t(), D(S(ne), {
+                key: w.value,
+                value: w.value,
+                "value-type": w.type,
+                verified: w.verified,
+                correct: w.correct,
                 "is-contact-data": e.isContactData,
                 "show-rate": e.showRate,
                 onCopy: f,
-                onCorrect: (re) => p(L),
-                onIncorrect: (re) => X(L)
+                onCorrect: (fe) => x(w),
+                onIncorrect: (fe) => M(w)
               }, null, 8, ["value", "value-type", "verified", "correct", "is-contact-data", "show-rate", "onCorrect", "onIncorrect"]))), 128))
             ])
-          ])) : r("", !0)
+          ])) : u("", !0)
         ], 64))
       ]))
-    ], 8, _t));
+    ], 8, zt));
   }
-}), ca = /* @__PURE__ */ $(Jt, [["__scopeId", "data-v-86467226"]]);
+}), ra = /* @__PURE__ */ T(jt, [["__scopeId", "data-v-86467226"]]);
 export {
-  ot as DS_ALERT_EFFECTS,
-  st as DS_ALERT_ICONS,
-  nt as DS_ALERT_TYPES,
-  H as DS_BADGE_TONES,
+  nt as DS_ALERT_EFFECTS,
+  ot as DS_ALERT_ICONS,
+  lt as DS_ALERT_TYPES,
+  X 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,
+  ie as DS_BUTTON_SIZES,
+  H as DS_BUTTON_VARIANTS,
+  _e as DS_INPUT_SIZES,
+  Y as DS_INPUT_TYPES,
+  vt as DS_NOTIFICATION_ICONS,
+  yt as DS_NOTIFICATION_POSITIONS,
+  ft as DS_NOTIFICATION_TYPES,
+  W as DS_SPINNER_TONES,
+  le as DS_TABLE_ALIGN,
+  De as DS_TAG_TONES,
+  q as DS_VERIFICATION_STATES,
+  oa as DsAlert,
+  ta as DsAvatar,
   Ae as DsBadge,
   K as DsButton,
-  oa as DsCheckbox,
-  ae as DsContactValue,
-  ca as DsDataCard,
+  na as DsCheckbox,
+  ne as DsContactValue,
+  ra as DsDataCard,
   ia as DsInput,
-  ra as DsModal,
-  da as DsNotification,
+  da as DsModal,
+  sa as DsNotification,
   Se as DsSpinner,
-  la as DsTable,
-  ta as DsTag,
-  na as DsTextarea,
-  Bt as DsVerificationIcon
+  aa as DsTable,
+  ea as DsTag,
+  la as DsTextarea,
+  Rt as DsVerificationIcon
 };
 //# sourceMappingURL=index.es.js.map