dap-design-system 0.62.3 → 0.63.0

package/dist/components/table/table-header.component.js

@@ -1,39 +1,36 @@
-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 p } 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 { unsafeCSS as f } from "lit";
+import { property as p } from "lit/decorators.js";
+import { html as m } from "lit/static-html.js";
+import { DdsElement as h } from "../../internal/dds-hu-element.js";
 import n from "./table-header.scss.js";
-import { unsafeCSS as h } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var u = Object.defineProperty, i = (l, e, a, d) => {
-  for (var t = void 0, s = l.length - 1, m; s >= 0; s--)
-    (m = l[s]) && (t = m(e, a, t) || t);
-  return t && u(e, a, t), t;
+var u = Object.defineProperty, l = (i, r, a, d) => {
+  for (var t = void 0, s = i.length - 1, c; s >= 0; s--)
+    (c = i[s]) && (t = c(r, a, t) || t);
+  return t && u(r, a, t), t;
 };
-const o = class o extends f {
+const o = class o extends h {
   constructor() {
     super(...arguments), this.role = "columnheader", this.scope = "col";
   }
-  willUpdate(e) {
-    e.has("scope") && this.hasAttribute("scope") && (this.role = this.scope === "row" ? "rowheader" : "columnheader");
+  willUpdate(r) {
+    r.has("scope") && this.hasAttribute("scope") && (this.role = this.scope === "row" ? "rowheader" : "columnheader");
   }
   render() {
-    return c` <slot part="base"></slot> `;
+    return m` <slot part="base"></slot> `;
   }
 };
-o.tagName = "dap-ds-table-header", o.styles = h(n);
-let r = o;
-i([
+o.tagName = "dap-ds-table-header", o.styles = f(n);
+let e = o;
+l([
   p({ type: Boolean, reflect: !0 })
-], r.prototype, "last");
-i([
+], e.prototype, "last");
+l([
   p({ reflect: !0 })
-], r.prototype, "role");
-i([
+], e.prototype, "role");
+l([
   p({ type: String, reflect: !0 })
-], r.prototype, "scope");
+], e.prototype, "scope");
 export {
-  r as default
+  e as default
 };
 //# sourceMappingURL=table-header.component.js.map

package/dist/components/table/table-header.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-header.component.js","sources":["../../../src/components/table/table-header.component.ts"],"sourcesContent":["import { 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 './table-header.scss?inline'\n\n/**\n * Table header cell component.\n * @element dap-ds-table-header\n * @title - Table header\n * @group table\n *\n * @slot - The default slot.\n *\n * @csspart base - The main header cell container.\n *\n * @cssproperty --dds-table-header-padding-block - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-padding-inline-start - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-header-padding-inline-end - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-border-width - Width of the header cell's bottom border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-table-header-border-color - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-table-header-text-color - Text color of the header cell. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-table-header-font-weight - Font weight of the header cell text. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-table-header-line-height - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge))\n */\nexport default class DapDSTableHeader extends DdsElement {\n  static tagName = 'dap-ds-table-header'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**If the header cell is the last one.*/\n  @property({ type: Boolean, reflect: true }) last: boolean\n  /** The html role of the header cell. Derived from `scope` unless set explicitly. */\n  @property({ reflect: true })\n  public role = 'columnheader'\n\n  /** Which cells the header labels, like the native `<th scope>`: `col` (cells below) or `row` (cells beside). */\n  @property({ type: String, reflect: true }) scope: 'col' | 'row' = 'col'\n\n  protected willUpdate(changedProperties: PropertyValueMap<this>): void {\n    // Only follow scope after the first render's default, so an explicit\n    // role=\"...\" attribute without a scope is kept\n    if (changedProperties.has('scope') && this.hasAttribute('scope')) {\n      this.role = this.scope === 'row' ? 'rowheader' : 'columnheader'\n    }\n  }\n\n  render() {\n    return html` <slot part=\"base\"></slot> `\n  }\n}\n"],"names":["_DapDSTableHeader","DdsElement","changedProperties","html","unsafeCSS","styles","DapDSTableHeader","__decorateClass","property"],"mappings":";;;;;;;;;;;;;AA0BA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA,GASE,KAAO,OAAO,gBAGoD,KAAA,QAAA;AAAA,EAAA;AAAA,EAExD,WAAWC,GAAiD;AAGpE,IAAIA,EAAkB,IAAI,OAAO,KAAK,KAAK,aAAa,OAAO,MAC7D,KAAK,OAAO,KAAK,UAAU,QAAQ,cAAc;AAAA,EACnD;AAAA,EAGF,SAAS;AACA,WAAAC;AAAAA,EAAA;AAEX;AAxBEH,EAAO,UAAU,uBAEDA,EAAA,SAASI,EAAUC,CAAM;AAH3C,IAAqBC,IAArBN;AAM8CO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,MAAA;AAGrCC,EAAA;AAAA,EADNC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EASZ,WAAA,MAAA;AAGoCC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAZtBF,EAYwB,WAAA,OAAA;"}
+{"version":3,"file":"table-header.component.js","sources":["../../../src/components/table/table-header.component.ts"],"sourcesContent":["import { 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 './table-header.scss?inline'\n\n/**\n * Table header cell component.\n * @element dap-ds-table-header\n * @title - Table header\n * @group table\n *\n * @slot - The default slot.\n *\n * @csspart base - The main header cell container.\n *\n * @cssproperty --dds-table-header-padding-block - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-padding-inline-start - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-header-padding-inline-end - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-border-width - Width of the header cell's bottom border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-table-header-border-color - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-table-header-text-color - Text color of the header cell. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-table-header-font-weight - Font weight of the header cell text. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-table-header-line-height - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge))\n */\nexport default class DapDSTableHeader extends DdsElement {\n  static tagName = 'dap-ds-table-header'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**If the header cell is the last one.*/\n  @property({ type: Boolean, reflect: true }) last: boolean\n  /** The html role of the header cell. Derived from `scope` unless set explicitly. */\n  @property({ reflect: true })\n  public role = 'columnheader'\n\n  /** Which cells the header labels, like the native `<th scope>`: `col` (cells below) or `row` (cells beside). */\n  @property({ type: String, reflect: true }) scope: 'col' | 'row' = 'col'\n\n  protected willUpdate(changedProperties: PropertyValueMap<this>): void {\n    // Only follow scope after the first render's default, so an explicit\n    // role=\"...\" attribute without a scope is kept\n    if (changedProperties.has('scope') && this.hasAttribute('scope')) {\n      this.role = this.scope === 'row' ? 'rowheader' : 'columnheader'\n    }\n  }\n\n  render() {\n    return html` <slot part=\"base\"></slot> `\n  }\n}\n"],"names":["_DapDSTableHeader","DdsElement","changedProperties","html","unsafeCSS","styles","DapDSTableHeader","__decorateClass","property"],"mappings":";;;;;;;;;;AA0BA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA,GASE,KAAO,OAAO,gBAGoD,KAAA,QAAA;AAAA,EAAA;AAAA,EAExD,WAAWC,GAAiD;AAGpE,IAAIA,EAAkB,IAAI,OAAO,KAAK,KAAK,aAAa,OAAO,MAC7D,KAAK,OAAO,KAAK,UAAU,QAAQ,cAAc;AAAA,EACnD;AAAA,EAGF,SAAS;AACA,WAAAC;AAAA,EAAA;AAEX;AAxBEH,EAAO,UAAU,uBAEDA,EAAA,SAASI,EAAUC,CAAM;AAH3C,IAAqBC,IAArBN;AAM8CO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,MAAA;AAGrCC,EAAA;AAAA,EADNC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EASZ,WAAA,MAAA;AAGoCC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAZtBF,EAYwB,WAAA,OAAA;"}

package/dist/components/table/table-row.component.js

@@ -1,17 +1,14 @@
-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 p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as a } from "../../node_modules/lit-html/static.js";
-import { DdsElement as n } from "../../internal/dds-hu-element.js";
-import u from "./table-row.scss.js";
-import { unsafeCSS as d } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var c = Object.defineProperty, f = (s, i, m, h) => {
-  for (var t = void 0, o = s.length - 1, l; o >= 0; o--)
-    (l = s[o]) && (t = l(i, m, t) || t);
-  return t && c(i, m, t), t;
+import { unsafeCSS as n } from "lit";
+import { property as f } from "lit/decorators.js";
+import { html as a } from "lit/static-html.js";
+import { DdsElement as u } from "../../internal/dds-hu-element.js";
+import d from "./table-row.scss.js";
+var c = Object.defineProperty, p = (s, l, i, h) => {
+  for (var t = void 0, o = s.length - 1, m; o >= 0; o--)
+    (m = s[o]) && (t = m(l, i, t) || t);
+  return t && c(l, i, t), t;
 };
-const e = class e extends n {
+const e = class e extends u {
   constructor() {
     super(...arguments), this.role = "row", this.mobile = !1;
   }
@@ -19,13 +16,13 @@ const e = class e extends n {
     return a` <slot></slot> `;
   }
 };
-e.tagName = "dap-ds-table-row", e.styles = d(u);
+e.tagName = "dap-ds-table-row", e.styles = n(d);
 let r = e;
-f([
-  p({ reflect: !0 })
+p([
+  f({ reflect: !0 })
 ], r.prototype, "role");
-f([
-  p({ type: Boolean, reflect: !0 })
+p([
+  f({ type: Boolean, reflect: !0 })
 ], r.prototype, "mobile");
 export {
   r as default

package/dist/components/table/table-row.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.component.js","sources":["../../../src/components/table/table-row.component.ts"],"sourcesContent":["import { 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 './table-row.scss?inline'\n\n/**\n * Table row component.\n * @element dap-ds-table-row\n * @title - Table row\n * @group table\n *\n * @slot - The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements.\n *\n * @cssprop --dds-table-row-padding-right - Padding right for the last table header, (default: var(--dds-spacing-500))\n * @cssprop --dds-table-row-padding-top - Padding top for table headers in mobile view, (default: var(--dds-spacing-400))\n * @cssprop --dds-table-row-padding-bottom - Padding bottom for the last table cell in mobile view, (default: var(--dds-spacing-400))\n * @cssprop --dds-table-row-border-color - Border color for table cells and headers, (default: transparent)\n */\nexport default class DapDSTableRow extends DdsElement {\n  static tagName = 'dap-ds-table-row'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The html role of the row */\n  @property({ reflect: true })\n  public role = 'row'\n\n  /**If the row is mobile design */\n  @property({ type: Boolean, reflect: true }) mobile = false\n\n  render() {\n    return html` <slot></slot> `\n  }\n}\n"],"names":["_DapDSTableRow","DdsElement","html","unsafeCSS","styles","DapDSTableRow","__decorateClass","property"],"mappings":";;;;;;;;;;;;;AAoBA,MAAqBA,IAArB,MAAqBA,UAAsBC,EAAW;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA,GAOE,KAAO,OAAO,OAGuC,KAAA,SAAA;AAAA,EAAA;AAAA,EAErD,SAAS;AACA,WAAAC;AAAAA,EAAA;AAEX;AAdEF,EAAO,UAAU,oBAEDA,EAAA,SAASG,EAAUC,CAAM;AAH3C,IAAqBC,IAArBL;AAOSM,EAAA;AAAA,EADNC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GANRF,EAOZ,WAAA,MAAA;AAGqCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAVvBF,EAUyB,WAAA,QAAA;"}
+{"version":3,"file":"table-row.component.js","sources":["../../../src/components/table/table-row.component.ts"],"sourcesContent":["import { 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 './table-row.scss?inline'\n\n/**\n * Table row component.\n * @element dap-ds-table-row\n * @title - Table row\n * @group table\n *\n * @slot - The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements.\n *\n * @cssprop --dds-table-row-padding-right - Padding right for the last table header, (default: var(--dds-spacing-500))\n * @cssprop --dds-table-row-padding-top - Padding top for table headers in mobile view, (default: var(--dds-spacing-400))\n * @cssprop --dds-table-row-padding-bottom - Padding bottom for the last table cell in mobile view, (default: var(--dds-spacing-400))\n * @cssprop --dds-table-row-border-color - Border color for table cells and headers, (default: transparent)\n */\nexport default class DapDSTableRow extends DdsElement {\n  static tagName = 'dap-ds-table-row'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** The html role of the row */\n  @property({ reflect: true })\n  public role = 'row'\n\n  /**If the row is mobile design */\n  @property({ type: Boolean, reflect: true }) mobile = false\n\n  render() {\n    return html` <slot></slot> `\n  }\n}\n"],"names":["_DapDSTableRow","DdsElement","html","unsafeCSS","styles","DapDSTableRow","__decorateClass","property"],"mappings":";;;;;;;;;;AAoBA,MAAqBA,IAArB,MAAqBA,UAAsBC,EAAW;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA,GAOE,KAAO,OAAO,OAGuC,KAAA,SAAA;AAAA,EAAA;AAAA,EAErD,SAAS;AACA,WAAAC;AAAA,EAAA;AAEX;AAdEF,EAAO,UAAU,oBAEDA,EAAA,SAASG,EAAUC,CAAM;AAH3C,IAAqBC,IAArBL;AAOSM,EAAA;AAAA,EADNC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GANRF,EAOZ,WAAA,MAAA;AAGqCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAVvBF,EAUyB,WAAA,QAAA;"}

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

@@ -11,6 +11,8 @@ import { DdsElement } from '../../internal/dds-hu-element';
  * @cssprop --dds-table-border-color - Color of the table border. (default: var(--dds-border-neutral-subtle))
  * @cssprop --dds-table-border-radius - Border radius of the table. (default: var(--dds-radius-small, 4px))
  * @cssprop --dds-table-row-divider-color - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle))
+ *
+ * @csspart caption - The caption of the table.
  */
 export default class DapDSTable extends DdsElement {
     static tagName: string;

package/dist/components/table/table.component.js

@@ -1,18 +1,14 @@
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as f } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { queryAssignedElements as d } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { html as c } from "../../node_modules/lit-html/static.js";
+import { unsafeCSS as d, nothing as f } from "lit";
+import { queryAssignedElements as b, property as l } from "lit/decorators.js";
+import { html as c } from "lit/static-html.js";
 import { DdsElement as m } from "../../internal/dds-hu-element.js";
-import b from "./table.scss.js";
-import { unsafeCSS as u } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, s = (l, i, a, n) => {
-  for (var t = void 0, o = l.length - 1, h; o >= 0; o--)
-    (h = l[o]) && (t = h(i, a, t) || t);
+import u from "./table.scss.js";
+var y = Object.defineProperty, r = (p, i, a, n) => {
+  for (var t = void 0, o = p.length - 1, h; o >= 0; o--)
+    (h = p[o]) && (t = h(i, a, t) || t);
   return t && y(i, a, t), t;
 };
-const r = class r extends m {
+const s = class s extends m {
   constructor() {
     super(...arguments), this.role = "table", this.mobile = !1, this.caption = "", this.captionLabelApplied = !1;
   }
@@ -35,19 +31,19 @@ const r = class r extends m {
     `;
   }
 };
-r.tagName = "dap-ds-table", r.styles = u(b);
-let e = r;
-s([
-  d()
+s.tagName = "dap-ds-table", s.styles = d(u);
+let e = s;
+r([
+  b()
 ], e.prototype, "rows");
-s([
-  p({ reflect: !0 })
+r([
+  l({ reflect: !0 })
 ], e.prototype, "role");
-s([
-  p({ type: Boolean, reflect: !0 })
+r([
+  l({ type: Boolean, reflect: !0 })
 ], e.prototype, "mobile");
-s([
-  p({ type: String })
+r([
+  l({ type: String })
 ], e.prototype, "caption");
 export {
   e as default

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

@@ -1 +1 @@
-{"version":3,"file":"table.component.js","sources":["../../../src/components/table/table.component.ts"],"sourcesContent":["import { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table.scss?inline'\n\n/**\n * Data table component.\n * @element dap-ds-table\n * @title - Table\n *\n * @slot - The default slot. Accepts `dap-ds-table-row` elements.\n *\n * @cssprop --dds-table-border-width - Width of the table border. (default: var(--dds-border-width-base, 1px))\n * @cssprop --dds-table-border-color - Color of the table border. (default: var(--dds-border-neutral-subtle))\n * @cssprop --dds-table-border-radius - Border radius of the table. (default: var(--dds-radius-small, 4px))\n * @cssprop --dds-table-row-divider-color - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle))\n */\nexport default class DapDSTable extends DdsElement {\n  static tagName = 'dap-ds-table'\n\n  /**@ignore */\n  @queryAssignedElements() rows!: Array<HTMLElement>\n  // `grid` is only right for an interactive table with keyboard-navigable cells\n  /** The html role of the table. Defaults to `table`; use `grid` only for an interactive table. */\n  @property({ reflect: true }) public role = 'table'\n  /**If the table has mobile design */\n  @property({ type: Boolean, reflect: true }) mobile = false\n\n  /** The caption of the table */\n  @property({ type: String }) caption = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  // Whether the host's aria-label came from the caption (and so is ours to\n  // remove); an aria-label the author set is left alone\n  private captionLabelApplied = false\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    this.rows.forEach((row, index) => {\n      if (index === this.rows.length - 1) {\n        row.toggleAttribute('last')\n      }\n    })\n\n    if (\n      !this.caption &&\n      !this.hasAttribute('aria-label') &&\n      !this.hasAttribute('aria-labelledby')\n    ) {\n      console.warn(\n        'dap-ds-table: the table has no accessible name. Set a caption (or aria-label / aria-labelledby) that describes its purpose.',\n      )\n    }\n  }\n\n  protected willUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    // The caption names the table. The rendered <caption> is in the shadow root\n    // and not tied to the host's role, so the name goes on the host instead;\n    // never set an empty label. Done before render (not in updated()) because\n    // aria-label is a reactive property and setting it after would re-render.\n    if (_changedProperties.has('caption')) {\n      if (this.caption) {\n        this.setAttribute('aria-label', this.caption)\n        this.captionLabelApplied = true\n      } else if (this.captionLabelApplied) {\n        this.removeAttribute('aria-label')\n        this.captionLabelApplied = false\n      }\n    }\n  }\n\n  render() {\n    // aria-hidden: the caption text is already the host's aria-label, so screen\n    // readers would otherwise announce it twice\n    return html`\n      ${this.caption\n        ? html`<caption class=\"caption\" part=\"caption\" aria-hidden=\"true\">\n            ${this.caption}\n          </caption>`\n        : nothing}\n      <slot></slot>\n    `\n  }\n}\n"],"names":["_DapDSTable","DdsElement","_changedProperties","row","index","html","nothing","unsafeCSS","styles","DapDSTable","__decorateClass","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAO+B,KAAO,OAAO,SAEU,KAAA,SAAA,IAGf,KAAA,UAAA,IAMtC,KAAQ,sBAAsB;AAAA,EAAA;AAAA,EAEpB,aACRC,GACM;AACN,SAAK,KAAK,QAAQ,CAACC,GAAKC,MAAU;AAChC,MAAIA,MAAU,KAAK,KAAK,SAAS,KAC/BD,EAAI,gBAAgB,MAAM;AAAA,IAC5B,CACD,GAGC,CAAC,KAAK,WACN,CAAC,KAAK,aAAa,YAAY,KAC/B,CAAC,KAAK,aAAa,iBAAiB,KAE5B,QAAA;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAAA,EAGQ,WACRD,GACM;AAKF,IAAAA,EAAmB,IAAI,SAAS,MAC9B,KAAK,WACF,KAAA,aAAa,cAAc,KAAK,OAAO,GAC5C,KAAK,sBAAsB,MAClB,KAAK,wBACd,KAAK,gBAAgB,YAAY,GACjC,KAAK,sBAAsB;AAAA,EAE/B;AAAA,EAGF,SAAS;AAGA,WAAAG;AAAAA,QACH,KAAK,UACHA;AAAAA,cACI,KAAK,OAAO;AAAA,wBAEhBC,CAAO;AAAA;AAAA;AAAA,EAAA;AAIjB;AArEEN,EAAO,UAAU,gBAaDA,EAAA,SAASO,EAAUC,CAAM;AAd3C,IAAqBC,IAArBT;AAI2BU,EAAA;AAAA,EAAxBC,EAAsB;AAAA,GAJJF,EAIM,WAAA,MAAA;AAGWC,EAAA;AAAA,EAAnCE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAPRH,EAOiB,WAAA,MAAA;AAEQC,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GATvBH,EASyB,WAAA,QAAA;AAGhBC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;"}
+{"version":3,"file":"table.component.js","sources":["../../../src/components/table/table.component.ts"],"sourcesContent":["import { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table.scss?inline'\n\n/**\n * Data table component.\n * @element dap-ds-table\n * @title - Table\n *\n * @slot - The default slot. Accepts `dap-ds-table-row` elements.\n *\n * @cssprop --dds-table-border-width - Width of the table border. (default: var(--dds-border-width-base, 1px))\n * @cssprop --dds-table-border-color - Color of the table border. (default: var(--dds-border-neutral-subtle))\n * @cssprop --dds-table-border-radius - Border radius of the table. (default: var(--dds-radius-small, 4px))\n * @cssprop --dds-table-row-divider-color - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle))\n *\n * @csspart caption - The caption of the table.\n */\nexport default class DapDSTable extends DdsElement {\n  static tagName = 'dap-ds-table'\n\n  /**@ignore */\n  @queryAssignedElements() rows!: Array<HTMLElement>\n  // `grid` is only right for an interactive table with keyboard-navigable cells\n  /** The html role of the table. Defaults to `table`; use `grid` only for an interactive table. */\n  @property({ reflect: true }) public role = 'table'\n  /**If the table has mobile design */\n  @property({ type: Boolean, reflect: true }) mobile = false\n\n  /** The caption of the table */\n  @property({ type: String }) caption = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  // Whether the host's aria-label came from the caption (and so is ours to\n  // remove); an aria-label the author set is left alone\n  private captionLabelApplied = false\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    this.rows.forEach((row, index) => {\n      if (index === this.rows.length - 1) {\n        row.toggleAttribute('last')\n      }\n    })\n\n    if (\n      !this.caption &&\n      !this.hasAttribute('aria-label') &&\n      !this.hasAttribute('aria-labelledby')\n    ) {\n      console.warn(\n        'dap-ds-table: the table has no accessible name. Set a caption (or aria-label / aria-labelledby) that describes its purpose.',\n      )\n    }\n  }\n\n  protected willUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    // The caption names the table. The rendered <caption> is in the shadow root\n    // and not tied to the host's role, so the name goes on the host instead;\n    // never set an empty label. Done before render (not in updated()) because\n    // aria-label is a reactive property and setting it after would re-render.\n    if (_changedProperties.has('caption')) {\n      if (this.caption) {\n        this.setAttribute('aria-label', this.caption)\n        this.captionLabelApplied = true\n      } else if (this.captionLabelApplied) {\n        this.removeAttribute('aria-label')\n        this.captionLabelApplied = false\n      }\n    }\n  }\n\n  render() {\n    // aria-hidden: the caption text is already the host's aria-label, so screen\n    // readers would otherwise announce it twice\n    return html`\n      ${this.caption\n        ? html`<caption class=\"caption\" part=\"caption\" aria-hidden=\"true\">\n            ${this.caption}\n          </caption>`\n        : nothing}\n      <slot></slot>\n    `\n  }\n}\n"],"names":["_DapDSTable","DdsElement","_changedProperties","row","index","html","nothing","unsafeCSS","styles","DapDSTable","__decorateClass","queryAssignedElements","property"],"mappings":";;;;;;;;;;AAqBA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAO+B,KAAO,OAAO,SAEU,KAAA,SAAA,IAGf,KAAA,UAAA,IAMtC,KAAQ,sBAAsB;AAAA,EAAA;AAAA,EAEpB,aACRC,GACM;AACN,SAAK,KAAK,QAAQ,CAACC,GAAKC,MAAU;AAChC,MAAIA,MAAU,KAAK,KAAK,SAAS,KAC/BD,EAAI,gBAAgB,MAAM;AAAA,IAC5B,CACD,GAGC,CAAC,KAAK,WACN,CAAC,KAAK,aAAa,YAAY,KAC/B,CAAC,KAAK,aAAa,iBAAiB,KAE5B,QAAA;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAAA,EAGQ,WACRD,GACM;AAKF,IAAAA,EAAmB,IAAI,SAAS,MAC9B,KAAK,WACF,KAAA,aAAa,cAAc,KAAK,OAAO,GAC5C,KAAK,sBAAsB,MAClB,KAAK,wBACd,KAAK,gBAAgB,YAAY,GACjC,KAAK,sBAAsB;AAAA,EAE/B;AAAA,EAGF,SAAS;AAGA,WAAAG;AAAA,QACH,KAAK,UACHA;AAAA,cACI,KAAK,OAAO;AAAA,wBAEhBC,CAAO;AAAA;AAAA;AAAA,EAAA;AAIjB;AArEEN,EAAO,UAAU,gBAaDA,EAAA,SAASO,EAAUC,CAAM;AAd3C,IAAqBC,IAArBT;AAI2BU,EAAA;AAAA,EAAxBC,EAAsB;AAAA,GAJJF,EAIM,WAAA,MAAA;AAGWC,EAAA;AAAA,EAAnCE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAPRH,EAOiB,WAAA,MAAA;AAEQC,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GATvBH,EASyB,WAAA,QAAA;AAGhBC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;"}

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

@@ -45,6 +45,8 @@ import { default as DapDSTypography } from '../typography/typography.component';
  * @csspart feedback-base - The base of the feedback.
  * @csspart feedback-text - The text of the feedback.
  * @csspart feedback-icon - The icon of the feedback.
+ * @csspart footer - The footer of the textarea holding the feedback and counter.
+ * @csspart counter-container - The container of the counter.
  *
  * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)
  * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))

package/dist/components/textarea/textarea.component.js

@@ -1,7 +1,7 @@
 var v = Object.getPrototypeOf;
 var x = Reflect.get;
 var $ = (h, t, e) => x(v(h), e, t);
-var y = (h, t, e) => new Promise((n, r) => {
+var m = (h, t, e) => new Promise((n, r) => {
   var c = (d) => {
     try {
       f(e.next(d));
@@ -17,26 +17,21 @@ var y = (h, t, e) => new Promise((n, r) => {
   }, f = (d) => d.done ? n(d.value) : Promise.resolve(d.value).then(c, u);
   f((e = e.apply(h, t)).next());
 });
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as g } 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 k } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { query as I } from "../../node_modules/@lit/reactive-element/decorators/query.js";
-import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as p } from "../../node_modules/lit-html/static.js";
-import { GenericFormElement as C } from "../../internal/mixin/genericFormElement.js";
-import S from "../feedback/feedback.component.js";
-import _ from "../typography/typography.component.js";
-import w from "./textarea.scss.js";
-import { unsafeCSS as F } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { clsx as y } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as k, nothing as g } from "lit";
+import { query as I, property as l, state as C } from "lit/decorators.js";
+import { ifDefined as i } from "lit/directives/if-defined.js";
+import { html as p } from "lit/static-html.js";
+import { GenericFormElement as S } from "../../internal/mixin/genericFormElement.js";
+import _ from "../feedback/feedback.component.js";
+import w from "../typography/typography.component.js";
+import F from "./textarea.scss.js";
 var D = Object.defineProperty, o = (h, t, e, n) => {
   for (var r = void 0, c = h.length - 1, u; c >= 0; c--)
     (u = h[c]) && (r = u(t, e, r) || r);
   return r && D(t, e, r), r;
 }, a;
-const i = (a = class extends C {
+const s = (a = class extends S {
   constructor() {
     super(), this.hideCounter = !1, this.rows = 6, this.placeholder = "", this.count = 0, a.nextId++;
     const t = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
@@ -49,7 +44,7 @@ const i = (a = class extends C {
     (t == null ? void 0 : t.target).setAttribute("slot", "icon");
   }
   connectedCallback() {
-    return y(this, null, function* () {
+    return m(this, null, function* () {
       var t;
       $(a.prototype, this, "connectedCallback").call(this), yield this.updateComplete, this.input.value = (t = this.value) != null ? t : "", this.count = this.input.value.length;
     });
@@ -90,7 +85,7 @@ const i = (a = class extends C {
     <dap-ds-typography
           part="counter"
           exportparts="base: counter-base"
-          class=${m("textarea__counter", {
+          class=${y("textarea__counter", {
       "textarea__counter--error": this.status === "error"
     })}
           variant="caption"
@@ -111,10 +106,11 @@ const i = (a = class extends C {
   render() {
     return this.renderLabel(
       this.labelId,
+      this.inputId,
       p`
         <div
           part="base"
-          class=${m(
+          class=${y(
         "textarea",
         `textarea--${this.effectiveSize}`,
         { "textarea--success": this.status === "success" },
@@ -128,19 +124,19 @@ const i = (a = class extends C {
             part="input"
             class="textarea__control"
             aria-disabled=${this.disabled}
-            aria-describedby=${s(this.getAriaDescribedBy())}
+            aria-describedby=${i(this.getAriaDescribedBy())}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             ?required=${this.required}
-            minlength=${s(this.minlength)}
-            maxlength=${s(this.maxlength)}
-            wrap=${s(this.wrap)}
-            cols=${s(this.cols)}
-            rows=${s(this.rows)}
-            placeholder=${s(this.placeholder)}
+            minlength=${i(this.minlength)}
+            maxlength=${i(this.maxlength)}
+            wrap=${i(this.wrap)}
+            cols=${i(this.cols)}
+            rows=${i(this.rows)}
+            placeholder=${i(this.placeholder)}
             ?autofocus=${this.autofocus}
             ?value=${this.value}
-            aria-labelledby=${s(this.label ? this.labelId : g)}
+            aria-labelledby=${i(this.label ? this.labelId : g)}
             @input=${this.onInput}
             @keydown=${this.onKeydown}
             @change=${this.onChange}
@@ -158,12 +154,12 @@ const i = (a = class extends C {
     return p`
       <dap-ds-feedback
         part="feedback"
-        feedbackType=${s(this.feedbackType)}
-        feedbackSize=${s(this.effectiveSize)}
-        class=${m("textarea__feedback", {
+        feedbackType=${i(this.feedbackType)}
+        feedbackSize=${i(this.effectiveSize)}
+        class=${y("textarea__feedback", {
       "textarea__feedback--sm": this.effectiveSize === "sm"
     })}
-        id=${s(this.feedbackId)}
+        id=${i(this.feedbackId)}
         exportparts="base:feedback-base, text:feedback-text, icon:feedback-icon"
         .subtle=${this.subtle}>
         <slot
@@ -174,38 +170,38 @@ const i = (a = class extends C {
     `;
   }
 }, a.tagName = "dap-ds-textarea", a.dependencies = {
-  "dap-ds-typography": _,
-  "dap-ds-feedback": S
-}, a.nextId = 0, a.styles = F(w), a);
+  "dap-ds-typography": w,
+  "dap-ds-feedback": _
+}, a.nextId = 0, a.styles = k(F), a);
 o([
   I(".textarea__control")
-], i.prototype, "input");
+], s.prototype, "input");
 o([
   l({ type: Boolean, reflect: !0 })
-], i.prototype, "hideCounter");
+], s.prototype, "hideCounter");
 o([
   l({ type: Number })
-], i.prototype, "minlength");
+], s.prototype, "minlength");
 o([
   l({ type: Number })
-], i.prototype, "maxlength");
+], s.prototype, "maxlength");
 o([
   l({ type: Number })
-], i.prototype, "rows");
+], s.prototype, "rows");
 o([
   l({ type: Number })
-], i.prototype, "cols");
+], s.prototype, "cols");
 o([
   l()
-], i.prototype, "placeholder");
+], s.prototype, "placeholder");
 o([
   l()
-], i.prototype, "wrap");
+], s.prototype, "wrap");
 o([
-  k()
-], i.prototype, "count");
-let T = i;
+  C()
+], s.prototype, "count");
+let G = s;
 export {
-  T as default
+  G as default
 };
 //# sourceMappingURL=textarea.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.component.js","sources":["../../../src/components/textarea/textarea.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport { CommonFormElementSize, CommonSize } from '../../common/types'\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './textarea.scss?inline'\n\n/**\n * `dap-ds-textarea`\n * @summary A textarea is a multi-line text input field.\n * @element dap-ds-textarea\n * @title - Textarea\n *\n * @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.\n * @property {boolean} disabled - The disabled state of the textarea.\n * @property {number} minlength - The minimum length of the textarea.\n * @property {string} value - The value of the textarea.\n * @property {string} tooltip - The tooltip of the textarea.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.\n * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.\n * @property {boolean} readonly - The readonly state of the textarea.\n * @property {boolean} required - The required state of the textarea.\n * @property {string} label - The label of the textarea.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the textarea.\n * @property {string} feedback - The feedback of the textarea.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the textarea.\n * @property {string} optionalLabel - The optional label of the textarea.\n * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} autofocus - The autofocus state of the textarea.\n *\n * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.\n * @event {{ value: string }} dds-change - Fired when the textarea value changes.\n * @event {{ value: string }} dds-input - Fired when the textarea value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the textarea loses focus.\n * @event {{ void }} dds-focus - Emitted when the textarea gains focus.\n * @event {{ value: string }} dds-select - Emitted when select text in textarea.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main textarea container.\n * @csspart input - The native input of the textarea.\n * @csspart counter - The counter of the textarea.\n * @csspart counter-base - The base of the counter.\n * @csspart feedback - The feedback of the textarea.\n * @csspart feedback-base - The base of the feedback.\n * @csspart feedback-text - The text of the feedback.\n * @csspart feedback-icon - The icon of the feedback.\n *\n * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)\n * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))\n * @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))\n * @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))\n */\nexport default class DapDSTextarea extends GenericFormElement {\n  static tagName = 'dap-ds-textarea'\n\n  static dependencies = {\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly counterId: string\n\n  /**@ignore */\n  @query('.textarea__control') input!: HTMLTextAreaElement\n  /** Hide character counter. */\n  @property({ type: Boolean, reflect: true }) hideCounter = false\n  /** The minimum length of the textarea. */\n  @property({ type: Number }) minlength?: number\n  /** The maximum length of the textarea. */\n  @property({ type: Number }) maxlength?: number\n  /** The number of rows in the textarea. */\n  @property({ type: Number }) rows?: number = 6\n  /** The number of columns in the textarea. */\n  @property({ type: Number }) cols?: number\n  /** The placeholder of the textarea. */\n  @property() placeholder = ''\n  /** Indicates how the control should wrap the value for form submission. */\n  @property() wrap: 'hard' | 'soft'\n\n  /**@ignore */\n  @state() count = 0\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    DapDSTextarea.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.counterId = `counter-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSTextarea.nextId}-${uniqueSuffix}`\n  }\n\n  get focusElement() {\n    return this.input\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    await this.updateComplete\n    this.input.value = this.value ?? ''\n    this.count = this.input.value.length\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && this.input) {\n      this.input.value = newValue\n    }\n  }\n\n  onInput() {\n    // Sync the host `value` property BEFORE emitting dds-input. super.onInput()\n    // dispatches dds-input synchronously, so consumers that read the host `value`\n    // in that listener (e.g. RHF bindings) would otherwise see the previous value\n    // and lag one keystroke behind. Matches dap-ds-input's ordering.\n    this.count = this.input.value.length\n    this.value = this.input.value\n\n    super.onInput()\n\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onChange() {\n    // Same ordering as onInput: update the host `value` before super emits dds-change.\n    this.count = this.input.value.length\n    this.value = this.input.value\n\n    super.onChange()\n\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onSelect(e: Event) {\n    const target = e.target as HTMLTextAreaElement\n    const selection = target.value.substring(\n      target.selectionStart,\n      target.selectionEnd,\n    )\n    this.emit('dds-select', { value: selection })\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue || '')\n    this.value = this.defaultValue || ''\n    this.input.value = this.defaultValue || ''\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  /**\n   * Combines description and feedback ids. Built as one value because a Lit\n   * attribute with several parts is removed entirely if any part is `nothing`.\n   * The description element is rendered by LabelableMixin with id=\"description\".\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n\n    if (this.description) {\n      ids.push('description')\n    }\n\n    if (this.feedback && this.feedbackId) {\n      ids.push(this.feedbackId)\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  private _renderFooter() {\n    const counter = !this.hideCounter\n      ? html`\n    <dap-ds-typography\n          part=\"counter\"\n          exportparts=\"base: counter-base\"\n          class=${clsx('textarea__counter', {\n            'textarea__counter--error': this.status === 'error',\n          })}\n          variant=\"caption\"\n          size=\"${this.size as CommonFormElementSize}\"\n          id=${this.counterId}\n          aria-hidden=\"true\">\n          ${this.count}\n        </dap-ds-typography>\n      </div>\n    `\n      : nothing\n\n    return html`\n      <div class=\"textarea__footer\" part=\"footer\">\n        ${this.feedback && this._renderFeedback()}\n        <span part=\"counter-container\">${counter}</span>\n      </div>\n    `\n  }\n\n  render() {\n    return this.renderLabel(\n      this.labelId,\n      html`\n        <div\n          part=\"base\"\n          class=${clsx(\n            'textarea',\n            `textarea--${this.effectiveSize}`,\n            { 'textarea--success': this.status === 'success' },\n            { 'textarea--error': this.status === 'error' },\n            { 'textarea--disabled': this.disabled },\n            { 'textarea--readonly': this.readonly },\n            { 'textarea--optional': this.optional },\n          )}>\n          <textarea\n            id=${this.inputId}\n            part=\"input\"\n            class=\"textarea__control\"\n            aria-disabled=${this.disabled}\n            aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            wrap=${ifDefined(this.wrap)}\n            cols=${ifDefined(this.cols)}\n            rows=${ifDefined(this.rows)}\n            placeholder=${ifDefined(this.placeholder)}\n            ?autofocus=${this.autofocus}\n            ?value=${this.value}\n            aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @change=${this.onChange}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus}\n            @select=${this.onSelect}\n            @invalid=${this.handleInvalid}></textarea>\n\n          ${this._renderFooter()}\n        </div>\n      `,\n    )\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=${ifDefined(this.effectiveSize) as CommonSize}\n        class=${clsx('textarea__feedback', {\n          'textarea__feedback--sm': this.effectiveSize === 'sm',\n        })}\n        id=${ifDefined(this.feedbackId)}\n        exportparts=\"base:feedback-base, text:feedback-text, icon:feedback-icon\"\n        .subtle=${this.subtle}>\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n}\n"],"names":["_DapDSTextarea","_a","GenericFormElement","uniqueSuffix","event","__async","__superGet","name","oldValue","newValue","e","target","selection","ids","counter","nothing","html","clsx","ifDefined","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTextarea"],"mappings":"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"}
+{"version":3,"file":"textarea.component.js","sources":["../../../src/components/textarea/textarea.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport { CommonFormElementSize, CommonSize } from '../../common/types'\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './textarea.scss?inline'\n\n/**\n * `dap-ds-textarea`\n * @summary A textarea is a multi-line text input field.\n * @element dap-ds-textarea\n * @title - Textarea\n *\n * @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.\n * @property {boolean} disabled - The disabled state of the textarea.\n * @property {number} minlength - The minimum length of the textarea.\n * @property {string} value - The value of the textarea.\n * @property {string} tooltip - The tooltip of the textarea.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.\n * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.\n * @property {boolean} readonly - The readonly state of the textarea.\n * @property {boolean} required - The required state of the textarea.\n * @property {string} label - The label of the textarea.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the textarea.\n * @property {string} feedback - The feedback of the textarea.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the textarea.\n * @property {string} optionalLabel - The optional label of the textarea.\n * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} autofocus - The autofocus state of the textarea.\n *\n * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.\n * @event {{ value: string }} dds-change - Fired when the textarea value changes.\n * @event {{ value: string }} dds-input - Fired when the textarea value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the textarea loses focus.\n * @event {{ void }} dds-focus - Emitted when the textarea gains focus.\n * @event {{ value: string }} dds-select - Emitted when select text in textarea.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main textarea container.\n * @csspart input - The native input of the textarea.\n * @csspart counter - The counter of the textarea.\n * @csspart counter-base - The base of the counter.\n * @csspart feedback - The feedback of the textarea.\n * @csspart feedback-base - The base of the feedback.\n * @csspart feedback-text - The text of the feedback.\n * @csspart feedback-icon - The icon of the feedback.\n * @csspart footer - The footer of the textarea holding the feedback and counter.\n * @csspart counter-container - The container of the counter.\n *\n * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)\n * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))\n * @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))\n * @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))\n */\nexport default class DapDSTextarea extends GenericFormElement {\n  static tagName = 'dap-ds-textarea'\n\n  static dependencies = {\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly counterId: string\n\n  /**@ignore */\n  @query('.textarea__control') input!: HTMLTextAreaElement\n  /** Hide character counter. */\n  @property({ type: Boolean, reflect: true }) hideCounter = false\n  /** The minimum length of the textarea. */\n  @property({ type: Number }) minlength?: number\n  /** The maximum length of the textarea. */\n  @property({ type: Number }) maxlength?: number\n  /** The number of rows in the textarea. */\n  @property({ type: Number }) rows?: number = 6\n  /** The number of columns in the textarea. */\n  @property({ type: Number }) cols?: number\n  /** The placeholder of the textarea. */\n  @property() placeholder = ''\n  /** Indicates how the control should wrap the value for form submission. */\n  @property() wrap: 'hard' | 'soft'\n\n  /**@ignore */\n  @state() count = 0\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    DapDSTextarea.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.counterId = `counter-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSTextarea.nextId}-${uniqueSuffix}`\n  }\n\n  get focusElement() {\n    return this.input\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    await this.updateComplete\n    this.input.value = this.value ?? ''\n    this.count = this.input.value.length\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && this.input) {\n      this.input.value = newValue\n    }\n  }\n\n  onInput() {\n    // Sync the host `value` property BEFORE emitting dds-input. super.onInput()\n    // dispatches dds-input synchronously, so consumers that read the host `value`\n    // in that listener (e.g. RHF bindings) would otherwise see the previous value\n    // and lag one keystroke behind. Matches dap-ds-input's ordering.\n    this.count = this.input.value.length\n    this.value = this.input.value\n\n    super.onInput()\n\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onChange() {\n    // Same ordering as onInput: update the host `value` before super emits dds-change.\n    this.count = this.input.value.length\n    this.value = this.input.value\n\n    super.onChange()\n\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onSelect(e: Event) {\n    const target = e.target as HTMLTextAreaElement\n    const selection = target.value.substring(\n      target.selectionStart,\n      target.selectionEnd,\n    )\n    this.emit('dds-select', { value: selection })\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue || '')\n    this.value = this.defaultValue || ''\n    this.input.value = this.defaultValue || ''\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  /**\n   * Combines description and feedback ids. Built as one value because a Lit\n   * attribute with several parts is removed entirely if any part is `nothing`.\n   * The description element is rendered by LabelableMixin with id=\"description\".\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n\n    if (this.description) {\n      ids.push('description')\n    }\n\n    if (this.feedback && this.feedbackId) {\n      ids.push(this.feedbackId)\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\n  }\n\n  private _renderFooter() {\n    const counter = !this.hideCounter\n      ? html`\n    <dap-ds-typography\n          part=\"counter\"\n          exportparts=\"base: counter-base\"\n          class=${clsx('textarea__counter', {\n            'textarea__counter--error': this.status === 'error',\n          })}\n          variant=\"caption\"\n          size=\"${this.size as CommonFormElementSize}\"\n          id=${this.counterId}\n          aria-hidden=\"true\">\n          ${this.count}\n        </dap-ds-typography>\n      </div>\n    `\n      : nothing\n\n    return html`\n      <div class=\"textarea__footer\" part=\"footer\">\n        ${this.feedback && this._renderFeedback()}\n        <span part=\"counter-container\">${counter}</span>\n      </div>\n    `\n  }\n\n  render() {\n    return this.renderLabel(\n      this.labelId,\n      this.inputId,\n      html`\n        <div\n          part=\"base\"\n          class=${clsx(\n            'textarea',\n            `textarea--${this.effectiveSize}`,\n            { 'textarea--success': this.status === 'success' },\n            { 'textarea--error': this.status === 'error' },\n            { 'textarea--disabled': this.disabled },\n            { 'textarea--readonly': this.readonly },\n            { 'textarea--optional': this.optional },\n          )}>\n          <textarea\n            id=${this.inputId}\n            part=\"input\"\n            class=\"textarea__control\"\n            aria-disabled=${this.disabled}\n            aria-describedby=${ifDefined(this.getAriaDescribedBy())}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            wrap=${ifDefined(this.wrap)}\n            cols=${ifDefined(this.cols)}\n            rows=${ifDefined(this.rows)}\n            placeholder=${ifDefined(this.placeholder)}\n            ?autofocus=${this.autofocus}\n            ?value=${this.value}\n            aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @change=${this.onChange}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus}\n            @select=${this.onSelect}\n            @invalid=${this.handleInvalid}></textarea>\n\n          ${this._renderFooter()}\n        </div>\n      `,\n    )\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=${ifDefined(this.effectiveSize) as CommonSize}\n        class=${clsx('textarea__feedback', {\n          'textarea__feedback--sm': this.effectiveSize === 'sm',\n        })}\n        id=${ifDefined(this.feedbackId)}\n        exportparts=\"base:feedback-base, text:feedback-text, icon:feedback-icon\"\n        .subtle=${this.subtle}>\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n}\n"],"names":["_DapDSTextarea","_a","GenericFormElement","uniqueSuffix","event","__async","__superGet","name","oldValue","newValue","e","target","selection","ids","counter","nothing","html","clsx","ifDefined","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTextarea"],"mappings":"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"}

package/dist/components/textarea/textarea.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}}: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:inline-block;position:relative;width:auto;--dds-textarea-min-rows: 2;--dds-textarea-spacing: calc(var(--dds-spacing-300) * 2);--dds-textarea-gap: var(--dds-spacing-200);--dds-textarea-margin-top: var(--dds-spacing-200);--dds-textarea-padding: var(--dds-spacing-200) var(--dds-spacing-300);--dds-textarea-border-width: var(--dds-border-width-base);--dds-textarea-border-color: var(--dds-border-neutral-base);--dds-textarea-background: var(--dds-fields-background-default);--dds-textarea-color: var(--dds-text-neutral-base);--dds-textarea-border-radius: var(--dds-radius-base);--dds-textarea-disabled-bg: var(--dds-fields-background-disabled);--dds-textarea-disabled-color: var(--dds-text-neutral-disabled);--dds-textarea-readonly-bg: var(--dds-fields-background-read-only);--dds-textarea-readonly-color: var(--dds-text-neutral-subtle);--dds-textarea-error-border: var(--dds-border-negative-base);--dds-textarea-success-border: var(--dds-border-positive-base)}.textarea{display:flex;flex-direction:column;gap:var(--dds-textarea-gap);margin-top:var(--dds-textarea-margin-top)}.textarea__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%;padding:var(--dds-textarea-padding);border:var(--dds-textarea-border-width) solid var(--dds-textarea-border-color);border-radius:var(--dds-textarea-border-radius);background:var(--dds-textarea-background);color:var(--dds-textarea-color);line-height:var(--dds-font-line-height-xlarge)}.textarea__control:focus-visible{z-index:10;outline-style:solid}.textarea__footer{display:flex;align-items:center;max-width:100%}.textarea__footer :first-child{flex:1}.textarea__footer :last-child{align-self:baseline;width:auto;text-align:right}.textarea dap-ds-feedback::part(base){margin-top:0}.textarea__feedback--sm{margin-top:var(--dds-spacing-50)}.textarea__counter{margin-left:var(--dds-spacing-200)}.textarea__counter--error::part(base){color:var(--dds-text-negative-subtle)}.textarea--xs{font-size:var(--dds-font-sm)}.textarea--xs .textarea__control{min-height:calc(var(--dds-font-sm) * var(--dds-textarea-min-rows) * var(--dds-font-line-height-xlarge) + var(--dds-textarea-spacing))}.textarea--sm{font-size:var(--dds-font-base)}.textarea--sm .textarea__control{min-height:calc(var(--dds-font-base) * var(--dds-textarea-min-rows) * var(--dds-font-line-height-xlarge) + var(--dds-textarea-spacing))}.textarea--lg{font-size:var(--dds-font-lg)}.textarea--lg .textarea__control{min-height:calc(var(--dds-font-lg) * var(--dds-textarea-min-rows) * var(--dds-font-line-height-xlarge) + var(--dds-textarea-spacing))}.textarea--disabled .textarea__control{border-color:var(--dds-textarea-disabled-bg);background-color:var(--dds-textarea-disabled-bg);color:var(--dds-textarea-disabled-color);cursor:not-allowed}.textarea--readonly .textarea__control{border-color:var(--dds-textarea-readonly-bg);background-color:var(--dds-textarea-readonly-bg);color:var(--dds-textarea-readonly-color)}.textarea--error .textarea__control{border-color:var(--dds-textarea-error-border)}.textarea--error .textarea__counter{color:var(--dds-text-negative-subtle)}.textarea--success .textarea__control{border-color:var(--dds-textarea-success-border)}.textarea--success .textarea__counter{color:var(--dds-text-positive-subtle)}';
+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}}: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{--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)}:host{display:inline-block;position:relative;width:auto;--dds-textarea-min-rows: 2;--dds-textarea-spacing: calc(var(--dds-spacing-300) * 2);--dds-textarea-gap: var(--dds-spacing-200);--dds-textarea-margin-top: var(--dds-spacing-200);--dds-textarea-padding: var(--dds-spacing-200) var(--dds-spacing-300);--dds-textarea-border-width: var(--dds-border-width-base);--dds-textarea-border-color: var(--dds-border-neutral-base);--dds-textarea-background: var(--dds-fields-background-default);--dds-textarea-color: var(--dds-text-neutral-base);--dds-textarea-border-radius: var(--dds-radius-base);--dds-textarea-disabled-bg: var(--dds-fields-background-disabled);--dds-textarea-disabled-color: var(--dds-text-neutral-disabled);--dds-textarea-readonly-bg: var(--dds-fields-background-read-only);--dds-textarea-readonly-color: var(--dds-text-neutral-subtle);--dds-textarea-error-border: var(--dds-border-negative-base);--dds-textarea-success-border: var(--dds-border-positive-base)}.textarea{display:flex;flex-direction:column;gap:var(--dds-textarea-gap);margin-top:var(--dds-textarea-margin-top)}.textarea__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%;padding:var(--dds-textarea-padding);border:var(--dds-textarea-border-width) solid var(--dds-textarea-border-color);border-radius:var(--dds-textarea-border-radius);background:var(--dds-textarea-background);color:var(--dds-textarea-color);line-height:var(--dds-font-line-height-xlarge)}.textarea__control:focus-visible{z-index:10;outline-style:solid}.textarea__footer{display:flex;align-items:center;max-width:100%}.textarea__footer :first-child{flex:1}.textarea__footer :last-child{align-self:baseline;width:auto;text-align:right}.textarea dap-ds-feedback::part(base){margin-top:0}.textarea__feedback--sm{margin-top:var(--dds-spacing-50)}.textarea__counter{margin-left:var(--dds-spacing-200)}.textarea__counter--error::part(base){color:var(--dds-text-negative-subtle)}.textarea--xs{font-size:var(--dds-font-sm)}.textarea--xs .textarea__control{min-height:calc(var(--dds-font-sm) * var(--dds-textarea-min-rows) * var(--dds-font-line-height-xlarge) + var(--dds-textarea-spacing))}.textarea--sm{font-size:var(--dds-font-base)}.textarea--sm .textarea__control{min-height:calc(var(--dds-font-base) * var(--dds-textarea-min-rows) * var(--dds-font-line-height-xlarge) + var(--dds-textarea-spacing))}.textarea--lg{font-size:var(--dds-font-lg)}.textarea--lg .textarea__control{min-height:calc(var(--dds-font-lg) * var(--dds-textarea-min-rows) * var(--dds-font-line-height-xlarge) + var(--dds-textarea-spacing))}.textarea--disabled .textarea__control{border-color:var(--dds-textarea-disabled-bg);background-color:var(--dds-textarea-disabled-bg);color:var(--dds-textarea-disabled-color);cursor:not-allowed}.textarea--readonly .textarea__control{border-color:var(--dds-textarea-readonly-bg);background-color:var(--dds-textarea-readonly-bg);color:var(--dds-textarea-readonly-color)}.textarea--error .textarea__control{border-color:var(--dds-textarea-error-border)}.textarea--error .textarea__counter{color:var(--dds-text-negative-subtle)}.textarea--success .textarea__control{border-color:var(--dds-textarea-success-border)}.textarea--success .textarea__counter{color:var(--dds-text-positive-subtle)}';
 export {
   t as default
 };

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

@@ -1,14 +1,11 @@
 import { clsx as s } 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 { html as e } from "../../node_modules/lit-html/static.js";
-import { DdsElement as r } from "../../internal/dds-hu-element.js";
-import m from "./timeline-item.scss.js";
-import { unsafeCSS as o } from "../../node_modules/@lit/reactive-element/css-tag.js";
-const t = class t extends r {
+import { unsafeCSS as e } from "lit";
+import { html as r } from "lit/static-html.js";
+import { DdsElement as m } from "../../internal/dds-hu-element.js";
+import l from "./timeline-item.scss.js";
+const t = class t extends m {
   render() {
-    return e`
+    return r`
       <div
         part="base"
         class=${s("timeline-item", {
@@ -24,7 +21,7 @@ const t = class t extends r {
     `;
   }
 };
-t.tagName = "dap-ds-timeline-item", t.styles = o(m);
+t.tagName = "dap-ds-timeline-item", t.styles = e(l);
 let i = t;
 export {
   i as default