dap-design-system 0.62.4 → 1.0.0-beta.1

package/README.md

@@ -22,8 +22,12 @@ pnpm add dap-design-system
 
 CDN
 
+The design system now ships with Lit as an external (peer) module rather than
+bundling its own copy. When loading directly in the browser from a CDN, use
+jsDelivr's `/+esm` endpoint so the bare `lit` imports are resolved automatically:
+
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/dap-design-system" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/dap-design-system/+esm"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dap-design-system/dist/light.theme.css" />
 ```
 

package/dist/common/utils.js

@@ -1,65 +1,65 @@
-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]);
+var a = Object.defineProperty;
+var c = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var s = (t, e, n) => e in t ? a(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, l = (t, e) => {
+  for (var n in e || (e = {}))
+    f.call(e, n) && s(t, n, e[n]);
+  if (c)
+    for (var n of c(e))
+      u.call(e, n) && s(t, n, e[n]);
   return t;
 };
-window.matchMedia(
-  "(prefers-reduced-motion: reduce)"
-).matches;
-function g(t) {
-  var r;
-  const e = (r = t.closest("dap-ds-card")) == null ? void 0 : r.getAttribute("size");
+typeof window != "undefined" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function m(t) {
+  var n;
+  if (typeof t.closest != "function")
+    return;
+  const e = (n = t.closest("dap-ds-card")) == null ? void 0 : n.getAttribute("size");
   t.setAttribute("size", e != null ? e : "sm");
 }
-const m = (t) => {
+const h = (t) => {
   let e = {};
   try {
     e = JSON.parse(t != null ? t : "");
-  } catch (r) {
+  } catch (n) {
     console.error("Incorrect Json string data", {
       data: t
     });
   }
   return e;
 };
-function u(t) {
+function d(t) {
   return t == null || t === "null" || t === "undefined" ? "" : t;
 }
 const b = {
-  fromAttribute: (t) => u(t),
+  fromAttribute: (t) => d(t),
   toAttribute: (t) => !t || t === "null" || t === "undefined" ? null : t
 };
-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;
+function p(t) {
+  const e = (o) => {
+    if (o instanceof Element && o.assignedSlot)
+      return o.assignedSlot;
+    const r = o.parentNode;
+    return r instanceof ShadowRoot ? r.host : r;
   };
-  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);
+  let n = e(t);
+  for (; n instanceof HTMLElement; ) {
+    const { overflowY: o } = getComputedStyle(n);
+    if (/(auto|scroll|overlay)/.test(o) && n.scrollHeight > n.clientHeight)
+      return n;
+    n = e(n);
   }
   return null;
 }
-function h(t) {
-  const e = d(t);
+function w(t) {
+  const e = p(t);
   if (!e)
     return;
-  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);
+  const o = e.getBoundingClientRect().top + e.clientTop, r = o + e.clientHeight, i = t.getBoundingClientRect();
+  i.top < o ? e.scrollTop -= o - i.top : i.bottom > r && (e.scrollTop += i.bottom - r);
 }
 function S(t) {
-  return c({
+  return l({
     badInput: !1,
     customError: !1,
     patternMismatch: !1,
@@ -73,22 +73,22 @@ function S(t) {
     valueMissing: !1
   }, 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) {
+  return t ? t.trim().toLowerCase().replace(/\./g, "-").replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/--+/g, "-").replace(/^-+|-+$/g, "") : "";
 }
-function y(t, e) {
+function C(t, e) {
   if (!(!t || !(e != null && e.id)))
     return e.getRootNode() === t ? e.id : void 0;
 }
 export {
-  m as JSONAttributeParser,
-  d as getScrollParent,
+  h as JSONAttributeParser,
+  p as getScrollParent,
   S as getValidityStateObject,
-  y as idInScope,
-  w as kebabCase,
-  u as normalizeStringProperty,
-  h as scrollIntoContainer,
-  g as setFromParentSize,
+  C as idInScope,
+  y as kebabCase,
+  d as normalizeStringProperty,
+  w as scrollIntoContainer,
+  m 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\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;"}
+{"version":3,"file":"utils.js","sources":["../../src/common/utils.ts"],"sourcesContent":["// Guarded so importing this module does not touch `window` during SSR (Node).\n// In the browser the value is identical to before; on the server it is `false`\n// (no motion preference assumed).\nexport const isReducedMotion =\n  typeof window !== 'undefined' &&\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia('(prefers-reduced-motion: reduce)').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  // `closest` is unavailable in the Lit SSR DOM shim; skip on the server (the\n  // parent <dap-ds-card> is resolved on the client after hydration).\n  if (typeof element.closest !== 'function') {\n    return\n  }\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  // Compare against the visible content box (inside the borders), not the\n  // border box, or an item at the edge stays clipped by the border width.\n  const containerRect = container.getBoundingClientRect()\n  const visibleTop = containerRect.top + container.clientTop\n  const visibleBottom = visibleTop + container.clientHeight\n  const elementRect = element.getBoundingClientRect()\n\n  if (elementRect.top < visibleTop) {\n    container.scrollTop -= visibleTop - elementRect.top\n  } else if (elementRect.bottom > visibleBottom) {\n    container.scrollTop += elementRect.bottom - visibleBottom\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  if (!str) {\n    return ''\n  }\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","visibleTop","visibleBottom","elementRect","getValidityStateObject","state","__spreadValues","kebabCase","str","idInScope","scope","target"],"mappings":";;;;;;;;;;;AAIE,OAAO,UAAW,eAClB,OAAO,OAAO,cAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE;AAcjD,SAASA,EAAkBC,GAAsB;AAhBtD,MAAAC;AAmBI,MAAA,OAAOD,EAAQ,WAAY;AAC7B;AAEF,QAAME,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;AAMI,QAAAC,IADgBD,EAAU,sBAAsB,EACrB,MAAMA,EAAU,WAC3CE,IAAgBD,IAAaD,EAAU,cACvCG,IAAcnB,EAAQ,sBAAsB;AAE9C,EAAAmB,EAAY,MAAMF,IACVD,EAAA,aAAaC,IAAaE,EAAY,MACvCA,EAAY,SAASD,MACpBF,EAAA,aAAaG,EAAY,SAASD;AAEhD;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;AAC7C,SAAKA,IAGEA,EACJ,KACA,EAAA,cACA,QAAQ,OAAO,GAAG,EAClB,QAAQ,QAAQ,GAAG,EACnB,QAAQ,eAAe,EAAE,EACzB,QAAQ,QAAQ,GAAG,EACnB,QAAQ,YAAY,EAAE,IAThB;AAUX;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/accordion/accordion-base-element.js

@@ -1,28 +1,24 @@
 import { clsx as v } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { query as f } 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 s, unsafeStatic as u } from "../../node_modules/lit-html/static.js";
+import { unsafeCSS as b } from "lit";
+import { query as f, property as a } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { html as s, unsafeStatic as g } from "lit/static-html.js";
 import { DdsElement as m } from "../../internal/dds-hu-element.js";
-import { SizedMixin as b } from "../../internal/mixin/sizedMixin.js";
+import { SizedMixin as y } from "../../internal/mixin/sizedMixin.js";
 import "../../localization/localization.js";
-import y from "./accordion.scss.js";
-import { unsafeCSS as $ } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import $ from "./accordion.scss.js";
 import { t as _ } from "../../node_modules/i18next/dist/esm/i18next.js";
 var L = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (h, e, t, d) => {
   for (var r = d > 1 ? void 0 : d ? I(e, t) : e, c = h.length - 1, l; c >= 0; c--)
     (l = h[c]) && (r = (d ? l(e, t, r) : l(r)) || r);
   return d && r && L(e, t, r), r;
 };
-const g = [
+const u = [
   "default",
   "collapsed",
   "clean",
   "clean-collapsed"
-], S = b(m);
+], S = y(m);
 var o;
 const i = (o = class extends S {
   constructor() {
@@ -83,7 +79,7 @@ const i = (o = class extends S {
   }
   set variant(e) {
     const t = this._variant;
-    g.includes(e) ? this._variant = e : (console.warn(`Invalid accordion variant: ${e}. Using default.`), this._variant = "default"), this.requestUpdate("variant", t);
+    u.includes(e) ? this._variant = e : (console.warn(`Invalid accordion variant: ${e}. Using default.`), this._variant = "default"), this.requestUpdate("variant", t);
   }
   /**
    * Renders the heading content. Override in subclasses to customize heading rendering.
@@ -100,7 +96,7 @@ const i = (o = class extends S {
     return s`<div></div>`;
   }
   validateProperties() {
-    (this.headingLevel < 1 || this.headingLevel > 6) && console.warn("headingLevel must be between 1 and 6"), g.includes(this.variant) || console.warn(`Invalid accordion variant: ${this.variant}. Using default.`);
+    (this.headingLevel < 1 || this.headingLevel > 6) && console.warn("headingLevel must be between 1 and 6"), u.includes(this.variant) || console.warn(`Invalid accordion variant: ${this.variant}. Using default.`);
   }
   firstUpdated(e) {
     super.firstUpdated(e), this.validateProperties();
@@ -204,10 +200,10 @@ const i = (o = class extends S {
   renderHeading() {
     return s`
     <div class="accordion__heading" part="heading">
-      <${u(`h${this.headingLevel}`)}
+      <${g(`h${this.headingLevel}`)}
        class="accordion__heading-content">
         ${this.renderButtons()}
-      </${u(`h${this.headingLevel}`)}>
+      </${g(`h${this.headingLevel}`)}>
   </div>
     `;
   }
@@ -222,7 +218,7 @@ const i = (o = class extends S {
       </div>
     `;
   }
-}, o.styles = $(y), o.nextId = 0, o);
+}, o.styles = b($), o.nextId = 0, o);
 n([
   f('[part="button"]')
 ], i.prototype, "button", 2);
@@ -256,8 +252,8 @@ n([
 n([
   a({ type: Boolean })
 ], i.prototype, "lastItem", 2);
-let N = i;
+let P = i;
 export {
-  N as AccordionBaseElement
+  P as AccordionBaseElement
 };
 //# sourceMappingURL=accordion-base-element.js.map

package/dist/components/accordion/accordion-base-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-base-element.js","sources":["../../../src/components/accordion/accordion-base-element.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { PropertyValueMap, TemplateResult, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport type { AccordionVariant } from '@/common/types'\nimport { HeadingLevel, LabelPlacement } from '@/dap-design-system'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\nimport { t } from '@/localization/localization'\n\nimport type { IconSize } from '../icon/icon.component'\nimport styles from './accordion.scss?inline'\n\nexport interface AccordionEventDetail {\n  open: boolean\n  item: AccordionBaseElement\n}\n\nexport type AccordionOpenedEvent = CustomEvent<AccordionEventDetail>\nexport type AccordionClosedEvent = CustomEvent<AccordionEventDetail>\n\nconst ACCORDION_VARIANTS = [\n  'default',\n  'collapsed',\n  'clean',\n  'clean-collapsed',\n] as const\n\nconst AccordionBaseWithSized = SizedMixin(DdsElement)\n\nexport class AccordionBaseElement extends AccordionBaseWithSized {\n  static readonly styles = unsafeCSS(styles)\n  private static nextId = 0\n\n  private readonly accordionId: string\n  private readonly buttonId: string\n  private readonly contentId: string\n\n  private _headingLevel: HeadingLevel = 4\n  private _variant: AccordionVariant = 'default'\n\n  /** Query for the accordion button element */\n  @query('[part=\"button\"]')\n  protected button?: HTMLButtonElement\n\n  /**\n   * The element that actually takes focus -- the toggle button inside the shadow root.\n   *\n   * Without this, `accordionElement.focus()` silently does nothing: the host has no\n   * tabindex and does not delegate focus, so a caller trying to move focus to an\n   * accordion header (after committing an inline edit, say) drops focus to <body>.\n   * Mirrors the `focusElement` contract that FocusableMixin defines and that\n   * dap-ds-modal's focus trap already looks for.\n   */\n  get focusElement(): HTMLElement {\n    return this.button ?? this\n  }\n\n  override focus(options?: FocusOptions): void {\n    const target = this.focusElement\n    if (target === this) {\n      HTMLElement.prototype.focus.call(this, options)\n      return\n    }\n    target.focus(options)\n  }\n\n  override blur(): void {\n    const target = this.focusElement\n    if (target === this) {\n      HTMLElement.prototype.blur.call(this)\n      return\n    }\n    target.blur()\n  }\n\n  /** Query for the accordion content element */\n  @query('[part=\"content\"]')\n  protected content?: HTMLDivElement\n\n  /** Display size for accordion styling (sm or lg); other effective sizes map to sm. */\n  private get accordionDisplaySize(): 'sm' | 'lg' {\n    return this.effectiveSize === 'lg' ? 'lg' : 'sm'\n  }\n\n  /** The heading level of the accordion\n   * @type { 1 | 2 | 3 | 4 | 5 | 6 }\n   */\n  @property({ type: Number })\n  get headingLevel(): HeadingLevel {\n    return this._headingLevel\n  }\n  set headingLevel(value: HeadingLevel) {\n    const oldValue = this._headingLevel\n    if (value < 1 || value > 6) {\n      console.warn('headingLevel must be between 1 and 6, using default of 4')\n      this._headingLevel = 4\n    } else {\n      this._headingLevel = value\n    }\n    this.requestUpdate('headingLevel', oldValue)\n  }\n\n  /** Whether the accordion is opened */\n  @property({ type: Boolean, reflect: true }) opened = false\n\n  /** Whether the accordion is disabled */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** Whether the accordion is in loading state */\n  @property({ type: Boolean, reflect: true }) loading = false\n\n  /** The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided */\n  @property({ type: String }) heading?: string\n\n  /** The loading aria label of the accordion */\n  @property({ type: String }) loadingAriaLabel?: string\n\n  /** The location of the icon\n   * @type { 'left' | 'right' }\n   */\n  @property({ type: String }) iconLocation: LabelPlacement = 'right'\n\n  /** The variant of the accordion\n   * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }\n   */\n  @property({ type: String })\n  get variant(): AccordionVariant {\n    return this._variant\n  }\n  set variant(value: AccordionVariant) {\n    const oldValue = this._variant\n    if (!ACCORDION_VARIANTS.includes(value as any)) {\n      console.warn(`Invalid accordion variant: ${value}. Using default.`)\n      this._variant = 'default'\n    } else {\n      this._variant = value\n    }\n    this.requestUpdate('variant', oldValue)\n  }\n\n  /** Whether this is the last item in an accordion group */\n  @property({ type: Boolean }) lastItem = false\n\n  constructor() {\n    super()\n    AccordionBaseElement.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.accordionId = `accordion-${AccordionBaseElement.nextId}-${uniqueSuffix}`\n    this.buttonId = `${this.accordionId}-button`\n    this.contentId = `${this.accordionId}-content`\n  }\n\n  /**\n   * Renders the heading content. Override in subclasses to customize heading rendering.\n   * @returns Template result for heading content\n   */\n  protected headingRender() {\n    return html`<div>${this.heading}</div>`\n  }\n\n  /**\n   * Renders additional content. Override in subclasses to add custom content.\n   * @returns Template result for additional content\n   */\n  protected contentRender() {\n    return html`<div></div>`\n  }\n\n  validateProperties(): void {\n    if (this.headingLevel < 1 || this.headingLevel > 6) {\n      console.warn('headingLevel must be between 1 and 6')\n    }\n\n    if (!ACCORDION_VARIANTS.includes(this.variant as any)) {\n      console.warn(`Invalid accordion variant: ${this.variant}. Using default.`)\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    this.validateProperties()\n  }\n\n  private onChange(): void {\n    const eventName = this.opened ? 'dds-opened' : 'dds-closed'\n    const detail: AccordionEventDetail = {\n      open: this.opened,\n      item: this,\n    }\n\n    this.emit(eventName, detail)\n  }\n\n  private toggle(): void {\n    if (this.disabled || this.loading) {\n      return\n    }\n\n    this.opened = !this.opened\n    this.onChange()\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled || this.loading) {\n      return\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      this.toggle()\n    }\n  }\n\n  private handleClick = (event: Event): void => {\n    if (this.disabled || this.loading) {\n      event.preventDefault()\n      return\n    }\n\n    this.toggle()\n  }\n\n  private get accordionClasses() {\n    return clsx('accordion', {\n      'accordion--opened': this.opened,\n      'accordion--disabled': this.disabled,\n      'accordion--loading': this.loading,\n      'accordion--sm': this.accordionDisplaySize === 'sm',\n      'accordion--lg': this.accordionDisplaySize === 'lg',\n      'accordion--icon-left': this.iconLocation === 'left',\n      'accordion--icon-right': this.iconLocation === 'right',\n      [`accordion--${this.variant}`]: this.variant,\n      'accordion--last-item': this.lastItem,\n    })\n  }\n\n  private renderIconOrSpinner() {\n    if (this.loading) {\n      return html`\n        <span\n          class=\"accordion__loading\"\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label=\"${this.loadingAriaLabel ?? t('loading')}\">\n          <dap-ds-icon-loading-spinner size=\"16\"></dap-ds-icon-loading-spinner>\n        </span>\n      `\n    }\n\n    return html`\n      <span\n        class=\"accordion__icon-wrapper\"\n        aria-hidden=\"true\"\n        part=\"icon-wrapper\">\n        <slot name=\"icon-opened\" class=\"accordion__icon-opened\">\n          <dap-ds-icon\n            exportparts=\"icon:open-icon, base:open-icon-base\"\n            size=${(this.effectiveSize === 'xxs'\n              ? 'xs'\n              : this.effectiveSize) as IconSize}\n            name=\"arrow-up-s-line\"\n            class=\"open-icon\">\n          </dap-ds-icon>\n        </slot>\n        <slot name=\"icon-closed\" class=\"accordion__icon-closed\">\n          <dap-ds-icon\n            exportparts=\"icon:close-icon, base:close-icon-base\"\n            size=${(this.effectiveSize === 'xxs'\n              ? 'xs'\n              : this.effectiveSize) as IconSize}\n            name=\"arrow-down-s-line\"\n            class=\"close-icon\">\n          </dap-ds-icon>\n        </slot>\n      </span>\n    `\n  }\n\n  private renderButtons() {\n    return html`\n      <button\n        class=\"accordion__button\"\n        type=\"button\"\n        part=\"button\"\n        id=\"${this.buttonId}\"\n        aria-controls=\"${this.contentId}\"\n        aria-expanded=\"${this.opened}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-label=${ifDefined(this.ariaLabel ?? this.heading)}\n        aria-describedby=${ifDefined(this.ariaDescribedBy ?? undefined)}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}>\n        ${this.renderIconOrSpinner()}\n        <span part=\"heading-text\" class=\"accordion__heading-text\">\n          <slot name=\"heading\"> ${this.headingRender()} </slot>\n        </span>\n      </button>\n    `\n  }\n\n  private renderContent() {\n    return html`\n      <div\n        part=\"content\"\n        class=\"accordion__content\"\n        id=\"${this.contentId}\"\n        aria-labelledby=\"${this.buttonId}\"\n        role=\"region\"\n        aria-hidden=\"${!this.opened}\">\n        <div part=\"content-container\" class=\"accordion-content__container\">\n          <slot></slot>\n          ${this.contentRender()}\n        </div>\n      </div>\n    `\n  }\n\n  private renderHeading(): TemplateResult {\n    return html`\n    <div class=\"accordion__heading\" part=\"heading\">\n      <${unsafeStatic(`h${this.headingLevel}`)}\n       class=\"accordion__heading-content\">\n        ${this.renderButtons()}\n      </${unsafeStatic(`h${this.headingLevel}`)}>\n  </div>\n    `\n  }\n\n  /**\n   * Renders the complete accordion component. Override in subclasses to customize the entire accordion structure.\n   * @returns Template result for the complete accordion\n   */\n  renderAccordion() {\n    return html`\n      <div part=\"base\" class=${this.accordionClasses}>\n        ${this.renderHeading()} ${this.renderContent()}\n      </div>\n    `\n  }\n}\n"],"names":["ACCORDION_VARIANTS","AccordionBaseWithSized","SizedMixin","DdsElement","_AccordionBaseElement","_a","event","uniqueSuffix","options","target","value","oldValue","html","_changedProperties","eventName","detail","clsx","t","ifDefined","_b","unsafeStatic","unsafeCSS","styles","__decorateClass","query","property","AccordionBaseElement"],"mappings":"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"}
+{"version":3,"file":"accordion-base-element.js","sources":["../../../src/components/accordion/accordion-base-element.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { PropertyValueMap, TemplateResult, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport type { AccordionVariant } from '@/common/types'\nimport { HeadingLevel, LabelPlacement } from '@/dap-design-system'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\nimport { t } from '@/localization/localization'\n\nimport type { IconSize } from '../icon/icon.component'\nimport styles from './accordion.scss?inline'\n\nexport interface AccordionEventDetail {\n  open: boolean\n  item: AccordionBaseElement\n}\n\nexport type AccordionOpenedEvent = CustomEvent<AccordionEventDetail>\nexport type AccordionClosedEvent = CustomEvent<AccordionEventDetail>\n\nconst ACCORDION_VARIANTS = [\n  'default',\n  'collapsed',\n  'clean',\n  'clean-collapsed',\n] as const\n\nconst AccordionBaseWithSized = SizedMixin(DdsElement)\n\nexport class AccordionBaseElement extends AccordionBaseWithSized {\n  static readonly styles = unsafeCSS(styles)\n  private static nextId = 0\n\n  private readonly accordionId: string\n  private readonly buttonId: string\n  private readonly contentId: string\n\n  private _headingLevel: HeadingLevel = 4\n  private _variant: AccordionVariant = 'default'\n\n  /** Query for the accordion button element */\n  @query('[part=\"button\"]')\n  protected button?: HTMLButtonElement\n\n  /**\n   * The element that actually takes focus -- the toggle button inside the shadow root.\n   *\n   * Without this, `accordionElement.focus()` silently does nothing: the host has no\n   * tabindex and does not delegate focus, so a caller trying to move focus to an\n   * accordion header (after committing an inline edit, say) drops focus to <body>.\n   * Mirrors the `focusElement` contract that FocusableMixin defines and that\n   * dap-ds-modal's focus trap already looks for.\n   */\n  get focusElement(): HTMLElement {\n    return this.button ?? this\n  }\n\n  override focus(options?: FocusOptions): void {\n    const target = this.focusElement\n    if (target === this) {\n      HTMLElement.prototype.focus.call(this, options)\n      return\n    }\n    target.focus(options)\n  }\n\n  override blur(): void {\n    const target = this.focusElement\n    if (target === this) {\n      HTMLElement.prototype.blur.call(this)\n      return\n    }\n    target.blur()\n  }\n\n  /** Query for the accordion content element */\n  @query('[part=\"content\"]')\n  protected content?: HTMLDivElement\n\n  /** Display size for accordion styling (sm or lg); other effective sizes map to sm. */\n  private get accordionDisplaySize(): 'sm' | 'lg' {\n    return this.effectiveSize === 'lg' ? 'lg' : 'sm'\n  }\n\n  /** The heading level of the accordion\n   * @type { 1 | 2 | 3 | 4 | 5 | 6 }\n   */\n  @property({ type: Number })\n  get headingLevel(): HeadingLevel {\n    return this._headingLevel\n  }\n  set headingLevel(value: HeadingLevel) {\n    const oldValue = this._headingLevel\n    if (value < 1 || value > 6) {\n      console.warn('headingLevel must be between 1 and 6, using default of 4')\n      this._headingLevel = 4\n    } else {\n      this._headingLevel = value\n    }\n    this.requestUpdate('headingLevel', oldValue)\n  }\n\n  /** Whether the accordion is opened */\n  @property({ type: Boolean, reflect: true }) opened = false\n\n  /** Whether the accordion is disabled */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** Whether the accordion is in loading state */\n  @property({ type: Boolean, reflect: true }) loading = false\n\n  /** The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided */\n  @property({ type: String }) heading?: string\n\n  /** The loading aria label of the accordion */\n  @property({ type: String }) loadingAriaLabel?: string\n\n  /** The location of the icon\n   * @type { 'left' | 'right' }\n   */\n  @property({ type: String }) iconLocation: LabelPlacement = 'right'\n\n  /** The variant of the accordion\n   * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }\n   */\n  @property({ type: String })\n  get variant(): AccordionVariant {\n    return this._variant\n  }\n  set variant(value: AccordionVariant) {\n    const oldValue = this._variant\n    if (!ACCORDION_VARIANTS.includes(value as any)) {\n      console.warn(`Invalid accordion variant: ${value}. Using default.`)\n      this._variant = 'default'\n    } else {\n      this._variant = value\n    }\n    this.requestUpdate('variant', oldValue)\n  }\n\n  /** Whether this is the last item in an accordion group */\n  @property({ type: Boolean }) lastItem = false\n\n  constructor() {\n    super()\n    AccordionBaseElement.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.accordionId = `accordion-${AccordionBaseElement.nextId}-${uniqueSuffix}`\n    this.buttonId = `${this.accordionId}-button`\n    this.contentId = `${this.accordionId}-content`\n  }\n\n  /**\n   * Renders the heading content. Override in subclasses to customize heading rendering.\n   * @returns Template result for heading content\n   */\n  protected headingRender() {\n    return html`<div>${this.heading}</div>`\n  }\n\n  /**\n   * Renders additional content. Override in subclasses to add custom content.\n   * @returns Template result for additional content\n   */\n  protected contentRender() {\n    return html`<div></div>`\n  }\n\n  validateProperties(): void {\n    if (this.headingLevel < 1 || this.headingLevel > 6) {\n      console.warn('headingLevel must be between 1 and 6')\n    }\n\n    if (!ACCORDION_VARIANTS.includes(this.variant as any)) {\n      console.warn(`Invalid accordion variant: ${this.variant}. Using default.`)\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    this.validateProperties()\n  }\n\n  private onChange(): void {\n    const eventName = this.opened ? 'dds-opened' : 'dds-closed'\n    const detail: AccordionEventDetail = {\n      open: this.opened,\n      item: this,\n    }\n\n    this.emit(eventName, detail)\n  }\n\n  private toggle(): void {\n    if (this.disabled || this.loading) {\n      return\n    }\n\n    this.opened = !this.opened\n    this.onChange()\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled || this.loading) {\n      return\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      this.toggle()\n    }\n  }\n\n  private handleClick = (event: Event): void => {\n    if (this.disabled || this.loading) {\n      event.preventDefault()\n      return\n    }\n\n    this.toggle()\n  }\n\n  private get accordionClasses() {\n    return clsx('accordion', {\n      'accordion--opened': this.opened,\n      'accordion--disabled': this.disabled,\n      'accordion--loading': this.loading,\n      'accordion--sm': this.accordionDisplaySize === 'sm',\n      'accordion--lg': this.accordionDisplaySize === 'lg',\n      'accordion--icon-left': this.iconLocation === 'left',\n      'accordion--icon-right': this.iconLocation === 'right',\n      [`accordion--${this.variant}`]: this.variant,\n      'accordion--last-item': this.lastItem,\n    })\n  }\n\n  private renderIconOrSpinner() {\n    if (this.loading) {\n      return html`\n        <span\n          class=\"accordion__loading\"\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label=\"${this.loadingAriaLabel ?? t('loading')}\">\n          <dap-ds-icon-loading-spinner size=\"16\"></dap-ds-icon-loading-spinner>\n        </span>\n      `\n    }\n\n    return html`\n      <span\n        class=\"accordion__icon-wrapper\"\n        aria-hidden=\"true\"\n        part=\"icon-wrapper\">\n        <slot name=\"icon-opened\" class=\"accordion__icon-opened\">\n          <dap-ds-icon\n            exportparts=\"icon:open-icon, base:open-icon-base\"\n            size=${(this.effectiveSize === 'xxs'\n              ? 'xs'\n              : this.effectiveSize) as IconSize}\n            name=\"arrow-up-s-line\"\n            class=\"open-icon\">\n          </dap-ds-icon>\n        </slot>\n        <slot name=\"icon-closed\" class=\"accordion__icon-closed\">\n          <dap-ds-icon\n            exportparts=\"icon:close-icon, base:close-icon-base\"\n            size=${(this.effectiveSize === 'xxs'\n              ? 'xs'\n              : this.effectiveSize) as IconSize}\n            name=\"arrow-down-s-line\"\n            class=\"close-icon\">\n          </dap-ds-icon>\n        </slot>\n      </span>\n    `\n  }\n\n  private renderButtons() {\n    return html`\n      <button\n        class=\"accordion__button\"\n        type=\"button\"\n        part=\"button\"\n        id=\"${this.buttonId}\"\n        aria-controls=\"${this.contentId}\"\n        aria-expanded=\"${this.opened}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-label=${ifDefined(this.ariaLabel ?? this.heading)}\n        aria-describedby=${ifDefined(this.ariaDescribedBy ?? undefined)}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}>\n        ${this.renderIconOrSpinner()}\n        <span part=\"heading-text\" class=\"accordion__heading-text\">\n          <slot name=\"heading\"> ${this.headingRender()} </slot>\n        </span>\n      </button>\n    `\n  }\n\n  private renderContent() {\n    return html`\n      <div\n        part=\"content\"\n        class=\"accordion__content\"\n        id=\"${this.contentId}\"\n        aria-labelledby=\"${this.buttonId}\"\n        role=\"region\"\n        aria-hidden=\"${!this.opened}\">\n        <div part=\"content-container\" class=\"accordion-content__container\">\n          <slot></slot>\n          ${this.contentRender()}\n        </div>\n      </div>\n    `\n  }\n\n  private renderHeading(): TemplateResult {\n    return html`\n    <div class=\"accordion__heading\" part=\"heading\">\n      <${unsafeStatic(`h${this.headingLevel}`)}\n       class=\"accordion__heading-content\">\n        ${this.renderButtons()}\n      </${unsafeStatic(`h${this.headingLevel}`)}>\n  </div>\n    `\n  }\n\n  /**\n   * Renders the complete accordion component. Override in subclasses to customize the entire accordion structure.\n   * @returns Template result for the complete accordion\n   */\n  renderAccordion() {\n    return html`\n      <div part=\"base\" class=${this.accordionClasses}>\n        ${this.renderHeading()} ${this.renderContent()}\n      </div>\n    `\n  }\n}\n"],"names":["ACCORDION_VARIANTS","AccordionBaseWithSized","SizedMixin","DdsElement","_AccordionBaseElement","_a","event","uniqueSuffix","options","target","value","oldValue","html","_changedProperties","eventName","detail","clsx","t","ifDefined","_b","unsafeStatic","unsafeCSS","styles","__decorateClass","query","property","AccordionBaseElement"],"mappings":"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"}

package/dist/components/accordion-group/accordion-group.component.js

@@ -1,17 +1,13 @@
 import { clsx as l } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { queryAssignedElements as p } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { html as u } from "../../node_modules/lit-html/static.js";
+import { unsafeCSS as p } from "lit";
+import { queryAssignedElements as u, property as h } from "lit/decorators.js";
+import { html as g } from "lit/static-html.js";
 import { DdsElement as m } from "../../internal/dds-hu-element.js";
-import g from "./accordion-group.scss.js";
-import { unsafeCSS as f } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, a = (d, t, o, r) => {
+import f from "./accordion-group.scss.js";
+var v = Object.defineProperty, a = (d, t, n, r) => {
   for (var e = void 0, i = d.length - 1, c; i >= 0; i--)
-    (c = d[i]) && (e = c(t, o, e) || e);
-  return e && v(t, o, e), e;
+    (c = d[i]) && (e = c(t, n, e) || e);
+  return e && v(t, n, e), e;
 };
 const s = class s extends m {
   constructor() {
@@ -32,19 +28,19 @@ const s = class s extends m {
     this.setupAccordions();
   }
   setupAccordions() {
-    this.accordions.forEach((t, o) => {
-      t.variant = this.variant, t.lastItem = o === this.accordions.length - 1, t.removeEventListener("dds-opened", this.boundOnAccordionChange), t.addEventListener("dds-opened", this.boundOnAccordionChange);
+    this.accordions.forEach((t, n) => {
+      t.variant = this.variant, t.lastItem = n === this.accordions.length - 1, t.removeEventListener("dds-opened", this.boundOnAccordionChange), t.addEventListener("dds-opened", this.boundOnAccordionChange);
     });
   }
   onAccordionChange(t) {
     var r;
-    const o = (r = t.detail) == null ? void 0 : r.item;
-    o && this.autoClose === "true" && this.accordions.forEach((e) => {
-      o !== e && e.removeAttribute("opened");
+    const n = (r = t.detail) == null ? void 0 : r.item;
+    n && this.autoClose === "true" && this.accordions.forEach((e) => {
+      n !== e && e.removeAttribute("opened");
     });
   }
   render() {
-    return u`
+    return g`
       <div
         part="base"
         class=${l("accordion-group", `accordion-group--${this.variant}`)}>
@@ -53,18 +49,18 @@ const s = class s extends m {
     `;
   }
 };
-s.tagName = "dap-ds-accordion-group", s.styles = f(g);
-let n = s;
+s.tagName = "dap-ds-accordion-group", s.styles = p(f);
+let o = s;
 a([
-  p({ selector: "dap-ds-accordion" })
-], n.prototype, "accordions");
+  u({ selector: "dap-ds-accordion" })
+], o.prototype, "accordions");
 a([
   h({ type: String })
-], n.prototype, "autoClose");
+], o.prototype, "autoClose");
 a([
   h({ type: String })
-], n.prototype, "variant");
+], o.prototype, "variant");
 export {
-  n as default
+  o as default
 };
 //# sourceMappingURL=accordion-group.component.js.map

package/dist/components/accordion-group/accordion-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-group.component.js","sources":["../../../src/components/accordion-group/accordion-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { AccordionVariant } from '@/dap-design-system'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSAccordion from '../accordion/accordion.component'\nimport styles from './accordion-group.scss?inline'\n\n/**\n * `dap-ds-accordion-group` is a custom accordion group component.\n * @element dap-ds-accordion-group\n * @summary An accordion group is a collection of accordion components.\n * @title - Accordion group\n * @group accordion\n *\n * @slot - The content of the accordion group.\n *\n * @csspart base - The main accordion group container.\n *\n * @cssproperty --dds-accordion-group-spacing - Controls the gap between accordion items (default: var(--dds-spacing-300))\n * @cssproperty --dds-accordion-group-border-color - Controls the border color (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-accordion-group-border-width - Controls the border width (default: var(--dds-border-width-base))\n * @cssproperty --dds-accordion-group-border-radius - Controls the border radius (default: var(--dds-radius-base))\n * @cssproperty --dds-accordion-group-background - Controls the background color (default: transparent)\n */\nexport default class DapDSAccordionGroup extends DdsElement {\n  static tagName = 'dap-ds-accordion-group'\n\n  @queryAssignedElements({ selector: 'dap-ds-accordion' })\n  private readonly accordions!: Array<DapDSAccordion>\n\n  /** Whether to close other accordions when one is opened. */\n  @property({ type: String }) autoClose = 'true'\n\n  /** The variant of the accordion\n   * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }\n   */\n  @property({ type: String }) variant: AccordionVariant = 'default'\n\n  static readonly styles = unsafeCSS(styles)\n\n  private readonly boundOnAccordionChange = this.onAccordionChange.bind(this)\n  private readonly boundOnSlotChange = this.onSlotChange.bind(this)\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.addEventListener('slotchange', this.boundOnSlotChange)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('slotchange', this.boundOnSlotChange)\n    this.accordions.forEach(accordion => {\n      accordion.removeEventListener('dds-opened', this.boundOnAccordionChange)\n    })\n  }\n\n  protected firstUpdated(\n    _changedProperties:\n      | PropertyValueMap<DapDSAccordionGroup>\n      | Map<PropertyKey, unknown>,\n  ): void {\n    this.setupAccordions()\n  }\n\n  private onSlotChange(): void {\n    this.setupAccordions()\n  }\n\n  private setupAccordions(): void {\n    this.accordions.forEach((accordion, index) => {\n      accordion.variant = this.variant\n      accordion.lastItem = index === this.accordions.length - 1\n\n      accordion.removeEventListener('dds-opened', this.boundOnAccordionChange)\n      accordion.addEventListener('dds-opened', this.boundOnAccordionChange)\n    })\n  }\n\n  private onAccordionChange(event: CustomEvent): void {\n    const openedAccordion = event.detail?.item\n\n    if (!openedAccordion) {\n      return\n    }\n\n    if (this.autoClose === 'true') {\n      this.accordions.forEach(accordion => {\n        if (openedAccordion !== accordion) {\n          accordion.removeAttribute('opened')\n        }\n      })\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('accordion-group', `accordion-group--${this.variant}`)}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSAccordionGroup","DdsElement","accordion","_changedProperties","index","event","openedAccordion","_a","html","clsx","unsafeCSS","styles","DapDSAccordionGroup","__decorateClass","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;;AA4BA,MAAqBA,IAArB,MAAqBA,UAA4BC,EAAW;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA,GAO0C,KAAA,YAAA,QAKgB,KAAA,UAAA,WAIxD,KAAiB,yBAAyB,KAAK,kBAAkB,KAAK,IAAI,GAC1E,KAAiB,oBAAoB,KAAK,aAAa,KAAK,IAAI;AAAA,EAAA;AAAA,EAEhE,oBAA0B;AACxB,UAAM,kBAAkB,GACnB,KAAA,iBAAiB,cAAc,KAAK,iBAAiB;AAAA,EAAA;AAAA,EAG5D,uBAA6B;AAC3B,UAAM,qBAAqB,GACtB,KAAA,oBAAoB,cAAc,KAAK,iBAAiB,GACxD,KAAA,WAAW,QAAQ,CAAaC,MAAA;AACzB,MAAAA,EAAA,oBAAoB,cAAc,KAAK,sBAAsB;AAAA,IAAA,CACxE;AAAA,EAAA;AAAA,EAGO,aACRC,GAGM;AACN,SAAK,gBAAgB;AAAA,EAAA;AAAA,EAGf,eAAqB;AAC3B,SAAK,gBAAgB;AAAA,EAAA;AAAA,EAGf,kBAAwB;AAC9B,SAAK,WAAW,QAAQ,CAACD,GAAWE,MAAU;AAC5C,MAAAF,EAAU,UAAU,KAAK,SACzBA,EAAU,WAAWE,MAAU,KAAK,WAAW,SAAS,GAE9CF,EAAA,oBAAoB,cAAc,KAAK,sBAAsB,GAC7DA,EAAA,iBAAiB,cAAc,KAAK,sBAAsB;AAAA,IAAA,CACrE;AAAA,EAAA;AAAA,EAGK,kBAAkBG,GAA0B;;AAC5C,UAAAC,KAAkBC,IAAAF,EAAM,WAAN,gBAAAE,EAAc;AAEtC,IAAKD,KAID,KAAK,cAAc,UAChB,KAAA,WAAW,QAAQ,CAAaJ,MAAA;AACnC,MAAII,MAAoBJ,KACtBA,EAAU,gBAAgB,QAAQ;AAAA,IACpC,CACD;AAAA,EACH;AAAA,EAGF,SAAS;AACA,WAAAM;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,mBAAmB,oBAAoB,KAAK,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAK3E;AA9EET,EAAO,UAAU,0BAaDA,EAAA,SAASU,EAAUC,CAAM;AAd3C,IAAqBC,IAArBZ;AAImBa,EAAA;AAAA,EADhBC,EAAsB,EAAE,UAAU,mBAAoB,CAAA;AAAA,GAHpCF,EAIF,WAAA,YAAA;AAGWC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAPPH,EAOS,WAAA,WAAA;AAKAC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;"}
+{"version":3,"file":"accordion-group.component.js","sources":["../../../src/components/accordion-group/accordion-group.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { AccordionVariant } from '@/dap-design-system'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport DapDSAccordion from '../accordion/accordion.component'\nimport styles from './accordion-group.scss?inline'\n\n/**\n * `dap-ds-accordion-group` is a custom accordion group component.\n * @element dap-ds-accordion-group\n * @summary An accordion group is a collection of accordion components.\n * @title - Accordion group\n * @group accordion\n *\n * @slot - The content of the accordion group.\n *\n * @csspart base - The main accordion group container.\n *\n * @cssproperty --dds-accordion-group-spacing - Controls the gap between accordion items (default: var(--dds-spacing-300))\n * @cssproperty --dds-accordion-group-border-color - Controls the border color (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-accordion-group-border-width - Controls the border width (default: var(--dds-border-width-base))\n * @cssproperty --dds-accordion-group-border-radius - Controls the border radius (default: var(--dds-radius-base))\n * @cssproperty --dds-accordion-group-background - Controls the background color (default: transparent)\n */\nexport default class DapDSAccordionGroup extends DdsElement {\n  static tagName = 'dap-ds-accordion-group'\n\n  @queryAssignedElements({ selector: 'dap-ds-accordion' })\n  private readonly accordions!: Array<DapDSAccordion>\n\n  /** Whether to close other accordions when one is opened. */\n  @property({ type: String }) autoClose = 'true'\n\n  /** The variant of the accordion\n   * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }\n   */\n  @property({ type: String }) variant: AccordionVariant = 'default'\n\n  static readonly styles = unsafeCSS(styles)\n\n  private readonly boundOnAccordionChange = this.onAccordionChange.bind(this)\n  private readonly boundOnSlotChange = this.onSlotChange.bind(this)\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.addEventListener('slotchange', this.boundOnSlotChange)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('slotchange', this.boundOnSlotChange)\n    this.accordions.forEach(accordion => {\n      accordion.removeEventListener('dds-opened', this.boundOnAccordionChange)\n    })\n  }\n\n  protected firstUpdated(\n    _changedProperties:\n      | PropertyValueMap<DapDSAccordionGroup>\n      | Map<PropertyKey, unknown>,\n  ): void {\n    this.setupAccordions()\n  }\n\n  private onSlotChange(): void {\n    this.setupAccordions()\n  }\n\n  private setupAccordions(): void {\n    this.accordions.forEach((accordion, index) => {\n      accordion.variant = this.variant\n      accordion.lastItem = index === this.accordions.length - 1\n\n      accordion.removeEventListener('dds-opened', this.boundOnAccordionChange)\n      accordion.addEventListener('dds-opened', this.boundOnAccordionChange)\n    })\n  }\n\n  private onAccordionChange(event: CustomEvent): void {\n    const openedAccordion = event.detail?.item\n\n    if (!openedAccordion) {\n      return\n    }\n\n    if (this.autoClose === 'true') {\n      this.accordions.forEach(accordion => {\n        if (openedAccordion !== accordion) {\n          accordion.removeAttribute('opened')\n        }\n      })\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx('accordion-group', `accordion-group--${this.variant}`)}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSAccordionGroup","DdsElement","accordion","_changedProperties","index","event","openedAccordion","_a","html","clsx","unsafeCSS","styles","DapDSAccordionGroup","__decorateClass","queryAssignedElements","property"],"mappings":";;;;;;;;;;;AA4BA,MAAqBA,IAArB,MAAqBA,UAA4BC,EAAW;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA,GAO0C,KAAA,YAAA,QAKgB,KAAA,UAAA,WAIxD,KAAiB,yBAAyB,KAAK,kBAAkB,KAAK,IAAI,GAC1E,KAAiB,oBAAoB,KAAK,aAAa,KAAK,IAAI;AAAA,EAAA;AAAA,EAEhE,oBAA0B;AACxB,UAAM,kBAAkB,GACnB,KAAA,iBAAiB,cAAc,KAAK,iBAAiB;AAAA,EAAA;AAAA,EAG5D,uBAA6B;AAC3B,UAAM,qBAAqB,GACtB,KAAA,oBAAoB,cAAc,KAAK,iBAAiB,GACxD,KAAA,WAAW,QAAQ,CAAaC,MAAA;AACzB,MAAAA,EAAA,oBAAoB,cAAc,KAAK,sBAAsB;AAAA,IAAA,CACxE;AAAA,EAAA;AAAA,EAGO,aACRC,GAGM;AACN,SAAK,gBAAgB;AAAA,EAAA;AAAA,EAGf,eAAqB;AAC3B,SAAK,gBAAgB;AAAA,EAAA;AAAA,EAGf,kBAAwB;AAC9B,SAAK,WAAW,QAAQ,CAACD,GAAWE,MAAU;AAC5C,MAAAF,EAAU,UAAU,KAAK,SACzBA,EAAU,WAAWE,MAAU,KAAK,WAAW,SAAS,GAE9CF,EAAA,oBAAoB,cAAc,KAAK,sBAAsB,GAC7DA,EAAA,iBAAiB,cAAc,KAAK,sBAAsB;AAAA,IAAA,CACrE;AAAA,EAAA;AAAA,EAGK,kBAAkBG,GAA0B;;AAC5C,UAAAC,KAAkBC,IAAAF,EAAM,WAAN,gBAAAE,EAAc;AAEtC,IAAKD,KAID,KAAK,cAAc,UAChB,KAAA,WAAW,QAAQ,CAAaJ,MAAA;AACnC,MAAII,MAAoBJ,KACtBA,EAAU,gBAAgB,QAAQ;AAAA,IACpC,CACD;AAAA,EACH;AAAA,EAGF,SAAS;AACA,WAAAM;AAAA;AAAA;AAAA,gBAGKC,EAAK,mBAAmB,oBAAoB,KAAK,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA,EAAA;AAK3E;AA9EET,EAAO,UAAU,0BAaDA,EAAA,SAASU,EAAUC,CAAM;AAd3C,IAAqBC,IAArBZ;AAImBa,EAAA;AAAA,EADhBC,EAAsB,EAAE,UAAU,mBAAoB,CAAA;AAAA,GAHpCF,EAIF,WAAA,YAAA;AAGWC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAPPH,EAOS,WAAA,WAAA;AAKAC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;"}

package/dist/components/anchor-heading/anchor-heading.component.js

@@ -1,23 +1,20 @@
 import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as m } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { unsafeStatic as n, html as f } from "../../node_modules/lit-html/static.js";
+import { unsafeCSS as n } from "lit";
+import { property as m } from "lit/decorators.js";
+import { unsafeStatic as p, html as f } from "lit/static-html.js";
 import { anchorClass as c } from "../../common/const.js";
 import { kebabCase as $ } from "../../common/utils.js";
 import { adoptLightStyles as b } from "../../internal/adopt-light-styles.js";
 import { DdsElement as k } from "../../internal/dds-hu-element.js";
-import u from "../link/link.component.js";
-import v from "../typography/_styles/typography.scss.js";
+import v from "../link/link.component.js";
+import u from "../typography/_styles/typography.scss.js";
 import y from "./anchor-heading.scss.js";
-import { unsafeCSS as p } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var x = Object.defineProperty, h = (s, a, o, C) => {
-  for (var t = void 0, i = s.length - 1, l; i >= 0; i--)
-    (l = s[i]) && (t = l(a, o, t) || t);
-  return t && x(a, o, t), t;
+var x = Object.defineProperty, h = (s, a, l, C) => {
+  for (var t = void 0, i = s.length - 1, o; i >= 0; i--)
+    (o = s[i]) && (t = o(a, l, t) || t);
+  return t && x(a, l, t), t;
 };
-const r = class r extends k {
+const e = class e extends k {
   createRenderRoot() {
     return b(this), this;
   }
@@ -29,7 +26,7 @@ const r = class r extends k {
   }
   render() {
     return f`
-    <${n(this.variant)}
+    <${p(this.variant)}
       id=${this.elementId}
       part="base"
       class=${d(c, { [`typography-${this.variant}`]: this.variant })}
@@ -44,21 +41,21 @@ const r = class r extends k {
         title=${this.anchorTitle}>
         &#8203;
       </dap-ds-link>
-    </${n(this.variant)}>
+    </${p(this.variant)}>
   `;
   }
 };
-r.tagName = "dap-ds-anchor-heading", r.dependencies = {
-  "dap-ds-link": u
-}, r.styles = [p(y), p(v)];
-let e = r;
+e.tagName = "dap-ds-anchor-heading", e.dependencies = {
+  "dap-ds-link": v
+}, e.styles = [n(y), n(u)];
+let r = e;
 h([
   m()
-], e.prototype, "variant");
+], r.prototype, "variant");
 h([
   m()
-], e.prototype, "label");
+], r.prototype, "label");
 export {
-  e as default
+  r as default
 };
 //# sourceMappingURL=anchor-heading.component.js.map

package/dist/components/anchor-heading/anchor-heading.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchor-heading.component.js","sources":["../../../src/components/anchor-heading/anchor-heading.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { anchorClass } from '@/common/const'\nimport { kebabCase } from '@/common/utils'\nimport { adoptLightStyles } from '@/internal/adopt-light-styles'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSLink from '../link/link.component'\nimport typographyStyles from '../typography/_styles/typography.scss?inline'\nimport { TypographyVariant } from '../typography/typography.component'\nimport styles from './anchor-heading.scss?inline'\n\nexport type HeadingVariant = Extract<\n  TypographyVariant,\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n>\n\n/**\n * `dap-ds-anchor-heading`\n * @summary Anchor heading is a heading with an anchor link.\n * @element dap-ds-anchor-heading\n * @title - Anchor heading\n *\n * @attribute {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} variant - The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.\n * @attribute {string} label - The label of the heading.\n *\n * @csspart base - The main anchor heading container.\n * @csspart link - The link of the anchor heading. dap-ds-link element.\n * @csspart link-base - The base of the link part.\n * @csspart text - The text of the anchor heading.\n *\n * @cssproperty --dds-anchor-link-color - The color of the anchor link (default: var(--dds-color-primary))\n * @cssproperty --dds-anchor-link-opacity - The opacity of the anchor link when not hovered (default: 0)\n * @cssproperty --dds-anchor-link-hover-opacity - The opacity of the anchor link when hovered (default: 1)\n * @cssproperty --dds-anchor-link-transition - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out)\n */\nexport default class DapDSAnchorHeading extends DdsElement {\n  static tagName = 'dap-ds-anchor-heading'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n  }\n\n  @property() variant!: HeadingVariant\n  @property() label!: string\n\n  static readonly styles = [unsafeCSS(styles), unsafeCSS(typographyStyles)]\n\n  createRenderRoot() {\n    adoptLightStyles(this)\n    return this\n  }\n\n  get elementId() {\n    return this.id ? this.id : kebabCase(this.label)\n  }\n\n  get anchorTitle() {\n    return `Link to ${this.label}`\n  }\n\n  render() {\n    return html`\n    <${unsafeStatic(this.variant)}\n      id=${this.elementId}\n      part=\"base\"\n      class=${clsx(anchorClass, { [`typography-${this.variant}`]: this.variant })}\n    >\n      ${this.label}\n      <dap-ds-link\n        part=\"link\"\n        exportparts=\"base: link-base, text: link-text\"\n        class=\"dds-anchor__link\"\n        href=${`#${this.elementId}`}\n        aria-label=${this.anchorTitle}\n        title=${this.anchorTitle}>\n        &#8203;\n      </dap-ds-link>\n    </${unsafeStatic(this.variant)}>\n  `\n  }\n}\n"],"names":["_DapDSAnchorHeading","DdsElement","adoptLightStyles","kebabCase","html","unsafeStatic","clsx","anchorClass","DapDSLink","unsafeCSS","styles","typographyStyles","DapDSAnchorHeading","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;;;AAuCA,MAAqBA,IAArB,MAAqBA,UAA2BC,EAAW;AAAA,EAYzD,mBAAmB;AACjB,WAAAC,EAAiB,IAAI,GACd;AAAA,EAAA;AAAA,EAGT,IAAI,YAAY;AACd,WAAO,KAAK,KAAK,KAAK,KAAKC,EAAU,KAAK,KAAK;AAAA,EAAA;AAAA,EAGjD,IAAI,cAAc;AACT,WAAA,WAAW,KAAK,KAAK;AAAA,EAAA;AAAA,EAG9B,SAAS;AACA,WAAAC;AAAAA,OACJC,EAAa,KAAK,OAAO,CAAC;AAAA,WACtB,KAAK,SAAS;AAAA;AAAA,cAEXC,EAAKC,GAAa,EAAE,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG,KAAK,SAAS,CAAC;AAAA;AAAA,QAEzE,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,eAKH,IAAI,KAAK,SAAS,EAAE;AAAA,qBACd,KAAK,WAAW;AAAA,gBACrB,KAAK,WAAW;AAAA;AAAA;AAAA,QAGxBF,EAAa,KAAK,OAAO,CAAC;AAAA;AAAA,EAAA;AAGlC;AA5CEL,EAAO,UAAU,yBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeQ;AACjB,GAKAR,EAAgB,SAAS,CAACS,EAAUC,CAAM,GAAGD,EAAUE,CAAgB,CAAC;AAV1E,IAAqBC,IAArBZ;AAOca,EAAA;AAAA,EAAXC,EAAS;AAAA,GAPSF,EAOP,WAAA,SAAA;AACAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,OAAA;"}
+{"version":3,"file":"anchor-heading.component.js","sources":["../../../src/components/anchor-heading/anchor-heading.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { anchorClass } from '@/common/const'\nimport { kebabCase } from '@/common/utils'\nimport { adoptLightStyles } from '@/internal/adopt-light-styles'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSLink from '../link/link.component'\nimport typographyStyles from '../typography/_styles/typography.scss?inline'\nimport { TypographyVariant } from '../typography/typography.component'\nimport styles from './anchor-heading.scss?inline'\n\nexport type HeadingVariant = Extract<\n  TypographyVariant,\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n>\n\n/**\n * `dap-ds-anchor-heading`\n * @summary Anchor heading is a heading with an anchor link.\n * @element dap-ds-anchor-heading\n * @title - Anchor heading\n *\n * @attribute {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} variant - The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.\n * @attribute {string} label - The label of the heading.\n *\n * @csspart base - The main anchor heading container.\n * @csspart link - The link of the anchor heading. dap-ds-link element.\n * @csspart link-base - The base of the link part.\n * @csspart text - The text of the anchor heading.\n *\n * @cssproperty --dds-anchor-link-color - The color of the anchor link (default: var(--dds-color-primary))\n * @cssproperty --dds-anchor-link-opacity - The opacity of the anchor link when not hovered (default: 0)\n * @cssproperty --dds-anchor-link-hover-opacity - The opacity of the anchor link when hovered (default: 1)\n * @cssproperty --dds-anchor-link-transition - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out)\n */\nexport default class DapDSAnchorHeading extends DdsElement {\n  static tagName = 'dap-ds-anchor-heading'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n  }\n\n  @property() variant!: HeadingVariant\n  @property() label!: string\n\n  static readonly styles = [unsafeCSS(styles), unsafeCSS(typographyStyles)]\n\n  createRenderRoot() {\n    adoptLightStyles(this)\n    return this\n  }\n\n  get elementId() {\n    return this.id ? this.id : kebabCase(this.label)\n  }\n\n  get anchorTitle() {\n    return `Link to ${this.label}`\n  }\n\n  render() {\n    return html`\n    <${unsafeStatic(this.variant)}\n      id=${this.elementId}\n      part=\"base\"\n      class=${clsx(anchorClass, { [`typography-${this.variant}`]: this.variant })}\n    >\n      ${this.label}\n      <dap-ds-link\n        part=\"link\"\n        exportparts=\"base: link-base, text: link-text\"\n        class=\"dds-anchor__link\"\n        href=${`#${this.elementId}`}\n        aria-label=${this.anchorTitle}\n        title=${this.anchorTitle}>\n        &#8203;\n      </dap-ds-link>\n    </${unsafeStatic(this.variant)}>\n  `\n  }\n}\n"],"names":["_DapDSAnchorHeading","DdsElement","adoptLightStyles","kebabCase","html","unsafeStatic","clsx","anchorClass","DapDSLink","unsafeCSS","styles","typographyStyles","DapDSAnchorHeading","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;AAuCA,MAAqBA,IAArB,MAAqBA,UAA2BC,EAAW;AAAA,EAYzD,mBAAmB;AACjB,WAAAC,EAAiB,IAAI,GACd;AAAA,EAAA;AAAA,EAGT,IAAI,YAAY;AACd,WAAO,KAAK,KAAK,KAAK,KAAKC,EAAU,KAAK,KAAK;AAAA,EAAA;AAAA,EAGjD,IAAI,cAAc;AACT,WAAA,WAAW,KAAK,KAAK;AAAA,EAAA;AAAA,EAG9B,SAAS;AACA,WAAAC;AAAA,OACJC,EAAa,KAAK,OAAO,CAAC;AAAA,WACtB,KAAK,SAAS;AAAA;AAAA,cAEXC,EAAKC,GAAa,EAAE,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG,KAAK,SAAS,CAAC;AAAA;AAAA,QAEzE,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,eAKH,IAAI,KAAK,SAAS,EAAE;AAAA,qBACd,KAAK,WAAW;AAAA,gBACrB,KAAK,WAAW;AAAA;AAAA;AAAA,QAGxBF,EAAa,KAAK,OAAO,CAAC;AAAA;AAAA,EAAA;AAGlC;AA5CEL,EAAO,UAAU,yBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeQ;AACjB,GAKAR,EAAgB,SAAS,CAACS,EAAUC,CAAM,GAAGD,EAAUE,CAAgB,CAAC;AAV1E,IAAqBC,IAArBZ;AAOca,EAAA;AAAA,EAAXC,EAAS;AAAA,GAPSF,EAOP,WAAA,SAAA;AACAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,OAAA;"}