dap-design-system 0.60.2 → 0.61.0

package/dist/components/badge/badge.component.js

@@ -0,0 +1,121 @@
+import { clsx as l } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as p } from "../../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 { html as n } from "../../node_modules/lit-html/static.js";
+import { DdsElement as u } from "../../internal/dds-hu-element.js";
+import { SizedMixin as m } from "../../internal/mixin/sizedMixin.js";
+import f from "../icon/icon.component.js";
+import S from "../stack/stack.component.js";
+import b from "./badge.scss.js";
+import { unsafeCSS as I } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, c = (d, t, e, y) => {
+  for (var i = void 0, r = d.length - 1, h; r >= 0; r--)
+    (h = d[r]) && (i = h(t, e, i) || i);
+  return i && g(t, e, i), i;
+};
+const v = m(u), s = class s extends v {
+  constructor() {
+    super(...arguments), this.type = "neutral", this.live = !1, this._hasSlottedIcon = !1, this._cachedIconSize = 12;
+  }
+  /** Maps effectiveSize from SizedMixin to the badge's two visual sizes (sm | lg). */
+  get badgeSize() {
+    const t = this.effectiveSize;
+    return t === "lg" || t === "md" ? "lg" : "sm";
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.setAccessibilityAttributes(), this._cachedIconSize = this.getIconSize(this.badgeSize), this.setupSlotListeners(), this.updateIconSlot();
+  }
+  updated(t) {
+    super.updated(t), (t.has("size") || t.has("sizeMap")) && (this._cachedIconSize = this.getIconSize(this.badgeSize), this.updateIconSlot()), t.has("live") && this.setAccessibilityAttributes(), t.has("icon") && this.validateIcon();
+  }
+  setAccessibilityAttributes() {
+    this.live ? (this.setAttribute("role", "status"), this.setAttribute("aria-live", "polite")) : (this.removeAttribute("role"), this.removeAttribute("aria-live"));
+  }
+  validateIcon() {
+    this.icon && typeof this.icon == "string" && this.icon.trim() === "" && console.warn("Badge: Empty icon name provided");
+  }
+  setupSlotListeners() {
+    try {
+      if (!this.shadowRoot) return;
+      const t = this.shadowRoot.querySelector(
+        'slot[name="icon"]'
+      );
+      if (!t) return;
+      t.addEventListener("slotchange", () => {
+        this.updateIconSlot(), this.requestUpdate();
+      });
+    } catch (t) {
+      console.warn("Failed to setup slot listeners:", t);
+    }
+  }
+  updateIconSlot() {
+    try {
+      if (!this.shadowRoot) return;
+      const t = this.shadowRoot.querySelector(
+        'slot[name="icon"]'
+      );
+      if (!t) {
+        this._hasSlottedIcon = !1;
+        return;
+      }
+      const e = t.assignedElements();
+      this._hasSlottedIcon = e.length > 0, e.length > 0 && e[0].setAttribute(
+        "staticSize",
+        this._cachedIconSize.toString()
+      );
+    } catch (t) {
+      console.warn("Failed to update icon slot:", t), this._hasSlottedIcon = !1;
+    }
+  }
+  getIconSize(t) {
+    return t === "sm" ? 12 : 16;
+  }
+  renderIcon() {
+    return this.icon ? n`
+        <dap-ds-icon
+          part="icon"
+          exportparts="icon, base:icon-base"
+          name="${this.icon}"
+          staticSize=${this._cachedIconSize}>
+        </dap-ds-icon>
+      ` : n`<slot name="icon" part="icon"></slot>`;
+  }
+  render() {
+    const t = this.icon || this._hasSlottedIcon;
+    return n`
+      <div
+        part="base"
+        class=${l(
+      "badge",
+      `badge--${this.type}`,
+      `badge--${this.badgeSize}`,
+      t && "badge--has-icon"
+    )}>
+        <dap-ds-stack direction="row" spacing="100">
+          ${t ? this.renderIcon() : p}
+          <slot part="content"></slot>
+        </dap-ds-stack>
+      </div>
+    `;
+  }
+};
+s.tagName = "dap-ds-badge", s.dependencies = {
+  "dap-ds-icon": f,
+  "dap-ds-stack": S
+}, s.styles = I(b);
+let o = s;
+c([
+  a()
+], o.prototype, "type");
+c([
+  a()
+], o.prototype, "icon");
+c([
+  a({ type: Boolean })
+], o.prototype, "live");
+export {
+  o as default
+};
+//# sourceMappingURL=badge.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.component.js","sources":["../../../src/components/badge/badge.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSStack from '../stack/stack.component'\nimport styles from './badge.scss?inline'\n\nconst BadgeBaseWithSized = SizedMixin(DdsElement)\n\nexport type BadgeType =\n  | 'neutral'\n  | 'brand'\n  | 'info'\n  | 'positive'\n  | 'warning'\n  | 'negative'\n\nexport type BadgeSize = 'sm' | 'lg'\n\n/**\n * `dap-ds-badge`\n * @summary A badge is a small status descriptor for UI elements.\n * @element dap-ds-badge\n * @title - Badge\n *\n * @property { 'sm' | 'lg' } size - The size of the badge. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the badge.\n * @slot icon - The icon of the badge.\n *\n * @csspart base - The main container of the badge.\n * @csspart icon - The icon of the badge.\n * @csspart content - The content of the badge.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-badge-border-width - The width of the badge's border (default: var(--dds-border-width-base))\n * @cssproperty --dds-badge-border-style - The style of the badge's border (default: solid)\n * @cssproperty --dds-badge-border-radius - The border radius of the badge (default: var(--dds-radius-base))\n * @cssproperty --dds-badge-font-weight - The font weight of the badge text (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-badge-line-height - The line height of the badge text (default: 1.2)\n * @cssproperty --dds-badge-transition - The transition property for the badge (default: all 0.2s ease-in-out)\n *\n * @cssproperty --dds-badge-padding-sm - The padding of the small badge (default: var(--dds-spacing-100) var(--dds-spacing-200))\n * @cssproperty --dds-badge-padding-lg - The padding of the large badge (default: var(--dds-spacing-100) var(--dds-spacing-300))\n * @cssproperty --dds-badge-font-size-sm - The font size of the small badge (default: var(--dds-font-xs))\n * @cssproperty --dds-badge-font-size-lg - The font size of the large badge (default: var(--dds-font-sm))\n *\n * @cssproperty --dds-badge-neutral-border-color - The border color of the neutral badge (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-badge-neutral-background - The background color of the neutral badge (default: var(--dds-background-neutral-medium))\n * @cssproperty --dds-badge-neutral-color - The text color of the neutral badge (default: var(--dds-text-neutral-subtle))\n *\n * @cssproperty --dds-badge-brand-border-color - The border color of the brand badge (default: var(--dds-border-brand-base))\n * @cssproperty --dds-badge-brand-background - The background color of the brand badge (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-badge-brand-color - The text color of the brand badge (default: var(--dds-text-brand-subtle))\n *\n * @cssproperty --dds-badge-info-border-color - The border color of the info badge (default: var(--dds-border-informative-base))\n * @cssproperty --dds-badge-info-background - The background color of the info badge (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-badge-info-color - The text color of the info badge (default: var(--dds-text-informative-subtle))\n *\n * @cssproperty --dds-badge-positive-border-color - The border color of the positive badge (default: var(--dds-border-positive-base))\n * @cssproperty --dds-badge-positive-background - The background color of the positive badge (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-badge-positive-color - The text color of the positive badge (default: var(--dds-text-positive-subtle))\n *\n * @cssproperty --dds-badge-warning-border-color - The border color of the warning badge (default: var(--dds-border-warning-subtle))\n * @cssproperty --dds-badge-warning-background - The background color of the warning badge (default: var(--dds-background-warning-medium))\n * @cssproperty --dds-badge-warning-color - The text color of the warning badge (default: var(--dds-text-warning-subtle))\n *\n * @cssproperty --dds-badge-negative-border-color - The border color of the negative badge (default: var(--dds-border-negative-base))\n * @cssproperty --dds-badge-negative-background - The background color of the negative badge (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-badge-negative-color - The text color of the negative badge (default: var(--dds-text-negative-subtle))\n *\n */\nexport default class DapDSBadge extends BadgeBaseWithSized {\n  static tagName = 'dap-ds-badge'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-stack': DapDSStack,\n  }\n\n  /** The type of the badge\n   * @type { 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative' }\n   */\n  @property() type: BadgeType = 'neutral'\n\n  /** Maps effectiveSize from SizedMixin to the badge's two visual sizes (sm | lg). */\n  private get badgeSize(): BadgeSize {\n    const s = this.effectiveSize\n    return s === 'lg' || s === 'md' ? 'lg' : 'sm'\n  }\n\n  /** The icon of the badge, this is a name of a built in icon */\n  @property() icon?: string\n\n  /** Whether the badge represents dynamic content that should announce changes */\n  @property({ type: Boolean }) live = false\n\n  private _hasSlottedIcon = false\n  private _cachedIconSize = 12\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    this.setAccessibilityAttributes()\n\n    this._cachedIconSize = this.getIconSize(this.badgeSize)\n    this.setupSlotListeners()\n    this.updateIconSlot()\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('size') || _changedProperties.has('sizeMap')) {\n      this._cachedIconSize = this.getIconSize(this.badgeSize)\n      this.updateIconSlot()\n    }\n\n    if (_changedProperties.has('live')) {\n      this.setAccessibilityAttributes()\n    }\n\n    if (_changedProperties.has('icon')) {\n      this.validateIcon()\n    }\n  }\n\n  private setAccessibilityAttributes(): void {\n    if (this.live) {\n      this.setAttribute('role', 'status')\n      this.setAttribute('aria-live', 'polite')\n    } else {\n      this.removeAttribute('role')\n      this.removeAttribute('aria-live')\n    }\n  }\n\n  private validateIcon(): void {\n    if (this.icon && typeof this.icon === 'string' && this.icon.trim() === '') {\n      console.warn('Badge: Empty icon name provided')\n    }\n  }\n\n  private setupSlotListeners(): void {\n    try {\n      if (!this.shadowRoot) return\n\n      const iconSlot = this.shadowRoot.querySelector(\n        'slot[name=\"icon\"]',\n      ) as HTMLSlotElement\n\n      if (!iconSlot) return\n\n      iconSlot.addEventListener('slotchange', () => {\n        this.updateIconSlot()\n        this.requestUpdate()\n      })\n    } catch (error) {\n      console.warn('Failed to setup slot listeners:', error)\n    }\n  }\n\n  private updateIconSlot(): void {\n    try {\n      if (!this.shadowRoot) return\n\n      const iconSlot = this.shadowRoot.querySelector(\n        'slot[name=\"icon\"]',\n      ) as HTMLSlotElement\n\n      if (!iconSlot) {\n        this._hasSlottedIcon = false\n        return\n      }\n\n      const assignedElements = iconSlot.assignedElements()\n      this._hasSlottedIcon = assignedElements.length > 0\n\n      if (assignedElements.length > 0) {\n        assignedElements[0].setAttribute(\n          'staticSize',\n          this._cachedIconSize.toString(),\n        )\n      }\n    } catch (error) {\n      console.warn('Failed to update icon slot:', error)\n      this._hasSlottedIcon = false\n    }\n  }\n\n  private getIconSize(size: BadgeSize): number {\n    return size === 'sm' ? 12 : 16\n  }\n\n  private renderIcon() {\n    if (this.icon) {\n      return html`\n        <dap-ds-icon\n          part=\"icon\"\n          exportparts=\"icon, base:icon-base\"\n          name=\"${this.icon}\"\n          staticSize=${this._cachedIconSize}>\n        </dap-ds-icon>\n      `\n    }\n\n    return html`<slot name=\"icon\" part=\"icon\"></slot>`\n  }\n\n  render() {\n    const hasIcon = this.icon || this._hasSlottedIcon\n\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'badge',\n          `badge--${this.type}`,\n          `badge--${this.badgeSize}`,\n          hasIcon && 'badge--has-icon',\n        )}>\n        <dap-ds-stack direction=\"row\" spacing=\"100\">\n          ${hasIcon ? this.renderIcon() : nothing}\n          <slot part=\"content\"></slot>\n        </dap-ds-stack>\n      </div>\n    `\n  }\n}\n"],"names":["BadgeBaseWithSized","SizedMixin","DdsElement","_DapDSBadge","s","_changedProperties","iconSlot","error","assignedElements","size","html","hasIcon","clsx","nothing","DapDSIcon","DapDSStack","unsafeCSS","styles","DapDSBadge","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;AAWA,MAAMA,IAAqBC,EAAWC,CAAU,GAkE3BC,IAArB,MAAqBA,UAAmBH,EAAmB;AAAA,EAA3D,cAAA;AAAA,UAAA,GAAA,SAAA,GAWgC,KAAA,OAAA,WAYM,KAAA,OAAA,IAEpC,KAAQ,kBAAkB,IAC1B,KAAQ,kBAAkB;AAAA,EAAA;AAAA;AAAA,EAZ1B,IAAY,YAAuB;AACjC,UAAMI,IAAI,KAAK;AACf,WAAOA,MAAM,QAAQA,MAAM,OAAO,OAAO;AAAA,EAAA;AAAA,EAcjC,aACRC,GACM;AACN,UAAM,aAAaA,CAAkB,GACrC,KAAK,2BAA2B,GAEhC,KAAK,kBAAkB,KAAK,YAAY,KAAK,SAAS,GACtD,KAAK,mBAAmB,GACxB,KAAK,eAAe;AAAA,EAAA;AAAA,EAGZ,QACRA,GACM;AACN,UAAM,QAAQA,CAAkB,IAE5BA,EAAmB,IAAI,MAAM,KAAKA,EAAmB,IAAI,SAAS,OACpE,KAAK,kBAAkB,KAAK,YAAY,KAAK,SAAS,GACtD,KAAK,eAAe,IAGlBA,EAAmB,IAAI,MAAM,KAC/B,KAAK,2BAA2B,GAG9BA,EAAmB,IAAI,MAAM,KAC/B,KAAK,aAAa;AAAA,EACpB;AAAA,EAGM,6BAAmC;AACzC,IAAI,KAAK,QACF,KAAA,aAAa,QAAQ,QAAQ,GAC7B,KAAA,aAAa,aAAa,QAAQ,MAEvC,KAAK,gBAAgB,MAAM,GAC3B,KAAK,gBAAgB,WAAW;AAAA,EAClC;AAAA,EAGM,eAAqB;AACvB,IAAA,KAAK,QAAQ,OAAO,KAAK,QAAS,YAAY,KAAK,KAAK,KAAK,MAAM,MACrE,QAAQ,KAAK,iCAAiC;AAAA,EAChD;AAAA,EAGM,qBAA2B;AAC7B,QAAA;AACE,UAAA,CAAC,KAAK,WAAY;AAEhB,YAAAC,IAAW,KAAK,WAAW;AAAA,QAC/B;AAAA,MACF;AAEA,UAAI,CAACA,EAAU;AAEN,MAAAA,EAAA,iBAAiB,cAAc,MAAM;AAC5C,aAAK,eAAe,GACpB,KAAK,cAAc;AAAA,MAAA,CACpB;AAAA,aACMC,GAAO;AACN,cAAA,KAAK,mCAAmCA,CAAK;AAAA,IAAA;AAAA,EACvD;AAAA,EAGM,iBAAuB;AACzB,QAAA;AACE,UAAA,CAAC,KAAK,WAAY;AAEhB,YAAAD,IAAW,KAAK,WAAW;AAAA,QAC/B;AAAA,MACF;AAEA,UAAI,CAACA,GAAU;AACb,aAAK,kBAAkB;AACvB;AAAA,MAAA;AAGI,YAAAE,IAAmBF,EAAS,iBAAiB;AAC9C,WAAA,kBAAkBE,EAAiB,SAAS,GAE7CA,EAAiB,SAAS,KAC5BA,EAAiB,CAAC,EAAE;AAAA,QAClB;AAAA,QACA,KAAK,gBAAgB,SAAS;AAAA,MAChC;AAAA,aAEKD,GAAO;AACN,cAAA,KAAK,+BAA+BA,CAAK,GACjD,KAAK,kBAAkB;AAAA,IAAA;AAAA,EACzB;AAAA,EAGM,YAAYE,GAAyB;AACpC,WAAAA,MAAS,OAAO,KAAK;AAAA,EAAA;AAAA,EAGtB,aAAa;AACnB,WAAI,KAAK,OACAC;AAAAA;AAAAA;AAAAA;AAAAA,kBAIK,KAAK,IAAI;AAAA,uBACJ,KAAK,eAAe;AAAA;AAAA,UAKhCA;AAAAA,EAAA;AAAA,EAGT,SAAS;AACD,UAAAC,IAAU,KAAK,QAAQ,KAAK;AAE3B,WAAAD;AAAAA;AAAAA;AAAAA,gBAGKE;AAAA,MACN;AAAA,MACA,UAAU,KAAK,IAAI;AAAA,MACnB,UAAU,KAAK,SAAS;AAAA,MACxBD,KAAW;AAAA,IAAA,CACZ;AAAA;AAAA,YAEGA,IAAU,KAAK,WAAW,IAAIE,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMjD;AAhKEV,EAAO,UAAU,gBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeW;AAAA,EACf,gBAAgBC;AAClB,GAsBgBZ,EAAA,SAASa,EAAUC,CAAM;AA5B3C,IAAqBC,IAArBf;AAWcgB,EAAA;AAAA,EAAXC,EAAS;AAAA,GAXSF,EAWP,WAAA,MAAA;AASAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GApBSF,EAoBP,WAAA,MAAA;AAGiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAvBRF,EAuBU,WAAA,MAAA;"}

package/dist/components/badge/badge.d.ts

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

package/dist/components/badge/badge.js

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

package/dist/components/badge/badge.js.map

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

package/dist/components/badge/badge.scss.js

@@ -0,0 +1,5 @@
+const d = "*,*: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{display:inline-flex;--dds-badge-border-width: var(--dds-border-width-base);--dds-badge-border-style: solid;--dds-badge-border-radius: var(--dds-radius-base);--dds-badge-font-weight: var(--dds-font-weight-bold);--dds-badge-line-height: 1.2;--dds-badge-transition: all .2s ease-in-out;--dds-badge-padding-sm: var(--dds-spacing-100) var(--dds-spacing-200);--dds-badge-padding-lg: var(--dds-spacing-100) var(--dds-spacing-300);--dds-badge-font-size-sm: var(--dds-font-xs);--dds-badge-font-size-lg: var(--dds-font-sm);--dds-badge-neutral-border-color: var(--dds-border-neutral-base);--dds-badge-neutral-background: var(--dds-background-neutral-medium);--dds-badge-neutral-color: var(--dds-text-neutral-subtle);--dds-badge-brand-border-color: var(--dds-border-brand-base);--dds-badge-brand-background: var(--dds-background-brand-medium);--dds-badge-brand-color: var(--dds-text-brand-subtle);--dds-badge-info-border-color: var(--dds-border-informative-base);--dds-badge-info-background: var(--dds-background-informative-medium);--dds-badge-info-color: var(--dds-text-informative-subtle);--dds-badge-positive-border-color: var(--dds-border-positive-base);--dds-badge-positive-background: var(--dds-background-positive-medium);--dds-badge-positive-color: var(--dds-text-positive-subtle);--dds-badge-warning-border-color: var(--dds-border-warning-subtle);--dds-badge-warning-background: var(--dds-background-warning-medium);--dds-badge-warning-color: var(--dds-text-warning-subtle);--dds-badge-negative-border-color: var(--dds-border-negative-base);--dds-badge-negative-background: var(--dds-background-negative-medium);--dds-badge-negative-color: var(--dds-text-negative-subtle)}.badge{display:inline-flex;align-items:center;transition:var(--dds-badge-transition);border-width:var(--dds-badge-border-width);border-style:var(--dds-badge-border-style);border-radius:var(--dds-badge-border-radius);font-weight:var(--dds-badge-font-weight);line-height:var(--dds-badge-line-height)}.badge--sm{padding:var(--dds-badge-padding-sm);font-size:var(--dds-badge-font-size-sm)}.badge--lg{padding:var(--dds-badge-padding-lg);font-size:var(--dds-badge-font-size-lg)}.badge--neutral{border-color:var(--dds-badge-neutral-border-color);background:var(--dds-badge-neutral-background);color:var(--dds-badge-neutral-color)}.badge--brand{border-color:var(--dds-badge-brand-border-color);background:var(--dds-badge-brand-background);color:var(--dds-badge-brand-color)}.badge--info{border-color:var(--dds-badge-info-border-color);background:var(--dds-badge-info-background);color:var(--dds-badge-info-color)}.badge--positive{border-color:var(--dds-badge-positive-border-color);background:var(--dds-badge-positive-background);color:var(--dds-badge-positive-color)}.badge--warning{border-color:var(--dds-badge-warning-border-color);background:var(--dds-badge-warning-background);color:var(--dds-badge-warning-color)}.badge--negative{border-color:var(--dds-badge-negative-border-color);background:var(--dds-badge-negative-background);color:var(--dds-badge-negative-color)}";
+export {
+  d as default
+};
+//# sourceMappingURL=badge.scss.js.map

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

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

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

@@ -1,5 +1,9 @@
 import { nothing, PropertyValueMap } from 'lit';
 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';
+import { default as DapDSIconButton } from '../icon-button/icon-button.component';
 export type BannerTheme = 'clean' | 'normal';
 export type BannerVariant = 'brand' | 'positive' | 'info' | 'warning' | 'negative';
 /**
@@ -55,6 +59,13 @@ export type BannerVariant = 'brand' | 'positive' | 'info' | 'warning' | 'negativ
  * @cssproperty --dds-banner-negative-action-color - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled))
  */
 export default class DapDSBanner extends DdsElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-card': typeof DapDSCard;
+        'dap-ds-card-content': typeof DapDSCardContent;
+        'dap-ds-icon': typeof DapDSIcon;
+        'dap-ds-icon-button': typeof DapDSIconButton;
+    };
     /** @ignore */
     actionSlot: HTMLElement[];
     /** @ignore */
@@ -76,5 +87,5 @@ export default class DapDSBanner extends DdsElement {
     static readonly styles: import('lit').CSSResult;
     protected firstUpdated(_changedProperties: PropertyValueMap<DapDSBanner> | Map<PropertyKey, unknown>): void;
     private onCloseClick;
-    render(): import('lit-html').TemplateResult | typeof nothing;
+    render(): typeof nothing | import('lit-html').TemplateResult;
 }

package/dist/components/banner/banner.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 f } from "../../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 h } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { queryAssignedElements as b } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { html as r } from "../../node_modules/lit-html/static.js";
+import { translate as u } from "../../node_modules/lit-i18n/src/lit-i18n.js";
+import { DdsElement as v } from "../../internal/dds-hu-element.js";
+import y from "../card/card.component.js";
+import g from "../card/card-content.component.js";
+import _ from "../icon/icon.component.js";
+import C from "../icon-button/icon-button.component.js";
+import S from "./banner.scss.js";
+import { unsafeCSS as $ } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var x = Object.defineProperty, e = (p, i, n, c) => {
+  for (var t = void 0, l = p.length - 1, d; l >= 0; l--)
+    (d = p[l]) && (t = d(i, n, t) || t);
+  return t && x(i, n, t), t;
+};
+const E = {
+  brand: "information-2-fill",
+  info: "information-fill",
+  positive: "checkbox-circle-fill",
+  warning: "alert-fill",
+  negative: "error-warning-fill"
+}, s = class s extends v {
+  constructor() {
+    super(...arguments), this.variant = "brand", this.opened = "true", this.closeButtonLabel = "close", this.closeButtonTestId = "banner-close-button";
+  }
+  firstUpdated(i) {
+    var n, c;
+    (n = this.actionSlot) != null && n.length && ((c = this.actionSlot) != null && c.length && this.variant !== "warning" ? this.actionSlot.forEach((t) => {
+      t.setAttribute("variant", "inverted");
+    }) : this.actionSlot.forEach((t) => {
+      t.setAttribute("variant", "warning");
+    })), this.actionSlot && !this.actionSlot.length && this.actionContainer && (this.actionContainer.style.display = "none");
+  }
+  onCloseClick() {
+    this.emit("dds-close");
+  }
+  render() {
+    var n;
+    const i = E[this.variant];
+    return this.opened === "false" ? f : r`
+      <dap-ds-card size="lg">
+        <dap-ds-card-content
+          class=${m(`banner--${this.variant}`)}
+          part="card-base"
+          spacing="none">
+          <div class=${m("banner", `banner--${this.variant}`)} part="base">
+            <div class="banner__icon-container">
+              ${this.icon || i ? r`<slot part="icon" name="icon">
+                    <dap-ds-icon
+                      part="icon"
+                      exportparts="icon:icon-element, base:icon-base"
+                      class="banner__icon"
+                      aria-hidden="true"
+                      name="${this.icon || i}">
+                    </dap-ds-icon
+                  ></slot>` : r`<slot name="icon" part="icon"></slot>`}
+            </div>
+            <div>
+              <slot class="banner__content"></slot>
+
+              <div class="banner__actions">
+                <slot name="actions" part="actions"></slot>
+              </div>
+            </div>
+
+            ${this.closeable ? r`
+                  <dap-ds-icon-button
+                    class="banner__close"
+                    part="close-button"
+                    data-testid=${this.closeButtonTestId}
+                    exportparts="icon-base:close-icon-element, base:close-icon-base"
+                    variant="inverted"
+                    clean
+                    size="md"
+                    icon="close-line"
+                    part="closebutton"
+                    @click="${this.onCloseClick}"
+                    aria-label=${(n = this.closeButtonLabel) != null ? n : u("close")}>
+                  </dap-ds-icon-button>
+                ` : f}
+          </div>
+        </dap-ds-card-content>
+      </dap-ds-card>
+    `;
+  }
+};
+s.tagName = "dap-ds-banner", s.dependencies = {
+  "dap-ds-card": y,
+  "dap-ds-card-content": g,
+  "dap-ds-icon": _,
+  "dap-ds-icon-button": C
+}, s.styles = $(S);
+let o = s;
+e([
+  b({ slot: "actions" })
+], o.prototype, "actionSlot");
+e([
+  h(".banner__actions")
+], o.prototype, "actionContainer");
+e([
+  a()
+], o.prototype, "variant");
+e([
+  a({ type: Boolean })
+], o.prototype, "closeable");
+e([
+  a({ reflect: !0 })
+], o.prototype, "opened");
+e([
+  a({ type: String })
+], o.prototype, "closeButtonLabel");
+e([
+  a()
+], o.prototype, "closeButtonTestId");
+e([
+  a({ type: String })
+], o.prototype, "icon");
+export {
+  o as default
+};
+//# sourceMappingURL=banner.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.component.js","sources":["../../../src/components/banner/banner.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\nimport { translate } from 'lit-i18n'\n\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 DapDSIconButton from '../icon-button/icon-button.component'\nimport styles from './banner.scss?inline'\n\nexport type BannerTheme = 'clean' | 'normal'\n\nexport type BannerVariant =\n  | 'brand'\n  | 'positive'\n  | 'info'\n  | 'warning'\n  | 'negative'\n\nconst iconNameMap = {\n  brand: 'information-2-fill',\n  info: 'information-fill',\n  positive: 'checkbox-circle-fill',\n  warning: 'alert-fill',\n  negative: 'error-warning-fill',\n}\n\n/**\n * `dap-ds-banner` is a custom banner component.\n * @element dap-ds-banner\n * @summary A banner is a message displayed at the top of the page to provide important information to the user.\n * @title - Banner\n *\n * @event {{ void }} dds-close - Event fired when the banner is closed.\n *\n * @slot - The content of the banner.\n * @slot actions - Actions of banner\n * @slot icon - The icon of the banner.\n *\n * @csspart base - The main banner container.\n * @csspart card-base - The wrapper card container.\n * @csspart icon - The icon of the banner.\n * @csspart icon-element - The icon element of the banner.\n * @csspart icon-base - The base of the icon.\n * @csspart closebutton - The close button of the banner.\n * @csspart close-icon-element - The icon element of the close button.\n * @csspart close-icon-base - The base of the close button icon.\n * @csspart actions - The actions of the banner.\n * @csspart title -  The title of the banner.\n *\n * @cssproperty --dds-banner-gap - The gap between banner elements (default: var(--dds-spacing-200))\n * @cssproperty --dds-banner-line-height - The line height of the banner text (default: var(--dds-font-line-height-xlarge))\n * @cssproperty --dds-banner-transition - The transition property for the banner (default: all 0.2s ease-in-out)\n *\n * @cssproperty --dds-banner-brand-background - The background color of the brand banner (default: var(--dds-banner-background-brand))\n * @cssproperty --dds-banner-brand-icon-color - The color of the brand banner icon (default: var(--dds-banner-icon-brand))\n * @cssproperty --dds-banner-brand-text-color - The text color of the brand banner (default: var(--dds-banner-text-brand))\n * @cssproperty --dds-banner-brand-action-color - The color of the brand banner actions (default: var(--dds-banner-action-enabled))\n *\n * @cssproperty --dds-banner-info-background - The background color of the info banner (default: var(--dds-banner-background-informative))\n * @cssproperty --dds-banner-info-icon-color - The color of the info banner icon (default: var(--dds-banner-icon-informative))\n * @cssproperty --dds-banner-info-text-color - The text color of the info banner (default: var(--dds-banner-text-informative))\n * @cssproperty --dds-banner-info-action-color - The color of the info banner actions (default: var(--dds-banner-action-enabled))\n *\n * @cssproperty --dds-banner-positive-background - The background color of the positive banner (default: var(--dds-banner-background-positive))\n * @cssproperty --dds-banner-positive-icon-color - The color of the positive banner icon (default: var(--dds-banner-icon-positive))\n * @cssproperty --dds-banner-positive-text-color - The text color of the positive banner (default: var(--dds-banner-text-positive))\n * @cssproperty --dds-banner-positive-action-color - The color of the positive banner actions (default: var(--dds-banner-action-enabled))\n *\n * @cssproperty --dds-banner-warning-background - The background color of the warning banner (default: var(--dds-banner-background-warning))\n * @cssproperty --dds-banner-warning-icon-color - The color of the warning banner icon (default: var(--dds-banner-icon-warning))\n * @cssproperty --dds-banner-warning-text-color - The text color of the warning banner (default: var(--dds-banner-text-warning))\n * @cssproperty --dds-banner-warning-action-color - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled))\n *\n * @cssproperty --dds-banner-negative-background - The background color of the negative banner (default: var(--dds-banner-background-negative))\n * @cssproperty --dds-banner-negative-icon-color - The color of the negative banner icon (default: var(--dds-banner-icon-negative))\n * @cssproperty --dds-banner-negative-text-color - The text color of the negative banner (default: var(--dds-banner-text-negative))\n * @cssproperty --dds-banner-negative-action-color - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled))\n */\nexport default class DapDSBanner extends DdsElement {\n  static tagName = 'dap-ds-banner'\n\n  static dependencies = {\n    'dap-ds-card': DapDSCard,\n    'dap-ds-card-content': DapDSCardContent,\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-icon-button': DapDSIconButton,\n  }\n\n  /** @ignore */\n  @queryAssignedElements({ slot: 'actions' }) actionSlot: HTMLElement[]\n  /** @ignore */\n  @query('.banner__actions') actionContainer: HTMLElement\n\n  /** The variant of the banner\n   * @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' }\n   */\n  @property() variant: BannerVariant = 'brand'\n\n  /** Whether the banner is closeable */\n  @property({ type: Boolean }) closeable: boolean\n\n  /** State of the banner. If false banner is hidden */\n  @property({ reflect: true }) opened: string = 'true'\n\n  /** The aria-label for the close button */\n  @property({ type: String })\n  closeButtonLabel = 'close'\n\n  /** `data-testid` for the close button. */\n  @property() closeButtonTestId = 'banner-close-button'\n\n  /** The icon of the banner, this is a name of a built icon icon */\n  @property({ type: String }) icon: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties:\n      | PropertyValueMap<DapDSBanner>\n      | Map<PropertyKey, unknown>,\n  ): void {\n    if (this.actionSlot?.length) {\n      if (this.actionSlot?.length && this.variant !== 'warning') {\n        this.actionSlot.forEach(element => {\n          element.setAttribute('variant', 'inverted')\n        })\n      } else {\n        this.actionSlot.forEach(element => {\n          element.setAttribute('variant', 'warning')\n        })\n      }\n    }\n\n    if (this.actionSlot && !this.actionSlot.length && this.actionContainer) {\n      this.actionContainer.style.display = 'none'\n    }\n  }\n\n  private onCloseClick() {\n    this.emit('dds-close')\n  }\n\n  render() {\n    const icon = iconNameMap[this.variant]\n\n    if (this.opened === 'false') {\n      return nothing\n    }\n    return html`\n      <dap-ds-card size=\"lg\">\n        <dap-ds-card-content\n          class=${clsx(`banner--${this.variant}`)}\n          part=\"card-base\"\n          spacing=\"none\">\n          <div class=${clsx('banner', `banner--${this.variant}`)} part=\"base\">\n            <div class=\"banner__icon-container\">\n              ${this.icon || icon\n                ? html`<slot part=\"icon\" name=\"icon\">\n                    <dap-ds-icon\n                      part=\"icon\"\n                      exportparts=\"icon:icon-element, base:icon-base\"\n                      class=\"banner__icon\"\n                      aria-hidden=\"true\"\n                      name=\"${this.icon || icon}\">\n                    </dap-ds-icon\n                  ></slot>`\n                : html`<slot name=\"icon\" part=\"icon\"></slot>`}\n            </div>\n            <div>\n              <slot class=\"banner__content\"></slot>\n\n              <div class=\"banner__actions\">\n                <slot name=\"actions\" part=\"actions\"></slot>\n              </div>\n            </div>\n\n            ${this.closeable\n              ? html`\n                  <dap-ds-icon-button\n                    class=\"banner__close\"\n                    part=\"close-button\"\n                    data-testid=${this.closeButtonTestId}\n                    exportparts=\"icon-base:close-icon-element, base:close-icon-base\"\n                    variant=\"inverted\"\n                    clean\n                    size=\"md\"\n                    icon=\"close-line\"\n                    part=\"closebutton\"\n                    @click=\"${this.onCloseClick}\"\n                    aria-label=${this.closeButtonLabel ?? translate('close')}>\n                  </dap-ds-icon-button>\n                `\n              : nothing}\n          </div>\n        </dap-ds-card-content>\n      </dap-ds-card>\n    `\n  }\n}\n"],"names":["iconNameMap","_DapDSBanner","DdsElement","_changedProperties","_a","_b","element","icon","nothing","html","clsx","translate","DapDSCard","DapDSCardContent","DapDSIcon","DapDSIconButton","unsafeCSS","styles","DapDSBanner","__decorateClass","queryAssignedElements","query","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,IAAc;AAAA,EAClB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AACZ,GAsDqBC,IAArB,MAAqBA,UAAoBC,EAAW;AAAA,EAApD,cAAA;AAAA,UAAA,GAAA,SAAA,GAkBuC,KAAA,UAAA,SAMS,KAAA,SAAA,QAI3B,KAAA,mBAAA,SAGa,KAAA,oBAAA;AAAA,EAAA;AAAA,EAOtB,aACRC,GAGM;;AACF,KAAAC,IAAA,KAAK,eAAL,QAAAA,EAAiB,YACfC,IAAA,KAAK,eAAL,QAAAA,EAAiB,UAAU,KAAK,YAAY,YACzC,KAAA,WAAW,QAAQ,CAAWC,MAAA;AACzB,MAAAA,EAAA,aAAa,WAAW,UAAU;AAAA,IAAA,CAC3C,IAEI,KAAA,WAAW,QAAQ,CAAWA,MAAA;AACzB,MAAAA,EAAA,aAAa,WAAW,SAAS;AAAA,IAAA,CAC1C,IAID,KAAK,cAAc,CAAC,KAAK,WAAW,UAAU,KAAK,oBAChD,KAAA,gBAAgB,MAAM,UAAU;AAAA,EACvC;AAAA,EAGM,eAAe;AACrB,SAAK,KAAK,WAAW;AAAA,EAAA;AAAA,EAGvB,SAAS;;AACD,UAAAC,IAAOP,EAAY,KAAK,OAAO;AAEjC,WAAA,KAAK,WAAW,UACXQ,IAEFC;AAAAA;AAAAA;AAAAA,kBAGOC,EAAK,WAAW,KAAK,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA,uBAG1BA,EAAK,UAAU,WAAW,KAAK,OAAO,EAAE,CAAC;AAAA;AAAA,gBAEhD,KAAK,QAAQH,IACXE;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,8BAMY,KAAK,QAAQF,CAAI;AAAA;AAAA,8BAG7BE,wCAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAU/C,KAAK,YACHA;AAAAA;AAAAA;AAAAA;AAAAA,kCAIkB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAO1B,KAAK,YAAY;AAAA,kCACdL,IAAA,KAAK,qBAAL,OAAAA,IAAyBO,EAAU,OAAO,CAAC;AAAA;AAAA,oBAG5DH,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvB;AAvHEP,EAAO,UAAU,iBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeW;AAAA,EACf,uBAAuBC;AAAA,EACvB,eAAeC;AAAA,EACf,sBAAsBC;AACxB,GA4BgBd,EAAA,SAASe,EAAUC,CAAM;AApC3C,IAAqBC,IAArBjB;AAW8CkB,EAAA;AAAA,EAA3CC,EAAsB,EAAE,MAAM,UAAW,CAAA;AAAA,GAXvBF,EAWyB,WAAA,YAAA;AAEjBC,EAAA;AAAA,EAA1BE,EAAM,kBAAkB;AAAA,GAbNH,EAaQ,WAAA,iBAAA;AAKfC,EAAA;AAAA,EAAXG,EAAS;AAAA,GAlBSJ,EAkBP,WAAA,SAAA;AAGiBC,EAAA;AAAA,EAA5BG,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GArBRJ,EAqBU,WAAA,WAAA;AAGAC,EAAA;AAAA,EAA5BG,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAxBRJ,EAwBU,WAAA,QAAA;AAI7BC,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA3BPJ,EA4BnB,WAAA,kBAAA;AAGYC,EAAA;AAAA,EAAXG,EAAS;AAAA,GA/BSJ,EA+BP,WAAA,mBAAA;AAGgBC,EAAA;AAAA,EAA3BG,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAlCPJ,EAkCS,WAAA,MAAA;"}

package/dist/components/banner/banner.d.ts

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

package/dist/components/banner/banner.js

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

package/dist/components/banner/banner.js.map

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

package/dist/components/banner/banner.scss.js

@@ -0,0 +1,5 @@
+const n = "*,*: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-banner-gap: var(--dds-spacing-200);--dds-banner-line-height: var(--dds-font-line-height-xlarge);--dds-banner-transition: all .2s ease-in-out;--dds-banner-brand-background: var(--dds-banner-background-brand);--dds-banner-brand-icon-color: var(--dds-banner-icon-brand);--dds-banner-brand-text-color: var(--dds-banner-text-brand);--dds-banner-brand-action-color: var(--dds-banner-action-enabled);--dds-banner-info-background: var(--dds-banner-background-informative);--dds-banner-info-icon-color: var(--dds-banner-icon-informative);--dds-banner-info-text-color: var(--dds-banner-text-informative);--dds-banner-info-action-color: var(--dds-banner-action-enabled);--dds-banner-positive-background: var(--dds-banner-background-positive);--dds-banner-positive-icon-color: var(--dds-banner-icon-positive);--dds-banner-positive-text-color: var(--dds-banner-text-positive);--dds-banner-positive-action-color: var(--dds-banner-action-enabled);--dds-banner-warning-background: var(--dds-banner-background-warning);--dds-banner-warning-icon-color: var(--dds-banner-icon-warning);--dds-banner-warning-text-color: var(--dds-banner-text-warning);--dds-banner-warning-action-color: var(--dds-banner-action-inverted-enabled);--dds-banner-negative-background: var(--dds-banner-background-negative);--dds-banner-negative-icon-color: var(--dds-banner-icon-negative);--dds-banner-negative-text-color: var(--dds-banner-text-negative);--dds-banner-negative-action-color: var(--dds-banner-action-inverted-enabled)}.banner{display:flex;align-items:start;width:100%;gap:var(--dds-banner-gap);transition:var(--dds-banner-transition)}.banner--brand{background:var(--dds-banner-brand-background)}.banner--brand ::slotted(dap-ds-icon),.banner--brand dap-ds-icon::part(base){fill:var(--dds-banner-brand-icon-color);color:var(--dds-banner-brand-icon-color)}.banner--brand .banner__actions,.banner--brand .banner__content{color:var(--dds-banner-brand-text-color);line-height:var(--dds-banner-line-height)}.banner--brand .banner__actions ::slotted(a),.banner--brand .banner__content ::slotted(a){color:var(--dds-banner-brand-text-color)}.banner--brand .banner__actions{color:var(--dds-banner-brand-action-color)}.banner--info{background:var(--dds-banner-info-background)}.banner--info ::slotted(dap-ds-icon),.banner--info dap-ds-icon::part(base){fill:var(--dds-banner-info-icon-color);color:var(--dds-banner-info-icon-color)}.banner--info .banner__actions,.banner--info .banner__content{color:var(--dds-banner-info-text-color);line-height:var(--dds-banner-line-height)}.banner--info .banner__actions ::slotted(a),.banner--info .banner__content ::slotted(a){color:var(--dds-banner-info-text-color)}.banner--info .banner__actions{color:var(--dds-banner-info-action-color)}.banner--positive{background:var(--dds-banner-positive-background)}.banner--positive ::slotted(dap-ds-icon),.banner--positive dap-ds-icon::part(base){fill:var(--dds-banner-positive-icon-color);color:var(--dds-banner-positive-icon-color)}.banner--positive .banner__actions,.banner--positive .banner__content{color:var(--dds-banner-positive-text-color);line-height:var(--dds-banner-line-height)}.banner--positive .banner__actions ::slotted(a),.banner--positive .banner__content ::slotted(a){color:var(--dds-banner-positive-text-color)}.banner--positive .banner__actions{color:var(--dds-banner-positive-action-color)}.banner--warning{background:var(--dds-banner-warning-background)}.banner--warning ::slotted(dap-ds-icon),.banner--warning dap-ds-icon::part(base){fill:var(--dds-banner-warning-icon-color);color:var(--dds-banner-warning-icon-color)}.banner--warning .banner__content{color:var(--dds-banner-warning-text-color);line-height:var(--dds-banner-line-height)}.banner--warning .banner__content ::slotted(a){color:var(--dds-banner-warning-text-color)}.banner--warning .banner__actions{color:var(--dds-banner-warning-action-color)}.banner--warning .banner__close::part(icon-base){fill:var(--dds-banner-icon-warning);color:var(--dds-banner-icon-warning)}.banner--negative{background:var(--dds-banner-negative-background)}.banner--negative ::slotted(dap-ds-icon),.banner--negative dap-ds-icon::part(base){fill:var(--dds-banner-negative-icon-color);color:var(--dds-banner-negative-icon-color)}.banner--negative .banner__actions,.banner--negative .banner__content{color:var(--dds-banner-negative-text-color);line-height:var(--dds-banner-line-height)}.banner--negative .banner__actions ::slotted(a),.banner--negative .banner__content ::slotted(a){color:var(--dds-banner-negative-text-color)}.banner--negative .banner__actions{color:var(--dds-banner-negative-action-color)}.banner__close{flex:0 0 var(--dds-spacing-500);margin-left:auto}.banner__icon-container{position:relative;top:2px;flex:0 0 var(--dds-spacing-500)}.banner .banner__actions{display:flex;align-items:center;margin-top:var(--dds-spacing-100);font-size:var(--dds-font-sm);font-weight:var(--dds-font-weight-bold);gap:var(--dds-spacing-400)}dap-ds-card::part(base){border:inherit;border-radius:inherit}dap-ds-card::part(high-contrast){border-radius:inherit}dap-ds-card-content::part(base){padding:var(--dds-spacing-400)}";
+export {
+  n as default
+};
+//# sourceMappingURL=banner.scss.js.map

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

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

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

@@ -20,6 +20,7 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssproperty --dds-breadcrumb-list-min-width - The minimum width of the breadcrumb list (default: max-content)
  */
 export default class DapDSBreadcrumb extends DdsElement {
+    static tagName: string;
     static readonly styles: import('lit').CSSResult;
     /** @ignore */
     defaultSlot: HTMLSlotElement;

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -0,0 +1,87 @@
+import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { html as u } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { query as h } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import b from "../breadcrumb-item/breadcrumb-item.component.js";
+import y from "./breadcrumb.scss.js";
+import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var v = Object.defineProperty, i = (d, r, o, t) => {
+  for (var e = void 0, a = d.length - 1, l; a >= 0; a--)
+    (l = d[a]) && (e = l(r, o, e) || e);
+  return e && v(r, o, e), e;
+};
+const n = class n extends f {
+  constructor() {
+    super(...arguments), this.variant = "normal", this.mobile = !1, this._cachedItems = [];
+  }
+  cloneSeparator() {
+    const o = this.separatorSlot.assignedElements({
+      flatten: !0
+    })[0].cloneNode(!0);
+    return o.slot = "separator", o;
+  }
+  handleSlotChange() {
+    this._debounceTimeout && clearTimeout(this._debounceTimeout), this._debounceTimeout = window.setTimeout(() => {
+      this._updateBreadcrumbItems();
+    }, 16);
+  }
+  _updateBreadcrumbItems() {
+    const r = Array.from(
+      this.defaultSlot.assignedElements({ flatten: !0 })
+    ).filter(
+      (t) => t instanceof b
+    );
+    (r.length !== this._cachedItems.length || r.some((t, e) => t !== this._cachedItems[e])) && (this._cachedItems = r, r.forEach((t, e) => {
+      const a = e === r.length - 1;
+      if (this.mobile && e !== 0 && !a) {
+        t.style.display = "none";
+        return;
+      } else
+        t.style.display = "";
+      t.toggleAttribute("inverted", this.variant === "inverted"), t.variant = this.variant, a ? t.setAttribute("aria-current", "page") : t.removeAttribute("aria-current"), t.toggleAttribute("disabled", a);
+      const l = t.querySelector('[slot="separator"]');
+      !a && !l && t.append(this.cloneSeparator());
+    }));
+  }
+  render() {
+    return u`
+      <nav
+        part="base"
+        aria-label="${m(this.ariaLabel) || ""}"
+        aria-labelledby="${m(this.ariaLabelledBy) || ""}"
+        class="${c("breadcrumb")}">
+        <ol class="breadcrumb__list" part="list">
+          <slot @slotchange="${this.handleSlotChange}"></slot>
+        </ol>
+      </nav>
+      <span hidden aria-hidden="true">
+        <slot name="separator"> <span>/</span> </slot>
+      </span>
+    `;
+  }
+};
+n.tagName = "dap-ds-breadcrumb", n.styles = g(y);
+let s = n;
+i([
+  h("slot")
+], s.prototype, "defaultSlot");
+i([
+  h('slot[name="separator"]')
+], s.prototype, "separatorSlot");
+i([
+  p({ type: String })
+], s.prototype, "variant");
+i([
+  p({ type: Boolean })
+], s.prototype, "mobile");
+i([
+  p({ type: String, attribute: "aria-labelledby" })
+], s.prototype, "ariaLabelledBy");
+export {
+  s as default
+};
+//# sourceMappingURL=breadcrumb.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.component.js","sources":["../../../src/components/breadcrumb/breadcrumb.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.component'\nimport styles from './breadcrumb.scss?inline'\n\n/**\n * `dap-ds-breadcrumb`\n * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n * @element dap-ds-breadcrumb\n * @title - Breadcrumb\n *\n * @slot - The content of the breadcrumb.\n * @slot separator - The separator between breadcrumb items. Default is '/'.\n *\n * @csspart base - The main breadcrumb container.\n * @csspart separator - The separator of the breadcrumb.\n *\n * @cssproperty --dds-breadcrumb-width - The width of the breadcrumb container (default: 100%)\n * @cssproperty --dds-breadcrumb-overflow-x - The horizontal overflow behavior of the breadcrumb (default: auto)\n * @cssproperty --dds-breadcrumb-transition - The transition property for the breadcrumb (default: all 0.2s ease-in-out)\n * @cssproperty --dds-breadcrumb-list-display - The display property of the breadcrumb list (default: flex)\n * @cssproperty --dds-breadcrumb-list-flex-wrap - The flex-wrap property of the breadcrumb list (default: nowrap)\n * @cssproperty --dds-breadcrumb-list-align-items - The align-items property of the breadcrumb list (default: center)\n * @cssproperty --dds-breadcrumb-list-min-width - The minimum width of the breadcrumb list (default: max-content)\n */\nexport default class DapDSBreadcrumb extends DdsElement {\n  static tagName = 'dap-ds-breadcrumb'\n\n  static readonly styles = unsafeCSS(styles)\n  /** @ignore */\n  @query('slot') defaultSlot!: HTMLSlotElement\n  /** @ignore */\n  @query('slot[name=\"separator\"]') separatorSlot!: HTMLSlotElement\n\n  /* Variant of the breadcrumb\n   * @type {'normal' | 'inverted'}\n   */\n  @property({ type: String }) variant = 'normal'\n\n  /** Mobile version of the breadcrumb */\n  @property({ type: Boolean }) mobile = false\n\n  /** The aria-labelledby of the breadcrumb */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledBy?: string\n\n  private _cachedItems: DapDSBreadcrumbItem[] = []\n  private _debounceTimeout?: number\n\n  private cloneSeparator() {\n    const separator = this.separatorSlot.assignedElements({\n      flatten: true,\n    })[0] as HTMLElement\n\n    const clone = separator.cloneNode(true) as HTMLElement\n    clone.slot = 'separator'\n\n    return clone\n  }\n\n  private handleSlotChange(): void {\n    if (this._debounceTimeout) {\n      clearTimeout(this._debounceTimeout)\n    }\n\n    this._debounceTimeout = window.setTimeout(() => {\n      this._updateBreadcrumbItems()\n    }, 16) // One frame delay for batching\n  }\n\n  private _updateBreadcrumbItems(): void {\n    const items = Array.from(\n      this.defaultSlot.assignedElements({ flatten: true }),\n    ).filter(\n      (el): el is DapDSBreadcrumbItem => el instanceof DapDSBreadcrumbItem,\n    )\n\n    // Check if items have actually changed to avoid unnecessary work\n    const itemsChanged =\n      items.length !== this._cachedItems.length ||\n      items.some((item, index) => item !== this._cachedItems[index])\n\n    if (!itemsChanged) return\n\n    this._cachedItems = items\n\n    items.forEach((item, index) => {\n      const isLast = index === items.length - 1\n\n      if (this.mobile && index !== 0 && !isLast) {\n        item.style.display = 'none'\n        return\n      } else {\n        item.style.display = ''\n      }\n\n      item.toggleAttribute('inverted', this.variant === 'inverted')\n      item.variant = this.variant\n      if (isLast) {\n        item.setAttribute('aria-current', 'page')\n      } else {\n        item.removeAttribute('aria-current')\n      }\n      item.toggleAttribute('disabled', isLast)\n\n      const separator = item.querySelector('[slot=\"separator\"]')\n      if (!isLast && !separator) {\n        item.append(this.cloneSeparator())\n      }\n    })\n  }\n\n  render() {\n    return html`\n      <nav\n        part=\"base\"\n        aria-label=\"${ifDefined(this.ariaLabel) || ''}\"\n        aria-labelledby=\"${ifDefined(this.ariaLabelledBy) || ''}\"\n        class=\"${clsx('breadcrumb')}\">\n        <ol class=\"breadcrumb__list\" part=\"list\">\n          <slot @slotchange=\"${this.handleSlotChange}\"></slot>\n        </ol>\n      </nav>\n      <span hidden aria-hidden=\"true\">\n        <slot name=\"separator\"> <span>/</span> </slot>\n      </span>\n    `\n  }\n}\n"],"names":["_DapDSBreadcrumb","DdsElement","clone","items","el","DapDSBreadcrumbItem","item","index","isLast","separator","html","ifDefined","clsx","unsafeCSS","styles","DapDSBreadcrumb","__decorateClass","query","property"],"mappings":";;;;;;;;;;;;;;;;AA8BA,MAAqBA,IAArB,MAAqBA,UAAwBC,EAAW;AAAA,EAAxD,cAAA;AAAA,UAAA,GAAA,SAAA,GAYwC,KAAA,UAAA,UAGA,KAAA,SAAA,IAMtC,KAAQ,eAAsC,CAAC;AAAA,EAAA;AAAA,EAGvC,iBAAiB;AAKjB,UAAAC,IAJY,KAAK,cAAc,iBAAiB;AAAA,MACpD,SAAS;AAAA,IACV,CAAA,EAAE,CAAC,EAEoB,UAAU,EAAI;AACtC,WAAAA,EAAM,OAAO,aAENA;AAAA,EAAA;AAAA,EAGD,mBAAyB;AAC/B,IAAI,KAAK,oBACP,aAAa,KAAK,gBAAgB,GAG/B,KAAA,mBAAmB,OAAO,WAAW,MAAM;AAC9C,WAAK,uBAAuB;AAAA,OAC3B,EAAE;AAAA,EAAA;AAAA,EAGC,yBAA+B;AACrC,UAAMC,IAAQ,MAAM;AAAA,MAClB,KAAK,YAAY,iBAAiB,EAAE,SAAS,GAAM,CAAA;AAAA,IAAA,EACnD;AAAA,MACA,CAACC,MAAkCA,aAAcC;AAAA,IACnD;AAOA,KAHEF,EAAM,WAAW,KAAK,aAAa,UACnCA,EAAM,KAAK,CAACG,GAAMC,MAAUD,MAAS,KAAK,aAAaC,CAAK,CAAC,OAI/D,KAAK,eAAeJ,GAEdA,EAAA,QAAQ,CAACG,GAAMC,MAAU;AACvB,YAAAC,IAASD,MAAUJ,EAAM,SAAS;AAExC,UAAI,KAAK,UAAUI,MAAU,KAAK,CAACC,GAAQ;AACzC,QAAAF,EAAK,MAAM,UAAU;AACrB;AAAA,MAAA;AAEA,QAAAA,EAAK,MAAM,UAAU;AAGvB,MAAAA,EAAK,gBAAgB,YAAY,KAAK,YAAY,UAAU,GAC5DA,EAAK,UAAU,KAAK,SAChBE,IACGF,EAAA,aAAa,gBAAgB,MAAM,IAExCA,EAAK,gBAAgB,cAAc,GAEhCA,EAAA,gBAAgB,YAAYE,CAAM;AAEjC,YAAAC,IAAYH,EAAK,cAAc,oBAAoB;AACrD,MAAA,CAACE,KAAU,CAACC,KACTH,EAAA,OAAO,KAAK,gBAAgB;AAAA,IACnC,CACD;AAAA,EAAA;AAAA,EAGH,SAAS;AACA,WAAAI;AAAAA;AAAAA;AAAAA,sBAGWC,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,2BAC1BA,EAAU,KAAK,cAAc,KAAK,EAAE;AAAA,iBAC9CC,EAAK,YAAY,CAAC;AAAA;AAAA,+BAEJ,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQpD;AAtGEZ,EAAO,UAAU,qBAEDA,EAAA,SAASa,EAAUC,CAAM;AAH3C,IAAqBC,IAArBf;AAKiBgB,EAAA;AAAA,EAAdC,EAAM,MAAM;AAAA,GALMF,EAKJ,WAAA,aAAA;AAEkBC,EAAA;AAAA,EAAhCC,EAAM,wBAAwB;AAAA,GAPZF,EAOc,WAAA,eAAA;AAKLC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;AAGCC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAfRH,EAeU,WAAA,QAAA;AAI7BC,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,kBAAmB,CAAA;AAAA,GAlBrCH,EAmBnB,WAAA,gBAAA;"}

package/dist/components/breadcrumb/breadcrumb.d.ts

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

package/dist/components/breadcrumb/breadcrumb.js

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

package/dist/components/breadcrumb/breadcrumb.js.map

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

package/dist/components/breadcrumb/breadcrumb.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-breadcrumb-width: 100%;--dds-breadcrumb-overflow-x: auto;--dds-breadcrumb-list-display: flex;--dds-breadcrumb-list-flex-wrap: nowrap;--dds-breadcrumb-list-align-items: center;--dds-breadcrumb-list-min-width: max-content;--dds-breadcrumb-transition: all .2s ease-in-out}.breadcrumb{width:var(--dds-breadcrumb-width);margin-block:var(--dds-spacing-50);padding-inline:var(--dds-spacing-50);overflow-x:var(--dds-breadcrumb-overflow-x);transition:var(--dds-breadcrumb-transition)}.breadcrumb__list{display:var(--dds-breadcrumb-list-display);flex-wrap:var(--dds-breadcrumb-list-flex-wrap);align-items:var(--dds-breadcrumb-list-align-items);min-width:var(--dds-breadcrumb-list-min-width);margin:0;padding:0;list-style:none}";
+export {
+  t as default
+};
+//# sourceMappingURL=breadcrumb.scss.js.map

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

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

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

@@ -1,5 +1,7 @@
 import { LinkTarget } from '../../common/types';
 import { DdsElement } from '../../internal/dds-hu-element.js';
+import { default as DapDSIcon } from '../icon/icon.component';
+import { default as DapDSLink } from '../link/link.component';
 /**
  * `dap-ds-breadcrumb-item` custom element.
  * @element dap-ds-breadcrumb-item
@@ -32,6 +34,11 @@ import { DdsElement } from '../../internal/dds-hu-element.js';
  * @cssproperty --dds-breadcrumb-item-inverted-link-color - The link color when inverted (default: var(--dds-text-neutral-inverted))
  */
 export default class DapDSBreadcrumbItem extends DdsElement {
+    static tagName: string;
+    static dependencies: {
+        'dap-ds-link': typeof DapDSLink;
+        'dap-ds-icon': typeof DapDSIcon;
+    };
     /** The URL of the breadcrumb item. */
     href?: string;
     /** The target of the breadcrumb item.