dap-design-system 0.62.3 → 0.63.0

package/dist/components/icons/user/user-user-fill/user-user-fill.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 r } 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 r } 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, a = (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 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-user-fill")}
+        class=${f("icon", "dap-ds-icon-user-fill")}
         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-user-fill", i.styles = h(m);
+i.tagName = "dap-ds-icon-user-fill", i.styles = n(m);
 let s = i;
 a([
   r({ type: Number, reflect: !0 })

package/dist/components/icons/user/user-user-fill/user-user-fill.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-user-fill.component.js","sources":["../../../../../src/components/icons/user/user-user-fill/user-user-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-user-fill`\n * @summary An icon\n * @element dap-ds-icon-user-fill\n * @title - UserUserFill\n * @group icon\n * @icontype user\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 UserUserFill extends DdsElement {\n  static tagName = 'dap-ds-icon-user-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-user-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=\"M4 22a8 8 0 1 1 16 0zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_UserUserFill","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","UserUserFill","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAAqBC,EAAW;AAAA,EAArD,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,uBAAuB,CAAC;AAAA;AAAA,gBAErC,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,yBAWDA,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":"user-user-fill.component.js","sources":["../../../../../src/components/icons/user/user-user-fill/user-user-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-user-fill`\n * @summary An icon\n * @element dap-ds-icon-user-fill\n * @title - UserUserFill\n * @group icon\n * @icontype user\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 UserUserFill extends DdsElement {\n  static tagName = 'dap-ds-icon-user-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-user-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=\"M4 22a8 8 0 1 1 16 0zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_UserUserFill","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","UserUserFill","__decorateClass","property"],"mappings":";;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAAqBC,EAAW;AAAA,EAArD,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,uBAAuB,CAAC;AAAA;AAAA,gBAErC,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,yBAWDA,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/user/user-user-line/user-user-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 r } from "../../../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as d } from "../../../../node_modules/lit-html/static.js";
-import { DdsElement as m } from "../../../../internal/dds-hu-element.js";
-import f from "../../../icon/_styles/icon.scss.js";
-import { unsafeCSS as h } from "../../../../node_modules/@lit/reactive-element/css-tag.js";
-var u = Object.defineProperty, a = (p, t, l, y) => {
-  for (var e = void 0, o = p.length - 1, c; o >= 0; o--)
-    (c = p[o]) && (e = c(t, l, e) || e);
-  return e && u(t, l, e), e;
+import { unsafeCSS as f } from "lit";
+import { property as r } from "lit/decorators.js";
+import { html as d } 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, a = (l, t, p, y) => {
+  for (var e = void 0, o = l.length - 1, c; o >= 0; o--)
+    (c = l[o]) && (e = c(t, p, e) || e);
+  return e && u(t, p, e), e;
 };
-const i = class i extends m {
+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 m {
     `;
   }
 };
-i.tagName = "dap-ds-icon-user-line", i.styles = h(f);
+i.tagName = "dap-ds-icon-user-line", i.styles = f(m);
 let s = i;
 a([
   r({ type: Number, reflect: !0 })

package/dist/components/icons/user/user-user-line/user-user-line.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-user-line.component.js","sources":["../../../../../src/components/icons/user/user-user-line/user-user-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-user-line`\n * @summary An icon\n * @element dap-ds-icon-user-line\n * @title - UserUserLine\n * @group icon\n * @icontype user\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 UserUserLine extends DdsElement {\n  static tagName = 'dap-ds-icon-user-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-user-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=\"M4 22a8 8 0 1 1 16 0h-2a6 6 0 0 0-12 0zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6m0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_UserUserLine","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","UserUserLine","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAAqBC,EAAW;AAAA,EAArD,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,uBAAuB,CAAC;AAAA;AAAA,gBAErC,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,yBAWDA,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":"user-user-line.component.js","sources":["../../../../../src/components/icons/user/user-user-line/user-user-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-user-line`\n * @summary An icon\n * @element dap-ds-icon-user-line\n * @title - UserUserLine\n * @group icon\n * @icontype user\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 UserUserLine extends DdsElement {\n  static tagName = 'dap-ds-icon-user-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-user-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=\"M4 22a8 8 0 1 1 16 0h-2a6 6 0 0 0-12 0zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6m0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4\"></path>\n          </g>\n        </g>\n      </svg>\n    `\n  }\n}\n"],"names":["_UserUserLine","DdsElement","_changedProperties","html","clsx","_a","unsafeCSS","styles","UserUserLine","__decorateClass","property"],"mappings":";;;;;;;;;;;AAwBA,MAAqBA,IAArB,MAAqBA,UAAqBC,EAAW;AAAA,EAArD,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,uBAAuB,CAAC;AAAA;AAAA,gBAErC,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,yBAWDA,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/image-zoom/image-zoom.component.js

@@ -1,23 +1,18 @@
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as u, html as h } from "../../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 { state as g } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as z } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
-import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import { unsafeCSS as z, nothing as u, html as h } from "lit";
+import { query as f, property as l, state as g } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { DdsElement as b } from "../../internal/dds-hu-element.js";
 import "../../localization/localization.js";
-import b from "../button/button.component.js";
-import y from "../icon/icon.component.js";
-import S from "./image-zoom.scss.js";
+import y from "../button/button.component.js";
+import S from "../icon/icon.component.js";
+import v from "./image-zoom.scss.js";
 import { t as _ } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as v } from "../../node_modules/@lit/reactive-element/css-tag.js";
 var T = Object.defineProperty, a = (m, t, e, o) => {
   for (var s = void 0, n = m.length - 1, r; n >= 0; n--)
     (r = m[n]) && (s = r(t, e, s) || s);
   return s && T(t, e, s), s;
 };
-const d = class d extends f {
+const d = class d extends b {
   constructor() {
     super(...arguments), this.open = !1, this.isDisabled = !1, this.zoomMargin = 0, this.expandButtonAriaLabel = null, this.unzoomButtonAriaLabel = null, this.canSwipeToUnzoom = !0, this.swipeToUnzoomThreshold = 10, this.hideButtons = !1, this.zoomButtonVariant = "primary", this.expandButtonTestId = "image-zoom-expand-button", this.unzoomButtonTestId = "image-zoom-unzoom-button", this._dialogState = "closed", this._slottedImgSrc = "", this._slottedImgAlt = "", this._slottedImg = null, this._touchStartY = 0, this._previouslyFocusedElement = null;
   }
@@ -188,12 +183,12 @@ const d = class d extends f {
   }
 };
 d.tagName = "dap-ds-image-zoom", d.dependencies = {
-  "dap-ds-button": b,
-  "dap-ds-icon": y
-}, d.styles = v(S);
+  "dap-ds-button": y,
+  "dap-ds-icon": S
+}, d.styles = z(v);
 let i = d;
 a([
-  z(".image-zoom__dialog")
+  f(".image-zoom__dialog")
 ], i.prototype, "_dialog");
 a([
   l({ type: Boolean, reflect: !0 })

package/dist/components/image-zoom/image-zoom.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-zoom.component.js","sources":["../../../src/components/image-zoom/image-zoom.component.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport type { ButtonVariant } from '@/common/types'\nimport { DialogState } from '@/dap-design-system'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { t } from '@/localization/localization'\n\nimport DapDSButton from '../button/button.component'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './image-zoom.scss?inline'\n\n/**\n * `dap-ds-image-zoom`\n * @summary An image zoom component that provides a Medium.com-style zoom experience. Click an image to expand it to fill the viewport with a smooth animation.\n * @element dap-ds-image-zoom\n * @title - Image Zoom\n *\n * @property {boolean} open - The open/zoomed state. Can be used for controlled mode.\n * @property {boolean} isDisabled - Disables zoom functionality.\n * @property {number} zoomMargin - Margin in pixels from viewport edges when zoomed. Default is 0.\n * @property {string} expandButtonAriaLabel - Accessible label for the zoom trigger. Default is 'Expand image'.\n * @property {string} unzoomButtonAriaLabel - Accessible label for the unzoom button. Default is 'Minimize image'.\n * @property {boolean} hideButtons - Hides the expand and unzoom buttons. Default is false.\n * @property {boolean} canSwipeToUnzoom - Enables swipe gesture to close when zoomed. Default is true.\n * @property {number} swipeToUnzoomThreshold - Swipe distance in pixels required to trigger unzoom. Default is 10.\n * @property {string} zoomSrc - URL of a higher quality image to display when zoomed. Falls back to the slotted image src.\n *\n * @event {CustomEvent} dds-zoom - Fires when the image is about to zoom. Cancelable via event.preventDefault().\n * @event {CustomEvent} dds-unzoom - Fires after the image has unzoomed.\n *\n * @slot - The image or content element to zoom. Should contain an <img> element.\n *\n * @csspart trigger - The zoom trigger wrapper element.\n * @csspart dialog - The zoom dialog element.\n * @csspart overlay - The backdrop overlay element.\n * @csspart zoomed-image - The zoomed image element.\n * @csspart unzoom-button - The button to close the zoomed view.\n * @csspart expand-button - The button to expand the image.\n * @csspart expand-button-base - The base of the expand button.\n * @csspart expand-button-content - The content of the expand button.\n * @csspart unzoom-button-base - The base of the unzoom button.\n * @csspart unzoom-button-content - The content of the unzoom button.\n * @csspart expand-button-icon - The icon of the expand button.\n * @csspart unzoom-button-icon - The icon of the unzoom button.\n *\n * @cssproperty --dds-image-zoom-overlay-bg - Overlay background color (default: rgba(0, 0, 0, 0.8)).\n * @cssproperty --dds-image-zoom-transition-speed - Animation duration (default: 300ms).\n * @cssproperty --dds-image-zoom-transition-timing - Animation timing function (default: var(--dds-easing-ease-in-out, ease-in-out)).\n */\nexport default class DapDSImageZoom extends DdsElement {\n  static tagName = 'dap-ds-image-zoom'\n\n  static dependencies = {\n    'dap-ds-button': DapDSButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  @query('.image-zoom__dialog') private _dialog!: HTMLDialogElement\n\n  /** The open/zoomed state. */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /** Disables zoom functionality. */\n  @property({ type: Boolean }) isDisabled = false\n\n  /** Margin in pixels from viewport edges when zoomed. */\n  @property({ type: Number }) zoomMargin = 0\n\n  /** Accessible label for the zoom trigger. */\n  @property() expandButtonAriaLabel: string | null = null\n\n  /** Accessible label for the unzoom button. */\n  @property() unzoomButtonAriaLabel: string | null = null\n\n  /** Enable swipe down gesture to close when zoomed. */\n  @property({ type: Boolean }) canSwipeToUnzoom = true\n\n  /** Distance in pixels a swipe must travel to trigger unzoom. */\n  @property({ type: Number }) swipeToUnzoomThreshold = 10\n\n  /** URL of a higher quality image to display when zoomed. Falls back to slotted image src. */\n  @property() zoomSrc?: string\n\n  /** Hides the expand and unzoom buttons. Useful when the host UI provides its own controls. */\n  @property({ type: Boolean }) hideButtons = false\n\n  @property() zoomButtonVariant: ButtonVariant = 'primary'\n\n  /** `data-testid` for the expand/zoom button. */\n  @property() expandButtonTestId = 'image-zoom-expand-button'\n\n  /** `data-testid` for the unzoom/close button. */\n  @property() unzoomButtonTestId = 'image-zoom-unzoom-button'\n\n  // Managed imperatively to avoid update-in-update Lit warnings\n  private _dialogState: DialogState = 'closed'\n\n  // Updated via slotchange — not @state to avoid re-render chains\n  @state() private _slottedImgSrc = ''\n  @state() private _slottedImgAlt = ''\n\n  private _slottedImg: HTMLImageElement | null = null\n\n  private _touchStartY = 0\n  private _closeTimeout?: number\n  private _previouslyFocusedElement: Element | null = null\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    clearTimeout(this._closeTimeout)\n    if (this._dialog?.open) {\n      this._dialog.close()\n    }\n    document.body.style.overflow = ''\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('open')) {\n      const prev = changedProperties.get('open') as boolean | undefined\n      if (this.open && !prev) {\n        this._openDialog()\n      } else if (\n        !this.open &&\n        prev &&\n        this._dialogState !== 'closing' &&\n        this._dialogState !== 'closed'\n      ) {\n        this._animateClose()\n      }\n    }\n  }\n\n  // Updates dialog's data-state attribute imperatively (no Lit re-render)\n  private _setDialogState(state: DialogState): void {\n    this._dialogState = state\n    if (this._dialog) {\n      this._dialog.dataset['state'] = state\n    }\n  }\n\n  private _handleSlotChange(): void {\n    const slot =\n      this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')\n    const nodes = slot?.assignedElements({ flatten: true }) ?? []\n\n    let img: HTMLImageElement | null = null\n    for (const el of nodes) {\n      if (el.tagName === 'IMG') {\n        img = el as HTMLImageElement\n        break\n      }\n      const found = el.querySelector<HTMLImageElement>('img')\n      if (found) {\n        img = found\n        break\n      }\n    }\n\n    this._slottedImg = img\n    this._slottedImgSrc =\n      img?.currentSrc || img?.src || img?.getAttribute('src') || ''\n    this._slottedImgAlt = img?.alt || img?.getAttribute('alt') || ''\n  }\n\n  private _openDialog(): void {\n    this._previouslyFocusedElement = document.activeElement\n\n    // Re-read src at open time — currentSrc may have been empty at slotchange\n    if (this._slottedImg && !this.zoomSrc) {\n      const img = this._slottedImg\n      this._slottedImgSrc =\n        img.currentSrc || img.src || img.getAttribute('src') || ''\n    }\n\n    const event = this.emit('dds-zoom', undefined, { cancelable: true })\n    if (event.defaultPrevented) {\n      this.open = false\n      return\n    }\n\n    // Set state imperatively — no reactive update triggered\n    this._setDialogState('opening')\n    this._dialog.showModal()\n    document.body.style.overflow = 'hidden'\n\n    requestAnimationFrame(() => {\n      this._setDialogState('open')\n      this._dialog\n        .querySelector<HTMLButtonElement>('.image-zoom__unzoom-btn')\n        ?.focus()\n    })\n  }\n\n  private _animateClose(): void {\n    if (this._dialogState === 'closing' || this._dialogState === 'closed')\n      return\n\n    this._setDialogState('closing')\n\n    let settled = false\n    const onDone = () => {\n      if (settled) return\n      settled = true\n      clearTimeout(this._closeTimeout)\n      this._dialog?.close()\n      this._setDialogState('closed')\n      document.body.style.overflow = ''\n\n      if (this._previouslyFocusedElement instanceof HTMLElement) {\n        this._previouslyFocusedElement.focus()\n      }\n\n      this.emit('dds-unzoom')\n    }\n\n    const zoomed = this._dialog?.querySelector<HTMLElement>(\n      '.image-zoom__zoomed',\n    )\n    if (zoomed) {\n      zoomed.addEventListener('transitionend', onDone, { once: true })\n      this._closeTimeout = window.setTimeout(onDone, 500)\n    } else {\n      onDone()\n    }\n  }\n\n  /** Programmatically zoom the image. */\n  zoom(): void {\n    if (this.isDisabled || this.open) return\n    this.open = true\n  }\n\n  /** Programmatically unzoom the image. */\n  unzoom(): void {\n    if (!this.open) return\n    this._animateClose()\n    this.open = false\n  }\n\n  private _handleTriggerClick(): void {\n    this.zoom()\n  }\n\n  private _handleTriggerKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.zoom()\n    }\n  }\n\n  private _handleDialogCancel(e: Event): void {\n    e.preventDefault()\n    this.unzoom()\n  }\n\n  private _handleTouchStart(e: TouchEvent): void {\n    if (!this.canSwipeToUnzoom) return\n    this._touchStartY = e.touches[0].clientY\n  }\n\n  private _handleTouchEnd(e: TouchEvent): void {\n    if (!this.canSwipeToUnzoom) return\n    const delta = Math.abs(e.changedTouches[0].clientY - this._touchStartY)\n    if (delta > this.swipeToUnzoomThreshold) {\n      this.unzoom()\n    }\n  }\n\n  render() {\n    const resolvedSrc = this.zoomSrc ?? this._slottedImgSrc\n    const resolvedAlt = this._slottedImgAlt\n\n    return html`\n      <div\n        part=\"trigger\"\n        class=\"image-zoom__trigger\"\n        role=\"button\"\n        tabindex=${ifDefined(this.isDisabled ? undefined : 0)}\n        aria-label=${[\n          this._slottedImgAlt,\n          this.expandButtonAriaLabel ?? t('image-zoom.expand'),\n        ]\n          .filter(Boolean)\n          .join(', ')}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-disabled=${ifDefined(this.isDisabled ? 'true' : undefined)}\n        @click=${this._handleTriggerClick}\n        @keydown=${this._handleTriggerKeydown}>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n        ${!this.isDisabled && !this.hideButtons\n          ? html`\n              <dap-ds-button\n                variant=${this.zoomButtonVariant}\n                shape=\"circle\"\n                part=\"expand-button\"\n                data-testid=${this.expandButtonTestId}\n                class=\"image-zoom__expand-button\"\n                aria-hidden=\"true\"\n                exportparts=\"base:expand-button-base, content:expand-button-content\"\n                tabindex=\"-1\">\n                <dap-ds-icon\n                  aria-hidden=\"true\"\n                  name=\"zoom-in-line\"\n                  part=\"expand-button-icon\">\n                </dap-ds-icon>\n              </dap-ds-button>\n            `\n          : nothing}\n      </div>\n\n      <dialog\n        class=\"image-zoom__dialog\"\n        part=\"dialog\"\n        data-state=${this._dialogState}\n        @cancel=${this._handleDialogCancel}\n        @touchstart=${this._handleTouchStart}\n        @touchend=${this._handleTouchEnd}>\n        <div\n          class=\"image-zoom__overlay\"\n          part=\"overlay\"\n          @click=${() => this.unzoom()}></div>\n\n        <div\n          class=\"image-zoom__content-area\"\n          style=\"--dds-image-zoom-margin: ${this.zoomMargin}px\">\n          ${resolvedSrc\n            ? html`\n                <img\n                  class=\"image-zoom__zoomed\"\n                  part=\"zoomed-image\"\n                  src=${resolvedSrc}\n                  alt=${resolvedAlt}\n                  @click=${() => this.unzoom()} />\n              `\n            : nothing}\n        </div>\n\n        ${!this.hideButtons\n          ? html`\n              <dap-ds-button\n                class=\"image-zoom__unzoom-btn\"\n                part=\"unzoom-button\"\n                data-testid=${this.unzoomButtonTestId}\n                variant=${this.zoomButtonVariant}\n                shape=\"circle\"\n                aria-label=${this.unzoomButtonAriaLabel ??\n                t('image-zoom.unzoom')}\n                exportparts=\"base:unzoom-button-base, content:unzoom-button-content\"\n                @click=${() => this.unzoom()}>\n                <dap-ds-icon\n                  aria-hidden=\"true\"\n                  name=\"zoom-out-line\"\n                  part=\"unzoom-button-icon\">\n                </dap-ds-icon>\n              </dap-ds-button>\n            `\n          : nothing}\n      </dialog>\n    `\n  }\n}\n"],"names":["_DapDSImageZoom","DdsElement","_a","changedProperties","prev","state","slot","nodes","_b","img","el","found","settled","onDone","zoomed","e","resolvedSrc","resolvedAlt","html","ifDefined","t","nothing","_c","DapDSButton","DapDSIcon","unsafeCSS","styles","DapDSImageZoom","__decorateClass","query","property"],"mappings":"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"}
+{"version":3,"file":"image-zoom.component.js","sources":["../../../src/components/image-zoom/image-zoom.component.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport type { ButtonVariant } from '@/common/types'\nimport { DialogState } from '@/dap-design-system'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { t } from '@/localization/localization'\n\nimport DapDSButton from '../button/button.component'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './image-zoom.scss?inline'\n\n/**\n * `dap-ds-image-zoom`\n * @summary An image zoom component that provides a Medium.com-style zoom experience. Click an image to expand it to fill the viewport with a smooth animation.\n * @element dap-ds-image-zoom\n * @title - Image Zoom\n *\n * @property {boolean} open - The open/zoomed state. Can be used for controlled mode.\n * @property {boolean} isDisabled - Disables zoom functionality.\n * @property {number} zoomMargin - Margin in pixels from viewport edges when zoomed. Default is 0.\n * @property {string} expandButtonAriaLabel - Accessible label for the zoom trigger. Default is 'Expand image'.\n * @property {string} unzoomButtonAriaLabel - Accessible label for the unzoom button. Default is 'Minimize image'.\n * @property {boolean} hideButtons - Hides the expand and unzoom buttons. Default is false.\n * @property {boolean} canSwipeToUnzoom - Enables swipe gesture to close when zoomed. Default is true.\n * @property {number} swipeToUnzoomThreshold - Swipe distance in pixels required to trigger unzoom. Default is 10.\n * @property {string} zoomSrc - URL of a higher quality image to display when zoomed. Falls back to the slotted image src.\n *\n * @event {CustomEvent} dds-zoom - Fires when the image is about to zoom. Cancelable via event.preventDefault().\n * @event {CustomEvent} dds-unzoom - Fires after the image has unzoomed.\n *\n * @slot - The image or content element to zoom. Should contain an <img> element.\n *\n * @csspart trigger - The zoom trigger wrapper element.\n * @csspart dialog - The zoom dialog element.\n * @csspart overlay - The backdrop overlay element.\n * @csspart zoomed-image - The zoomed image element.\n * @csspart unzoom-button - The button to close the zoomed view.\n * @csspart expand-button - The button to expand the image.\n * @csspart expand-button-base - The base of the expand button.\n * @csspart expand-button-content - The content of the expand button.\n * @csspart unzoom-button-base - The base of the unzoom button.\n * @csspart unzoom-button-content - The content of the unzoom button.\n * @csspart expand-button-icon - The icon of the expand button.\n * @csspart unzoom-button-icon - The icon of the unzoom button.\n *\n * @cssproperty --dds-image-zoom-overlay-bg - Overlay background color (default: rgba(0, 0, 0, 0.8)).\n * @cssproperty --dds-image-zoom-transition-speed - Animation duration (default: 300ms).\n * @cssproperty --dds-image-zoom-transition-timing - Animation timing function (default: var(--dds-easing-ease-in-out, ease-in-out)).\n */\nexport default class DapDSImageZoom extends DdsElement {\n  static tagName = 'dap-ds-image-zoom'\n\n  static dependencies = {\n    'dap-ds-button': DapDSButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  @query('.image-zoom__dialog') private _dialog!: HTMLDialogElement\n\n  /** The open/zoomed state. */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /** Disables zoom functionality. */\n  @property({ type: Boolean }) isDisabled = false\n\n  /** Margin in pixels from viewport edges when zoomed. */\n  @property({ type: Number }) zoomMargin = 0\n\n  /** Accessible label for the zoom trigger. */\n  @property() expandButtonAriaLabel: string | null = null\n\n  /** Accessible label for the unzoom button. */\n  @property() unzoomButtonAriaLabel: string | null = null\n\n  /** Enable swipe down gesture to close when zoomed. */\n  @property({ type: Boolean }) canSwipeToUnzoom = true\n\n  /** Distance in pixels a swipe must travel to trigger unzoom. */\n  @property({ type: Number }) swipeToUnzoomThreshold = 10\n\n  /** URL of a higher quality image to display when zoomed. Falls back to slotted image src. */\n  @property() zoomSrc?: string\n\n  /** Hides the expand and unzoom buttons. Useful when the host UI provides its own controls. */\n  @property({ type: Boolean }) hideButtons = false\n\n  @property() zoomButtonVariant: ButtonVariant = 'primary'\n\n  /** `data-testid` for the expand/zoom button. */\n  @property() expandButtonTestId = 'image-zoom-expand-button'\n\n  /** `data-testid` for the unzoom/close button. */\n  @property() unzoomButtonTestId = 'image-zoom-unzoom-button'\n\n  // Managed imperatively to avoid update-in-update Lit warnings\n  private _dialogState: DialogState = 'closed'\n\n  // Updated via slotchange — not @state to avoid re-render chains\n  @state() private _slottedImgSrc = ''\n  @state() private _slottedImgAlt = ''\n\n  private _slottedImg: HTMLImageElement | null = null\n\n  private _touchStartY = 0\n  private _closeTimeout?: number\n  private _previouslyFocusedElement: Element | null = null\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    clearTimeout(this._closeTimeout)\n    if (this._dialog?.open) {\n      this._dialog.close()\n    }\n    document.body.style.overflow = ''\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('open')) {\n      const prev = changedProperties.get('open') as boolean | undefined\n      if (this.open && !prev) {\n        this._openDialog()\n      } else if (\n        !this.open &&\n        prev &&\n        this._dialogState !== 'closing' &&\n        this._dialogState !== 'closed'\n      ) {\n        this._animateClose()\n      }\n    }\n  }\n\n  // Updates dialog's data-state attribute imperatively (no Lit re-render)\n  private _setDialogState(state: DialogState): void {\n    this._dialogState = state\n    if (this._dialog) {\n      this._dialog.dataset['state'] = state\n    }\n  }\n\n  private _handleSlotChange(): void {\n    const slot =\n      this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')\n    const nodes = slot?.assignedElements({ flatten: true }) ?? []\n\n    let img: HTMLImageElement | null = null\n    for (const el of nodes) {\n      if (el.tagName === 'IMG') {\n        img = el as HTMLImageElement\n        break\n      }\n      const found = el.querySelector<HTMLImageElement>('img')\n      if (found) {\n        img = found\n        break\n      }\n    }\n\n    this._slottedImg = img\n    this._slottedImgSrc =\n      img?.currentSrc || img?.src || img?.getAttribute('src') || ''\n    this._slottedImgAlt = img?.alt || img?.getAttribute('alt') || ''\n  }\n\n  private _openDialog(): void {\n    this._previouslyFocusedElement = document.activeElement\n\n    // Re-read src at open time — currentSrc may have been empty at slotchange\n    if (this._slottedImg && !this.zoomSrc) {\n      const img = this._slottedImg\n      this._slottedImgSrc =\n        img.currentSrc || img.src || img.getAttribute('src') || ''\n    }\n\n    const event = this.emit('dds-zoom', undefined, { cancelable: true })\n    if (event.defaultPrevented) {\n      this.open = false\n      return\n    }\n\n    // Set state imperatively — no reactive update triggered\n    this._setDialogState('opening')\n    this._dialog.showModal()\n    document.body.style.overflow = 'hidden'\n\n    requestAnimationFrame(() => {\n      this._setDialogState('open')\n      this._dialog\n        .querySelector<HTMLButtonElement>('.image-zoom__unzoom-btn')\n        ?.focus()\n    })\n  }\n\n  private _animateClose(): void {\n    if (this._dialogState === 'closing' || this._dialogState === 'closed')\n      return\n\n    this._setDialogState('closing')\n\n    let settled = false\n    const onDone = () => {\n      if (settled) return\n      settled = true\n      clearTimeout(this._closeTimeout)\n      this._dialog?.close()\n      this._setDialogState('closed')\n      document.body.style.overflow = ''\n\n      if (this._previouslyFocusedElement instanceof HTMLElement) {\n        this._previouslyFocusedElement.focus()\n      }\n\n      this.emit('dds-unzoom')\n    }\n\n    const zoomed = this._dialog?.querySelector<HTMLElement>(\n      '.image-zoom__zoomed',\n    )\n    if (zoomed) {\n      zoomed.addEventListener('transitionend', onDone, { once: true })\n      this._closeTimeout = window.setTimeout(onDone, 500)\n    } else {\n      onDone()\n    }\n  }\n\n  /** Programmatically zoom the image. */\n  zoom(): void {\n    if (this.isDisabled || this.open) return\n    this.open = true\n  }\n\n  /** Programmatically unzoom the image. */\n  unzoom(): void {\n    if (!this.open) return\n    this._animateClose()\n    this.open = false\n  }\n\n  private _handleTriggerClick(): void {\n    this.zoom()\n  }\n\n  private _handleTriggerKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.zoom()\n    }\n  }\n\n  private _handleDialogCancel(e: Event): void {\n    e.preventDefault()\n    this.unzoom()\n  }\n\n  private _handleTouchStart(e: TouchEvent): void {\n    if (!this.canSwipeToUnzoom) return\n    this._touchStartY = e.touches[0].clientY\n  }\n\n  private _handleTouchEnd(e: TouchEvent): void {\n    if (!this.canSwipeToUnzoom) return\n    const delta = Math.abs(e.changedTouches[0].clientY - this._touchStartY)\n    if (delta > this.swipeToUnzoomThreshold) {\n      this.unzoom()\n    }\n  }\n\n  render() {\n    const resolvedSrc = this.zoomSrc ?? this._slottedImgSrc\n    const resolvedAlt = this._slottedImgAlt\n\n    return html`\n      <div\n        part=\"trigger\"\n        class=\"image-zoom__trigger\"\n        role=\"button\"\n        tabindex=${ifDefined(this.isDisabled ? undefined : 0)}\n        aria-label=${[\n          this._slottedImgAlt,\n          this.expandButtonAriaLabel ?? t('image-zoom.expand'),\n        ]\n          .filter(Boolean)\n          .join(', ')}\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-disabled=${ifDefined(this.isDisabled ? 'true' : undefined)}\n        @click=${this._handleTriggerClick}\n        @keydown=${this._handleTriggerKeydown}>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n        ${!this.isDisabled && !this.hideButtons\n          ? html`\n              <dap-ds-button\n                variant=${this.zoomButtonVariant}\n                shape=\"circle\"\n                part=\"expand-button\"\n                data-testid=${this.expandButtonTestId}\n                class=\"image-zoom__expand-button\"\n                aria-hidden=\"true\"\n                exportparts=\"base:expand-button-base, content:expand-button-content\"\n                tabindex=\"-1\">\n                <dap-ds-icon\n                  aria-hidden=\"true\"\n                  name=\"zoom-in-line\"\n                  part=\"expand-button-icon\">\n                </dap-ds-icon>\n              </dap-ds-button>\n            `\n          : nothing}\n      </div>\n\n      <dialog\n        class=\"image-zoom__dialog\"\n        part=\"dialog\"\n        data-state=${this._dialogState}\n        @cancel=${this._handleDialogCancel}\n        @touchstart=${this._handleTouchStart}\n        @touchend=${this._handleTouchEnd}>\n        <div\n          class=\"image-zoom__overlay\"\n          part=\"overlay\"\n          @click=${() => this.unzoom()}></div>\n\n        <div\n          class=\"image-zoom__content-area\"\n          style=\"--dds-image-zoom-margin: ${this.zoomMargin}px\">\n          ${resolvedSrc\n            ? html`\n                <img\n                  class=\"image-zoom__zoomed\"\n                  part=\"zoomed-image\"\n                  src=${resolvedSrc}\n                  alt=${resolvedAlt}\n                  @click=${() => this.unzoom()} />\n              `\n            : nothing}\n        </div>\n\n        ${!this.hideButtons\n          ? html`\n              <dap-ds-button\n                class=\"image-zoom__unzoom-btn\"\n                part=\"unzoom-button\"\n                data-testid=${this.unzoomButtonTestId}\n                variant=${this.zoomButtonVariant}\n                shape=\"circle\"\n                aria-label=${this.unzoomButtonAriaLabel ??\n                t('image-zoom.unzoom')}\n                exportparts=\"base:unzoom-button-base, content:unzoom-button-content\"\n                @click=${() => this.unzoom()}>\n                <dap-ds-icon\n                  aria-hidden=\"true\"\n                  name=\"zoom-out-line\"\n                  part=\"unzoom-button-icon\">\n                </dap-ds-icon>\n              </dap-ds-button>\n            `\n          : nothing}\n      </dialog>\n    `\n  }\n}\n"],"names":["_DapDSImageZoom","DdsElement","_a","changedProperties","prev","state","slot","nodes","_b","img","el","found","settled","onDone","zoomed","e","resolvedSrc","resolvedAlt","html","ifDefined","t","nothing","_c","DapDSButton","DapDSIcon","unsafeCSS","styles","DapDSImageZoom","__decorateClass","query","property"],"mappings":"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"}

package/dist/components/input/_styles/input.scss.js

@@ -1,4 +1,4 @@
-const d = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{display:block;width:100%;--dds-input-height-xs: var(--dds-spacing-800);--dds-input-height-sm: var(--dds-spacing-1000);--dds-input-height-lg: var(--dds-spacing-1200);--dds-input-padding-xs: 0 var(--dds-spacing-200);--dds-input-padding-sm: 0 var(--dds-spacing-300);--dds-input-padding-lg: 0 var(--dds-spacing-400);--dds-input-font-size-xs: var(--dds-font-sm);--dds-input-font-size-sm: var(--dds-font-base);--dds-input-font-size-lg: var(--dds-font-lg);--dds-input-border: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-background: var(--dds-fields-background-default);--dds-input-text-color: var(--dds-text-neutral-base);--dds-input-border-radius: var(--dds-radius-base);--dds-input-disabled-border: 0 solid var(--dds-border-neutral-disabled);--dds-input-disabled-background: var(--dds-fields-background-disabled);--dds-input-disabled-text: var(--dds-text-neutral-disabled);--dds-input-readonly-border: 0 solid var(--dds-border-neutral-subtle);--dds-input-readonly-background: var(--dds-fields-background-read-only);--dds-input-readonly-text: var(--dds-text-neutral-subtle);--dds-input-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-error-border: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-background: var(--dds-fields-background-default);--dds-input-addon-success-background: var(--dds-fields-background-default);--dds-input-addon-error-background: var(--dds-fields-background-default);--dds-input-addon-border-before: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-after: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-before: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-after: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-success-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-error-border-before: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-after: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-error-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.input{display:inline-flex;flex:1 1 auto;align-items:stretch;width:100%;vertical-align:middle}.input__container{display:flex;position:relative;flex:auto;align-items:center;width:auto}.input__control{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);display:inline-block;width:100%;height:var(--dds-input-height);padding:0 var(--dds-input-padding);border:var(--dds-input-border);border-radius:var(--dds-input-border-radius);background:var(--dds-input-background);color:var(--dds-input-text-color);font-size:var(--dds-input-font-size)}.input__control:focus-visible{outline-style:solid}.input__control--xs{height:var(--dds-input-height-xs);padding:var(--dds-input-padding-xs);font-size:var(--dds-input-font-size-xs)}.input__control--sm{height:var(--dds-input-height-sm);padding:var(--dds-input-padding-sm);font-size:var(--dds-input-font-size-sm)}.input__control--lg{height:var(--dds-input-height-lg);padding:var(--dds-input-padding-lg);font-size:var(--dds-input-font-size-lg)}.input__control[disabled],.input__control--disabled{border:var(--dds-input-disabled-border);background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__control--has-addon-before{border-left:var(--dds-border-width-none);border-top-left-radius:var(--dds-radius-none);border-bottom-left-radius:var(--dds-radius-none)}.input__control--has-addon-after{border-right:var(--dds-border-width-none);border-top-right-radius:var(--dds-radius-none);border-bottom-right-radius:var(--dds-radius-none)}.input__control[readonly],.input__control--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__control--success{border:var(--dds-input-success-border)}.input__control--success.input__control--has-addon-before{border-left-width:0}.input__control--success.input__control--has-addon-after{border-right-width:0}.input__control--error{border:var(--dds-input-error-border)}.input__control--error.input__control--has-addon-before{border-left-width:0}.input__control--error.input__control--has-addon-after{border-right-width:0}.input__control--has-prefix{padding-left:var(--dds-spacing-1400)}.input__control--has-prefix:focus-visible{z-index:10}.input__control--has-postfix{padding-right:var(--dds-spacing-1400)}.input__control--has-postfix:focus-visible{z-index:10}.input__addon-before{display:flex;align-items:center;padding:var(--dds-spacing-200) var(--dds-spacing-300);border:var(--dds-input-addon-border-before);border-width:var(--dds-input-addon-border-width-before);border-radius:var(--dds-input-border-radius) 0 0 var(--dds-input-border-radius);background:var(--dds-input-addon-background)}.input__addon-before--xs{height:var(--dds-spacing-800);padding:var(--dds-spacing-200)}.input__addon-before--sm{height:var(--dds-spacing-1000);padding:var(--dds-spacing-300)}.input__addon-before--lg{height:var(--dds-spacing-1200);padding:var(--dds-spacing-400)}.input__addon-before--disabled{border-width:0;background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__addon-before--readonly{border-width:0;background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__addon-before--success{border:var(--dds-input-addon-success-border-before);border-width:var(--dds-input-addon-success-border-width-before);background:var(--dds-input-addon-success-background)}.input__addon-before--error{border:var(--dds-input-addon-error-border-before);border-width:var(--dds-input-addon-error-border-width-before);background:var(--dds-input-addon-error-background)}.input__addon-after{display:flex;align-items:center;padding:var(--dds-spacing-200) var(--dds-spacing-300);border:var(--dds-input-addon-border-after);border-width:var(--dds-input-addon-border-width-after);border-radius:0 var(--dds-input-border-radius) var(--dds-input-border-radius) 0;background:var(--dds-input-addon-background)}.input__addon-after--xs{height:var(--dds-spacing-800);padding:var(--dds-spacing-200)}.input__addon-after--sm{height:var(--dds-spacing-1000);padding:var(--dds-spacing-300)}.input__addon-after--lg{height:var(--dds-spacing-1200);padding:var(--dds-spacing-400)}.input__addon-after--disabled{border-width:0;background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__addon-after--readonly{border-width:0;background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__addon-after--success{border:var(--dds-input-addon-success-border-after);border-width:var(--dds-input-addon-success-border-width-after);background:var(--dds-input-addon-success-background)}.input__addon-after--error{border:var(--dds-input-addon-error-border-after);border-width:var(--dds-input-addon-error-border-width-after);background:var(--dds-input-addon-error-background)}.input__addon-prefix{display:inline-flex;position:absolute;z-index:var(--dds-z-index-10);left:var(--dds-spacing-400);align-items:center}.input__addon-postfix{display:inline-flex;position:absolute;z-index:var(--dds-z-index-10);right:var(--dds-spacing-400);align-items:center;gap:var(--dds-spacing-200)}';
+const d = '*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{display:block;width:100%;--dds-input-height-xs: var(--dds-spacing-800);--dds-input-height-sm: var(--dds-spacing-1000);--dds-input-height-lg: var(--dds-spacing-1200);--dds-input-padding-xs: 0 var(--dds-spacing-200);--dds-input-padding-sm: 0 var(--dds-spacing-300);--dds-input-padding-lg: 0 var(--dds-spacing-400);--dds-input-font-size-xs: var(--dds-font-sm);--dds-input-font-size-sm: var(--dds-font-base);--dds-input-font-size-lg: var(--dds-font-lg);--dds-input-border: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-background: var(--dds-fields-background-default);--dds-input-text-color: var(--dds-text-neutral-base);--dds-input-border-radius: var(--dds-radius-base);--dds-input-disabled-border: 0 solid var(--dds-border-neutral-disabled);--dds-input-disabled-background: var(--dds-fields-background-disabled);--dds-input-disabled-text: var(--dds-text-neutral-disabled);--dds-input-readonly-border: 0 solid var(--dds-border-neutral-subtle);--dds-input-readonly-background: var(--dds-fields-background-read-only);--dds-input-readonly-text: var(--dds-text-neutral-subtle);--dds-input-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-error-border: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-background: var(--dds-fields-background-default);--dds-input-addon-success-background: var(--dds-fields-background-default);--dds-input-addon-error-background: var(--dds-fields-background-default);--dds-input-addon-border-before: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-after: var(--dds-border-width-base) solid var(--dds-border-neutral-base);--dds-input-addon-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-success-border: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-before: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-after: var(--dds-border-width-base) solid var(--dds-border-positive-base);--dds-input-addon-success-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-success-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-input-addon-error-border-before: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-after: var(--dds-border-width-base) solid var(--dds-border-negative-base);--dds-input-addon-error-border-width-before: var(--dds-border-width-base) 0 var(--dds-border-width-base) var(--dds-border-width-base);--dds-input-addon-error-border-width-after: var(--dds-border-width-base) var(--dds-border-width-base) var(--dds-border-width-base) 0;--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.input{display:inline-flex;flex:1 1 auto;align-items:stretch;width:100%;vertical-align:middle}.input__container{display:flex;position:relative;flex:auto;align-items:center;width:auto}.input__control{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);display:inline-block;width:100%;height:var(--dds-input-height);padding:0 var(--dds-input-padding);border:var(--dds-input-border);border-radius:var(--dds-input-border-radius);background:var(--dds-input-background);color:var(--dds-input-text-color);font-size:var(--dds-input-font-size)}.input__control:focus-visible{outline-style:solid}.input__control--xs{height:var(--dds-input-height-xs);padding:var(--dds-input-padding-xs);font-size:var(--dds-input-font-size-xs)}.input__control--sm{height:var(--dds-input-height-sm);padding:var(--dds-input-padding-sm);font-size:var(--dds-input-font-size-sm)}.input__control--lg{height:var(--dds-input-height-lg);padding:var(--dds-input-padding-lg);font-size:var(--dds-input-font-size-lg)}.input__control[disabled],.input__control--disabled{border:var(--dds-input-disabled-border);background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__control--has-addon-before{border-left:var(--dds-border-width-none);border-top-left-radius:var(--dds-radius-none);border-bottom-left-radius:var(--dds-radius-none)}.input__control--has-addon-after{border-right:var(--dds-border-width-none);border-top-right-radius:var(--dds-radius-none);border-bottom-right-radius:var(--dds-radius-none)}.input__control[readonly],.input__control--readonly{border:var(--dds-input-readonly-border);background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__control--success{border:var(--dds-input-success-border)}.input__control--success.input__control--has-addon-before{border-left-width:0}.input__control--success.input__control--has-addon-after{border-right-width:0}.input__control--error{border:var(--dds-input-error-border)}.input__control--error.input__control--has-addon-before{border-left-width:0}.input__control--error.input__control--has-addon-after{border-right-width:0}.input__control--has-prefix{padding-left:var(--dds-spacing-1400)}.input__control--has-prefix:focus-visible{z-index:10}.input__control--has-postfix{padding-right:var(--dds-spacing-1400)}.input__control--has-postfix:focus-visible{z-index:10}.input__addon-before{display:flex;align-items:center;padding:var(--dds-spacing-200) var(--dds-spacing-300);border:var(--dds-input-addon-border-before);border-width:var(--dds-input-addon-border-width-before);border-radius:var(--dds-input-border-radius) 0 0 var(--dds-input-border-radius);background:var(--dds-input-addon-background)}.input__addon-before--xs{height:var(--dds-spacing-800);padding:var(--dds-spacing-200)}.input__addon-before--sm{height:var(--dds-spacing-1000);padding:var(--dds-spacing-300)}.input__addon-before--lg{height:var(--dds-spacing-1200);padding:var(--dds-spacing-400)}.input__addon-before--disabled{border-width:0;background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__addon-before--readonly{border-width:0;background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__addon-before--success{border:var(--dds-input-addon-success-border-before);border-width:var(--dds-input-addon-success-border-width-before);background:var(--dds-input-addon-success-background)}.input__addon-before--error{border:var(--dds-input-addon-error-border-before);border-width:var(--dds-input-addon-error-border-width-before);background:var(--dds-input-addon-error-background)}.input__addon-after{display:flex;align-items:center;padding:var(--dds-spacing-200) var(--dds-spacing-300);border:var(--dds-input-addon-border-after);border-width:var(--dds-input-addon-border-width-after);border-radius:0 var(--dds-input-border-radius) var(--dds-input-border-radius) 0;background:var(--dds-input-addon-background)}.input__addon-after--xs{height:var(--dds-spacing-800);padding:var(--dds-spacing-200)}.input__addon-after--sm{height:var(--dds-spacing-1000);padding:var(--dds-spacing-300)}.input__addon-after--lg{height:var(--dds-spacing-1200);padding:var(--dds-spacing-400)}.input__addon-after--disabled{border-width:0;background:var(--dds-input-disabled-background);color:var(--dds-input-disabled-text);cursor:not-allowed}.input__addon-after--readonly{border-width:0;background:var(--dds-input-readonly-background);color:var(--dds-input-readonly-text)}.input__addon-after--success{border:var(--dds-input-addon-success-border-after);border-width:var(--dds-input-addon-success-border-width-after);background:var(--dds-input-addon-success-background)}.input__addon-after--error{border:var(--dds-input-addon-error-border-after);border-width:var(--dds-input-addon-error-border-width-after);background:var(--dds-input-addon-error-background)}.input__addon-prefix{display:inline-flex;position:absolute;z-index:var(--dds-z-index-10);left:var(--dds-spacing-400);align-items:center}.input__addon-postfix{display:inline-flex;position:absolute;z-index:var(--dds-z-index-10);right:var(--dds-spacing-400);align-items:center;gap:var(--dds-spacing-200)}';
 export {
   d as default
 };

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

@@ -1,21 +1,16 @@
 import { clsx as r } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as b, html as n } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as l } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as m } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { queryAssignedElements as h } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
-import { GenericFormElement as y } from "../../internal/mixin/genericFormElement.js";
-import $ from "./_styles/input.scss.js";
-import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var x = Object.defineProperty, i = (c, t, d, a) => {
-  for (var p = void 0, u = c.length - 1, _; u >= 0; u--)
-    (_ = c[u]) && (p = _(t, d, p) || p);
-  return p && x(t, d, p), p;
+import { unsafeCSS as y, nothing as b, html as d } from "lit";
+import { query as m, queryAssignedElements as p, property as o, state as l } from "lit/decorators.js";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+import { GenericFormElement as $ } from "../../internal/mixin/genericFormElement.js";
+import { formLabelTemplate as g } from "../../internal/templates/formLabel.js";
+import x from "./_styles/input.scss.js";
+var A = Object.defineProperty, i = (c, t, n, a) => {
+  for (var h = void 0, u = c.length - 1, _; u >= 0; u--)
+    (_ = c[u]) && (h = _(t, n, h) || h);
+  return h && A(t, n, h), h;
 };
-const f = class f extends y {
+const f = class f extends $ {
   constructor() {
     super(...arguments), this.type = "text", this.step = 1, this.loading = !1, this.manualValueSet = !1, this.disableEnter = !1, this._hasAddonBefore = !1, this._hasAddonAfter = !1, this._hasPrefix = !1, this._hasPostfix = !1, this.onInput = () => {
       !this.input.validity.badInput && !this.manualValueSet && (this.value = this.input.value), this.emit("dds-input", { value: this.input.value }), this.setValidity();
@@ -31,8 +26,8 @@ const f = class f extends y {
   firstUpdated(t) {
     super.firstUpdated(t), this._hasAddonBefore = !!this._addonBeforeNode.length, this._hasAddonAfter = !!this._addonAfterNode.length, this._hasPrefix = !!this._prefixNode.length, this._hasPostfix = !!this._postfixNode.length;
   }
-  attributeChangedCallback(t, d, a) {
-    super.attributeChangedCallback(t, d, a), t === "value" && this.input && (this.input.value = a);
+  attributeChangedCallback(t, n, a) {
+    super.attributeChangedCallback(t, n, a), t === "value" && this.input && (this.input.value = a);
   }
   formResetCallback() {
     this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.input.value = this.defaultValue || "";
@@ -48,8 +43,8 @@ const f = class f extends y {
   }
   onKeydown(t) {
     this.emit("dds-keydown", { value: this.input.value, originalEvent: t });
-    const d = t.metaKey || t.ctrlKey || t.shiftKey || t.altKey;
-    !this.disableEnter && t.key === "Enter" && !d && setTimeout(() => {
+    const n = t.metaKey || t.ctrlKey || t.shiftKey || t.altKey;
+    !this.disableEnter && t.key === "Enter" && !n && setTimeout(() => {
       if (!t.defaultPrevented && !t.isComposing) {
         const a = document.createElement("button");
         a.type = "submit", this.insertAdjacentElement("afterend", a), a.click(), a.remove();
@@ -72,7 +67,7 @@ const f = class f extends y {
     t.preventDefault();
   }
   renderDefaultContent() {
-    return n` <span
+    return d` <span
         part="prefix"
         class=${r({ "input__addon-prefix": !!this._hasPrefix })}>
         <slot name="prefix"></slot>
@@ -82,29 +77,28 @@ const f = class f extends y {
         class=${r({
       "input__addon-postfix": this._hasPostfix || this.loading
     })}>
-        ${this.loading ? n`<dap-ds-spinner size="lg"></dap-ds-spinner>` : b}
+        ${this.loading ? d`<dap-ds-spinner size="lg"></dap-ds-spinner>` : b}
         <slot name="postfix"></slot>
       </span>`;
   }
   renderInput(t) {
-    return n`
+    return d`
       <div class="label-container">
-        ${this.label && n`<dap-ds-form-label
-          part="label"
-          id="label"
-          for="input"
-          .size=${this.effectiveSize}
-          .required=${this.required}
-          .requiredLabel=${this.requiredLabel}
-          .optional=${this.optional}
-          .optionalLabel=${this.optionalLabel}
-          .disabled=${this.disabled}
-          class=${r("label")}
-          .noMargin=${!!this.description}
-          .hideLabel=${this.hideLabel}
-          label=${s(this.label)}>
-        </dap-ds-form-label>`}
-        ${this.tooltip && n` <dap-ds-tooltip
+        ${g({
+      label: this.label,
+      id: "label",
+      htmlFor: "input",
+      size: this.effectiveSize,
+      required: this.required,
+      requiredLabel: this.requiredLabel,
+      optional: this.optional,
+      optionalLabel: this.optionalLabel,
+      disabled: this.disabled,
+      subtle: this.subtle,
+      noMargin: !!this.description,
+      hideLabel: this.hideLabel
+    })}
+        ${this.tooltip && d` <dap-ds-tooltip
           part="tooltip"
           content=${this.tooltip}
           mode=${this.tooltipTrigger === "hover" ? "tooltip" : "toggle"}
@@ -125,9 +119,9 @@ const f = class f extends y {
         </dap-ds-tooltip>`}
         ${this.tooltip && // The tooltip text lives in the tooltip's shadow root, which an
     // aria-describedby on the input cannot reach; mirror it here instead.
-    n`<span id="tooltip-description" hidden>${this.tooltip}</span>`}
+    d`<span id="tooltip-description" hidden>${this.tooltip}</span>`}
       </div>
-      ${this.description && n`
+      ${this.description && d`
         <dap-ds-typography
           part="description"
           variant="description"
@@ -225,7 +219,7 @@ const f = class f extends y {
     `;
   }
   _renderFeedback() {
-    return n`
+    return d`
       <dap-ds-feedback
         part="feedback"
         role="alert"
@@ -241,22 +235,22 @@ const f = class f extends y {
     `;
   }
 };
-f.styles = g($);
+f.styles = y(x);
 let e = f;
 i([
   m("#input")
 ], e.prototype, "input");
 i([
-  h({ slot: "addon-before" })
+  p({ slot: "addon-before" })
 ], e.prototype, "_addonBeforeNode");
 i([
-  h({ slot: "addon-after" })
+  p({ slot: "addon-after" })
 ], e.prototype, "_addonAfterNode");
 i([
-  h({ slot: "prefix" })
+  p({ slot: "prefix" })
 ], e.prototype, "_prefixNode");
 i([
-  h({ slot: "postfix" })
+  p({ slot: "postfix" })
 ], e.prototype, "_postfixNode");
 i([
   o()