dap-design-system 0.62.3 → 0.62.4

package/dist/common/utils.d.ts

@@ -82,3 +82,11 @@ export declare function getValidityStateObject(state: Partial<ValidityState>): {
  * @returns The kebab-cased string
  */
 export declare function kebabCase(str: string): string;
+/**
+ * Returns `target.id` only when `target` lives in the given tree scope (document
+ * or shadow root). IDREF attributes such as aria-activedescendant resolve only
+ * within one scope, so a reference into another shadow root (e.g. an option the
+ * option list renders inside its own shadow root) is dropped by every browser's
+ * accessibility tree and reported by axe as aria-valid-attr-value.
+ */
+export declare function idInScope(scope: Node | null | undefined, target: Element | null | undefined): string | undefined;

package/dist/common/utils.js

@@ -1,32 +1,32 @@
-var a = Object.defineProperty;
-var s = Object.getOwnPropertySymbols;
-var l = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
-var i = (t, r, e) => r in t ? a(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e, c = (t, r) => {
-  for (var e in r || (r = {}))
-    l.call(r, e) && i(t, e, r[e]);
-  if (s)
-    for (var e of s(r))
-      f.call(r, e) && i(t, e, r[e]);
+var l = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var a = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var s = (t, e, r) => e in t ? l(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, c = (t, e) => {
+  for (var r in e || (e = {}))
+    a.call(e, r) && s(t, r, e[r]);
+  if (i)
+    for (var r of i(e))
+      f.call(e, r) && s(t, r, e[r]);
   return t;
 };
 window.matchMedia(
   "(prefers-reduced-motion: reduce)"
 ).matches;
-function p(t) {
-  var e;
-  const r = (e = t.closest("dap-ds-card")) == null ? void 0 : e.getAttribute("size");
-  t.setAttribute("size", r != null ? r : "sm");
+function g(t) {
+  var r;
+  const e = (r = t.closest("dap-ds-card")) == null ? void 0 : r.getAttribute("size");
+  t.setAttribute("size", e != null ? e : "sm");
 }
 const m = (t) => {
-  let r = {};
+  let e = {};
   try {
-    r = JSON.parse(t != null ? t : "");
-  } catch (e) {
+    e = JSON.parse(t != null ? t : "");
+  } catch (r) {
     console.error("Incorrect Json string data", {
       data: t
     });
   }
-  return r;
+  return e;
 };
 function u(t) {
   return t == null || t === "null" || t === "undefined" ? "" : t;
@@ -35,28 +35,28 @@ const b = {
   fromAttribute: (t) => u(t),
   toAttribute: (t) => !t || t === "null" || t === "undefined" ? null : t
 };
-function g(t) {
-  const r = (n) => {
+function d(t) {
+  const e = (n) => {
     if (n instanceof Element && n.assignedSlot)
       return n.assignedSlot;
     const o = n.parentNode;
     return o instanceof ShadowRoot ? o.host : o;
   };
-  let e = r(t);
-  for (; e instanceof HTMLElement; ) {
-    const { overflowY: n } = getComputedStyle(e);
-    if (/(auto|scroll|overlay)/.test(n) && e.scrollHeight > e.clientHeight)
-      return e;
-    e = r(e);
+  let r = e(t);
+  for (; r instanceof HTMLElement; ) {
+    const { overflowY: n } = getComputedStyle(r);
+    if (/(auto|scroll|overlay)/.test(n) && r.scrollHeight > r.clientHeight)
+      return r;
+    r = e(r);
   }
   return null;
 }
 function h(t) {
-  const r = g(t);
-  if (!r)
+  const e = d(t);
+  if (!e)
     return;
-  const e = r.getBoundingClientRect(), n = t.getBoundingClientRect();
-  n.top < e.top ? r.scrollTop -= e.top - n.top : n.bottom > e.bottom && (r.scrollTop += n.bottom - e.bottom);
+  const r = e.getBoundingClientRect(), n = t.getBoundingClientRect();
+  n.top < r.top ? e.scrollTop -= r.top - n.top : n.bottom > r.bottom && (e.scrollTop += n.bottom - r.bottom);
 }
 function S(t) {
   return c({
@@ -76,14 +76,19 @@ function S(t) {
 function w(t) {
   return t.trim().toLowerCase().replace(/\./g, "-").replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/--+/g, "-").replace(/^-+|-+$/g, "");
 }
+function y(t, e) {
+  if (!(!t || !(e != null && e.id)))
+    return e.getRootNode() === t ? e.id : void 0;
+}
 export {
   m as JSONAttributeParser,
-  g as getScrollParent,
+  d as getScrollParent,
   S as getValidityStateObject,
+  y as idInScope,
   w as kebabCase,
   u as normalizeStringProperty,
   h as scrollIntoContainer,
-  p as setFromParentSize,
+  g as setFromParentSize,
   b as stringPropertyConverter
 };
 //# sourceMappingURL=utils.js.map

package/dist/common/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/common/utils.ts"],"sourcesContent":["export const isReducedMotion = window.matchMedia(\n  '(prefers-reduced-motion: reduce)',\n).matches\n\nexport function isMobileView() {\n  const mobileBreakpoint = getComputedStyle(document.documentElement)\n    .getPropertyValue('--dds-breakpoints-small')\n    .trim()\n\n  const isMobileView = window.matchMedia(\n    `(max-width: ${mobileBreakpoint})`,\n  ).matches\n\n  return isMobileView\n}\n\nexport function setFromParentSize(element: HTMLElement) {\n  const size = element.closest('dap-ds-card')?.getAttribute('size')\n  element.setAttribute('size', size ?? 'sm')\n}\n\nexport function numberRange(start: number, end: number): number[] {\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i)\n}\n\nexport const JSONAttributeParser = (value: string | null) => {\n  let convertedValue = {}\n  try {\n    convertedValue = JSON.parse(value ?? '')\n  } catch (error) {\n    console.error('Incorrect Json string data', {\n      data: value,\n    })\n  }\n\n  return convertedValue\n}\n\n/**\n * Normalizes a string value that might be null, undefined, or the string \"null\"/\"undefined\".\n * This is useful for handling values from React/Next.js object spreads where null props\n * can be serialized as the string \"null\".\n *\n * @param value - The value to normalize\n * @returns An empty string if the value is null, undefined, or the string \"null\"/\"undefined\", otherwise the value\n *\n * @example\n * ```typescript\n * protected updated(changedProperties: Map<PropertyKey, unknown>): void {\n *   super.updated(changedProperties)\n *   if (changedProperties.has('title')) {\n *     this.title = normalizeStringProperty(this.title)\n *   }\n * }\n * ```\n */\nexport function normalizeStringProperty(\n  value: string | null | undefined,\n): string {\n  if (\n    value === null ||\n    value === undefined ||\n    value === 'null' ||\n    value === 'undefined'\n  ) {\n    return ''\n  }\n  return value\n}\n\n/**\n * Lit property converter that handles null/undefined values from React/Next.js object spreads.\n *\n * When React serializes null props (e.g., from object spreads like {...props} where props.title = null),\n * it can become the string \"null\" in HTML attributes. This converter normalizes these cases.\n *\n * @example\n * ```typescript\n * @property({\n *   converter: stringPropertyConverter\n * })\n * title: string\n * ```\n *\n * This prevents the string \"null\" from appearing in the rendered output when:\n * - Props come from object spreads with null values\n * - React/Next.js serializes null as the string \"null\"\n * - Properties are set directly (bypassing attribute conversion)\n *\n * Note: For direct property assignments (e.g., `element.title = null`), also use\n * `normalizeStringProperty` in the `updated` lifecycle method.\n */\nexport const stringPropertyConverter = {\n  fromAttribute: (value: string | null): string => {\n    return normalizeStringProperty(value)\n  },\n  toAttribute: (value: string | null | undefined): string | null => {\n    // Prevent reflecting null/undefined/empty values back to attributes\n    // This avoids setting title=\"null\" or title=\"\" in the DOM\n    if (!value || value === 'null' || value === 'undefined') {\n      return null // null removes the attribute\n    }\n    return value\n  },\n}\n\n/**\n * Finds the nearest scrollable ancestor of an element, crossing shadow DOM and\n * slot boundaries. Returns null if none is found before the document root.\n */\nexport function getScrollParent(element: Element): HTMLElement | null {\n  const getParent = (node: Node): Node | null => {\n    // Slotted content lives visually inside the slot, so continue up through it.\n    if (node instanceof Element && node.assignedSlot) {\n      return node.assignedSlot\n    }\n    const parent = node.parentNode\n    // Cross a shadow root boundary via its host element.\n    if (parent instanceof ShadowRoot) {\n      return parent.host\n    }\n    return parent\n  }\n\n  let current = getParent(element)\n  while (current instanceof HTMLElement) {\n    const { overflowY } = getComputedStyle(current)\n    if (\n      /(auto|scroll|overlay)/.test(overflowY) &&\n      current.scrollHeight > current.clientHeight\n    ) {\n      return current\n    }\n    current = getParent(current)\n  }\n  return null\n}\n\n/**\n * Reveals an element by scrolling only its nearest scrollable ancestor, without\n * bubbling the scroll to outer ancestors. Unlike `Element.scrollIntoView`, which\n * scrolls every scrollable ancestor up to the window, this keeps outer containers\n * (e.g. a modal body or the page) still. That matters for an option deep inside a\n * dropdown: revealing it must not scroll the trigger out of the viewport, which\n * would otherwise fire the popup's viewport auto-close and snap the dropdown shut.\n */\nexport function scrollIntoContainer(element: HTMLElement): void {\n  const container = getScrollParent(element)\n  if (!container) {\n    return\n  }\n\n  const containerRect = container.getBoundingClientRect()\n  const elementRect = element.getBoundingClientRect()\n\n  if (elementRect.top < containerRect.top) {\n    container.scrollTop -= containerRect.top - elementRect.top\n  } else if (elementRect.bottom > containerRect.bottom) {\n    container.scrollTop += elementRect.bottom - containerRect.bottom\n  }\n}\n\nexport function getValidityStateObject(state: Partial<ValidityState>) {\n  return {\n    badInput: false,\n    customError: false,\n    patternMismatch: false,\n    rangeOverflow: false,\n    rangeUnderflow: false,\n    stepMismatch: false,\n    tooLong: false,\n    tooShort: false,\n    typeMismatch: false,\n    valid: true,\n    valueMissing: false,\n    ...state,\n  }\n}\n\n/**\n * Converts a string to kebab-case.\n *\n * @param str - The string to convert\n * @returns The kebab-cased string\n */\nexport function kebabCase(str: string): string {\n  return str\n    .trim()\n    .toLowerCase()\n    .replace(/\\./g, '-') // Convert dots to dashes first\n    .replace(/\\s+/g, '-') // Convert spaces to dashes\n    .replace(/[^a-z0-9-]/g, '') // Remove non-alphanumeric except dashes\n    .replace(/--+/g, '-') // Collapse multiple dashes\n    .replace(/^-+|-+$/g, '') // Remove leading/trailing dashes\n}\n"],"names":["setFromParentSize","element","_a","size","JSONAttributeParser","value","convertedValue","error","normalizeStringProperty","stringPropertyConverter","getScrollParent","getParent","node","parent","current","overflowY","scrollIntoContainer","container","containerRect","elementRect","getValidityStateObject","state","__spreadValues","kebabCase","str"],"mappings":";;;;;;;;;;;AAA+B,OAAO;AAAA,EACpC;AACF,EAAE;AAcK,SAASA,EAAkBC,GAAsB;AAhBzB,MAAAC;AAiB7B,QAAMC,KAAOD,IAAAD,EAAQ,QAAQ,aAAa,MAA7B,gBAAAC,EAAgC,aAAa;AAClD,EAAAD,EAAA,aAAa,QAAQE,KAAA,OAAAA,IAAQ,IAAI;AAC3C;AAMa,MAAAC,IAAsB,CAACC,MAAyB;AAC3D,MAAIC,IAAiB,CAAC;AAClB,MAAA;AACe,IAAAA,IAAA,KAAK,MAAMD,KAAA,OAAAA,IAAS,EAAE;AAAA,WAChCE,GAAO;AACd,YAAQ,MAAM,8BAA8B;AAAA,MAC1C,MAAMF;AAAA,IAAA,CACP;AAAA,EAAA;AAGI,SAAAC;AACT;AAoBO,SAASE,EACdH,GACQ;AACR,SACEA,KAAU,QAEVA,MAAU,UACVA,MAAU,cAEH,KAEFA;AACT;AAwBO,MAAMI,IAA0B;AAAA,EACrC,eAAe,CAACJ,MACPG,EAAwBH,CAAK;AAAA,EAEtC,aAAa,CAACA,MAGR,CAACA,KAASA,MAAU,UAAUA,MAAU,cACnC,OAEFA;AAEX;AAMO,SAASK,EAAgBT,GAAsC;AAC9D,QAAAU,IAAY,CAACC,MAA4B;AAEzC,QAAAA,aAAgB,WAAWA,EAAK;AAClC,aAAOA,EAAK;AAEd,UAAMC,IAASD,EAAK;AAEpB,WAAIC,aAAkB,aACbA,EAAO,OAETA;AAAA,EACT;AAEI,MAAAC,IAAUH,EAAUV,CAAO;AAC/B,SAAOa,aAAmB,eAAa;AACrC,UAAM,EAAE,WAAAC,EAAA,IAAc,iBAAiBD,CAAO;AAC9C,QACE,wBAAwB,KAAKC,CAAS,KACtCD,EAAQ,eAAeA,EAAQ;AAExB,aAAAA;AAET,IAAAA,IAAUH,EAAUG,CAAO;AAAA,EAAA;AAEtB,SAAA;AACT;AAUO,SAASE,EAAoBf,GAA4B;AACxD,QAAAgB,IAAYP,EAAgBT,CAAO;AACzC,MAAI,CAACgB;AACH;AAGI,QAAAC,IAAgBD,EAAU,sBAAsB,GAChDE,IAAclB,EAAQ,sBAAsB;AAE9C,EAAAkB,EAAY,MAAMD,EAAc,MACxBD,EAAA,aAAaC,EAAc,MAAMC,EAAY,MAC9CA,EAAY,SAASD,EAAc,WAClCD,EAAA,aAAaE,EAAY,SAASD,EAAc;AAE9D;AAEO,SAASE,EAAuBC,GAA+B;AAC7D,SAAAC,EAAA;AAAA,IACL,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,OAAO;AAAA,IACP,cAAc;AAAA,KACXD;AAEP;AAQO,SAASE,EAAUC,GAAqB;AACtC,SAAAA,EACJ,KACA,EAAA,cACA,QAAQ,OAAO,GAAG,EAClB,QAAQ,QAAQ,GAAG,EACnB,QAAQ,eAAe,EAAE,EACzB,QAAQ,QAAQ,GAAG,EACnB,QAAQ,YAAY,EAAE;AAC3B;"}
+{"version":3,"file":"utils.js","sources":["../../src/common/utils.ts"],"sourcesContent":["export const isReducedMotion = window.matchMedia(\n  '(prefers-reduced-motion: reduce)',\n).matches\n\nexport function isMobileView() {\n  const mobileBreakpoint = getComputedStyle(document.documentElement)\n    .getPropertyValue('--dds-breakpoints-small')\n    .trim()\n\n  const isMobileView = window.matchMedia(\n    `(max-width: ${mobileBreakpoint})`,\n  ).matches\n\n  return isMobileView\n}\n\nexport function setFromParentSize(element: HTMLElement) {\n  const size = element.closest('dap-ds-card')?.getAttribute('size')\n  element.setAttribute('size', size ?? 'sm')\n}\n\nexport function numberRange(start: number, end: number): number[] {\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i)\n}\n\nexport const JSONAttributeParser = (value: string | null) => {\n  let convertedValue = {}\n  try {\n    convertedValue = JSON.parse(value ?? '')\n  } catch (error) {\n    console.error('Incorrect Json string data', {\n      data: value,\n    })\n  }\n\n  return convertedValue\n}\n\n/**\n * Normalizes a string value that might be null, undefined, or the string \"null\"/\"undefined\".\n * This is useful for handling values from React/Next.js object spreads where null props\n * can be serialized as the string \"null\".\n *\n * @param value - The value to normalize\n * @returns An empty string if the value is null, undefined, or the string \"null\"/\"undefined\", otherwise the value\n *\n * @example\n * ```typescript\n * protected updated(changedProperties: Map<PropertyKey, unknown>): void {\n *   super.updated(changedProperties)\n *   if (changedProperties.has('title')) {\n *     this.title = normalizeStringProperty(this.title)\n *   }\n * }\n * ```\n */\nexport function normalizeStringProperty(\n  value: string | null | undefined,\n): string {\n  if (\n    value === null ||\n    value === undefined ||\n    value === 'null' ||\n    value === 'undefined'\n  ) {\n    return ''\n  }\n  return value\n}\n\n/**\n * Lit property converter that handles null/undefined values from React/Next.js object spreads.\n *\n * When React serializes null props (e.g., from object spreads like {...props} where props.title = null),\n * it can become the string \"null\" in HTML attributes. This converter normalizes these cases.\n *\n * @example\n * ```typescript\n * @property({\n *   converter: stringPropertyConverter\n * })\n * title: string\n * ```\n *\n * This prevents the string \"null\" from appearing in the rendered output when:\n * - Props come from object spreads with null values\n * - React/Next.js serializes null as the string \"null\"\n * - Properties are set directly (bypassing attribute conversion)\n *\n * Note: For direct property assignments (e.g., `element.title = null`), also use\n * `normalizeStringProperty` in the `updated` lifecycle method.\n */\nexport const stringPropertyConverter = {\n  fromAttribute: (value: string | null): string => {\n    return normalizeStringProperty(value)\n  },\n  toAttribute: (value: string | null | undefined): string | null => {\n    // Prevent reflecting null/undefined/empty values back to attributes\n    // This avoids setting title=\"null\" or title=\"\" in the DOM\n    if (!value || value === 'null' || value === 'undefined') {\n      return null // null removes the attribute\n    }\n    return value\n  },\n}\n\n/**\n * Finds the nearest scrollable ancestor of an element, crossing shadow DOM and\n * slot boundaries. Returns null if none is found before the document root.\n */\nexport function getScrollParent(element: Element): HTMLElement | null {\n  const getParent = (node: Node): Node | null => {\n    // Slotted content lives visually inside the slot, so continue up through it.\n    if (node instanceof Element && node.assignedSlot) {\n      return node.assignedSlot\n    }\n    const parent = node.parentNode\n    // Cross a shadow root boundary via its host element.\n    if (parent instanceof ShadowRoot) {\n      return parent.host\n    }\n    return parent\n  }\n\n  let current = getParent(element)\n  while (current instanceof HTMLElement) {\n    const { overflowY } = getComputedStyle(current)\n    if (\n      /(auto|scroll|overlay)/.test(overflowY) &&\n      current.scrollHeight > current.clientHeight\n    ) {\n      return current\n    }\n    current = getParent(current)\n  }\n  return null\n}\n\n/**\n * Reveals an element by scrolling only its nearest scrollable ancestor, without\n * bubbling the scroll to outer ancestors. Unlike `Element.scrollIntoView`, which\n * scrolls every scrollable ancestor up to the window, this keeps outer containers\n * (e.g. a modal body or the page) still. That matters for an option deep inside a\n * dropdown: revealing it must not scroll the trigger out of the viewport, which\n * would otherwise fire the popup's viewport auto-close and snap the dropdown shut.\n */\nexport function scrollIntoContainer(element: HTMLElement): void {\n  const container = getScrollParent(element)\n  if (!container) {\n    return\n  }\n\n  const containerRect = container.getBoundingClientRect()\n  const elementRect = element.getBoundingClientRect()\n\n  if (elementRect.top < containerRect.top) {\n    container.scrollTop -= containerRect.top - elementRect.top\n  } else if (elementRect.bottom > containerRect.bottom) {\n    container.scrollTop += elementRect.bottom - containerRect.bottom\n  }\n}\n\nexport function getValidityStateObject(state: Partial<ValidityState>) {\n  return {\n    badInput: false,\n    customError: false,\n    patternMismatch: false,\n    rangeOverflow: false,\n    rangeUnderflow: false,\n    stepMismatch: false,\n    tooLong: false,\n    tooShort: false,\n    typeMismatch: false,\n    valid: true,\n    valueMissing: false,\n    ...state,\n  }\n}\n\n/**\n * Converts a string to kebab-case.\n *\n * @param str - The string to convert\n * @returns The kebab-cased string\n */\nexport function kebabCase(str: string): string {\n  return str\n    .trim()\n    .toLowerCase()\n    .replace(/\\./g, '-') // Convert dots to dashes first\n    .replace(/\\s+/g, '-') // Convert spaces to dashes\n    .replace(/[^a-z0-9-]/g, '') // Remove non-alphanumeric except dashes\n    .replace(/--+/g, '-') // Collapse multiple dashes\n    .replace(/^-+|-+$/g, '') // Remove leading/trailing dashes\n}\n\n/**\n * Returns `target.id` only when `target` lives in the given tree scope (document\n * or shadow root). IDREF attributes such as aria-activedescendant resolve only\n * within one scope, so a reference into another shadow root (e.g. an option the\n * option list renders inside its own shadow root) is dropped by every browser's\n * accessibility tree and reported by axe as aria-valid-attr-value.\n */\nexport function idInScope(\n  scope: Node | null | undefined,\n  target: Element | null | undefined,\n): string | undefined {\n  if (!scope || !target?.id) {\n    return undefined\n  }\n  return target.getRootNode() === scope ? target.id : undefined\n}\n"],"names":["setFromParentSize","element","_a","size","JSONAttributeParser","value","convertedValue","error","normalizeStringProperty","stringPropertyConverter","getScrollParent","getParent","node","parent","current","overflowY","scrollIntoContainer","container","containerRect","elementRect","getValidityStateObject","state","__spreadValues","kebabCase","str","idInScope","scope","target"],"mappings":";;;;;;;;;;;AAA+B,OAAO;AAAA,EACpC;AACF,EAAE;AAcK,SAASA,EAAkBC,GAAsB;AAhBzB,MAAAC;AAiB7B,QAAMC,KAAOD,IAAAD,EAAQ,QAAQ,aAAa,MAA7B,gBAAAC,EAAgC,aAAa;AAClD,EAAAD,EAAA,aAAa,QAAQE,KAAA,OAAAA,IAAQ,IAAI;AAC3C;AAMa,MAAAC,IAAsB,CAACC,MAAyB;AAC3D,MAAIC,IAAiB,CAAC;AAClB,MAAA;AACe,IAAAA,IAAA,KAAK,MAAMD,KAAA,OAAAA,IAAS,EAAE;AAAA,WAChCE,GAAO;AACd,YAAQ,MAAM,8BAA8B;AAAA,MAC1C,MAAMF;AAAA,IAAA,CACP;AAAA,EAAA;AAGI,SAAAC;AACT;AAoBO,SAASE,EACdH,GACQ;AACR,SACEA,KAAU,QAEVA,MAAU,UACVA,MAAU,cAEH,KAEFA;AACT;AAwBO,MAAMI,IAA0B;AAAA,EACrC,eAAe,CAACJ,MACPG,EAAwBH,CAAK;AAAA,EAEtC,aAAa,CAACA,MAGR,CAACA,KAASA,MAAU,UAAUA,MAAU,cACnC,OAEFA;AAEX;AAMO,SAASK,EAAgBT,GAAsC;AAC9D,QAAAU,IAAY,CAACC,MAA4B;AAEzC,QAAAA,aAAgB,WAAWA,EAAK;AAClC,aAAOA,EAAK;AAEd,UAAMC,IAASD,EAAK;AAEpB,WAAIC,aAAkB,aACbA,EAAO,OAETA;AAAA,EACT;AAEI,MAAAC,IAAUH,EAAUV,CAAO;AAC/B,SAAOa,aAAmB,eAAa;AACrC,UAAM,EAAE,WAAAC,EAAA,IAAc,iBAAiBD,CAAO;AAC9C,QACE,wBAAwB,KAAKC,CAAS,KACtCD,EAAQ,eAAeA,EAAQ;AAExB,aAAAA;AAET,IAAAA,IAAUH,EAAUG,CAAO;AAAA,EAAA;AAEtB,SAAA;AACT;AAUO,SAASE,EAAoBf,GAA4B;AACxD,QAAAgB,IAAYP,EAAgBT,CAAO;AACzC,MAAI,CAACgB;AACH;AAGI,QAAAC,IAAgBD,EAAU,sBAAsB,GAChDE,IAAclB,EAAQ,sBAAsB;AAE9C,EAAAkB,EAAY,MAAMD,EAAc,MACxBD,EAAA,aAAaC,EAAc,MAAMC,EAAY,MAC9CA,EAAY,SAASD,EAAc,WAClCD,EAAA,aAAaE,EAAY,SAASD,EAAc;AAE9D;AAEO,SAASE,EAAuBC,GAA+B;AAC7D,SAAAC,EAAA;AAAA,IACL,UAAU;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,OAAO;AAAA,IACP,cAAc;AAAA,KACXD;AAEP;AAQO,SAASE,EAAUC,GAAqB;AACtC,SAAAA,EACJ,KACA,EAAA,cACA,QAAQ,OAAO,GAAG,EAClB,QAAQ,QAAQ,GAAG,EACnB,QAAQ,eAAe,EAAE,EACzB,QAAQ,QAAQ,GAAG,EACnB,QAAQ,YAAY,EAAE;AAC3B;AASgB,SAAAC,EACdC,GACAC,GACoB;AACpB,MAAI,GAACD,KAAS,EAACC,KAAA,QAAAA,EAAQ;AAGvB,WAAOA,EAAO,YAAkB,MAAAD,IAAQC,EAAO,KAAK;AACtD;"}

package/dist/components/combobox/comboboxBase.d.ts

@@ -135,6 +135,14 @@ export default class ComboboxBaseElement extends GenericFormElement {
     reportValidity(): boolean;
     setValidity(): void;
     handleInvalid(event: Event): void;
+    /**
+     * Screen-reader status for the highlighted option while focus stays in the input.
+     * aria-activedescendant cannot reach options inside option-list's shadow root, so
+     * the highlight (e.g. the first match after typing) is announced through a polite
+     * live region instead. Once focus moves onto an option it is announced natively,
+     * so the status is cleared to avoid a double announcement.
+     */
+    get activeOptionStatus(): string;
     getActiveDescendant(): HTMLInputElement | import('../option-item/option-item.component').default | null | undefined;
     getSearchIconSize(size: string): "sm" | "md" | "lg";
     getInnerIconSize(size: string): 16 | 10;

package/dist/components/combobox/comboboxBase.js

@@ -1,6 +1,6 @@
-var w = Object.getPrototypeOf;
+var C = Object.getPrototypeOf;
 var S = Reflect.get;
-var x = (m, e, t) => S(w(m), t, e);
+var x = (m, e, t) => S(C(m), t, e);
 var h = (m, e, t) => new Promise((i, a) => {
   var n = (u) => {
     try {
@@ -19,25 +19,25 @@ var h = (m, e, t) => new Promise((i, a) => {
 });
 import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as I } from "../../node_modules/lit-html/lit-html.js";
+import { nothing as y } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
 import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as C } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { query as w } from "../../node_modules/@lit/reactive-element/decorators/query.js";
 import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
 import { html as d } from "../../node_modules/lit-html/static.js";
-import { getValidityStateObject as D } from "../../common/utils.js";
-import { GenericFormElement as V } from "../../internal/mixin/genericFormElement.js";
+import { getValidityStateObject as D, idInScope as O } from "../../common/utils.js";
+import { GenericFormElement as $ } from "../../internal/mixin/genericFormElement.js";
 import "../../localization/localization.js";
-import $ from "./combobox.scss.js";
-import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as O } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var T = Object.defineProperty, l = (m, e, t, i) => {
+import V from "./combobox.scss.js";
+import { t as f } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { unsafeCSS as T } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var A = Object.defineProperty, l = (m, e, t, i) => {
   for (var a = void 0, n = m.length - 1, o; n >= 0; n--)
     (o = m[n]) && (a = o(e, t, a) || a);
-  return a && T(e, t, a), a;
+  return a && A(e, t, a), a;
 };
-const f = class f extends V {
+const I = class I extends $ {
   constructor() {
     super(...arguments), this.placement = "bottom-start", this.opened = !1, this.searchMode = "autocomplete", this.search = !1, this.clearButton = "true", this.allowManualInput = !1, this.searchForText = !1, this.searchOnValueSet = "false", this.loading = !1, this.selectable = "true", this.noAnimation = !1, this.textComplete = !1, this.openOnEmpty = !1, this.disableViewportAutoClose = !1, this.multiselect = !1, this.clearButtonTestId = "combobox-clear-button", this.searchButtonTestId = "combobox-search-button", this.disableSearchWhenEmpty = !1, this.selectedItems = [], this.optionListObserver = null, this.isUserInteraction = !1, this.pendingInitialValues = [], this.handleClick = () => {
       !this.getComboboxOptions().length && !this.openOnEmpty ? this.hideDropDown() : this.opened ? this.hideDropDown() : this.showDropDown();
@@ -151,10 +151,10 @@ const f = class f extends V {
   firstUpdated(e) {
     return h(this, null, function* () {
       var a;
-      x(f.prototype, this, "firstUpdated").call(this, e), yield this.optionList.updateComplete, yield new Promise((n) => requestAnimationFrame(n));
+      x(I.prototype, this, "firstUpdated").call(this, e), yield this.optionList.updateComplete, yield new Promise((n) => requestAnimationFrame(n));
       const t = this.getComboboxOptions();
       yield Promise.all(t.map((n) => n.updateComplete));
-      const i = x(f.prototype, this, "value");
+      const i = x(I.prototype, this, "value");
       if (i)
         if (this.multiselect) {
           const n = i.split(",").map((o) => o.trim()).filter((o) => o);
@@ -288,12 +288,12 @@ const f = class f extends V {
         value: this.selectedItem.value,
         selectedItem: this.selectedItem,
         type: "select"
-      }), yield this.updateComplete, this.value = this.selectedItem.value, this.selectedText = this.currentItem.text, this.triggerInput.value = this.currentItem.text, this.triggerInput.focus(), this.setValidity();
+      }), yield this.updateComplete, this.value = this.selectedItem.value, this.selectedText = this.currentItem.text, this.triggerInput.value = this.currentItem.text, this.triggerInput.focus(), this.setValidity(), this.multiselect || (yield this.hideDropDown());
     });
   }
   handleTextSearch(e) {
     return h(this, null, function* () {
-      this.value = e, this.selectedText = e, this.triggerInput.value = e, this.triggerInput.focus(), this.emit("dds-search", { search: e }), this.setValidity();
+      this.value = e, this.selectedText = e, this.triggerInput.value = e, this.triggerInput.focus(), this.emit("dds-search", { search: e }), this.setValidity(), yield this.hideDropDown();
     });
   }
   handleArrowKeys(e) {
@@ -430,7 +430,7 @@ const f = class f extends V {
     });
   }
   get validationMessage() {
-    return y("form.validationMessage.select");
+    return f("form.validationMessage.select");
   }
   checkValidity() {
     return this.required ? this.getValidity() : !0;
@@ -450,6 +450,26 @@ const f = class f extends V {
   handleInvalid(e) {
     e.preventDefault();
   }
+  /**
+   * Screen-reader status for the highlighted option while focus stays in the input.
+   * aria-activedescendant cannot reach options inside option-list's shadow root, so
+   * the highlight (e.g. the first match after typing) is announced through a polite
+   * live region instead. Once focus moves onto an option it is announced natively,
+   * so the status is cleared to avoid a double announcement.
+   */
+  get activeOptionStatus() {
+    var i, a, n;
+    if (!this.opened || !this.currentItem || ((i = this.shadowRoot) == null ? void 0 : i.activeElement) !== this.triggerInput)
+      return "";
+    const e = (n = (a = this.optionList) == null ? void 0 : a.getAllAvailabeOptions()) != null ? n : [], t = e.findIndex(
+      (o) => o.value === this.currentItem.value
+    );
+    return t < 0 ? "" : f("combobox.activeOption", {
+      option: this.currentItem.text,
+      position: t + 1,
+      count: e.length
+    });
+  }
   getActiveDescendant() {
     var t;
     return this.opened ? (t = this.optionList) == null ? void 0 : t.getActiveOption() : this.triggerInput;
@@ -491,14 +511,14 @@ const f = class f extends V {
     `;
   }
   renderChips() {
-    return !this.multiselect || this.selectedItems.length === 0 ? I : d`
+    return !this.multiselect || this.selectedItems.length === 0 ? y : d`
       <div class="combobox__chips" part="chips">
         ${this.selectedItems.map((e) => this.renderChip(e))}
       </div>
     `;
   }
   renderInput() {
-    var t, i;
+    var t;
     const e = this.multiselect ? this.selectedText : this.selectedText !== "" ? this.selectedText : this.selectedItemText;
     return d`<input
       id="input"
@@ -509,22 +529,25 @@ const f = class f extends V {
       "input--readonly": this.readonly,
       "input--multiselect": this.multiselect
     })}"
-      aria-expanded=${this.opened}
+      aria-expanded=${this.opened ? "true" : "false"}
       aria-haspopup="listbox"
       aria-labelledby="label"
       aria-describedby="description ${this.feedback ? "feedback" : ""}"
       aria-disabled=${this.disabled}
       aria-autocomplete="both"
       aria-controls="option-list"
-      aria-activedescendant=${p((t = this.getActiveDescendant()) == null ? void 0 : t.id)}
-      aria-multiselectable=${this.multiselect ? "true" : "false"}
+      aria-activedescendant=${p(
+      // Options render in option-list's shadow root, out of this scope; a
+      // cross-scope IDREF is ignored by browsers, so only same-scope ids are set
+      O(this.shadowRoot, this.getActiveDescendant())
+    )}
       ?required=${this.required}
       ?readonly=${this.readonly}
       ?autofocus=${this.autofocus}
       autocomplete=${this.autocomplete}
       ?disabled=${this.disabled}
       value=${e}
-      placeholder=${p((i = this.placeholder) != null ? i : "")}
+      placeholder=${p((t = this.placeholder) != null ? t : "")}
       type=${this.search ? "search" : "text"}
       @blur=${this.handleBlur}
       @focus=${this.handleFocus}
@@ -533,14 +556,14 @@ const f = class f extends V {
       @click=${this.handleClick} />`;
   }
   renderClearButton() {
-    return this.clearButton !== "true" || this.readonly ? I : d`<div
+    return this.clearButton !== "true" || this.readonly ? y : d`<div
       class="${g("clear-icon", {
       "clear-icon--hidden": this.shouldHideClearIcon
     })}">
       <dap-ds-icon-button
         icon="close-line"
         data-testid=${this.clearButtonTestId}
-        aria-label=${y("clear")}
+        aria-label=${f("clear")}
         ?disabled=${this.disabled}
         @click=${this.handleClearClick}></dap-ds-icon-button>
     </div>`;
@@ -571,10 +594,10 @@ const f = class f extends V {
           ?disabled=${this.disableSearchWhenEmpty && !this.hasSearchText}
           data-testid=${this.searchButtonTestId}
           iconSize=${this.getInnerIconSize(this.size)}
-          aria-label=${(i = this.searchButtonAriaLabel) != null ? i : y("search")}
+          aria-label=${(i = this.searchButtonAriaLabel) != null ? i : f("search")}
           @click=${this.handleSearchClick}>
         </dap-ds-icon-button>`}
-      </div>` : I;
+      </div>` : y;
   }
   renderSelectActions() {
     return d`<div
@@ -599,6 +622,7 @@ const f = class f extends V {
       size=${p(this.size)}
       value=${p(this.value)}
       selectable=${p(this.selectable)}
+      ?multiselectable=${this.multiselect}
       @dds-option-change=${this.handleSelectedChange}
       @dds-option-deselect=${this.handleOptionDeselect}
       @dds-keydown=${this.handleListKeyDown}
@@ -642,15 +666,22 @@ const f = class f extends V {
           </div>
           ${this.renderOptionList()}
         </dap-ds-popup>
+        <div
+          class="sr-only active-option-status"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true">
+          ${this.activeOptionStatus}
+        </div>
         ${this.multiselect ? d`<div
               class="sr-only"
               role="status"
               aria-live="polite"
               aria-atomic="true">
-              ${this.selectedItems.length > 0 ? y("combobox.multiselect.selected", {
+              ${this.selectedItems.length > 0 ? f("combobox.multiselect.selected", {
       count: this.selectedItems.length
     }) : ""}
-            </div>` : I}
+            </div>` : y}
         ${this.feedback && d`<dap-ds-feedback
           part="feedback"
           feedbackType=${p(this.feedbackType)}
@@ -661,13 +692,13 @@ const f = class f extends V {
       </div>`;
   }
 };
-f.styles = O($);
-let s = f;
+I.styles = T(V);
+let s = I;
 l([
-  C("input")
+  w("input")
 ], s.prototype, "triggerInput");
 l([
-  C("dap-ds-option-list")
+  w("dap-ds-option-list")
 ], s.prototype, "optionList");
 l([
   r({ reflect: !0 })