dap-design-system 0.60.2 → 0.61.0

package/dist/components/link/link.component.js

@@ -0,0 +1,127 @@
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as c } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { state as k } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as f } from "../../node_modules/lit-html/static.js";
+import "../../localization/localization.js";
+import { DdsElement as u } from "../../internal/dds-hu-element.js";
+import g from "./_styles/link.scss.js";
+import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var $ = Object.defineProperty, i = (h, t, e, l) => {
+  for (var o = void 0, n = h.length - 1, d; n >= 0; n--)
+    (d = h[n]) && (o = d(t, e, o) || o);
+  return o && $(t, e, o), o;
+};
+const a = class a extends u {
+  constructor() {
+    super(...arguments), this.variant = "brand", this.target = "_self", this.href = "#", this.disabled = !1, this.rel = "noreferrer noopener", this.download = !1, this.hasLink = !1, this._handleLinkSlotChange = (t) => {
+      const e = t.target;
+      if (e) {
+        const l = e.assignedElements();
+        this.hasLink = l.length > 0, l.forEach((o) => o.setAttribute("tabindex", "-1"));
+      }
+    };
+  }
+  _getLinkElement() {
+    var l;
+    const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector(
+      'slot[name="link"]'
+    );
+    if (!t) return null;
+    const e = t.assignedElements();
+    return e.length > 0 ? e[0] : null;
+  }
+  handleClick(t) {
+    if (this.disabled) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    if (this.hasLink) {
+      t.preventDefault();
+      const e = this._getLinkElement();
+      e && e.click(), this.emit("dds-click", t);
+      return;
+    }
+    this.href || this.emit("dds-click", t);
+  }
+  focus() {
+    var t, e;
+    this.disabled || (e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[part="base"]')) == null || e.focus();
+  }
+  render() {
+    var t, e;
+    return f`
+      <a
+        part="base"
+        .disabled=${this.disabled}
+        aria-label=${p((t = this.ariaLabel) != null ? t : "")}
+        target=${this.target}
+        href=${this.href}
+        ?download=${this.download}
+        rel=${p(this.target ? this.rel : void 0)}
+        class=${m(
+      "link",
+      `link--${this.size}`,
+      { "link--bold": this.bold },
+      { "link--no-under-line": this.noUnderline },
+      { "link--disabled": this.disabled },
+      `link--${this.variant}`
+    )}
+        @click=${this.handleClick}>
+        <span part="text" class="link__text">
+          <slot></slot>
+        </span>
+        ${this.target === "_blank" ? f`<span class="sr-only">
+              ${(e = this.targetBlankText) != null ? e : y("opensInNewTab")}</span
+            >` : c}
+      </a>
+      <!-- Link slot: visually hidden, for SPA router links (e.g. Next.js Link) -->
+      <div class="link__link-wrapper" aria-hidden="true">
+        <slot name="link" @slotchange=${this._handleLinkSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+a.tagName = "dap-ds-link", a.styles = b(g);
+let s = a;
+i([
+  r({ reflect: !0 })
+], s.prototype, "size");
+i([
+  r()
+], s.prototype, "variant");
+i([
+  r()
+], s.prototype, "target");
+i([
+  r({ type: Boolean })
+], s.prototype, "bold");
+i([
+  r({ type: Boolean })
+], s.prototype, "noUnderline");
+i([
+  r()
+], s.prototype, "href");
+i([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled");
+i([
+  r({ type: String })
+], s.prototype, "rel");
+i([
+  r({ type: Boolean })
+], s.prototype, "download");
+i([
+  r({ type: String })
+], s.prototype, "targetBlankText");
+i([
+  k()
+], s.prototype, "hasLink");
+export {
+  s as default
+};
+//# sourceMappingURL=link.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.component.js","sources":["../../../src/components/link/link.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { t } from '@/localization/localization'\n\nimport { LinkSize, LinkTarget, LinkVariant } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/link.scss?inline'\n\n/**\n * `dap-ds-link`\n * @summary A link is a reference to a web resource.\n * @element dap-ds-link\n * @title - Link\n *\n * @event {{ event: Event }} dds-click - Emitted when the link is clicked.\n *\n * @slot - The text of the link.\n * @slot link - A router link element (e.g. Next.js Link) used for SPA navigation.\n *   Rendered outside the visible link so it is always accessible to programmatic clicks.\n *\n * @csspart base - The main link container.\n * @csspart text - The text of the link.\n *\n * @cssproperty --dds-link-color - The color of the link text (default: var(--dds-link-enabled)).\n * @cssproperty --dds-link-hover-color - The color of the link text on hover (default: var(--dds-link-hover)).\n * @cssproperty --dds-link-active-color - The color of the link text when active (default: var(--dds-link-pressed)).\n * @cssproperty --dds-link-visited-color - The color of the visited link text (default: var(--dds-link-pressed)).\n * @cssproperty --dds-link-font-size - The font size of the link text (default: var(--dds-font-base)).\n * @cssproperty --dds-link-line-height - The line height of the link text (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-font-weight - The font weight of the link text (default: var(--dds-font-weight-medium)).\n * @cssproperty --dds-link-text-decoration - The text decoration of the link (default: underline).\n *\n * @cssproperty --dds-link-neutral-color - The color of the neutral variant link (default: var(--dds-link-neutral-enabled)).\n * @cssproperty --dds-link-neutral-hover-color - The hover color of the neutral variant link (default: var(--dds-link-neutral-hover)).\n * @cssproperty --dds-link-neutral-active-color - The active color of the neutral variant link (default: var(--dds-link-neutral-pressed)).\n * @cssproperty --dds-link-neutral-visited-color - The visited color of the neutral variant link (default: var(--dds-link-neutral-pressed)).\n *\n * @cssproperty --dds-link-brand-color - The color of the brand variant link (default: var(--dds-link-enabled)).\n * @cssproperty --dds-link-brand-hover-color - The hover color of the brand variant link (default: var(--dds-link-hover)).\n * @cssproperty --dds-link-brand-active-color - The active color of the brand variant link (default: var(--dds-link-pressed)).\n * @cssproperty --dds-link-brand-visited-color - The visited color of the brand variant link (default: var(--dds-link-pressed)).\n *\n * @cssproperty --dds-link-inverted-color - The color of the inverted variant link (default: var(--dds-link-inverted-enabled)).\n * @cssproperty --dds-link-inverted-hover-color - The hover color of the inverted variant link (default: var(--dds-link-inverted-hover)).\n * @cssproperty --dds-link-inverted-active-color - The active color of the inverted variant link (default: var(--dds-link-inverted-pressed)).\n * @cssproperty --dds-link-inverted-visited-color - The visited color of the inverted variant link (default: var(--dds-link-inverted-visited)).\n *\n * @cssproperty --dds-link-warning-color - The color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)).\n * @cssproperty --dds-link-warning-hover-color - The hover color of the warning variant link (default: var(--dds-banner-action-inverted-hover)).\n * @cssproperty --dds-link-warning-active-color - The active color of the warning variant link (default: var(--dds-banner-action-inverted-pressed)).\n * @cssproperty --dds-link-warning-visited-color - The visited color of the warning variant link (default: var(--dds-banner-action-inverted-enabled)).\n *\n * @cssproperty --dds-link-disabled-color - The color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-hover-color - The hover color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-active-color - The active color of the disabled link (default: var(--dds-text-neutral-disabled)).\n * @cssproperty --dds-link-disabled-visited-color - The visited color of the disabled link (default: var(--dds-text-neutral-disabled)).\n *\n * @cssproperty --dds-link-lg-font-size - The font size of the large link (default: var(--dds-font-lg)).\n * @cssproperty --dds-link-lg-line-height - The line height of the large link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-md-font-size - The font size of the medium link (default: var(--dds-font-base)).\n * @cssproperty --dds-link-md-line-height - The line height of the medium link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-sm-font-size - The font size of the small link (default: var(--dds-font-sm)).\n * @cssproperty --dds-link-sm-line-height - The line height of the small link (default: var(--dds-font-line-height-xlarge)).\n * @cssproperty --dds-link-xs-font-size - The font size of the extra small link (default: var(--dds-font-xs)).\n * @cssproperty --dds-link-xs-line-height - The line height of the extra small link (default: var(--dds-font-line-height-xlarge)).\n *\n * @cssproperty --dds-link-normal-font-weight - The font weight of the normal link (default: var(--dds-font-weight-medium)).\n * @cssproperty --dds-link-bold-font-weight - The font weight of the bold link (default: var(--dds-font-weight-bold)).\n *\n * @cssproperty --dds-link-no-underline-text-decoration - The text decoration when underline is removed (default: none).\n */\nexport default class DapDSLink extends DdsElement {\n  static tagName = 'dap-ds-link'\n\n  /** The size of the link\n   * @type {'lg' | 'md' | 'sm' | 'xs'}\n   */\n  @property({ reflect: true }) size?: LinkSize\n\n  /** The theme of the link\n   * @type {'neutral' | 'brand' | 'inverted' | 'warning'}\n   */\n  @property() variant: LinkVariant = 'brand'\n\n  /** The target of the link.\n   * @type {'_blank' | '_self' | '_parent' | '_top'}\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** Bold link style */\n  @property({ type: Boolean }) bold: boolean\n\n  /** Removes underline style */\n  @property({ type: Boolean }) noUnderline: boolean\n\n  /** The href / URL of the link */\n  @property() href: string = '#'\n\n  /** Disabled state of the link */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** The rel of the link */\n  @property({ type: String }) rel = 'noreferrer noopener'\n\n  /** The download attribute of the link */\n  @property({ type: Boolean }) download = false\n\n  /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */\n  @property({ type: String }) targetBlankText: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  @state() private hasLink = false\n\n  private _getLinkElement(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector(\n      'slot[name=\"link\"]',\n    ) as HTMLSlotElement\n    if (!slot) return null\n    const elements = slot.assignedElements()\n    return elements.length > 0 ? (elements[0] as HTMLElement) : null\n  }\n\n  private _handleLinkSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement\n    if (slot) {\n      const elements = slot.assignedElements()\n      this.hasLink = elements.length > 0\n      // Remove link element from tab order — the visible <a> is the tab stop\n      elements.forEach(el => el.setAttribute('tabindex', '-1'))\n    }\n  }\n\n  private handleClick(event: Event) {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    if (this.hasLink) {\n      event.preventDefault()\n      const linkEl = this._getLinkElement()\n      if (linkEl) {\n        linkEl.click()\n      }\n      this.emit('dds-click', event)\n      return\n    }\n\n    if (!this.href) {\n      this.emit('dds-click', event)\n    }\n  }\n\n  override focus() {\n    if (!this.disabled) {\n      ;(this.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement)?.focus()\n    }\n  }\n\n  render() {\n    return html`\n      <a\n        part=\"base\"\n        .disabled=${this.disabled}\n        aria-label=${ifDefined(this.ariaLabel ?? '')}\n        target=${this.target}\n        href=${this.href}\n        ?download=${this.download}\n        rel=${ifDefined(this.target ? this.rel : undefined)}\n        class=${clsx(\n          'link',\n          `link--${this.size}`,\n          { 'link--bold': this.bold },\n          { 'link--no-under-line': this.noUnderline },\n          { 'link--disabled': this.disabled },\n          `link--${this.variant}`,\n        )}\n        @click=${this.handleClick}>\n        <span part=\"text\" class=\"link__text\">\n          <slot></slot>\n        </span>\n        ${this.target === '_blank'\n          ? html`<span class=\"sr-only\">\n              ${this.targetBlankText ?? t('opensInNewTab')}</span\n            >`\n          : nothing}\n      </a>\n      <!-- Link slot: visually hidden, for SPA router links (e.g. Next.js Link) -->\n      <div class=\"link__link-wrapper\" aria-hidden=\"true\">\n        <slot name=\"link\" @slotchange=${this._handleLinkSlotChange}></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSLink","DdsElement","e","slot","elements","el","_a","event","linkEl","_b","html","ifDefined","clsx","t","nothing","unsafeCSS","styles","DapDSLink","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/link/link.d.ts

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

package/dist/components/link/link.js

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

package/dist/components/link/link.js.map

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

package/dist/components/list-item/list-item.component.d.ts

@@ -1,6 +1,9 @@
 import { PropertyValueMap } from 'lit';
 import { Alignment, BackgroundShade, LinkTarget, ListItemStatus, ListItemVariant } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element';
+import { default as DapDSCard } from '../card/card.component';
+import { default as DapDSCardContent } from '../card/card-content.component';
+import { default as DapDSIcon } from '../icon/icon.component';
 /**
  * `dap-ds-list-item` is a custom banner component.
  * @element dap-ds-list-item
@@ -49,6 +52,12 @@ import { DdsElement } from '../../internal/dds-hu-element';
  *
  */
 export default class DapDSListItem extends DdsElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-icon': typeof DapDSIcon;
+        'dap-ds-card': typeof DapDSCard;
+        'dap-ds-card-content': typeof DapDSCardContent;
+    };
     private readonly actionSlot;
     private readonly actionContainer;
     /**

package/dist/components/list-item/list-item.component.js

@@ -0,0 +1,193 @@
+import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as d } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { query as f } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as _ } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { ifDefined as y } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as a } from "../../node_modules/lit-html/static.js";
+import { DdsElement as $ } from "../../internal/dds-hu-element.js";
+import b from "../card/card.component.js";
+import g from "../card/card-content.component.js";
+import v from "../icon/icon.component.js";
+import u from "./list-item.scss.js";
+import { unsafeCSS as k } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var C = Object.defineProperty, i = (m, n, p, o) => {
+  for (var r = void 0, s = m.length - 1, h; s >= 0; s--)
+    (h = m[s]) && (r = h(n, p, r) || r);
+  return r && C(n, p, r), r;
+};
+const l = class l extends $ {
+  constructor() {
+    super(...arguments), this.variant = "info", this.shade = "base", this.status = "neutral", this.alignment = "horizontal", this.target = "_self", this.rel = "noreferrer noopener", this.renderAs = "a", this.getIcon = (n, p, o, r) => {
+      let s;
+      if (n)
+        return a`
+        <dap-ds-icon
+          class=${c("list-item__icon", {
+          [`list-item__icon--${o}`]: o
+        })}
+          name="${n}"></dap-ds-icon>
+      `;
+      if (p === "number")
+        return a`
+        <div
+          class=${c("list-item__icon", {
+          [`list-item__icon--${o}`]: o
+        })}>
+          ${r}
+        </div>
+      `;
+      switch (p) {
+        case "info":
+          s = "lightbulb-fill";
+          break;
+        case "pass":
+          s = "checkbox-circle-fill";
+          break;
+        case "fail":
+          s = "close-circle-fill";
+          break;
+        case "notapplicable":
+          s = "forbid-fill";
+          break;
+        case "empty":
+          s = "checkbox-blank-circle-line";
+          break;
+        default:
+          s = "lightbulb-fill";
+          break;
+      }
+      return a`
+      <dap-ds-icon
+        class=${c("list-item__icon", {
+        [`list-item__icon--${o}`]: o
+      })}
+        name="${s}"></dap-ds-icon>
+    `;
+    };
+  }
+  firstUpdated(n) {
+    this.actionSlot && !this.actionSlot.length && this.actionContainer && (this.actionContainer.style.display = "none");
+  }
+  render() {
+    return a`
+      <dap-ds-card
+        noBorder
+        ?interactive=${this.interactive}
+        renderAs=${this.renderAs}
+        target=${this.target}
+        href=${y(this.href)}
+        rel=${this.target}
+        ?noPadding=${this.noPadding}
+        part="base"
+        exportparts="base:list-item-base"
+        class=${c(
+      "list-item",
+      `list-item--${this.variant}`,
+      `list-item--${this.status}`,
+      `list-item--${this.shade}`,
+      `list-item--${this.alignment}`
+    )}>
+        <dap-ds-card-content spacing="none" exportparts="base:card-base">
+          <div class=${c("list-item__container")} part="container">
+            ${this.noIcon ? d : a`<div class="list-item__icon" part="icon-container">
+                  <slot part="icon" name="icon">
+                    ${this.getIcon(
+      this.icon,
+      this.variant,
+      this.status,
+      this.number
+    )}
+                  </slot>
+                </div>`}
+            <div class=${c("list-item__content")}>
+              ${this.title ? a`<span
+                    part="title"
+                    class="list-item__title"
+                    part="title-container">
+                    <slot name="title">${this.title}</slot>
+                  </span>` : d}
+              <span
+                part="description"
+                class="list-item__description"
+                part="description-container">
+                <slot></slot>
+              </span>
+              <span
+                part="actions"
+                class="list-item__actions"
+                part="actions-container">
+                <slot name="actions" part="actions"></slot>
+              </span>
+            </div>
+            ${this.interactive ? a`<div
+                  class="list-item__iteractive-indicator"
+                  part="iteractive-indicator-container">
+                  <dap-ds-icon name="arrow-right-l-line"></dap-ds-icon>
+                </div>` : d}
+          </div>
+        </dap-ds-card-content>
+      </dap-ds-card>
+    `;
+  }
+};
+l.tagName = "dap-ds-list-item", l.dependencies = {
+  "dap-ds-icon": v,
+  "dap-ds-card": b,
+  "dap-ds-card-content": g
+}, l.styles = k(u);
+let t = l;
+i([
+  _({ slot: "actions" })
+], t.prototype, "actionSlot");
+i([
+  f(".list-item__actions")
+], t.prototype, "actionContainer");
+i([
+  e()
+], t.prototype, "variant");
+i([
+  e()
+], t.prototype, "shade");
+i([
+  e()
+], t.prototype, "status");
+i([
+  e()
+], t.prototype, "alignment");
+i([
+  e()
+], t.prototype, "title");
+i([
+  e()
+], t.prototype, "icon");
+i([
+  e({ type: Number })
+], t.prototype, "number");
+i([
+  e({ type: Boolean })
+], t.prototype, "interactive");
+i([
+  e()
+], t.prototype, "target");
+i([
+  e()
+], t.prototype, "href");
+i([
+  e()
+], t.prototype, "rel");
+i([
+  e({ type: Boolean })
+], t.prototype, "noIcon");
+i([
+  e({ type: Boolean })
+], t.prototype, "noPadding");
+i([
+  e({ type: String })
+], t.prototype, "renderAs");
+export {
+  t as default
+};
+//# sourceMappingURL=list-item.component.js.map

package/dist/components/list-item/list-item.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.component.js","sources":["../../../src/components/list-item/list-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  Alignment,\n  BackgroundShade,\n  LinkTarget,\n  ListItemStatus,\n  ListItemVariant,\n} from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSCard from '../card/card.component'\nimport DapDSCardContent from '../card/card-content.component'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './list-item.scss?inline'\n\n/**\n * `dap-ds-list-item` is a custom banner component.\n * @element dap-ds-list-item\n * @summary A list\n * @title - List item\n *\n * @slot - The content of the list item.\n * @slot icon - The icon of the list item.\n * @slot title - The title of the list item.\n * @slot actions - The actions of the list item.\n *\n * @csspart base - The main list item container.\n * @csspart icon - The icon of the list item.\n * @csspart title - The title of the list item.\n * @csspart description - The description of the list item.\n * @csspart container - The container of the list item.\n * @csspart list-item-base - The base list item container.\n * @csspart icon-container - The container of the icon.\n * @csspart title-container - The container of the title.\n * @csspart description-container - The container of the description.\n * @csspart actions-container - The container of the actions.\n * @csspart iteractive-indicator-container - The container of the interactive indicator.\n *\n * @cssproperty --dds-list-item-gap - Gap between list item elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-content-gap - Gap between content elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-horizontal-gap - Gap for horizontal alignment (default: var(--dds-spacing-300))\n * @cssproperty --dds-list-item-vertical-gap - Gap for vertical alignment (default: var(--dds-spacing-200))\n * @cssproperty --dds-list-item-icon-size - Size of the icon (default: var(--dds-spacing-600))\n * @cssproperty --dds-list-item-number-size - Size of the number icon (default: 20px)\n * @cssproperty --dds-list-item-actions-gap - Gap between action elements (default: var(--dds-spacing-400))\n * @cssproperty --dds-list-item-actions-padding - Padding for the actions container (default: var(--dds-spacing-100))\n *\n * @cssproperty --dds-list-item-background-base - Background color for base shade (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-list-item-background-subtle - Background color for subtle shade (default: var(--dds-background-neutral-subtle))\n * @cssproperty --dds-list-item-background-medium - Background color for medium shade (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-list-item-background-strong - Background color for strong shade (default: var(--dds-background-neutral-strong))\n *\n * @cssproperty --dds-list-item-icon-brand - Color for brand icon (default: var(--dds-icon-brand-subtle))\n * @cssproperty --dds-list-item-icon-neutral - Color for neutral icon (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-list-item-icon-positive - Color for positive icon (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-list-item-icon-negative - Color for negative icon (default: var(--dds-icon-negative-subtle))\n *\n * @cssproperty --dds-list-item-title-color - Title text color (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-list-item-description-color - Description text color (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-list-item-number-text-color - Number text color (default: var(--dds-text-neutral-inverted))\n *\n */\nexport default class DapDSListItem extends DdsElement {\n  static tagName = 'dap-ds-list-item'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-card': DapDSCard,\n    'dap-ds-card-content': DapDSCardContent,\n  }\n\n  @queryAssignedElements({ slot: 'actions' })\n  private readonly actionSlot: HTMLElement[]\n  @query('.list-item__actions') private readonly actionContainer: HTMLElement\n\n  /**\n   * The variant of the list item.\n   * @type {'info' | 'pass' | 'fail' | 'notapplicable' | 'empty' | 'number'}\n   */\n  @property() variant: ListItemVariant = 'info'\n\n  /**\n   * The background strongness of the list item.\n   * @type {'none' | 'subtle' | 'base' | 'medium' | 'strong'}\n   */\n  @property() shade: BackgroundShade = 'base'\n\n  /**\n   * The status of the list item.\n   * @type {'transparent' | 'brand' | 'neutral' | 'positive' | 'negative'}\n   */\n  @property() status: ListItemStatus = 'neutral'\n\n  /**\n   * The alignment of the list item.\n   * @type {'horizontal' | 'vertical'}\n   */\n  @property() alignment: Alignment = 'horizontal'\n\n  /**\n   * The title of the list item.\n   */\n  @property() title: string\n\n  /**\n   * The icon of the list item. This is an icon name from the built in icons.\n   */\n  @property() icon: string\n\n  /**\n   * The number of the list item. Only used when variant is 'number'.\n   */\n  @property({ type: Number }) number: number\n\n  /**\n   * Whether the list item is interactive. Generates an anchor tag.\n   */\n  @property({ type: Boolean }) interactive: boolean\n\n  /** The link target of the list item when interactive.\n   * @type { '_blank' | '_self' | '_parent' | '_top' }\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** The href of the list item when interactive */\n  @property() href: string\n\n  /** The rel of the list item when interactive */\n  @property() rel = 'noreferrer noopener'\n\n  /**\n   * Whether the list item has an icon.\n   */\n  @property({ type: Boolean }) noIcon: boolean\n\n  /**\n   * Whether the list item has no padding.\n   */\n  @property({ type: Boolean }) noPadding: boolean\n\n  /**\n   * The render as type of the list item, only applicable when interactive.\n   * @type {'a' | 'button'}\n   */\n  @property({ type: String }) renderAs: 'a' | 'button' = 'a'\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    if (this.actionSlot && !this.actionSlot.length && this.actionContainer) {\n      this.actionContainer.style.display = 'none'\n    }\n  }\n\n  private readonly getIcon = (\n    icon: string,\n    variant: ListItemVariant,\n    status: ListItemStatus,\n    number?: number,\n  ) => {\n    let staticIcon: string\n\n    if (icon) {\n      return html`\n        <dap-ds-icon\n          class=${clsx('list-item__icon', {\n            [`list-item__icon--${status}`]: status,\n          })}\n          name=\"${icon}\"></dap-ds-icon>\n      `\n    }\n\n    if (variant === 'number') {\n      return html`\n        <div\n          class=${clsx('list-item__icon', {\n            [`list-item__icon--${status}`]: status,\n          })}>\n          ${number}\n        </div>\n      `\n    }\n\n    switch (variant) {\n      case 'info':\n        staticIcon = 'lightbulb-fill'\n        break\n      case 'pass':\n        staticIcon = 'checkbox-circle-fill'\n        break\n      case 'fail':\n        staticIcon = 'close-circle-fill'\n        break\n      case 'notapplicable':\n        staticIcon = 'forbid-fill'\n        break\n      case 'empty':\n        staticIcon = 'checkbox-blank-circle-line'\n        break\n      default:\n        staticIcon = 'lightbulb-fill'\n        break\n    }\n\n    return html`\n      <dap-ds-icon\n        class=${clsx('list-item__icon', {\n          [`list-item__icon--${status}`]: status,\n        })}\n        name=\"${staticIcon}\"></dap-ds-icon>\n    `\n  }\n\n  render() {\n    return html`\n      <dap-ds-card\n        noBorder\n        ?interactive=${this.interactive}\n        renderAs=${this.renderAs}\n        target=${this.target}\n        href=${ifDefined(this.href)}\n        rel=${this.target}\n        ?noPadding=${this.noPadding}\n        part=\"base\"\n        exportparts=\"base:list-item-base\"\n        class=${clsx(\n          'list-item',\n          `list-item--${this.variant}`,\n          `list-item--${this.status}`,\n          `list-item--${this.shade}`,\n          `list-item--${this.alignment}`,\n        )}>\n        <dap-ds-card-content spacing=\"none\" exportparts=\"base:card-base\">\n          <div class=${clsx('list-item__container')} part=\"container\">\n            ${!this.noIcon\n              ? html`<div class=\"list-item__icon\" part=\"icon-container\">\n                  <slot part=\"icon\" name=\"icon\">\n                    ${this.getIcon(\n                      this.icon,\n                      this.variant,\n                      this.status,\n                      this.number,\n                    )}\n                  </slot>\n                </div>`\n              : nothing}\n            <div class=${clsx('list-item__content')}>\n              ${this.title\n                ? html`<span\n                    part=\"title\"\n                    class=\"list-item__title\"\n                    part=\"title-container\">\n                    <slot name=\"title\">${this.title}</slot>\n                  </span>`\n                : nothing}\n              <span\n                part=\"description\"\n                class=\"list-item__description\"\n                part=\"description-container\">\n                <slot></slot>\n              </span>\n              <span\n                part=\"actions\"\n                class=\"list-item__actions\"\n                part=\"actions-container\">\n                <slot name=\"actions\" part=\"actions\"></slot>\n              </span>\n            </div>\n            ${this.interactive\n              ? html`<div\n                  class=\"list-item__iteractive-indicator\"\n                  part=\"iteractive-indicator-container\">\n                  <dap-ds-icon name=\"arrow-right-l-line\"></dap-ds-icon>\n                </div>`\n              : nothing}\n          </div>\n        </dap-ds-card-content>\n      </dap-ds-card>\n    `\n  }\n}\n"],"names":["_DapDSListItem","DdsElement","icon","variant","status","number","staticIcon","html","clsx","_changedProperties","ifDefined","nothing","DapDSIcon","DapDSCard","DapDSCardContent","unsafeCSS","styles","DapDSListItem","__decorateClass","queryAssignedElements","query","property"],"mappings":"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"}

package/dist/components/list-item/list-item.d.ts

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

package/dist/components/list-item/list-item.js

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

package/dist/components/list-item/list-item.js.map

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

package/dist/components/list-item/list-item.scss.js

@@ -0,0 +1,5 @@
+const t = "*,*: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-list-item-gap: var(--dds-spacing-200);--dds-list-item-content-gap: var(--dds-spacing-200);--dds-list-item-horizontal-gap: var(--dds-spacing-300);--dds-list-item-vertical-gap: var(--dds-spacing-200);--dds-list-item-icon-size: var(--dds-spacing-600);--dds-list-item-number-size: 20px;--dds-list-item-actions-gap: var(--dds-spacing-400);--dds-list-item-actions-padding: var(--dds-spacing-100);--dds-card-hover-border-color: var(--dds-border-brand-base);--dds-card-shadow: none;--dds-card-hover-shadow: none;--dds-card-transition-duration: var(--dds-transition-medium);--dds-card-transition-timing: var(--dds-easing-ease-in-out);--dds-list-item-background-base: var(--dds-background-neutral-base);--dds-list-item-background-subtle: var(--dds-background-neutral-subtle);--dds-list-item-background-medium: var(--dds-background-neutral-medium);--dds-list-item-background-strong: var(--dds-background-neutral-strong);--dds-list-item-icon-brand: var(--dds-icon-brand-subtle);--dds-list-item-icon-neutral: var(--dds-icon-neutral-base);--dds-list-item-icon-positive: var(--dds-icon-positive-subtle);--dds-list-item-icon-negative: var(--dds-icon-negative-subtle);--dds-list-item-title-color: var(--dds-text-neutral-strong);--dds-list-item-description-color: var(--dds-text-neutral-base);--dds-list-item-number-text-color: var(--dds-text-neutral-inverted)}.list-item{display:flex;align-items:start;width:100%;gap:var(--dds-list-item-gap);border-radius:var(--dds-radius-base)}.list-item::part(base){width:100%}.list-item--base::part(base){background-color:var(--dds-list-item-background-base)}.list-item--none::part(base){border-radius:0;background-color:transparent}.list-item--subtle::part(base){background-color:var(--dds-list-item-background-subtle)}.list-item--medium::part(base){background-color:var(--dds-list-item-background-medium)}.list-item--strong::part(base){background-color:var(--dds-list-item-background-strong)}.list-item--brand .list-item__icon{color:var(--dds-list-item-icon-brand)}.list-item--neutral .list-item__icon{color:var(--dds-list-item-icon-neutral)}.list-item--positive .list-item__icon{color:var(--dds-list-item-icon-positive)}.list-item--negative .list-item__icon{color:var(--dds-list-item-icon-negative)}.list-item--number .list-item__icon{display:flex;align-items:center;justify-content:center;width:var(--dds-list-item-number-size);min-width:var(--dds-list-item-number-size);height:var(--dds-list-item-number-size);border-radius:999px;color:var(--dds-list-item-number-text-color);font-size:var(--dds-font-xs);font-weight:600}.list-item--number .list-item__icon--neutral{background-color:var(--dds-list-item-icon-neutral)}.list-item--number .list-item__icon--positive{background-color:var(--dds-list-item-icon-positive)}.list-item--number .list-item__icon--negative{background-color:var(--dds-list-item-icon-negative)}.list-item--number .list-item__icon--brand{background-color:var(--dds-list-item-icon-brand)}.list-item__icon-container{flex:0 0 var(--dds-spacing-500)}.list-item__iteractive-indicator{place-self:center flex-end}.list-item--horizontal .list-item__container{display:flex;align-items:flex-start;gap:var(--dds-list-item-horizontal-gap)}.list-item--vertical .list-item__container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--dds-list-item-vertical-gap)}.list-item__icon{min-width:var(--dds-list-item-icon-size);margin-top:1px}.list-item__content{display:flex;flex-direction:column;width:100%;line-height:var(--dds-font-line-height-xlarge);gap:var(--dds-list-item-content-gap)}.list-item__title{color:var(--dds-list-item-title-color);font-size:var(--dds-font-base);font-weight:var(--dds-font-weight-bold)}.list-item__description{color:var(--dds-list-item-description-color);font-size:var(--dds-font-base);font-weight:var(--dds-font-weight-medium)}.list-item__actions{display:flex;padding-top:var(--dds-list-item-actions-padding);font-weight:var(--dds-font-weight-bold);gap:var(--dds-list-item-actions-gap);line-height:150%}dap-ds-card[nopadding] dap-ds-card-content::part(base){padding:0}dap-ds-card-content::part(base){padding:var(--dds-spacing-400)}";
+export {
+  t as default
+};
+//# sourceMappingURL=list-item.scss.js.map

package/dist/components/list-item/list-item.scss.js.map

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

package/dist/components/modal/modal-base-element.d.ts

@@ -74,6 +74,29 @@ export default class ModalBaseElement extends ModalBaseWithSized {
      * close. Accessibility behaviour must not depend on an animation completing.
      */
     private afterTransition;
+    /**
+     * Apply a transform change to the dialog without animating it.
+     *
+     * The dialog animates its entrance with `transform` (`transition: transform ...`),
+     * so any later transform change would try to animate too. Suppressing the
+     * transition for one reflow makes the change instant -- and importantly avoids
+     * the unreliable "transition to `none`" interpolation, which Chrome can leave
+     * pinned at the start value.
+     */
+    private setTransformInstantly;
+    /**
+     * Drop the dialog's transform once it is settled open.
+     *
+     * A settled-open dialog keeps an identity transform (`translate(0, 0)`) for the
+     * entrance animation. Any transform -- even the identity -- makes the dialog a
+     * containing block for `position: fixed` descendants, which clips
+     * `floatingStrategy="fixed"` dropdowns (select / combobox / tooltip) to the
+     * modal instead of letting them escape and overflow it. Removing it (visually a
+     * no-op) frees those popups. Restored in `restoreTransform` before closing.
+     */
+    private dropTransform;
+    /** Undo `dropTransform` so the close animation starts from the on-screen position. */
+    private restoreTransform;
     /** Longest transition duration + delay declared on the dialog, in milliseconds. */
     private transitionDurationMs;
     scrollLock: (open: boolean) => void;