dap-design-system 0.60.2 → 0.61.0

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

@@ -0,0 +1,263 @@
+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 { DdsElement as m } from "../../internal/dds-hu-element.js";
+import { SizedMixin as b } 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 { 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 = [
+  "default",
+  "collapsed",
+  "clean",
+  "clean-collapsed"
+], S = b(m);
+var o;
+const i = (o = class extends S {
+  constructor() {
+    super(), this._headingLevel = 4, this._variant = "default", this.opened = !1, this.disabled = !1, this.loading = !1, this.iconLocation = "right", this.lastItem = !1, this.handleKeyDown = (t) => {
+      this.disabled || this.loading || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggle());
+    }, this.handleClick = (t) => {
+      if (this.disabled || this.loading) {
+        t.preventDefault();
+        return;
+      }
+      this.toggle();
+    }, o.nextId++;
+    const e = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
+    this.accordionId = `accordion-${o.nextId}-${e}`, this.buttonId = `${this.accordionId}-button`, this.contentId = `${this.accordionId}-content`;
+  }
+  /**
+   * The element that actually takes focus -- the toggle button inside the shadow root.
+   *
+   * Without this, `accordionElement.focus()` silently does nothing: the host has no
+   * tabindex and does not delegate focus, so a caller trying to move focus to an
+   * accordion header (after committing an inline edit, say) drops focus to <body>.
+   * Mirrors the `focusElement` contract that FocusableMixin defines and that
+   * dap-ds-modal's focus trap already looks for.
+   */
+  get focusElement() {
+    var e;
+    return (e = this.button) != null ? e : this;
+  }
+  focus(e) {
+    const t = this.focusElement;
+    if (t === this) {
+      HTMLElement.prototype.focus.call(this, e);
+      return;
+    }
+    t.focus(e);
+  }
+  blur() {
+    const e = this.focusElement;
+    if (e === this) {
+      HTMLElement.prototype.blur.call(this);
+      return;
+    }
+    e.blur();
+  }
+  /** Display size for accordion styling (sm or lg); other effective sizes map to sm. */
+  get accordionDisplaySize() {
+    return this.effectiveSize === "lg" ? "lg" : "sm";
+  }
+  get headingLevel() {
+    return this._headingLevel;
+  }
+  set headingLevel(e) {
+    const t = this._headingLevel;
+    e < 1 || e > 6 ? (console.warn("headingLevel must be between 1 and 6, using default of 4"), this._headingLevel = 4) : this._headingLevel = e, this.requestUpdate("headingLevel", t);
+  }
+  get variant() {
+    return this._variant;
+  }
+  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);
+  }
+  /**
+   * Renders the heading content. Override in subclasses to customize heading rendering.
+   * @returns Template result for heading content
+   */
+  headingRender() {
+    return s`<div>${this.heading}</div>`;
+  }
+  /**
+   * Renders additional content. Override in subclasses to add custom content.
+   * @returns Template result for additional content
+   */
+  contentRender() {
+    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.`);
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.validateProperties();
+  }
+  onChange() {
+    const e = this.opened ? "dds-opened" : "dds-closed", t = {
+      open: this.opened,
+      item: this
+    };
+    this.emit(e, t);
+  }
+  toggle() {
+    this.disabled || this.loading || (this.opened = !this.opened, this.onChange());
+  }
+  get accordionClasses() {
+    return v("accordion", {
+      "accordion--opened": this.opened,
+      "accordion--disabled": this.disabled,
+      "accordion--loading": this.loading,
+      "accordion--sm": this.accordionDisplaySize === "sm",
+      "accordion--lg": this.accordionDisplaySize === "lg",
+      "accordion--icon-left": this.iconLocation === "left",
+      "accordion--icon-right": this.iconLocation === "right",
+      [`accordion--${this.variant}`]: this.variant,
+      "accordion--last-item": this.lastItem
+    });
+  }
+  renderIconOrSpinner() {
+    var e;
+    return this.loading ? s`
+        <span
+          class="accordion__loading"
+          role="status"
+          aria-live="polite"
+          aria-label="${(e = this.loadingAriaLabel) != null ? e : _("loading")}">
+          <dap-ds-icon-loading-spinner size="16"></dap-ds-icon-loading-spinner>
+        </span>
+      ` : s`
+      <span
+        class="accordion__icon-wrapper"
+        aria-hidden="true"
+        part="icon-wrapper">
+        <slot name="icon-opened" class="accordion__icon-opened">
+          <dap-ds-icon
+            exportparts="icon:open-icon, base:open-icon-base"
+            size=${this.effectiveSize === "xxs" ? "xs" : this.effectiveSize}
+            name="arrow-up-s-line"
+            class="open-icon">
+          </dap-ds-icon>
+        </slot>
+        <slot name="icon-closed" class="accordion__icon-closed">
+          <dap-ds-icon
+            exportparts="icon:close-icon, base:close-icon-base"
+            size=${this.effectiveSize === "xxs" ? "xs" : this.effectiveSize}
+            name="arrow-down-s-line"
+            class="close-icon">
+          </dap-ds-icon>
+        </slot>
+      </span>
+    `;
+  }
+  renderButtons() {
+    var e, t;
+    return s`
+      <button
+        class="accordion__button"
+        type="button"
+        part="button"
+        id="${this.buttonId}"
+        aria-controls="${this.contentId}"
+        aria-expanded="${this.opened}"
+        aria-disabled="${this.disabled}"
+        aria-label=${p((e = this.ariaLabel) != null ? e : this.heading)}
+        aria-describedby=${p((t = this.ariaDescribedBy) != null ? t : void 0)}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}>
+        ${this.renderIconOrSpinner()}
+        <span part="heading-text" class="accordion__heading-text">
+          <slot name="heading"> ${this.headingRender()} </slot>
+        </span>
+      </button>
+    `;
+  }
+  renderContent() {
+    return s`
+      <div
+        part="content"
+        class="accordion__content"
+        id="${this.contentId}"
+        aria-labelledby="${this.buttonId}"
+        role="region"
+        aria-hidden="${!this.opened}">
+        <div part="content-container" class="accordion-content__container">
+          <slot></slot>
+          ${this.contentRender()}
+        </div>
+      </div>
+    `;
+  }
+  renderHeading() {
+    return s`
+    <div class="accordion__heading" part="heading">
+      <${u(`h${this.headingLevel}`)}
+       class="accordion__heading-content">
+        ${this.renderButtons()}
+      </${u(`h${this.headingLevel}`)}>
+  </div>
+    `;
+  }
+  /**
+   * Renders the complete accordion component. Override in subclasses to customize the entire accordion structure.
+   * @returns Template result for the complete accordion
+   */
+  renderAccordion() {
+    return s`
+      <div part="base" class=${this.accordionClasses}>
+        ${this.renderHeading()} ${this.renderContent()}
+      </div>
+    `;
+  }
+}, o.styles = $(y), o.nextId = 0, o);
+n([
+  f('[part="button"]')
+], i.prototype, "button", 2);
+n([
+  f('[part="content"]')
+], i.prototype, "content", 2);
+n([
+  a({ type: Number })
+], i.prototype, "headingLevel", 1);
+n([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "opened", 2);
+n([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+n([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "loading", 2);
+n([
+  a({ type: String })
+], i.prototype, "heading", 2);
+n([
+  a({ type: String })
+], i.prototype, "loadingAriaLabel", 2);
+n([
+  a({ type: String })
+], i.prototype, "iconLocation", 2);
+n([
+  a({ type: String })
+], i.prototype, "variant", 1);
+n([
+  a({ type: Boolean })
+], i.prototype, "lastItem", 2);
+let N = i;
+export {
+  N as AccordionBaseElement
+};
+//# sourceMappingURL=accordion-base-element.js.map

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

@@ -0,0 +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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"}

package/dist/components/accordion/accordion.component.d.ts

@@ -56,5 +56,6 @@ import { AccordionBaseElement } from './accordion-base-element';
  * @cssproperty --dds-accordion-divider-color - The color of the divider between accordion items (default: var(--dds-border-neutral-divider))
  */
 export default class DapDSAccordion extends AccordionBaseElement {
+    static tagName: string;
     render(): import('lit-html').TemplateResult;
 }

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

@@ -0,0 +1,12 @@
+import { AccordionBaseElement as r } from "./accordion-base-element.js";
+const e = class e extends r {
+  render() {
+    return this.renderAccordion();
+  }
+};
+e.tagName = "dap-ds-accordion";
+let t = e;
+export {
+  t as default
+};
+//# sourceMappingURL=accordion.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.component.js","sources":["../../../src/components/accordion/accordion.component.ts"],"sourcesContent":["import { AccordionBaseElement } from './accordion-base-element'\n\n/**\n * `dap-ds-accordion` is a custom accordion component.\n * @element dap-ds-accordion\n * @summary An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.\n * @title - Accordion\n *\n * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the accordion. Default is `sm`. Visual variants are sm and lg (other sizes map to sm).\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\")\n * @property {string} parentSized - When \"true\", size is taken from the parent card if present.\n * @property {string} heading - 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 { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.\n * @property {boolean} opened - Whether the accordion is opened. Default is `false`.\n * @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`.\n * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.\n * @property {boolean} lastItem - Whether the accordion is the last item.\n * @property {boolean} disabled - Whether the accordion is disabled.\n * @property {boolean} loading - Whether the accordion is in loading state.\n *\n * @event {{ open: boolean, item: AccordionBaseElement }} dds-opened - Event fired when the accordion is opened.\n * @event {{ open: boolean, item: AccordionBaseElement }} dds-closed - Event fired when the accordion is closed.\n *\n * @slot default - The content of the accordion.\n * @slot heading - The heading of the accordion.\n * @slot icon-opened - The icon when the accordion is opened.\n * @slot icon-closed - The icon when the accordion is closed.\n *\n * @csspart base - The main accordion container.\n * @csspart heading - The heading of the accordion.\n * @csspart button - The button of the accordion.\n * @csspart content - The content of the accordion.\n * @csspart content-container - The container of the accordion content.\n * @csspart icon-wrapper - The icon wrapper of the accordion.\n * @csspart open-icon - The icon when the accordion is opened.\n * @csspart open-icon-base - The base of the icon when the accordion is opened.\n * @csspart close-icon - The icon when the accordion is closed.\n * @csspart close-icon-base - The base of the icon when the accordion is closed.\n *\n * @cssproperty --dds-accordion-border-width - The width of the accordion border (default: var(--dds-border-width-base))\n * @cssproperty --dds-accordion-border-style - The style of the accordion border (default: solid)\n * @cssproperty --dds-accordion-border-radius - The border radius of the accordion (default: var(--dds-radius-base))\n * @cssproperty --dds-accordion-border-color - The color of the accordion border (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-accordion-background-color - The background color of the accordion (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-accordion-text-color - The text color of the accordion (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-accordion-hover-background - The background color when hovering over the accordion (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-accordion-active-background - The background color when the accordion is active (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-accordion-icon-background - The background color of the accordion icon (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-accordion-icon-color - The color of the accordion icon (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-accordion-icon-hover-background - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-accordion-icon-active-background - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong))\n * @cssproperty --dds-accordion-icon-hover-color - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong))\n * @cssproperty --dds-accordion-icon-active-color - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong))\n * @cssproperty --dds-accordion-content-color - The color of the accordion content (default: var(--dds-text-text-neutral))\n * @cssproperty --dds-accordion-transition-duration - The duration of the accordion transitions (default: var(--dds-transition-fast))\n * @cssproperty --dds-accordion-transition-timing - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out))\n * @cssproperty --dds-accordion-divider-color - The color of the divider between accordion items (default: var(--dds-border-neutral-divider))\n */\nexport default class DapDSAccordion extends AccordionBaseElement {\n  static tagName = 'dap-ds-accordion'\n\n  render() {\n    return this.renderAccordion()\n  }\n}\n"],"names":["_DapDSAccordion","AccordionBaseElement","DapDSAccordion"],"mappings":";AA0DA,MAAqBA,IAArB,MAAqBA,UAAuBC,EAAqB;AAAA,EAG/D,SAAS;AACP,WAAO,KAAK,gBAAgB;AAAA,EAAA;AAEhC;AALED,EAAO,UAAU;AADnB,IAAqBE,IAArBF;"}

package/dist/components/accordion/accordion.js

@@ -0,0 +1,6 @@
+import o from "./accordion.component.js";
+o.define();
+export {
+  o as default
+};
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../../src/components/accordion/accordion.ts"],"sourcesContent":["import DapDSAccordion from './accordion.component'\n\nexport * from './accordion.component'\nexport default DapDSAccordion\n\nDapDSAccordion.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-accordion': DapDSAccordion\n  }\n}\n"],"names":["DapDSAccordion"],"mappings":";AAKAA,EAAe,OAAO;"}

package/dist/components/accordion/accordion.scss.js

@@ -0,0 +1,5 @@
+const o = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-accordion-border: var(--dds-border-width-base) solid var(--dds-border-neutral-divider);--dds-accordion-border-radius: var(--dds-radius-base);--dds-accordion-background-color: var(--dds-background-neutral-subtle);--dds-accordion-text-color: var(--dds-text-neutral-strong);--dds-accordion-hover-background: var(--dds-background-neutral-base);--dds-accordion-active-background: var(--dds-background-neutral-medium);--dds-accordion-icon-background: var(--dds-transparent-black-subtle);--dds-accordion-icon-color: var(--dds-icon-neutral-base);--dds-accordion-icon-hover-background: var(--dds-transparent-black-base);--dds-accordion-icon-active-background: var(--dds-transparent-black-strong);--dds-accordion-icon-hover-color: var(--dds-icon-neutral-strong);--dds-accordion-icon-active-color: var(--dds-icon-neutral-strong);--dds-accordion-content-color: var(--dds-text-text-neutral);--dds-accordion-transition-duration: var(--dds-transition-fast);--dds-accordion-transition-timing: var(--dds-easing-ease-in-out);--dds-accordion-divider-color: var(--dds-border-neutral-divider)}.accordion{display:flex;flex-direction:column;align-items:start;max-width:100%;overflow-x:hidden;overflow-y:hidden;border:var(--dds-accordion-border);border-radius:var(--dds-accordion-border-radius);background-color:var(--dds-accordion-background-color)}.accordion--collapsed{margin-bottom:0;padding-right:0;padding-left:0;border-radius:0;border-radius:var(--dds-radius-base);border-color:transparent}.accordion--collapsed:not(.accordion--last-item):after,.accordion--clean-collapsed:not(.accordion--last-item):after{content:"";display:block;width:calc(100% - 2 * var(--dds-spacing-400));margin:0 var(--dds-spacing-400);border-bottom:var(--dds-border-width-base) solid var(--dds-accordion-divider-color)}.accordion--clean,.accordion--clean-collapsed{margin-bottom:0;padding-right:0;padding-left:0;border-radius:0;border-color:transparent;background-color:transparent}.accordion--clean .accordion__heading:hover,.accordion--clean .accordion__heading:active,.accordion--clean-collapsed .accordion__heading:hover,.accordion--clean-collapsed .accordion__heading:active{background-color:transparent;text-decoration:underline}.accordion__heading{display:flex;flex-direction:row;flex-grow:1;width:100%;margin:0;border-radius:var(--dds-accordion-border-radius);color:var(--dds-accordion-text-color);font-size:var(--dds-font-base);font-weight:700;line-height:var(--dds-font-line-height-base);cursor:pointer}.accordion__heading:hover{background-color:var(--dds-accordion-hover-background)}.accordion__heading:active{background-color:var(--dds-accordion-active-background)}.accordion__heading:has(:focus-visible){outline-color:var(--dds-focus-outer-ring);outline-offset:-1px;outline-style:solid;outline-width:var(--dds-border-width-xlarge)}.accordion__heading-content{display:flex;width:100%}.accordion__heading-text{color:var(--dds-accordion-text-color)}.accordion--sm .accordion__heading-content{font-size:var(--dds-font-base)}.accordion--sm .accordion__button{padding:var(--dds-spacing-400)}.accordion--lg .accordion__heading-content{font-size:var(--dds-font-lg)}.accordion--lg .accordion__button{padding:var(--dds-spacing-400) var(--dds-spacing-600)}.accordion__icon-wrapper{display:flex;flex-shrink:0;align-items:center;align-self:flex-start;justify-content:center;transition:background-color var(--dds-accordion-transition-duration) var(--dds-accordion-transition-timing),color var(--dds-accordion-transition-duration) var(--dds-accordion-transition-timing);border:var(--dds-accordion-border-width) solid var(--dds-border-neutral-transparent-interactive);border-radius:100%;background-color:var(--dds-accordion-icon-background)}.accordion__icon-wrapper ::part(icon){transition:color var(--dds-accordion-transition-duration) var(--dds-accordion-transition-timing);color:var(--dds-accordion-icon-color)}.accordion__icon-wrapper:hover{background-color:var(--dds-accordion-icon-hover-background)}.accordion__icon-wrapper:hover ::part(icon){color:var(--dds-accordion-icon-hover-color)}.accordion__icon-wrapper:active{background-color:var(--dds-accordion-icon-active-background)}.accordion__icon-wrapper:active ::part(icon){color:var(--dds-accordion-icon-active-color)}.accordion--sm .accordion__icon-wrapper{width:var(--dds-spacing-600);height:var(--dds-spacing-600)}.accordion--lg .accordion__icon-wrapper{width:var(--dds-spacing-800);height:var(--dds-spacing-800)}.accordion--icon-left .accordion__icon-wrapper{order:0;margin-right:var(--dds-spacing-300)}.accordion--icon-right .accordion__icon-wrapper{order:1;margin-right:0;margin-left:var(--dds-spacing-300)}.accordion__icon-closed{display:inline-flex}.accordion__icon-opened,.accordion--opened .accordion__icon-closed{display:none}.accordion--opened .accordion__icon-opened{display:inline-flex}.accordion__button{display:flex;flex:1;align-items:center;padding:0;border:0;border-radius:1rem;background:transparent;font-size:inherit;font-weight:inherit;text-align:left;cursor:pointer}.accordion--icon-right .accordion__button{justify-content:space-between}.accordion__content{display:none;width:100%;block-size:0;padding:0 var(--dds-spacing-400);overflow:hidden;transition-property:block-size,opacity,padding;transition-duration:var(--dds-accordion-transition-duration);transition-timing-function:var(--dds-accordion-transition-timing);transition-behavior:allow-discrete;opacity:0;color:var(--dds-accordion-content-color)}.accordion--opened .accordion__content{display:block;block-size:auto;opacity:1}@starting-style{.accordion--opened .accordion__content{block-size:0;opacity:0}}.accordion--sm.accordion--opened .accordion__content{padding:var(--dds-spacing-200) var(--dds-spacing-400) var(--dds-spacing-400) var(--dds-spacing-400)}.accordion--lg.accordion--opened .accordion__content{padding:var(--dds-spacing-200) var(--dds-spacing-600) var(--dds-spacing-600) var(--dds-spacing-600)}.accordion-content__container{width:100%;min-width:0;padding:var(--dds-spacing-100);overflow:auto hidden}.accordion-content__container>*:last-of-type{margin-bottom:0;padding-bottom:0}.accordion-content__container dap-ds-table{display:table;width:max-content;min-width:100%;table-layout:auto}';
+export {
+  o as default
+};
+//# sourceMappingURL=accordion.scss.js.map

package/dist/components/accordion/accordion.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/accordion-group/accordion-group.component.d.ts

@@ -19,6 +19,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-accordion-group-background - Controls the background color (default: transparent)
  */
 export default class DapDSAccordionGroup extends DdsElement {
+    static tagName: string;
     private readonly accordions;
     /** Whether to close other accordions when one is opened. */
     autoClose: string;

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

@@ -0,0 +1,70 @@
+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 { 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) => {
+  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;
+};
+const s = class s extends m {
+  constructor() {
+    super(...arguments), this.autoClose = "true", this.variant = "default", this.boundOnAccordionChange = this.onAccordionChange.bind(this), this.boundOnSlotChange = this.onSlotChange.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("slotchange", this.boundOnSlotChange);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("slotchange", this.boundOnSlotChange), this.accordions.forEach((t) => {
+      t.removeEventListener("dds-opened", this.boundOnAccordionChange);
+    });
+  }
+  firstUpdated(t) {
+    this.setupAccordions();
+  }
+  onSlotChange() {
+    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);
+    });
+  }
+  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");
+    });
+  }
+  render() {
+    return u`
+      <div
+        part="base"
+        class=${l("accordion-group", `accordion-group--${this.variant}`)}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+s.tagName = "dap-ds-accordion-group", s.styles = f(g);
+let n = s;
+a([
+  p({ selector: "dap-ds-accordion" })
+], n.prototype, "accordions");
+a([
+  h({ type: String })
+], n.prototype, "autoClose");
+a([
+  h({ type: String })
+], n.prototype, "variant");
+export {
+  n as default
+};
+//# sourceMappingURL=accordion-group.component.js.map

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

@@ -0,0 +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;"}

package/dist/components/accordion-group/accordion-group.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSAccordionGroup } from './accordion-group.component.js';
-export * from './accordion-group.component.js';
+import { default as DapDSAccordionGroup } from './accordion-group.component';
+export * from './accordion-group.component';
 export default DapDSAccordionGroup;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -0,0 +1,6 @@
+import o from "./accordion-group.component.js";
+o.define();
+export {
+  o as default
+};
+//# sourceMappingURL=accordion-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-group.js","sources":["../../../src/components/accordion-group/accordion-group.ts"],"sourcesContent":["import DapDSAccordionGroup from './accordion-group.component'\n\nexport * from './accordion-group.component'\nexport default DapDSAccordionGroup\n\nDapDSAccordionGroup.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-accordion-group': DapDSAccordionGroup\n  }\n}\n"],"names":["DapDSAccordionGroup"],"mappings":";AAKAA,EAAoB,OAAO;"}

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

@@ -0,0 +1,5 @@
+const r = ":host{--dds-accordion-group-spacing: var(--dds-spacing-300);--dds-accordion-group-border: var(--dds-border-width-base) solid var(--dds-border-neutral-divider);--dds-accordion-group-border-radius: var(--dds-radius-base);--dds-accordion-group-background: transparent}.accordion-group{display:flex;flex-direction:column;width:100%;gap:var(--dds-accordion-group-spacing)}.accordion-group--collapsed{border:var(--dds-accordion-group-border);border-radius:var(--dds-accordion-group-border-radius);gap:0;background:var(--dds-accordion-group-background)}.accordion-group--clean,.accordion-group--clean-collapsed{border-radius:var(--dds-accordion-group-border-radius);gap:0;background:var(--dds-accordion-group-background)}";
+export {
+  r as default
+};
+//# sourceMappingURL=accordion-group.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-group.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/anchor-heading/anchor-heading.component.d.ts

@@ -1,4 +1,5 @@
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as DapDSLink } from '../link/link.component';
 import { TypographyVariant } from '../typography/typography.component';
 export type HeadingVariant = Extract<TypographyVariant, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
 /**
@@ -21,6 +22,10 @@ export type HeadingVariant = Extract<TypographyVariant, 'h1' | 'h2' | 'h3' | 'h4
  * @cssproperty --dds-anchor-link-transition - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out)
  */
 export default class DapDSAnchorHeading extends DdsElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-link': typeof DapDSLink;
+    };
     variant: HeadingVariant;
     label: string;
     static readonly styles: import('lit').CSSResult[];

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

@@ -0,0 +1,64 @@
+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 { 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 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;
+};
+const r = class r extends k {
+  createRenderRoot() {
+    return b(this), this;
+  }
+  get elementId() {
+    return this.id ? this.id : $(this.label);
+  }
+  get anchorTitle() {
+    return `Link to ${this.label}`;
+  }
+  render() {
+    return f`
+    <${n(this.variant)}
+      id=${this.elementId}
+      part="base"
+      class=${d(c, { [`typography-${this.variant}`]: this.variant })}
+    >
+      ${this.label}
+      <dap-ds-link
+        part="link"
+        exportparts="base: link-base, text: link-text"
+        class="dds-anchor__link"
+        href=${`#${this.elementId}`}
+        aria-label=${this.anchorTitle}
+        title=${this.anchorTitle}>
+        &#8203;
+      </dap-ds-link>
+    </${n(this.variant)}>
+  `;
+  }
+};
+r.tagName = "dap-ds-anchor-heading", r.dependencies = {
+  "dap-ds-link": u
+}, r.styles = [p(y), p(v)];
+let e = r;
+h([
+  m()
+], e.prototype, "variant");
+h([
+  m()
+], e.prototype, "label");
+export {
+  e as default
+};
+//# sourceMappingURL=anchor-heading.component.js.map

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

@@ -0,0 +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;"}

package/dist/components/anchor-heading/anchor-heading.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSAnchorHeading } from './anchor-heading.component.js';
-export * from './anchor-heading.component.js';
+import { default as DapDSAnchorHeading } from './anchor-heading.component';
+export * from './anchor-heading.component';
 export default DapDSAnchorHeading;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -0,0 +1,6 @@
+import e from "./anchor-heading.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=anchor-heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-heading.js","sources":["../../../src/components/anchor-heading/anchor-heading.ts"],"sourcesContent":["import DapDSAnchorHeading from './anchor-heading.component'\n\nexport * from './anchor-heading.component'\nexport default DapDSAnchorHeading\n\nDapDSAnchorHeading.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-anchor-heading': DapDSAnchorHeading\n  }\n}\n"],"names":["DapDSAnchorHeading"],"mappings":";AAKAA,EAAmB,OAAO;"}

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

@@ -0,0 +1,5 @@
+const o = ':host{--dds-anchor-link-color: var(--dds-color-primary);--dds-anchor-link-opacity: 0;--dds-anchor-link-hover-opacity: 1;--dds-anchor-link-transition: opacity .2s ease-in-out}.gds-anchor:hover>.gds-anchor__link::part(base){opacity:var(--dds-anchor-link-hover-opacity)}.gds-anchor__link::part(base){transition:var(--dds-anchor-link-transition);opacity:var(--dds-anchor-link-opacity);color:var(--dds-anchor-link-color);user-select:none}.gds-anchor__link::part(base):before{content:"#"}';
+export {
+  o as default
+};
+//# sourceMappingURL=anchor-heading.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-heading.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}