dap-design-system 0.62.4 → 0.63.1

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

@@ -1 +1 @@
-{"version":3,"file":"icon.component.js","sources":["../../../src/components/icon/icon.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/icon.scss?inline'\n\nexport type IconSize = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'\n\n/**\n * `dap-ds-icon`\n * @summary An icon is a graphical symbol that represents an object or action.\n * @element dap-ds-icon\n * @title - Icon\n *\n * @property {boolean} ariaHidden - Whether the icon is hidden from the accessibility tree. Default is true.\n * @property {string} ariaLabel - The aria label of the icon.\n *\n * @slot - The content of the icon for custom svg icons.\n *\n * @csspart base - The main icon container.\n * @csspart icon - The icon of the icon.\n *\n * @cssproperty --dds-icon-size-xs - The size of extra small icons (default: 12px)\n * @cssproperty --dds-icon-size-sm - The size of small icons (default: 16px)\n * @cssproperty --dds-icon-size-md - The size of medium icons (default: 20px)\n * @cssproperty --dds-icon-size-lg - The size of large icons (default: 24px)\n * @cssproperty --dds-icon-size-xl - The size of extra large icons (default: 32px)\n * @cssproperty --dds-icon-size-xxl - The size of extra extra large icons (default: 40px)\n */\nexport default class DapDSIcon extends DdsElement {\n  static tagName = 'dap-ds-icon'\n\n  /** The name of the icon */\n  @property() name: string\n  /** The size of the icon\n   * @type {'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'}\n   */\n  @property() size: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' = 'md'\n  /** The size of the icon in pixels. This overrides the size attribute. */\n  @property({ type: Number }) staticSize?: number\n  /** Whether the icon is focusable. Default is false. */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** True unless the consumer explicitly opted out with `aria-hidden=\"false\"`. */\n  private get _isDecorative(): boolean {\n    return this.ariaHidden !== 'false'\n  }\n\n  protected willUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.willUpdate(_changedProperties)\n\n    // Icons are decorative by default, so the host is hidden from the a11y tree.\n    // Consumers opt out with aria-hidden=\"false\" (kept as an explicit \"false\"\n    // rather than removing the attribute, which is how the opt-out is tracked).\n    this.setAttribute('aria-hidden', this._isDecorative ? 'true' : 'false')\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <span\n        class=${clsx('icon', {})}\n        part=\"base\"\n        tabindex=\"-1\"\n        aria-hidden=${this._isDecorative ? 'true' : 'false'}>\n        ${this.name ? this._getNamedIcon() : this._getSlotIcon()}\n      </span>\n    `\n  }\n\n  private _getNamedIcon() {\n    const IconTag = `dap-ds-icon-${this.name}`\n\n    return html`\n     <${unsafeStatic(IconTag)}\n        part=\"icon\"\n        size=${this.staticSize ?? this._getIconSizePx(this.size)}\n        viewBox=\"0 0 24 24\"\n        role=\"img\"\n        aria-hidden=${this._isDecorative ? 'true' : 'false'}\n        aria-label=${this.ariaLabel ?? ''}\n        tabindex=${this.focusable ? 0 : -1}\n      >\n      </${unsafeStatic(IconTag)}\n    `\n  }\n\n  private _getSlotIcon() {\n    return html`\n      <span\n        part=\"icon\"\n        class=${clsx('icon--custom-icon', { [this.size]: true })}\n        aria-hidden=${this._isDecorative ? 'true' : 'false'}>\n        <slot></slot>\n      </span>\n    `\n  }\n\n  private _getIconSizePx(size: IconSize): number {\n    const defaultSize = 20\n    switch (size) {\n      case 'xxl':\n        return 40\n      case 'xl':\n        return 32\n      case 'lg':\n        return 24\n      case 'md':\n        return defaultSize\n      case 'sm':\n        return 16\n      case 'xs':\n        return 12\n      default:\n        return defaultSize\n    }\n  }\n}\n"],"names":["_DapDSIcon","DdsElement","_changedProperties","html","clsx","IconTag","unsafeStatic","_a","_b","size","unsafeCSS","styles","DapDSIcon","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAqBA,IAArB,MAAqBA,UAAkBC,EAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA,GAQ+D,KAAA,OAAA,MAIV,KAAA,YAAA;AAAA,EAAA;AAAA;AAAA,EAKnD,IAAY,gBAAyB;AACnC,WAAO,KAAK,eAAe;AAAA,EAAA;AAAA,EAGnB,WACRC,GACM;AACN,UAAM,WAAWA,CAAkB,GAKnC,KAAK,aAAa,eAAe,KAAK,gBAAgB,SAAS,OAAO;AAAA,EAAA;AAAA,EAG9D,aACRA,GACM;AACN,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;AACA,WAAAC;AAAAA;AAAAA,gBAEKC,EAAK,QAAQ,EAAE,CAAC;AAAA;AAAA;AAAA,sBAGV,KAAK,gBAAgB,SAAS,OAAO;AAAA,UACjD,KAAK,OAAO,KAAK,cAAkB,IAAA,KAAK,aAAc,CAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAKtD,gBAAgB;;AAChB,UAAAC,IAAU,eAAe,KAAK,IAAI;AAEjC,WAAAF;AAAAA,QACHG,EAAaD,CAAO,CAAC;AAAA;AAAA,gBAEdE,IAAA,KAAK,eAAL,OAAAA,IAAmB,KAAK,eAAe,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,sBAG1C,KAAK,gBAAgB,SAAS,OAAO;AAAA,sBACtCC,IAAA,KAAK,cAAL,OAAAA,IAAkB,EAAE;AAAA,mBACtB,KAAK,YAAY,IAAI,EAAE;AAAA;AAAA,UAEhCF,EAAaD,CAAO,CAAC;AAAA;AAAA,EAAA;AAAA,EAIrB,eAAe;AACd,WAAAF;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,qBAAqB,EAAE,CAAC,KAAK,IAAI,GAAG,IAAM,CAAC;AAAA,sBAC1C,KAAK,gBAAgB,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMjD,eAAeK,GAAwB;AAE7C,YAAQA,GAAM;AAAA,MACZ,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT;AACS,eAAA;AAAA,IAAA;AAAA,EACX;AAEJ;AAlGET,EAAO,UAAU,eAaDA,EAAA,SAASU,EAAUC,CAAM;AAd3C,IAAqBC,IAArBZ;AAIca,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,MAAA;AAIAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,MAAA;AAEgBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAVPF,EAUS,WAAA,YAAA;AAECC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAZRF,EAYU,WAAA,WAAA;"}
+{"version":3,"file":"icon.component.js","sources":["../../../src/components/icon/icon.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/icon.scss?inline'\n\nexport type IconSize = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'\n\n/**\n * `dap-ds-icon`\n * @summary An icon is a graphical symbol that represents an object or action.\n * @element dap-ds-icon\n * @title - Icon\n *\n * @property {boolean} ariaHidden - Whether the icon is hidden from the accessibility tree. Default is true.\n * @property {string} ariaLabel - The aria label of the icon.\n *\n * @slot - The content of the icon for custom svg icons.\n *\n * @csspart base - The main icon container.\n * @csspart icon - The icon of the icon.\n *\n * @cssproperty --dds-icon-size-xs - The size of extra small icons (default: 12px)\n * @cssproperty --dds-icon-size-sm - The size of small icons (default: 16px)\n * @cssproperty --dds-icon-size-md - The size of medium icons (default: 20px)\n * @cssproperty --dds-icon-size-lg - The size of large icons (default: 24px)\n * @cssproperty --dds-icon-size-xl - The size of extra large icons (default: 32px)\n * @cssproperty --dds-icon-size-xxl - The size of extra extra large icons (default: 40px)\n */\nexport default class DapDSIcon extends DdsElement {\n  static tagName = 'dap-ds-icon'\n\n  /** The name of the icon */\n  @property() name: string\n  /** The size of the icon\n   * @type {'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'}\n   */\n  @property() size: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' = 'md'\n  /** The size of the icon in pixels. This overrides the size attribute. */\n  @property({ type: Number }) staticSize?: number\n  /** Whether the icon is focusable. Default is false. */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** True unless the consumer explicitly opted out with `aria-hidden=\"false\"`. */\n  private get _isDecorative(): boolean {\n    return this.ariaHidden !== 'false'\n  }\n\n  protected willUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.willUpdate(_changedProperties)\n\n    // Icons are decorative by default, so the host is hidden from the a11y tree.\n    // Consumers opt out with aria-hidden=\"false\" (kept as an explicit \"false\"\n    // rather than removing the attribute, which is how the opt-out is tracked).\n    this.setAttribute('aria-hidden', this._isDecorative ? 'true' : 'false')\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <span\n        class=${clsx('icon', {})}\n        part=\"base\"\n        tabindex=\"-1\"\n        aria-hidden=${this._isDecorative ? 'true' : 'false'}>\n        ${this.name ? this._getNamedIcon() : this._getSlotIcon()}\n      </span>\n    `\n  }\n\n  private _getNamedIcon() {\n    const IconTag = `dap-ds-icon-${this.name}`\n\n    return html`\n     <${unsafeStatic(IconTag)}\n        part=\"icon\"\n        size=${this.staticSize ?? this._getIconSizePx(this.size)}\n        viewBox=\"0 0 24 24\"\n        role=\"img\"\n        aria-hidden=${this._isDecorative ? 'true' : 'false'}\n        aria-label=${this.ariaLabel ?? ''}\n        tabindex=${this.focusable ? 0 : -1}\n      >\n      </${unsafeStatic(IconTag)}\n    `\n  }\n\n  private _getSlotIcon() {\n    return html`\n      <span\n        part=\"icon\"\n        class=${clsx('icon--custom-icon', { [this.size]: true })}\n        aria-hidden=${this._isDecorative ? 'true' : 'false'}>\n        <slot></slot>\n      </span>\n    `\n  }\n\n  private _getIconSizePx(size: IconSize): number {\n    const defaultSize = 20\n    switch (size) {\n      case 'xxl':\n        return 40\n      case 'xl':\n        return 32\n      case 'lg':\n        return 24\n      case 'md':\n        return defaultSize\n      case 'sm':\n        return 16\n      case 'xs':\n        return 12\n      default:\n        return defaultSize\n    }\n  }\n}\n"],"names":["_DapDSIcon","DdsElement","_changedProperties","html","clsx","IconTag","unsafeStatic","_a","_b","size","unsafeCSS","styles","DapDSIcon","__decorateClass","property"],"mappings":";;;;;;;;;;;AA+BA,MAAqBA,IAArB,MAAqBA,UAAkBC,EAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA,GAQ+D,KAAA,OAAA,MAIV,KAAA,YAAA;AAAA,EAAA;AAAA;AAAA,EAKnD,IAAY,gBAAyB;AACnC,WAAO,KAAK,eAAe;AAAA,EAAA;AAAA,EAGnB,WACRC,GACM;AACN,UAAM,WAAWA,CAAkB,GAKnC,KAAK,aAAa,eAAe,KAAK,gBAAgB,SAAS,OAAO;AAAA,EAAA;AAAA,EAG9D,aACRA,GACM;AACN,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;AACA,WAAAC;AAAA;AAAA,gBAEKC,EAAK,QAAQ,EAAE,CAAC;AAAA;AAAA;AAAA,sBAGV,KAAK,gBAAgB,SAAS,OAAO;AAAA,UACjD,KAAK,OAAO,KAAK,cAAkB,IAAA,KAAK,aAAc,CAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAKtD,gBAAgB;;AAChB,UAAAC,IAAU,eAAe,KAAK,IAAI;AAEjC,WAAAF;AAAA,QACHG,EAAaD,CAAO,CAAC;AAAA;AAAA,gBAEdE,IAAA,KAAK,eAAL,OAAAA,IAAmB,KAAK,eAAe,KAAK,IAAI,CAAC;AAAA;AAAA;AAAA,sBAG1C,KAAK,gBAAgB,SAAS,OAAO;AAAA,sBACtCC,IAAA,KAAK,cAAL,OAAAA,IAAkB,EAAE;AAAA,mBACtB,KAAK,YAAY,IAAI,EAAE;AAAA;AAAA,UAEhCF,EAAaD,CAAO,CAAC;AAAA;AAAA,EAAA;AAAA,EAIrB,eAAe;AACd,WAAAF;AAAA;AAAA;AAAA,gBAGKC,EAAK,qBAAqB,EAAE,CAAC,KAAK,IAAI,GAAG,IAAM,CAAC;AAAA,sBAC1C,KAAK,gBAAgB,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMjD,eAAeK,GAAwB;AAE7C,YAAQA,GAAM;AAAA,MACZ,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT;AACS,eAAA;AAAA,IAAA;AAAA,EACX;AAEJ;AAlGET,EAAO,UAAU,eAaDA,EAAA,SAASU,EAAUC,CAAM;AAd3C,IAAqBC,IAArBZ;AAIca,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,MAAA;AAIAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,MAAA;AAEgBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAVPF,EAUS,WAAA,YAAA;AAECC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAZRF,EAYU,WAAA,WAAA;"}

package/dist/components/icon-button/icon-button.component.d.ts

@@ -23,6 +23,7 @@ export type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>;
  * @csspart content - The icon of the button.
  * @csspart icon - The icon of the icon.
  * @csspart icon-base - The base of the icon.
+ * @csspart high-contrast - The high contrast indicator of the button.
  *
  * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base))
  * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))

package/dist/components/icon-button/icon-button.component.js

@@ -1,21 +1,18 @@
 import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as h } from "../../node_modules/lit-html/static.js";
-import { DdsElement as m } from "../../internal/dds-hu-element.js";
-import { SizedMixin as S } from "../../internal/mixin/sizedMixin.js";
-import b from "../icon/icon.component.js";
-import z from "./icon-button.scss.js";
-import { unsafeCSS as y } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { unsafeCSS as m } from "lit";
+import { property as a } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { html as h } from "lit/static-html.js";
+import { DdsElement as S } from "../../internal/dds-hu-element.js";
+import { SizedMixin as b } from "../../internal/mixin/sizedMixin.js";
+import z from "../icon/icon.component.js";
+import y from "./icon-button.scss.js";
 var v = Object.defineProperty, r = (f, t, e, i) => {
   for (var n = void 0, s = f.length - 1, l; s >= 0; s--)
     (l = f[s]) && (n = l(t, e, n) || n);
   return n && v(t, e, n), n;
 };
-const g = S(m), c = class c extends g {
+const g = b(S), c = class c extends g {
   constructor() {
     super(), this.variant = "neutral", this.clean = !1, this.disabled = !1, this.htmlType = "button", this._ariaLabelForButton = null, this.handleSlotChange = () => {
       if (this.shadowRoot) {
@@ -135,8 +132,8 @@ const g = S(m), c = class c extends g {
   }
 };
 c.tagName = "dap-ds-icon-button", c.dependencies = {
-  "dap-ds-icon": b
-}, c.styles = y(z);
+  "dap-ds-icon": z
+}, c.styles = m(y);
 let o = c;
 r([
   a({ reflect: !0 })

package/dist/components/icon-button/icon-button.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.component.js","sources":["../../../src/components/icon-button/icon-button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { Size } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './icon-button.scss?inline'\n\nconst IconButtonBaseWithSized = SizedMixin(DdsElement)\n\nexport type ButtonVariant = 'neutral' | 'brand' | 'inverted' | 'inverted-brand'\nexport type HtmlButtonType = 'button' | 'submit' | 'reset'\nexport type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>\n\n/**\n * `dap-ds-icon-button`\n * @summary An icon button is a button with an icon.\n * @element dap-ds-icon-button\n * @title - Icon button\n *\n * @property {string} ariaLabel - The aria label of the button.\n *\n * @slot - The icon of the button.\n *\n * @csspart base - The main button container.\n * @csspart content - The icon of the button.\n * @csspart icon - The icon of the icon.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base))\n * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-icon-button-border-radius - Border radius of the icon button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-icon-button-hover-border-width - Border width on hover (default: var(--dds-border-width-large))\n * @cssproperty --dds-icon-button-active-border-width - Border width when active (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-icon-button-transition - Transition property for the icon button (default: var(--dds-transition-all))\n * @cssproperty --dds-icon-button-cursor - Cursor style for the button (default: pointer)\n * @cssproperty --dds-icon-button-disabled-cursor - Cursor style for the disabled button (default: not-allowed)\n * @cssproperty --dds-icon-button-column-gap - Column gap between elements (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-lg - Padding for large size (default: var(--dds-spacing-0))\n * @cssproperty --dds-icon-button-padding-md - Padding for medium size (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-sm - Padding for small size (default: var(--dds-spacing-50))\n * @cssproperty --dds-icon-button-padding-xs - Padding for extra small size (default: var(--dds-spacing-25))\n * @cssproperty --dds-icon-button-size-lg - Size for large icon button (default: var(--dds-spacing-800))\n * @cssproperty --dds-icon-button-size-md - Size for medium icon button (default: var(--dds-spacing-600))\n * @cssproperty --dds-icon-button-size-sm - Size for small icon button (default: var(--dds-spacing-400))\n * @cssproperty --dds-icon-button-size-xs - Size for extra small icon button (default: var(--dds-spacing-300))\n * @cssproperty --dds-icon-button-neutral-bg - Background color for neutral variant (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-icon-button-neutral-color - Text color for neutral variant (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-icon-button-neutral-hover-bg - Hover background color for neutral variant (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-icon-button-neutral-active-bg - Active background color for neutral variant (default: var(--dds-transparent-black-medium))\n * @cssproperty --dds-icon-button-brand-bg - Background color for brand variant (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-icon-button-brand-color - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled))\n * @cssproperty --dds-icon-button-brand-hover-bg - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-icon-button-brand-active-bg - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-icon-button-inverted-bg - Background color for inverted variant (default: var(--dds-transparent-white-subtle))\n * @cssproperty --dds-icon-button-inverted-color - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-hover-bg - Hover background color for inverted variant (default: var(--dds-transparent-white-base))\n * @cssproperty --dds-icon-button-inverted-active-bg - Active background color for inverted variant (default: var(--dds-transparent-white-medium))\n * @cssproperty --dds-icon-button-inverted-brand-bg - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-color - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-hover-bg - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled))\n * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent)\n */\nexport default class DapDSIconButton extends IconButtonBaseWithSized {\n  static tagName = 'dap-ds-icon-button'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The type of the button.\n   * @type {'neutral' | 'brand' | 'inverted' | 'inverted-brand'}\n   */\n  @property({ reflect: true }) variant?: ButtonVariant = 'neutral'\n\n  /** Adds a transparent background to the button */\n  @property({ type: Boolean, reflect: true }) clean? = false\n\n  /**\n   * The size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon.\n   */\n  @property({ type: Number }) iconSize: number\n\n  constructor() {\n    super()\n    this.size = 'md' as ButtonSize\n  }\n\n  /** The disabled state of the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /**\n   * The type of the button.\n   * @type {'button' | 'submit' | 'reset'}\n   */\n  @property() htmlType: HtmlButtonType = 'button'\n\n  /** The icon of the button. You can use the icon names from the icon component */\n  @property() icon: string\n\n  /** The name of the button */\n  @property() name: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Persisted aria-label for the inner button; host attribute is removed so we keep the value here */\n  private _ariaLabelForButton: string | null = null\n\n  /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */\n  private get effectiveAriaLabel(): string | null {\n    return this.ariaLabel ?? this._ariaLabelForButton\n  }\n\n  /**\n   * Recursively finds all icon elements in slots and nested slots\n   */\n  private findIconElementsInSlot(slot: HTMLSlotElement): Element[] {\n    const iconElements: Element[] = []\n\n    // Get both assigned elements and nodes (to catch all content)\n    const assignedElements = slot.assignedElements({ flatten: true })\n    const assignedNodes = slot.assignedNodes({ flatten: true })\n\n    // First, check assigned elements\n    for (const element of assignedElements) {\n      // If it's an icon element, add it\n      if (element.tagName === 'DAP-DS-ICON') {\n        iconElements.push(element)\n      }\n      // If it's a nested slot, recursively find icons in it\n      else if (element instanceof HTMLSlotElement) {\n        iconElements.push(...this.findIconElementsInSlot(element))\n      }\n      // If it's a custom element, search for icons in its light DOM children\n      // (slot default content appears in light DOM)\n      else if (element.children) {\n        const lightDomIcons = Array.from(\n          element.querySelectorAll('dap-ds-icon'),\n        )\n        iconElements.push(...lightDomIcons)\n      }\n    }\n\n    // Also check assigned nodes for icon elements (in case they're not in assignedElements)\n    for (const node of assignedNodes) {\n      if (node instanceof Element && node.tagName === 'DAP-DS-ICON') {\n        if (!iconElements.includes(node)) {\n          iconElements.push(node)\n        }\n      }\n      // Check children of element nodes\n      else if (node instanceof Element) {\n        const childIcons = Array.from(node.querySelectorAll('dap-ds-icon'))\n        for (const icon of childIcons) {\n          if (!iconElements.includes(icon)) {\n            iconElements.push(icon)\n          }\n        }\n      }\n    }\n\n    return iconElements\n  }\n\n  /**\n   * Applies size props to all icon elements in the slot\n   */\n  private applySizeToSlotIcons(): void {\n    if (!this.shadowRoot) return\n\n    const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n    if (!iconSlot) return\n\n    const iconElements = this.findIconElementsInSlot(iconSlot)\n\n    for (const iconElement of iconElements) {\n      if (this.iconSize !== undefined) {\n        iconElement.setAttribute('staticSize', this.iconSize.toString())\n        iconElement.setAttribute('size', this.iconSize.toString())\n      } else {\n        iconElement.setAttribute('size', this.effectiveSize)\n        iconElement.removeAttribute('staticSize')\n      }\n    }\n  }\n\n  /**\n   * Handles slot change events to update icon sizes\n   */\n  private handleSlotChange = (): void => {\n    // Set up listeners on any newly assigned nested slots\n    if (this.shadowRoot) {\n      const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n      if (iconSlot) {\n        const assignedElements = iconSlot.assignedElements({ flatten: true })\n        for (const element of assignedElements) {\n          if (element instanceof HTMLSlotElement) {\n            // Check if we already have a listener on this slot\n            if (!(element as any).__ddsSlotListenerAdded) {\n              element.addEventListener('slotchange', this.handleSlotChange)\n              ;(element as any).__ddsSlotListenerAdded = true\n            }\n          }\n        }\n      }\n    }\n\n    // Apply size to icons\n    this.applySizeToSlotIcons()\n  }\n\n  /**\n   * Sets up slotchange listeners for the main slot and any nested slots\n   */\n  private setupSlotListeners(slot: HTMLSlotElement): void {\n    slot.addEventListener('slotchange', this.handleSlotChange)\n\n    // Also listen to nested slots that are already assigned\n    const assignedElements = slot.assignedElements({ flatten: true })\n    for (const element of assignedElements) {\n      if (element instanceof HTMLSlotElement) {\n        element.addEventListener('slotchange', this.handleSlotChange)\n        ;(element as any).__ddsSlotListenerAdded = true\n      }\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    if (this.shadowRoot) {\n      const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n      if (iconSlot) {\n        this.setupSlotListeners(iconSlot)\n      }\n    }\n\n    // Use requestAnimationFrame to ensure slots are fully assigned\n    requestAnimationFrame(() => {\n      this.applySizeToSlotIcons()\n    })\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    // Persist value before removing host attribute so the inner button keeps it.\n    // Read the attribute string directly: the native `ariaLabel` getter is empty\n    // once the attribute is stripped, and Lit's AttributePart caches the value so\n    // it is never re-applied to the host on later re-renders (e.g. when the button\n    // toggles disabled). Fall back to the native property for consumers that set it\n    // via `.ariaLabel`. Only overwrite when a value is actually present so the\n    // persisted label survives re-renders that no longer carry the attribute.\n    const incomingAriaLabel = this.getAttribute('aria-label') ?? this.ariaLabel\n    if (incomingAriaLabel != null && incomingAriaLabel !== '') {\n      this._ariaLabelForButton = incomingAriaLabel\n    }\n    this.removeAttribute('aria-label')\n\n    // Update slot icons when size, sizeMap, or iconSize changes (sizeMap drives effectiveSize on viewport change)\n    if (\n      changedProperties.has('size') ||\n      changedProperties.has('sizeMap') ||\n      changedProperties.has('iconSize') ||\n      this.sizeMap\n    ) {\n      requestAnimationFrame(() => {\n        this.applySizeToSlotIcons()\n      })\n    }\n  }\n\n  focus() {\n    this.shadowRoot?.querySelector('button')?.focus()\n  }\n\n  render() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=${this.disabled}\n        type=${this.htmlType}\n        aria-label=${ifDefined(this.effectiveAriaLabel) || ''}\n        aria-expanded=${ifDefined(this.ariaExpanded ?? undefined)}\n        aria-haspopup=${ifDefined(this.ariaHasPopup ?? undefined)}\n        class=${clsx(\n          'icon-button',\n          {\n            [`icon-button--${this.effectiveSize}`]:\n              this.effectiveSize && this.iconSize === undefined,\n          },\n          { [`icon-button--${this.size}`]: this.size },\n          { 'icon-button--disabled': this.disabled },\n          { 'icon-button--clean': this.clean },\n          `icon-button--${this.variant}`,\n        )}>\n        <div part=\"high-contrast\" class=\"button__highcontrast\"></div>\n        ${this.icon\n          ? html` <dap-ds-icon\n              part=\"content\"\n              exportparts=\"icon, base: icon-base\"\n              name=\"${this.icon}\"\n              aria-hidden=\"true\"\n              staticSize=${ifDefined(this.iconSize)}\n              size=${(this.effectiveSize === 'xxs'\n                ? 'xs'\n                : this.effectiveSize) as ButtonSize}>\n            </dap-ds-icon>`\n          : html` <slot></slot> `}\n      </button>\n    `\n  }\n}\n"],"names":["IconButtonBaseWithSized","SizedMixin","DdsElement","_DapDSIconButton","iconSlot","assignedElements","element","_a","slot","iconElements","assignedNodes","lightDomIcons","node","childIcons","icon","iconElement","_changedProperties","changedProperties","incomingAriaLabel","_b","html","ifDefined","clsx","DapDSIcon","unsafeCSS","styles","DapDSIconButton","__decorateClass","property"],"mappings":"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"}
+{"version":3,"file":"icon-button.component.js","sources":["../../../src/components/icon-button/icon-button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { Size } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './icon-button.scss?inline'\n\nconst IconButtonBaseWithSized = SizedMixin(DdsElement)\n\nexport type ButtonVariant = 'neutral' | 'brand' | 'inverted' | 'inverted-brand'\nexport type HtmlButtonType = 'button' | 'submit' | 'reset'\nexport type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>\n\n/**\n * `dap-ds-icon-button`\n * @summary An icon button is a button with an icon.\n * @element dap-ds-icon-button\n * @title - Icon button\n *\n * @property {string} ariaLabel - The aria label of the button.\n *\n * @slot - The icon of the button.\n *\n * @csspart base - The main button container.\n * @csspart content - The icon of the button.\n * @csspart icon - The icon of the icon.\n * @csspart icon-base - The base of the icon.\n * @csspart high-contrast - The high contrast indicator of the button.\n *\n * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base))\n * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-icon-button-border-radius - Border radius of the icon button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-icon-button-hover-border-width - Border width on hover (default: var(--dds-border-width-large))\n * @cssproperty --dds-icon-button-active-border-width - Border width when active (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-icon-button-transition - Transition property for the icon button (default: var(--dds-transition-all))\n * @cssproperty --dds-icon-button-cursor - Cursor style for the button (default: pointer)\n * @cssproperty --dds-icon-button-disabled-cursor - Cursor style for the disabled button (default: not-allowed)\n * @cssproperty --dds-icon-button-column-gap - Column gap between elements (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-lg - Padding for large size (default: var(--dds-spacing-0))\n * @cssproperty --dds-icon-button-padding-md - Padding for medium size (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-sm - Padding for small size (default: var(--dds-spacing-50))\n * @cssproperty --dds-icon-button-padding-xs - Padding for extra small size (default: var(--dds-spacing-25))\n * @cssproperty --dds-icon-button-size-lg - Size for large icon button (default: var(--dds-spacing-800))\n * @cssproperty --dds-icon-button-size-md - Size for medium icon button (default: var(--dds-spacing-600))\n * @cssproperty --dds-icon-button-size-sm - Size for small icon button (default: var(--dds-spacing-400))\n * @cssproperty --dds-icon-button-size-xs - Size for extra small icon button (default: var(--dds-spacing-300))\n * @cssproperty --dds-icon-button-neutral-bg - Background color for neutral variant (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-icon-button-neutral-color - Text color for neutral variant (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-icon-button-neutral-hover-bg - Hover background color for neutral variant (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-icon-button-neutral-active-bg - Active background color for neutral variant (default: var(--dds-transparent-black-medium))\n * @cssproperty --dds-icon-button-brand-bg - Background color for brand variant (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-icon-button-brand-color - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled))\n * @cssproperty --dds-icon-button-brand-hover-bg - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-icon-button-brand-active-bg - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-icon-button-inverted-bg - Background color for inverted variant (default: var(--dds-transparent-white-subtle))\n * @cssproperty --dds-icon-button-inverted-color - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-hover-bg - Hover background color for inverted variant (default: var(--dds-transparent-white-base))\n * @cssproperty --dds-icon-button-inverted-active-bg - Active background color for inverted variant (default: var(--dds-transparent-white-medium))\n * @cssproperty --dds-icon-button-inverted-brand-bg - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-color - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-hover-bg - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled))\n * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent)\n */\nexport default class DapDSIconButton extends IconButtonBaseWithSized {\n  static tagName = 'dap-ds-icon-button'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The type of the button.\n   * @type {'neutral' | 'brand' | 'inverted' | 'inverted-brand'}\n   */\n  @property({ reflect: true }) variant?: ButtonVariant = 'neutral'\n\n  /** Adds a transparent background to the button */\n  @property({ type: Boolean, reflect: true }) clean? = false\n\n  /**\n   * The size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon.\n   */\n  @property({ type: Number }) iconSize: number\n\n  constructor() {\n    super()\n    this.size = 'md' as ButtonSize\n  }\n\n  /** The disabled state of the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /**\n   * The type of the button.\n   * @type {'button' | 'submit' | 'reset'}\n   */\n  @property() htmlType: HtmlButtonType = 'button'\n\n  /** The icon of the button. You can use the icon names from the icon component */\n  @property() icon: string\n\n  /** The name of the button */\n  @property() name: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Persisted aria-label for the inner button; host attribute is removed so we keep the value here */\n  private _ariaLabelForButton: string | null = null\n\n  /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */\n  private get effectiveAriaLabel(): string | null {\n    return this.ariaLabel ?? this._ariaLabelForButton\n  }\n\n  /**\n   * Recursively finds all icon elements in slots and nested slots\n   */\n  private findIconElementsInSlot(slot: HTMLSlotElement): Element[] {\n    const iconElements: Element[] = []\n\n    // Get both assigned elements and nodes (to catch all content)\n    const assignedElements = slot.assignedElements({ flatten: true })\n    const assignedNodes = slot.assignedNodes({ flatten: true })\n\n    // First, check assigned elements\n    for (const element of assignedElements) {\n      // If it's an icon element, add it\n      if (element.tagName === 'DAP-DS-ICON') {\n        iconElements.push(element)\n      }\n      // If it's a nested slot, recursively find icons in it\n      else if (element instanceof HTMLSlotElement) {\n        iconElements.push(...this.findIconElementsInSlot(element))\n      }\n      // If it's a custom element, search for icons in its light DOM children\n      // (slot default content appears in light DOM)\n      else if (element.children) {\n        const lightDomIcons = Array.from(\n          element.querySelectorAll('dap-ds-icon'),\n        )\n        iconElements.push(...lightDomIcons)\n      }\n    }\n\n    // Also check assigned nodes for icon elements (in case they're not in assignedElements)\n    for (const node of assignedNodes) {\n      if (node instanceof Element && node.tagName === 'DAP-DS-ICON') {\n        if (!iconElements.includes(node)) {\n          iconElements.push(node)\n        }\n      }\n      // Check children of element nodes\n      else if (node instanceof Element) {\n        const childIcons = Array.from(node.querySelectorAll('dap-ds-icon'))\n        for (const icon of childIcons) {\n          if (!iconElements.includes(icon)) {\n            iconElements.push(icon)\n          }\n        }\n      }\n    }\n\n    return iconElements\n  }\n\n  /**\n   * Applies size props to all icon elements in the slot\n   */\n  private applySizeToSlotIcons(): void {\n    if (!this.shadowRoot) return\n\n    const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n    if (!iconSlot) return\n\n    const iconElements = this.findIconElementsInSlot(iconSlot)\n\n    for (const iconElement of iconElements) {\n      if (this.iconSize !== undefined) {\n        iconElement.setAttribute('staticSize', this.iconSize.toString())\n        iconElement.setAttribute('size', this.iconSize.toString())\n      } else {\n        iconElement.setAttribute('size', this.effectiveSize)\n        iconElement.removeAttribute('staticSize')\n      }\n    }\n  }\n\n  /**\n   * Handles slot change events to update icon sizes\n   */\n  private handleSlotChange = (): void => {\n    // Set up listeners on any newly assigned nested slots\n    if (this.shadowRoot) {\n      const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n      if (iconSlot) {\n        const assignedElements = iconSlot.assignedElements({ flatten: true })\n        for (const element of assignedElements) {\n          if (element instanceof HTMLSlotElement) {\n            // Check if we already have a listener on this slot\n            if (!(element as any).__ddsSlotListenerAdded) {\n              element.addEventListener('slotchange', this.handleSlotChange)\n              ;(element as any).__ddsSlotListenerAdded = true\n            }\n          }\n        }\n      }\n    }\n\n    // Apply size to icons\n    this.applySizeToSlotIcons()\n  }\n\n  /**\n   * Sets up slotchange listeners for the main slot and any nested slots\n   */\n  private setupSlotListeners(slot: HTMLSlotElement): void {\n    slot.addEventListener('slotchange', this.handleSlotChange)\n\n    // Also listen to nested slots that are already assigned\n    const assignedElements = slot.assignedElements({ flatten: true })\n    for (const element of assignedElements) {\n      if (element instanceof HTMLSlotElement) {\n        element.addEventListener('slotchange', this.handleSlotChange)\n        ;(element as any).__ddsSlotListenerAdded = true\n      }\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    if (this.shadowRoot) {\n      const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n      if (iconSlot) {\n        this.setupSlotListeners(iconSlot)\n      }\n    }\n\n    // Use requestAnimationFrame to ensure slots are fully assigned\n    requestAnimationFrame(() => {\n      this.applySizeToSlotIcons()\n    })\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    // Persist value before removing host attribute so the inner button keeps it.\n    // Read the attribute string directly: the native `ariaLabel` getter is empty\n    // once the attribute is stripped, and Lit's AttributePart caches the value so\n    // it is never re-applied to the host on later re-renders (e.g. when the button\n    // toggles disabled). Fall back to the native property for consumers that set it\n    // via `.ariaLabel`. Only overwrite when a value is actually present so the\n    // persisted label survives re-renders that no longer carry the attribute.\n    const incomingAriaLabel = this.getAttribute('aria-label') ?? this.ariaLabel\n    if (incomingAriaLabel != null && incomingAriaLabel !== '') {\n      this._ariaLabelForButton = incomingAriaLabel\n    }\n    this.removeAttribute('aria-label')\n\n    // Update slot icons when size, sizeMap, or iconSize changes (sizeMap drives effectiveSize on viewport change)\n    if (\n      changedProperties.has('size') ||\n      changedProperties.has('sizeMap') ||\n      changedProperties.has('iconSize') ||\n      this.sizeMap\n    ) {\n      requestAnimationFrame(() => {\n        this.applySizeToSlotIcons()\n      })\n    }\n  }\n\n  focus() {\n    this.shadowRoot?.querySelector('button')?.focus()\n  }\n\n  render() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=${this.disabled}\n        type=${this.htmlType}\n        aria-label=${ifDefined(this.effectiveAriaLabel) || ''}\n        aria-expanded=${ifDefined(this.ariaExpanded ?? undefined)}\n        aria-haspopup=${ifDefined(this.ariaHasPopup ?? undefined)}\n        class=${clsx(\n          'icon-button',\n          {\n            [`icon-button--${this.effectiveSize}`]:\n              this.effectiveSize && this.iconSize === undefined,\n          },\n          { [`icon-button--${this.size}`]: this.size },\n          { 'icon-button--disabled': this.disabled },\n          { 'icon-button--clean': this.clean },\n          `icon-button--${this.variant}`,\n        )}>\n        <div part=\"high-contrast\" class=\"button__highcontrast\"></div>\n        ${this.icon\n          ? html` <dap-ds-icon\n              part=\"content\"\n              exportparts=\"icon, base: icon-base\"\n              name=\"${this.icon}\"\n              aria-hidden=\"true\"\n              staticSize=${ifDefined(this.iconSize)}\n              size=${(this.effectiveSize === 'xxs'\n                ? 'xs'\n                : this.effectiveSize) as ButtonSize}>\n            </dap-ds-icon>`\n          : html` <slot></slot> `}\n      </button>\n    `\n  }\n}\n"],"names":["IconButtonBaseWithSized","SizedMixin","DdsElement","_DapDSIconButton","iconSlot","assignedElements","element","_a","slot","iconElements","assignedNodes","lightDomIcons","node","childIcons","icon","iconElement","_changedProperties","changedProperties","incomingAriaLabel","_b","html","ifDefined","clsx","DapDSIcon","unsafeCSS","styles","DapDSIconButton","__decorateClass","property"],"mappings":"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"}

package/dist/components/icon-button/icon-button.scss.js

@@ -1,4 +1,4 @@
-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{display:inline-flex;position:relative;--dds-icon-button-border-width: var(--dds-border-width-base);--dds-icon-button-border-color: var( --dds-border-neutral-transparent-interactive, #fff500 );--dds-icon-button-border-radius: var(--dds-radius-rounded);--dds-icon-button-hover-border-width: var(--dds-border-width-large);--dds-icon-button-active-border-width: var(--dds-border-width-xlarge);--dds-icon-button-transition: var(--dds-transition-all);--dds-icon-button-cursor: pointer;--dds-icon-button-disabled-cursor: not-allowed;--dds-icon-button-column-gap: var(--dds-spacing-100);--dds-icon-button-padding-lg: var(--dds-spacing-0);--dds-icon-button-padding-md: var(--dds-spacing-100);--dds-icon-button-padding-sm: var(--dds-spacing-50);--dds-icon-button-padding-xs: var(--dds-spacing-25);--dds-icon-button-size-lg: var(--dds-spacing-800);--dds-icon-button-size-md: var(--dds-spacing-600);--dds-icon-button-size-sm: var(--dds-spacing-400);--dds-icon-button-size-xs: var(--dds-spacing-300);--dds-icon-button-neutral-bg: var(--dds-transparent-black-subtle);--dds-icon-button-neutral-color: var(--dds-icon-neutral-base);--dds-icon-button-neutral-hover-bg: var(--dds-transparent-black-base);--dds-icon-button-neutral-active-bg: var(--dds-transparent-black-medium);--dds-icon-button-brand-bg: var(--dds-button-subtle-background-enabled);--dds-icon-button-brand-color: var(--dds-button-subtle-icon-enabled);--dds-icon-button-brand-hover-bg: var(--dds-button-subtle-background-hover);--dds-icon-button-brand-active-bg: var( --dds-button-subtle-background-pressed );--dds-icon-button-inverted-bg: var(--dds-transparent-white-subtle);--dds-icon-button-inverted-color: var(--dds-button-primary-icon-enabled);--dds-icon-button-inverted-hover-bg: var(--dds-transparent-white-base);--dds-icon-button-inverted-active-bg: var(--dds-transparent-white-medium);--dds-icon-button-inverted-brand-bg: var( --dds-button-primary-background-enabled );--dds-icon-button-inverted-brand-color: var( --dds-button-primary-icon-enabled );--dds-icon-button-inverted-brand-hover-bg: var( --dds-button-primary-background-enabled );--dds-icon-button-inverted-brand-active-bg: var( --dds-button-primary-background-enabled );--dds-icon-button-disabled-color: var(--dds-icon-neutral-disabled);--dds-icon-button-disabled-bg: transparent}.button__highcontrast{position:absolute;width:100%;height:100%;border:var(--dds-icon-button-border-width) solid var(--dds-icon-button-border-color);border-radius:var(--dds-icon-button-border-radius)}.button__highcontrast:hover{border-width:var(--dds-icon-button-hover-border-width)}.button__highcontrast:active{border-width:var(--dds-icon-button-active-border-width)}.icon-button{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;padding:0;column-gap:var(--dds-icon-button-column-gap);transition:var(--dds-icon-button-transition);border-width:0;border-radius:var(--dds-icon-button-border-radius);font-weight:700;cursor:var(--dds-icon-button-cursor)}.icon-button:focus-visible{outline-style:solid}.icon-button--lg{width:var(--dds-icon-button-size-lg);height:var(--dds-icon-button-size-lg);padding:var(--dds-icon-button-padding-lg)}.icon-button--md{width:var(--dds-icon-button-size-md);height:var(--dds-icon-button-size-md);padding:var(--dds-icon-button-padding-md)}.icon-button--sm{width:var(--dds-icon-button-size-sm);height:var(--dds-icon-button-size-sm);padding:var(--dds-icon-button-padding-sm)}.icon-button--xs{width:var(--dds-icon-button-size-xs);height:var(--dds-icon-button-size-xs);padding:var(--dds-icon-button-padding-xs)}.icon-button--neutral{background-color:var(--dds-icon-button-neutral-bg);color:var(--dds-icon-button-neutral-color)}.icon-button--neutral:hover{background-color:var(--dds-icon-button-neutral-hover-bg)}.icon-button--neutral:active{background-color:var(--dds-icon-button-neutral-active-bg)}.icon-button--brand{background-color:var(--dds-icon-button-brand-bg);color:var(--dds-icon-button-brand-color)}.icon-button--brand:hover{background-color:var(--dds-icon-button-brand-hover-bg)}.icon-button--brand:active{background-color:var(--dds-icon-button-brand-active-bg)}.icon-button--inverted{background-color:var(--dds-icon-button-inverted-bg);color:var(--dds-icon-button-inverted-color)}.icon-button--inverted:hover{background-color:var(--dds-icon-button-inverted-hover-bg)}.icon-button--inverted:active{background-color:var(--dds-icon-button-inverted-active-bg)}.icon-button--inverted-brand{background-color:var(--dds-icon-button-inverted-brand-bg);color:var(--dds-icon-button-inverted-brand-color)}.icon-button--inverted-brand:hover{background-color:var(--dds-icon-button-inverted-brand-hover-bg)}.icon-button--inverted-brand:active{background-color:var(--dds-icon-button-inverted-brand-active-bg)}.icon-button--clean{background-color:transparent}.icon-button--disabled{background-color:var(--dds-icon-button-disabled-bg, transparent);color:var(--dds-icon-button-disabled-color);cursor:var(--dds-icon-button-disabled-cursor)}.icon-button--disabled:hover,.icon-button--disabled:active{background-color:var(--dds-icon-button-disabled-bg, transparent);color:var(--dds-icon-button-disabled-color)}.icon-button--disabled>*{pointer-events:none}";
+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{display:inline-flex;position:relative;--dds-icon-button-border-width: var(--dds-border-width-base);--dds-icon-button-border-color: var( --dds-border-neutral-transparent-interactive, #fff500 );--dds-icon-button-border-radius: var(--dds-radius-rounded);--dds-icon-button-hover-border-width: var(--dds-border-width-large);--dds-icon-button-active-border-width: var(--dds-border-width-xlarge);--dds-icon-button-transition: var(--dds-transition-all);--dds-icon-button-cursor: pointer;--dds-icon-button-disabled-cursor: not-allowed;--dds-icon-button-column-gap: var(--dds-spacing-100);--dds-icon-button-padding-lg: var(--dds-spacing-0);--dds-icon-button-padding-md: var(--dds-spacing-100);--dds-icon-button-padding-sm: var(--dds-spacing-50);--dds-icon-button-padding-xs: var(--dds-spacing-25);--dds-icon-button-size-lg: var(--dds-spacing-800);--dds-icon-button-size-md: var(--dds-spacing-600);--dds-icon-button-size-sm: var(--dds-spacing-400);--dds-icon-button-size-xs: var(--dds-spacing-300);--dds-icon-button-neutral-bg: var(--dds-transparent-black-subtle);--dds-icon-button-neutral-color: var(--dds-icon-neutral-base);--dds-icon-button-neutral-hover-bg: var(--dds-transparent-black-base);--dds-icon-button-neutral-active-bg: var(--dds-transparent-black-medium);--dds-icon-button-brand-bg: var(--dds-button-subtle-background-enabled);--dds-icon-button-brand-color: var(--dds-button-subtle-icon-enabled);--dds-icon-button-brand-hover-bg: var(--dds-button-subtle-background-hover);--dds-icon-button-brand-active-bg: var( --dds-button-subtle-background-pressed );--dds-icon-button-inverted-bg: var(--dds-transparent-white-subtle);--dds-icon-button-inverted-color: var(--dds-button-primary-icon-enabled);--dds-icon-button-inverted-hover-bg: var(--dds-transparent-white-base);--dds-icon-button-inverted-active-bg: var(--dds-transparent-white-medium);--dds-icon-button-inverted-brand-bg: var( --dds-button-primary-background-enabled );--dds-icon-button-inverted-brand-color: var( --dds-button-primary-icon-enabled );--dds-icon-button-inverted-brand-hover-bg: var( --dds-button-primary-background-enabled );--dds-icon-button-inverted-brand-active-bg: var( --dds-button-primary-background-enabled );--dds-icon-button-disabled-color: var(--dds-icon-neutral-disabled);--dds-icon-button-disabled-bg: transparent}.button__highcontrast{position:absolute;width:100%;height:100%;border:var(--dds-icon-button-border-width) solid var(--dds-icon-button-border-color);border-radius:inherit}.button__highcontrast:hover{border-width:var(--dds-icon-button-hover-border-width)}.button__highcontrast:active{border-width:var(--dds-icon-button-active-border-width)}.icon-button{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;padding:0;column-gap:var(--dds-icon-button-column-gap);transition:var(--dds-icon-button-transition);border-width:0;border-start-start-radius:var(--dds-button-group-start-start-radius, var(--dds-icon-button-border-radius));border-start-end-radius:var(--dds-button-group-start-end-radius, var(--dds-icon-button-border-radius));border-end-start-radius:var(--dds-button-group-end-start-radius, var(--dds-icon-button-border-radius));border-end-end-radius:var(--dds-button-group-end-end-radius, var(--dds-icon-button-border-radius));font-weight:700;cursor:var(--dds-icon-button-cursor)}.icon-button:focus-visible{outline-style:solid}.icon-button--lg{width:var(--dds-icon-button-size-lg);height:var(--dds-icon-button-size-lg);padding:var(--dds-icon-button-padding-lg)}.icon-button--md{width:var(--dds-icon-button-size-md);height:var(--dds-icon-button-size-md);padding:var(--dds-icon-button-padding-md)}.icon-button--sm{width:var(--dds-icon-button-size-sm);height:var(--dds-icon-button-size-sm);padding:var(--dds-icon-button-padding-sm)}.icon-button--xs{width:var(--dds-icon-button-size-xs);height:var(--dds-icon-button-size-xs);padding:var(--dds-icon-button-padding-xs)}.icon-button--neutral{background-color:var(--dds-icon-button-neutral-bg);color:var(--dds-icon-button-neutral-color)}.icon-button--neutral:hover{background-color:var(--dds-icon-button-neutral-hover-bg)}.icon-button--neutral:active{background-color:var(--dds-icon-button-neutral-active-bg)}.icon-button--brand{background-color:var(--dds-icon-button-brand-bg);color:var(--dds-icon-button-brand-color)}.icon-button--brand:hover{background-color:var(--dds-icon-button-brand-hover-bg)}.icon-button--brand:active{background-color:var(--dds-icon-button-brand-active-bg)}.icon-button--inverted{background-color:var(--dds-icon-button-inverted-bg);color:var(--dds-icon-button-inverted-color)}.icon-button--inverted:hover{background-color:var(--dds-icon-button-inverted-hover-bg)}.icon-button--inverted:active{background-color:var(--dds-icon-button-inverted-active-bg)}.icon-button--inverted-brand{background-color:var(--dds-icon-button-inverted-brand-bg);color:var(--dds-icon-button-inverted-brand-color)}.icon-button--inverted-brand:hover{background-color:var(--dds-icon-button-inverted-brand-hover-bg)}.icon-button--inverted-brand:active{background-color:var(--dds-icon-button-inverted-brand-active-bg)}.icon-button--clean{background-color:transparent}.icon-button--disabled{background-color:var(--dds-icon-button-disabled-bg, transparent);color:var(--dds-icon-button-disabled-color);cursor:var(--dds-icon-button-disabled-cursor)}.icon-button--disabled:hover,.icon-button--disabled:active{background-color:var(--dds-icon-button-disabled-bg, transparent);color:var(--dds-icon-button-disabled-color)}.icon-button--disabled>*{pointer-events:none}";
 export {
   t as default
 };

package/dist/components/icons/arrows/arrows-arrow-down-line/arrows-arrow-down-line.component.js

@@ -1,18 +1,15 @@
-import { clsx as n } from "../../../../node_modules/clsx/dist/clsx.js";
-import "../../../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../../node_modules/lit-html/lit-html.js";
-import "../../../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as c } from "../../../../node_modules/lit-html/static.js";
-import { DdsElement as f } from "../../../../internal/dds-hu-element.js";
-import h from "../../../icon/_styles/icon.scss.js";
-import { unsafeCSS as m } from "../../../../node_modules/@lit/reactive-element/css-tag.js";
+import { clsx as f } from "../../../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as h } from "lit";
+import { property as a } from "lit/decorators.js";
+import { html as c } from "lit/static-html.js";
+import { DdsElement as n } from "../../../../internal/dds-hu-element.js";
+import m from "../../../icon/_styles/icon.scss.js";
 var u = Object.defineProperty, r = (o, t, p, y) => {
   for (var e = void 0, l = o.length - 1, d; l >= 0; l--)
     (d = o[l]) && (e = d(t, p, e) || e);
   return e && u(t, p, e), e;
 };
-const i = class i extends f {
+const i = class i extends n {
   constructor() {
     super(...arguments), this.size = 24, this.selected = !1, this.focusable = !1;
   }
@@ -24,7 +21,7 @@ const i = class i extends f {
     return c`
       <svg
         part="base"
-        class=${n("icon", "dap-ds-icon-arrow-down-line")}
+        class=${f("icon", "dap-ds-icon-arrow-down-line")}
         xmlns="http://www.w3.org/2000/svg"
         width=${this.size}
         height=${this.size}
@@ -41,7 +38,7 @@ const i = class i extends f {
     `;
   }
 };
-i.tagName = "dap-ds-icon-arrow-down-line", i.styles = m(h);
+i.tagName = "dap-ds-icon-arrow-down-line", i.styles = h(m);
 let s = i;
 r([
   a({ type: Number, reflect: !0 })

package/dist/components/icons/arrows/arrows-arrow-down-line/arrows-arrow-down-line.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrows-arrow-down-line.component.js","sources":["../../../../../src/components/icons/arrows/arrows-arrow-down-line/arrows-arrow-down-line.component.ts"],"sourcesContent":["/* eslint-disable prettier/prettier */\nimport { clsx } from 'clsx'\nimport { 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 styles from '../../../icon/_styles/icon.scss?inline'\n\n/**\n * `dap-ds-icon-arrow-down-line`\n * @summary An icon\n * @element dap-ds-icon-arrow-down-line\n * @title - ArrowsArrowDownLine\n * @group icon\n * @icontype arrows\n * \n * @attribute {number} size - (optional) The width and height in pixels\n * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute\n * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility\n * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus\n *\n * @csspart base - The main icon container.\n */\nexport default class ArrowsArrowDownLine extends DdsElement {\n  static tagName = 'dap-ds-icon-arrow-down-line'\n\n  /** (optional) The width and height in pixels */\n  @property({ type: Number, reflect: true }) size? = 24\n  /** (optional) Sets the icon color via the `fill` attribute */\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false\n  /** (optional) When using the icon standalone, make it meaningful for accessibility */\n  @property() accessibilityTitle?: string\n  /** (optional) If `true` the icon can receive focus */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <svg\n        part=\"base\"\n        class=${clsx('icon', 'dap-ds-icon-arrow-down-line')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        tabindex=${this.focusable ? 0 : -1}\n        aria-hidden=${this.ariaHidden ?? 'true'}>\n        ${this.accessibilityTitle\n          ? html`<title>${this.accessibilityTitle}</title>`\n          : null}\n        <g part=\"container\">\n          <g>\n            <path d=\"m13 16.172 5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2z\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_ArrowsArrowDownLine","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","ArrowsArrowDownLine","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAA4BC,EAAW;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA,IAEc,KAAA,WAAA,IAId,KAAA,YAAA;AAAA,EAAA;AAAA,EAIzC,aAAaC,GAA6E;AAClG,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;;AACA,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,QAAQ,6BAA6B,CAAC;AAAA;AAAA,gBAE3C,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA,mBAEP,KAAK,YAAY,IAAI,EAAE;AAAA,uBACpBC,IAAA,KAAK,eAAL,OAAAA,IAAmB,MAAM;AAAA,UACrC,KAAK,qBACHF,WAAc,KAAK,kBAAkB,aACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAShB;AAzCEH,EAAO,UAAU,+BAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,MAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,UAAA;AAEhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,oBAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;"}
+{"version":3,"file":"arrows-arrow-down-line.component.js","sources":["../../../../../src/components/icons/arrows/arrows-arrow-down-line/arrows-arrow-down-line.component.ts"],"sourcesContent":["/* eslint-disable prettier/prettier */\nimport { clsx } from 'clsx'\nimport { 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 styles from '../../../icon/_styles/icon.scss?inline'\n\n/**\n * `dap-ds-icon-arrow-down-line`\n * @summary An icon\n * @element dap-ds-icon-arrow-down-line\n * @title - ArrowsArrowDownLine\n * @group icon\n * @icontype arrows\n * \n * @attribute {number} size - (optional) The width and height in pixels\n * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute\n * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility\n * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus\n *\n * @csspart base - The main icon container.\n */\nexport default class ArrowsArrowDownLine extends DdsElement {\n  static tagName = 'dap-ds-icon-arrow-down-line'\n\n  /** (optional) The width and height in pixels */\n  @property({ type: Number, reflect: true }) size? = 24\n  /** (optional) Sets the icon color via the `fill` attribute */\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false\n  /** (optional) When using the icon standalone, make it meaningful for accessibility */\n  @property() accessibilityTitle?: string\n  /** (optional) If `true` the icon can receive focus */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <svg\n        part=\"base\"\n        class=${clsx('icon', 'dap-ds-icon-arrow-down-line')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        tabindex=${this.focusable ? 0 : -1}\n        aria-hidden=${this.ariaHidden ?? 'true'}>\n        ${this.accessibilityTitle\n          ? html`<title>${this.accessibilityTitle}</title>`\n          : null}\n        <g part=\"container\">\n          <g>\n            <path d=\"m13 16.172 5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2z\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_ArrowsArrowDownLine","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","ArrowsArrowDownLine","__decorateClass","property"],"mappings":";;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAA4BC,EAAW;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA,IAEc,KAAA,WAAA,IAId,KAAA,YAAA;AAAA,EAAA;AAAA,EAIzC,aAAaC,GAA6E;AAClG,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;;AACA,WAAAC;AAAA;AAAA;AAAA,gBAGKC,EAAK,QAAQ,6BAA6B,CAAC;AAAA;AAAA,gBAE3C,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA,mBAEP,KAAK,YAAY,IAAI,EAAE;AAAA,uBACpBC,IAAA,KAAK,eAAL,OAAAA,IAAmB,MAAM;AAAA,UACrC,KAAK,qBACHF,WAAc,KAAK,kBAAkB,aACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAShB;AAzCEH,EAAO,UAAU,+BAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,MAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,UAAA;AAEhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,oBAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;"}

package/dist/components/icons/arrows/arrows-arrow-down-s-fill/arrows-arrow-down-s-fill.component.js

@@ -1,18 +1,15 @@
 import { clsx as f } from "../../../../node_modules/clsx/dist/clsx.js";
-import "../../../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../../node_modules/lit-html/lit-html.js";
-import "../../../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as c } from "../../../../node_modules/lit-html/static.js";
-import { DdsElement as n } from "../../../../internal/dds-hu-element.js";
-import h from "../../../icon/_styles/icon.scss.js";
-import { unsafeCSS as m } from "../../../../node_modules/@lit/reactive-element/css-tag.js";
+import { unsafeCSS as n } from "lit";
+import { property as a } from "lit/decorators.js";
+import { html as c } from "lit/static-html.js";
+import { DdsElement as h } from "../../../../internal/dds-hu-element.js";
+import m from "../../../icon/_styles/icon.scss.js";
 var u = Object.defineProperty, r = (p, t, l, y) => {
   for (var e = void 0, o = p.length - 1, d; o >= 0; o--)
     (d = p[o]) && (e = d(t, l, e) || e);
   return e && u(t, l, e), e;
 };
-const i = class i extends n {
+const i = class i extends h {
   constructor() {
     super(...arguments), this.size = 24, this.selected = !1, this.focusable = !1;
   }
@@ -41,7 +38,7 @@ const i = class i extends n {
     `;
   }
 };
-i.tagName = "dap-ds-icon-arrow-down-s-fill", i.styles = m(h);
+i.tagName = "dap-ds-icon-arrow-down-s-fill", i.styles = n(m);
 let s = i;
 r([
   a({ type: Number, reflect: !0 })

package/dist/components/icons/arrows/arrows-arrow-down-s-fill/arrows-arrow-down-s-fill.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrows-arrow-down-s-fill.component.js","sources":["../../../../../src/components/icons/arrows/arrows-arrow-down-s-fill/arrows-arrow-down-s-fill.component.ts"],"sourcesContent":["/* eslint-disable prettier/prettier */\nimport { clsx } from 'clsx'\nimport { 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 styles from '../../../icon/_styles/icon.scss?inline'\n\n/**\n * `dap-ds-icon-arrow-down-s-fill`\n * @summary An icon\n * @element dap-ds-icon-arrow-down-s-fill\n * @title - ArrowsArrowDownSFill\n * @group icon\n * @icontype arrows\n * \n * @attribute {number} size - (optional) The width and height in pixels\n * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute\n * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility\n * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus\n *\n * @csspart base - The main icon container.\n */\nexport default class ArrowsArrowDownSFill extends DdsElement {\n  static tagName = 'dap-ds-icon-arrow-down-s-fill'\n\n  /** (optional) The width and height in pixels */\n  @property({ type: Number, reflect: true }) size? = 24\n  /** (optional) Sets the icon color via the `fill` attribute */\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false\n  /** (optional) When using the icon standalone, make it meaningful for accessibility */\n  @property() accessibilityTitle?: string\n  /** (optional) If `true` the icon can receive focus */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <svg\n        part=\"base\"\n        class=${clsx('icon', 'dap-ds-icon-arrow-down-s-fill')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        tabindex=${this.focusable ? 0 : -1}\n        aria-hidden=${this.ariaHidden ?? 'true'}>\n        ${this.accessibilityTitle\n          ? html`<title>${this.accessibilityTitle}</title>`\n          : null}\n        <g part=\"container\">\n          <g>\n            <path d=\"m12 16-6-6h12z\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_ArrowsArrowDownSFill","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","ArrowsArrowDownSFill","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAA6BC,EAAW;AAAA,EAA7D,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA,IAEc,KAAA,WAAA,IAId,KAAA,YAAA;AAAA,EAAA;AAAA,EAIzC,aAAaC,GAA6E;AAClG,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;;AACA,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,QAAQ,+BAA+B,CAAC;AAAA;AAAA,gBAE7C,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA,mBAEP,KAAK,YAAY,IAAI,EAAE;AAAA,uBACpBC,IAAA,KAAK,eAAL,OAAAA,IAAmB,MAAM;AAAA,UACrC,KAAK,qBACHF,WAAc,KAAK,kBAAkB,aACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAShB;AAzCEH,EAAO,UAAU,iCAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,MAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,UAAA;AAEhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,oBAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;"}
+{"version":3,"file":"arrows-arrow-down-s-fill.component.js","sources":["../../../../../src/components/icons/arrows/arrows-arrow-down-s-fill/arrows-arrow-down-s-fill.component.ts"],"sourcesContent":["/* eslint-disable prettier/prettier */\nimport { clsx } from 'clsx'\nimport { 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 styles from '../../../icon/_styles/icon.scss?inline'\n\n/**\n * `dap-ds-icon-arrow-down-s-fill`\n * @summary An icon\n * @element dap-ds-icon-arrow-down-s-fill\n * @title - ArrowsArrowDownSFill\n * @group icon\n * @icontype arrows\n * \n * @attribute {number} size - (optional) The width and height in pixels\n * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute\n * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility\n * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus\n *\n * @csspart base - The main icon container.\n */\nexport default class ArrowsArrowDownSFill extends DdsElement {\n  static tagName = 'dap-ds-icon-arrow-down-s-fill'\n\n  /** (optional) The width and height in pixels */\n  @property({ type: Number, reflect: true }) size? = 24\n  /** (optional) Sets the icon color via the `fill` attribute */\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false\n  /** (optional) When using the icon standalone, make it meaningful for accessibility */\n  @property() accessibilityTitle?: string\n  /** (optional) If `true` the icon can receive focus */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <svg\n        part=\"base\"\n        class=${clsx('icon', 'dap-ds-icon-arrow-down-s-fill')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        tabindex=${this.focusable ? 0 : -1}\n        aria-hidden=${this.ariaHidden ?? 'true'}>\n        ${this.accessibilityTitle\n          ? html`<title>${this.accessibilityTitle}</title>`\n          : null}\n        <g part=\"container\">\n          <g>\n            <path d=\"m12 16-6-6h12z\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_ArrowsArrowDownSFill","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","ArrowsArrowDownSFill","__decorateClass","property"],"mappings":";;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAA6BC,EAAW;AAAA,EAA7D,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA,IAEc,KAAA,WAAA,IAId,KAAA,YAAA;AAAA,EAAA;AAAA,EAIzC,aAAaC,GAA6E;AAClG,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;;AACA,WAAAC;AAAA;AAAA;AAAA,gBAGKC,EAAK,QAAQ,+BAA+B,CAAC;AAAA;AAAA,gBAE7C,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA,mBAEP,KAAK,YAAY,IAAI,EAAE;AAAA,uBACpBC,IAAA,KAAK,eAAL,OAAAA,IAAmB,MAAM;AAAA,UACrC,KAAK,qBACHF,WAAc,KAAK,kBAAkB,aACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAShB;AAzCEH,EAAO,UAAU,iCAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,MAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,UAAA;AAEhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,oBAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;"}

package/dist/components/icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.js

@@ -1,18 +1,15 @@
-import { clsx as n } from "../../../../node_modules/clsx/dist/clsx.js";
-import "../../../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../../node_modules/lit-html/lit-html.js";
-import "../../../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as c } from "../../../../node_modules/lit-html/static.js";
-import { DdsElement as f } from "../../../../internal/dds-hu-element.js";
+import { clsx as f } from "../../../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as n } from "lit";
+import { property as a } from "lit/decorators.js";
+import { html as c } from "lit/static-html.js";
+import { DdsElement as h } from "../../../../internal/dds-hu-element.js";
 import m from "../../../icon/_styles/icon.scss.js";
-import { unsafeCSS as h } from "../../../../node_modules/@lit/reactive-element/css-tag.js";
-var u = Object.defineProperty, r = (p, t, l, y) => {
-  for (var e = void 0, o = p.length - 1, d; o >= 0; o--)
-    (d = p[o]) && (e = d(t, l, e) || e);
-  return e && u(t, l, e), e;
+var u = Object.defineProperty, r = (o, t, p, y) => {
+  for (var e = void 0, l = o.length - 1, d; l >= 0; l--)
+    (d = o[l]) && (e = d(t, p, e) || e);
+  return e && u(t, p, e), e;
 };
-const i = class i extends f {
+const i = class i extends h {
   constructor() {
     super(...arguments), this.size = 24, this.selected = !1, this.focusable = !1;
   }
@@ -24,7 +21,7 @@ const i = class i extends f {
     return c`
       <svg
         part="base"
-        class=${n("icon", "dap-ds-icon-arrow-down-s-line")}
+        class=${f("icon", "dap-ds-icon-arrow-down-s-line")}
         xmlns="http://www.w3.org/2000/svg"
         width=${this.size}
         height=${this.size}
@@ -41,7 +38,7 @@ const i = class i extends f {
     `;
   }
 };
-i.tagName = "dap-ds-icon-arrow-down-s-line", i.styles = h(m);
+i.tagName = "dap-ds-icon-arrow-down-s-line", i.styles = n(m);
 let s = i;
 r([
   a({ type: Number, reflect: !0 })

package/dist/components/icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrows-arrow-down-s-line.component.js","sources":["../../../../../src/components/icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.ts"],"sourcesContent":["/* eslint-disable prettier/prettier */\nimport { clsx } from 'clsx'\nimport { 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 styles from '../../../icon/_styles/icon.scss?inline'\n\n/**\n * `dap-ds-icon-arrow-down-s-line`\n * @summary An icon\n * @element dap-ds-icon-arrow-down-s-line\n * @title - ArrowsArrowDownSLine\n * @group icon\n * @icontype arrows\n * \n * @attribute {number} size - (optional) The width and height in pixels\n * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute\n * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility\n * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus\n *\n * @csspart base - The main icon container.\n */\nexport default class ArrowsArrowDownSLine extends DdsElement {\n  static tagName = 'dap-ds-icon-arrow-down-s-line'\n\n  /** (optional) The width and height in pixels */\n  @property({ type: Number, reflect: true }) size? = 24\n  /** (optional) Sets the icon color via the `fill` attribute */\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false\n  /** (optional) When using the icon standalone, make it meaningful for accessibility */\n  @property() accessibilityTitle?: string\n  /** (optional) If `true` the icon can receive focus */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <svg\n        part=\"base\"\n        class=${clsx('icon', 'dap-ds-icon-arrow-down-s-line')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        tabindex=${this.focusable ? 0 : -1}\n        aria-hidden=${this.ariaHidden ?? 'true'}>\n        ${this.accessibilityTitle\n          ? html`<title>${this.accessibilityTitle}</title>`\n          : null}\n        <g part=\"container\">\n          <g>\n            <path d=\"m12 13.171 4.95-4.95 1.414 1.415L12 16 5.636 9.636 7.05 8.222z\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_ArrowsArrowDownSLine","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","ArrowsArrowDownSLine","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAA6BC,EAAW;AAAA,EAA7D,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA,IAEc,KAAA,WAAA,IAId,KAAA,YAAA;AAAA,EAAA;AAAA,EAIzC,aAAaC,GAA6E;AAClG,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;;AACA,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,QAAQ,+BAA+B,CAAC;AAAA;AAAA,gBAE7C,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA,mBAEP,KAAK,YAAY,IAAI,EAAE;AAAA,uBACpBC,IAAA,KAAK,eAAL,OAAAA,IAAmB,MAAM;AAAA,UACrC,KAAK,qBACHF,WAAc,KAAK,kBAAkB,aACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAShB;AAzCEH,EAAO,UAAU,iCAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,MAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,UAAA;AAEhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,oBAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;"}
+{"version":3,"file":"arrows-arrow-down-s-line.component.js","sources":["../../../../../src/components/icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.ts"],"sourcesContent":["/* eslint-disable prettier/prettier */\nimport { clsx } from 'clsx'\nimport { 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 styles from '../../../icon/_styles/icon.scss?inline'\n\n/**\n * `dap-ds-icon-arrow-down-s-line`\n * @summary An icon\n * @element dap-ds-icon-arrow-down-s-line\n * @title - ArrowsArrowDownSLine\n * @group icon\n * @icontype arrows\n * \n * @attribute {number} size - (optional) The width and height in pixels\n * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute\n * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility\n * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus\n *\n * @csspart base - The main icon container.\n */\nexport default class ArrowsArrowDownSLine extends DdsElement {\n  static tagName = 'dap-ds-icon-arrow-down-s-line'\n\n  /** (optional) The width and height in pixels */\n  @property({ type: Number, reflect: true }) size? = 24\n  /** (optional) Sets the icon color via the `fill` attribute */\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false\n  /** (optional) When using the icon standalone, make it meaningful for accessibility */\n  @property() accessibilityTitle?: string\n  /** (optional) If `true` the icon can receive focus */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <svg\n        part=\"base\"\n        class=${clsx('icon', 'dap-ds-icon-arrow-down-s-line')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        tabindex=${this.focusable ? 0 : -1}\n        aria-hidden=${this.ariaHidden ?? 'true'}>\n        ${this.accessibilityTitle\n          ? html`<title>${this.accessibilityTitle}</title>`\n          : null}\n        <g part=\"container\">\n          <g>\n            <path d=\"m12 13.171 4.95-4.95 1.414 1.415L12 16 5.636 9.636 7.05 8.222z\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_ArrowsArrowDownSLine","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","ArrowsArrowDownSLine","__decorateClass","property"],"mappings":";;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAA6BC,EAAW;AAAA,EAA7D,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA,IAEc,KAAA,WAAA,IAId,KAAA,YAAA;AAAA,EAAA;AAAA,EAIzC,aAAaC,GAA6E;AAClG,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;;AACA,WAAAC;AAAA;AAAA;AAAA,gBAGKC,EAAK,QAAQ,+BAA+B,CAAC;AAAA;AAAA,gBAE7C,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA,mBAEP,KAAK,YAAY,IAAI,EAAE;AAAA,uBACpBC,IAAA,KAAK,eAAL,OAAAA,IAAmB,MAAM;AAAA,UACrC,KAAK,qBACHF,WAAc,KAAK,kBAAkB,aACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAShB;AAzCEH,EAAO,UAAU,iCAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,MAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,UAAA;AAEhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,oBAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;"}

package/dist/components/icons/arrows/arrows-arrow-left-down-line/arrows-arrow-left-down-line.component.js

@@ -1,18 +1,15 @@
-import { clsx as n } from "../../../../node_modules/clsx/dist/clsx.js";
-import "../../../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../../node_modules/lit-html/lit-html.js";
-import "../../../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as c } from "../../../../node_modules/lit-html/static.js";
-import { DdsElement as h } from "../../../../internal/dds-hu-element.js";
+import { clsx as h } from "../../../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as n } from "lit";
+import { property as a } from "lit/decorators.js";
+import { html as c } from "lit/static-html.js";
+import { DdsElement as f } from "../../../../internal/dds-hu-element.js";
 import m from "../../../icon/_styles/icon.scss.js";
-import { unsafeCSS as f } from "../../../../node_modules/@lit/reactive-element/css-tag.js";
 var u = Object.defineProperty, r = (o, t, p, y) => {
   for (var e = void 0, l = o.length - 1, d; l >= 0; l--)
     (d = o[l]) && (e = d(t, p, e) || e);
   return e && u(t, p, e), e;
 };
-const i = class i extends h {
+const i = class i extends f {
   constructor() {
     super(...arguments), this.size = 24, this.selected = !1, this.focusable = !1;
   }
@@ -24,7 +21,7 @@ const i = class i extends h {
     return c`
       <svg
         part="base"
-        class=${n("icon", "dap-ds-icon-arrow-left-down-line")}
+        class=${h("icon", "dap-ds-icon-arrow-left-down-line")}
         xmlns="http://www.w3.org/2000/svg"
         width=${this.size}
         height=${this.size}
@@ -41,7 +38,7 @@ const i = class i extends h {
     `;
   }
 };
-i.tagName = "dap-ds-icon-arrow-left-down-line", i.styles = f(m);
+i.tagName = "dap-ds-icon-arrow-left-down-line", i.styles = n(m);
 let s = i;
 r([
   a({ type: Number, reflect: !0 })

package/dist/components/icons/arrows/arrows-arrow-left-down-line/arrows-arrow-left-down-line.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrows-arrow-left-down-line.component.js","sources":["../../../../../src/components/icons/arrows/arrows-arrow-left-down-line/arrows-arrow-left-down-line.component.ts"],"sourcesContent":["/* eslint-disable prettier/prettier */\nimport { clsx } from 'clsx'\nimport { 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 styles from '../../../icon/_styles/icon.scss?inline'\n\n/**\n * `dap-ds-icon-arrow-left-down-line`\n * @summary An icon\n * @element dap-ds-icon-arrow-left-down-line\n * @title - ArrowsArrowLeftDownLine\n * @group icon\n * @icontype arrows\n * \n * @attribute {number} size - (optional) The width and height in pixels\n * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute\n * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility\n * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus\n *\n * @csspart base - The main icon container.\n */\nexport default class ArrowsArrowLeftDownLine extends DdsElement {\n  static tagName = 'dap-ds-icon-arrow-left-down-line'\n\n  /** (optional) The width and height in pixels */\n  @property({ type: Number, reflect: true }) size? = 24\n  /** (optional) Sets the icon color via the `fill` attribute */\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false\n  /** (optional) When using the icon standalone, make it meaningful for accessibility */\n  @property() accessibilityTitle?: string\n  /** (optional) If `true` the icon can receive focus */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <svg\n        part=\"base\"\n        class=${clsx('icon', 'dap-ds-icon-arrow-left-down-line')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        tabindex=${this.focusable ? 0 : -1}\n        aria-hidden=${this.ariaHidden ?? 'true'}>\n        ${this.accessibilityTitle\n          ? html`<title>${this.accessibilityTitle}</title>`\n          : null}\n        <g part=\"container\">\n          <g>\n            <path d=\"m9 13.589 8.607-8.607 1.414 1.415-8.607 8.606H18v2H7v-11h2z\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_ArrowsArrowLeftDownLine","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","ArrowsArrowLeftDownLine","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAAgCC,EAAW;AAAA,EAAhE,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA,IAEc,KAAA,WAAA,IAId,KAAA,YAAA;AAAA,EAAA;AAAA,EAIzC,aAAaC,GAA6E;AAClG,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;;AACA,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,QAAQ,kCAAkC,CAAC;AAAA;AAAA,gBAEhD,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA,mBAEP,KAAK,YAAY,IAAI,EAAE;AAAA,uBACpBC,IAAA,KAAK,eAAL,OAAAA,IAAmB,MAAM;AAAA,UACrC,KAAK,qBACHF,WAAc,KAAK,kBAAkB,aACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAShB;AAzCEH,EAAO,UAAU,oCAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,MAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,UAAA;AAEhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,oBAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;"}
+{"version":3,"file":"arrows-arrow-left-down-line.component.js","sources":["../../../../../src/components/icons/arrows/arrows-arrow-left-down-line/arrows-arrow-left-down-line.component.ts"],"sourcesContent":["/* eslint-disable prettier/prettier */\nimport { clsx } from 'clsx'\nimport { 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 styles from '../../../icon/_styles/icon.scss?inline'\n\n/**\n * `dap-ds-icon-arrow-left-down-line`\n * @summary An icon\n * @element dap-ds-icon-arrow-left-down-line\n * @title - ArrowsArrowLeftDownLine\n * @group icon\n * @icontype arrows\n * \n * @attribute {number} size - (optional) The width and height in pixels\n * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute\n * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility\n * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus\n *\n * @csspart base - The main icon container.\n */\nexport default class ArrowsArrowLeftDownLine extends DdsElement {\n  static tagName = 'dap-ds-icon-arrow-left-down-line'\n\n  /** (optional) The width and height in pixels */\n  @property({ type: Number, reflect: true }) size? = 24\n  /** (optional) Sets the icon color via the `fill` attribute */\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false\n  /** (optional) When using the icon standalone, make it meaningful for accessibility */\n  @property() accessibilityTitle?: string\n  /** (optional) If `true` the icon can receive focus */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <svg\n        part=\"base\"\n        class=${clsx('icon', 'dap-ds-icon-arrow-left-down-line')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        tabindex=${this.focusable ? 0 : -1}\n        aria-hidden=${this.ariaHidden ?? 'true'}>\n        ${this.accessibilityTitle\n          ? html`<title>${this.accessibilityTitle}</title>`\n          : null}\n        <g part=\"container\">\n          <g>\n            <path d=\"m9 13.589 8.607-8.607 1.414 1.415-8.607 8.606H18v2H7v-11h2z\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_ArrowsArrowLeftDownLine","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","ArrowsArrowLeftDownLine","__decorateClass","property"],"mappings":";;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAAgCC,EAAW;AAAA,EAAhE,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA,IAEc,KAAA,WAAA,IAId,KAAA,YAAA;AAAA,EAAA;AAAA,EAIzC,aAAaC,GAA6E;AAClG,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;;AACA,WAAAC;AAAA;AAAA;AAAA,gBAGKC,EAAK,QAAQ,kCAAkC,CAAC;AAAA;AAAA,gBAEhD,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA,mBAEP,KAAK,YAAY,IAAI,EAAE;AAAA,uBACpBC,IAAA,KAAK,eAAL,OAAAA,IAAmB,MAAM;AAAA,UACrC,KAAK,qBACHF,WAAc,KAAK,kBAAkB,aACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAShB;AAzCEH,EAAO,UAAU,oCAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,MAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,UAAA;AAEhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,oBAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;"}

package/dist/components/icons/arrows/arrows-arrow-left-l-line/arrows-arrow-left-l-line.component.js

@@ -1,18 +1,15 @@
 import { clsx as n } from "../../../../node_modules/clsx/dist/clsx.js";
-import "../../../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../../node_modules/lit-html/lit-html.js";
-import "../../../../node_modules/lit-element/lit-element.js";
-import { property as l } from "../../../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as c } from "../../../../node_modules/lit-html/static.js";
-import { DdsElement as f } from "../../../../internal/dds-hu-element.js";
-import h from "../../../icon/_styles/icon.scss.js";
-import { unsafeCSS as m } from "../../../../node_modules/@lit/reactive-element/css-tag.js";
-var u = Object.defineProperty, r = (o, t, p, y) => {
-  for (var e = void 0, a = o.length - 1, d; a >= 0; a--)
-    (d = o[a]) && (e = d(t, p, e) || e);
-  return e && u(t, p, e), e;
+import { unsafeCSS as f } from "lit";
+import { property as l } from "lit/decorators.js";
+import { html as c } from "lit/static-html.js";
+import { DdsElement as h } from "../../../../internal/dds-hu-element.js";
+import u from "../../../icon/_styles/icon.scss.js";
+var m = Object.defineProperty, a = (o, t, p, y) => {
+  for (var e = void 0, r = o.length - 1, d; r >= 0; r--)
+    (d = o[r]) && (e = d(t, p, e) || e);
+  return e && m(t, p, e), e;
 };
-const i = class i extends f {
+const i = class i extends h {
   constructor() {
     super(...arguments), this.size = 24, this.selected = !1, this.focusable = !1;
   }
@@ -41,18 +38,18 @@ const i = class i extends f {
     `;
   }
 };
-i.tagName = "dap-ds-icon-arrow-left-l-line", i.styles = m(h);
+i.tagName = "dap-ds-icon-arrow-left-l-line", i.styles = f(u);
 let s = i;
-r([
+a([
   l({ type: Number, reflect: !0 })
 ], s.prototype, "size");
-r([
+a([
   l({ type: Boolean, reflect: !0 })
 ], s.prototype, "selected");
-r([
+a([
   l()
 ], s.prototype, "accessibilityTitle");
-r([
+a([
   l({ type: Boolean })
 ], s.prototype, "focusable");
 export {

package/dist/components/icons/arrows/arrows-arrow-left-l-line/arrows-arrow-left-l-line.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrows-arrow-left-l-line.component.js","sources":["../../../../../src/components/icons/arrows/arrows-arrow-left-l-line/arrows-arrow-left-l-line.component.ts"],"sourcesContent":["/* eslint-disable prettier/prettier */\nimport { clsx } from 'clsx'\nimport { 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 styles from '../../../icon/_styles/icon.scss?inline'\n\n/**\n * `dap-ds-icon-arrow-left-l-line`\n * @summary An icon\n * @element dap-ds-icon-arrow-left-l-line\n * @title - ArrowsArrowLeftLLine\n * @group icon\n * @icontype arrows\n * \n * @attribute {number} size - (optional) The width and height in pixels\n * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute\n * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility\n * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus\n *\n * @csspart base - The main icon container.\n */\nexport default class ArrowsArrowLeftLLine extends DdsElement {\n  static tagName = 'dap-ds-icon-arrow-left-l-line'\n\n  /** (optional) The width and height in pixels */\n  @property({ type: Number, reflect: true }) size? = 24\n  /** (optional) Sets the icon color via the `fill` attribute */\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false\n  /** (optional) When using the icon standalone, make it meaningful for accessibility */\n  @property() accessibilityTitle?: string\n  /** (optional) If `true` the icon can receive focus */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <svg\n        part=\"base\"\n        class=${clsx('icon', 'dap-ds-icon-arrow-left-l-line')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        tabindex=${this.focusable ? 0 : -1}\n        aria-hidden=${this.ariaHidden ?? 'true'}>\n        ${this.accessibilityTitle\n          ? html`<title>${this.accessibilityTitle}</title>`\n          : null}\n        <g part=\"container\">\n          <g>\n            <path fill-rule=\"evenodd\" d=\"M15.294 3.293 6.587 12l8.707 8.707 1.414-1.414L9.415 12l7.293-7.293z\" clip-rule=\"evenodd\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_ArrowsArrowLeftLLine","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","ArrowsArrowLeftLLine","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAA6BC,EAAW;AAAA,EAA7D,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA,IAEc,KAAA,WAAA,IAId,KAAA,YAAA;AAAA,EAAA;AAAA,EAIzC,aAAaC,GAA6E;AAClG,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;;AACA,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,QAAQ,+BAA+B,CAAC;AAAA;AAAA,gBAE7C,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA,mBAEP,KAAK,YAAY,IAAI,EAAE;AAAA,uBACpBC,IAAA,KAAK,eAAL,OAAAA,IAAmB,MAAM;AAAA,UACrC,KAAK,qBACHF,WAAc,KAAK,kBAAkB,aACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAShB;AAzCEH,EAAO,UAAU,iCAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,MAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,UAAA;AAEhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,oBAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;"}
+{"version":3,"file":"arrows-arrow-left-l-line.component.js","sources":["../../../../../src/components/icons/arrows/arrows-arrow-left-l-line/arrows-arrow-left-l-line.component.ts"],"sourcesContent":["/* eslint-disable prettier/prettier */\nimport { clsx } from 'clsx'\nimport { 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 styles from '../../../icon/_styles/icon.scss?inline'\n\n/**\n * `dap-ds-icon-arrow-left-l-line`\n * @summary An icon\n * @element dap-ds-icon-arrow-left-l-line\n * @title - ArrowsArrowLeftLLine\n * @group icon\n * @icontype arrows\n * \n * @attribute {number} size - (optional) The width and height in pixels\n * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute\n * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility\n * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus\n *\n * @csspart base - The main icon container.\n */\nexport default class ArrowsArrowLeftLLine extends DdsElement {\n  static tagName = 'dap-ds-icon-arrow-left-l-line'\n\n  /** (optional) The width and height in pixels */\n  @property({ type: Number, reflect: true }) size? = 24\n  /** (optional) Sets the icon color via the `fill` attribute */\n  @property({ type: Boolean, reflect: true }) selected?: boolean = false\n  /** (optional) When using the icon standalone, make it meaningful for accessibility */\n  @property() accessibilityTitle?: string\n  /** (optional) If `true` the icon can receive focus */\n  @property({ type: Boolean }) focusable?: boolean = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n    super.firstUpdated(_changedProperties)\n\n    this.classList.add('dap-ds-icon')\n  }\n\n  render() {\n    return html`\n      <svg\n        part=\"base\"\n        class=${clsx('icon', 'dap-ds-icon-arrow-left-l-line')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=${this.size}\n        height=${this.size}\n        viewBox=\"0 0 24 24\"\n        tabindex=${this.focusable ? 0 : -1}\n        aria-hidden=${this.ariaHidden ?? 'true'}>\n        ${this.accessibilityTitle\n          ? html`<title>${this.accessibilityTitle}</title>`\n          : null}\n        <g part=\"container\">\n          <g>\n            <path fill-rule=\"evenodd\" d=\"M15.294 3.293 6.587 12l8.707 8.707 1.414-1.414L9.415 12l7.293-7.293z\" clip-rule=\"evenodd\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_ArrowsArrowLeftLLine","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","ArrowsArrowLeftLLine","__decorateClass","property"],"mappings":";;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAA6BC,EAAW;AAAA,EAA7D,cAAA;AAAA,UAAA,GAAA,SAAA,GAIqD,KAAA,OAAA,IAEc,KAAA,WAAA,IAId,KAAA,YAAA;AAAA,EAAA;AAAA,EAIzC,aAAaC,GAA6E;AAClG,UAAM,aAAaA,CAAkB,GAEhC,KAAA,UAAU,IAAI,aAAa;AAAA,EAAA;AAAA,EAGlC,SAAS;;AACA,WAAAC;AAAA;AAAA;AAAA,gBAGKC,EAAK,QAAQ,+BAA+B,CAAC;AAAA;AAAA,gBAE7C,KAAK,IAAI;AAAA,iBACR,KAAK,IAAI;AAAA;AAAA,mBAEP,KAAK,YAAY,IAAI,EAAE;AAAA,uBACpBC,IAAA,KAAK,eAAL,OAAAA,IAAmB,MAAM;AAAA,UACrC,KAAK,qBACHF,WAAc,KAAK,kBAAkB,aACrC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAShB;AAzCEH,EAAO,UAAU,iCAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI6CS,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAJtBF,EAIwB,WAAA,MAAA;AAECC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,UAAA;AAEhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GARSF,EAQP,WAAA,oBAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,WAAA;"}

package/dist/components/icons/arrows/arrows-arrow-left-line/arrows-arrow-left-line.component.js

@@ -1,18 +1,15 @@
 import { clsx as n } from "../../../../node_modules/clsx/dist/clsx.js";
-import "../../../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../../node_modules/lit-html/lit-html.js";
-import "../../../../node_modules/lit-element/lit-element.js";
-import { property as a } from "../../../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as c } from "../../../../node_modules/lit-html/static.js";
-import { DdsElement as f } from "../../../../internal/dds-hu-element.js";
-import h from "../../../icon/_styles/icon.scss.js";
-import { unsafeCSS as m } from "../../../../node_modules/@lit/reactive-element/css-tag.js";
+import { unsafeCSS as f } from "lit";
+import { property as a } from "lit/decorators.js";
+import { html as c } from "lit/static-html.js";
+import { DdsElement as h } from "../../../../internal/dds-hu-element.js";
+import m from "../../../icon/_styles/icon.scss.js";
 var u = Object.defineProperty, r = (o, t, p, y) => {
   for (var e = void 0, l = o.length - 1, d; l >= 0; l--)
     (d = o[l]) && (e = d(t, p, e) || e);
   return e && u(t, p, e), e;
 };
-const i = class i extends f {
+const i = class i extends h {
   constructor() {
     super(...arguments), this.size = 24, this.selected = !1, this.focusable = !1;
   }
@@ -41,7 +38,7 @@ const i = class i extends f {
     `;
   }
 };
-i.tagName = "dap-ds-icon-arrow-left-line", i.styles = m(h);
+i.tagName = "dap-ds-icon-arrow-left-line", i.styles = f(m);
 let s = i;
 r([
   a({ type: Number, reflect: !0 })