@scania/tegel 1.36.0-beta-tag-component.0 → 1.36.0-tag-component-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/cjs/index-ca8040ad.js +4 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/tds-tag.cjs.entry.js +30 -0
  4. package/dist/cjs/tds-text-field.cjs.entry.js +5 -5
  5. package/dist/cjs/tds-textarea.cjs.entry.js +3 -3
  6. package/dist/cjs/tds-toast.cjs.entry.js +3 -3
  7. package/dist/cjs/tds-toggle.cjs.entry.js +2 -2
  8. package/dist/cjs/tds-tooltip.cjs.entry.js +2 -2
  9. package/dist/cjs/tegel.cjs.js +1 -1
  10. package/dist/collection/collection-manifest.json +1 -0
  11. package/dist/collection/components/tag/tag.css +99 -0
  12. package/dist/collection/components/tag/tag.js +91 -0
  13. package/dist/collection/components/text-field/text-field.js +5 -5
  14. package/dist/collection/components/textarea/textarea.js +3 -3
  15. package/dist/collection/components/toast/toast.js +3 -3
  16. package/dist/collection/components/toggle/toggle.js +2 -2
  17. package/dist/collection/components/tooltip/tooltip.js +2 -2
  18. package/dist/components/{p-9cee9d7f.js → p-3edd7602.js} +2 -2
  19. package/dist/components/tds-tag.d.ts +11 -0
  20. package/dist/components/tds-tag.js +48 -0
  21. package/dist/components/tds-text-field.js +6 -6
  22. package/dist/components/tds-textarea.js +4 -4
  23. package/dist/components/tds-toast.js +3 -3
  24. package/dist/components/tds-toggle.js +2 -2
  25. package/dist/components/tds-tooltip.js +1 -1
  26. package/dist/esm/index-51d04e39.js +4 -0
  27. package/dist/esm/loader.js +1 -1
  28. package/dist/esm/tds-tag.entry.js +26 -0
  29. package/dist/esm/tds-text-field.entry.js +5 -5
  30. package/dist/esm/tds-textarea.entry.js +3 -3
  31. package/dist/esm/tds-toast.entry.js +3 -3
  32. package/dist/esm/tds-toggle.entry.js +2 -2
  33. package/dist/esm/tds-tooltip.entry.js +2 -2
  34. package/dist/esm/tegel.js +1 -1
  35. package/dist/tegel/{p-4274d329.entry.js → p-0803e5c6.entry.js} +1 -1
  36. package/dist/tegel/{p-b8a33966.entry.js → p-3beb34ff.entry.js} +1 -1
  37. package/dist/tegel/{p-fe8a4544.entry.js → p-88b90df0.entry.js} +1 -1
  38. package/dist/tegel/{p-cf1413f0.entry.js → p-9e75f2ec.entry.js} +1 -1
  39. package/dist/tegel/{p-67b4b2cf.entry.js → p-c7841820.entry.js} +1 -1
  40. package/dist/tegel/p-e122a85d.entry.js +1 -0
  41. package/dist/tegel/tegel.css +1 -1
  42. package/dist/tegel/tegel.esm.js +1 -1
  43. package/dist/types/components/tag/tag.d.ts +14 -0
  44. package/dist/types/components.d.ts +37 -0
  45. package/package.json +5 -1
package/dist/collection/components/tag/tag.css ADDED
@@ -0,0 +1,99 @@
1
+ :root,
2
+ .tds-mode-light {
3
+ --tds-tag-success-background: var(--tds-green-100);
4
+ --tds-tag-success-color: var(--tds-green-700);
5
+ --tds-tag-warning-background: var(--tds-yellow-50);
6
+ --tds-tag-warning-color: var(--tds-yellow-700);
7
+ --tds-tag-new-background: var(--tds-blue-100);
8
+ --tds-tag-new-color: var(--tds-blue-700);
9
+ --tds-tag-neutral-background: var(--tds-grey-150);
10
+ --tds-tag-neutral-color: var(--tds-grey-700);
11
+ --tds-tag-information-background: var(--tds-blue-200);
12
+ --tds-tag-information-color: var(--tds-blue-800);
13
+ --tds-tag-error-background: var(--tds-red-100);
14
+ --tds-tag-error-color: var(--tds-red-700);
15
+ }
16
+
17
+ .tds-mode-dark {
18
+ --tds-tag-success-background: var(--tds-green-200);
19
+ --tds-tag-success-color: var(--tds-green-800);
20
+ --tds-tag-warning-background: var(--tds-yellow-100);
21
+ --tds-tag-warning-color: var(--tds-yellow-800);
22
+ --tds-tag-new-background: var(--tds-blue-100);
23
+ --tds-tag-new-color: var(--tds-blue-800);
24
+ --tds-tag-neutral-background: var(--tds-grey-200);
25
+ --tds-tag-neutral-color: var(--tds-grey-800);
26
+ --tds-tag-information-background: var(--tds-blue-200);
27
+ --tds-tag-information-color: var(--tds-blue-800);
28
+ --tds-tag-error-background: var(--tds-red-200);
29
+ --tds-tag-error-color: var(--tds-red-800);
30
+ }
31
+
32
+ :host {
33
+ box-sizing: border-box;
34
+ display: inline-block;
35
+ }
36
+ :host * {
37
+ box-sizing: border-box;
38
+ }
39
+
40
+ :host {
41
+ display: inline-flex;
42
+ align-items: center;
43
+ border-radius: 4px;
44
+ background-color: var(--tds-tag-neutral-background);
45
+ color: var(--tds-tag-neutral-color);
46
+ }
47
+ :host.tds-tag-large {
48
+ padding: 4px;
49
+ gap: 4px;
50
+ }
51
+ :host.tds-tag-small {
52
+ border-radius: 2px;
53
+ gap: 4px;
54
+ padding: 2px 4px;
55
+ }
56
+ :host.tds-tag-success {
57
+ background-color: var(--tds-tag-success-background);
58
+ color: var(--tds-tag-success-color);
59
+ }
60
+ :host.tds-tag-warning {
61
+ background-color: var(--tds-tag-warning-background);
62
+ color: var(--tds-tag-warning-color);
63
+ }
64
+ :host.tds-tag-new {
65
+ background-color: var(--tds-tag-new-background);
66
+ color: var(--tds-tag-new-color);
67
+ }
68
+ :host.tds-tag-neutral {
69
+ background-color: var(--tds-tag-neutral-background);
70
+ color: var(--tds-tag-neutral-color);
71
+ }
72
+ :host.tds-tag-information {
73
+ background-color: var(--tds-tag-information-background);
74
+ color: var(--tds-tag-information-color);
75
+ }
76
+ :host.tds-tag-error {
77
+ background-color: var(--tds-tag-error-background);
78
+ color: var(--tds-tag-error-color);
79
+ }
80
+ :host.tds-mode-dark {
81
+ color: var(--tds-grey-100);
82
+ }
83
+
84
+ .tds-tag-content {
85
+ display: flex;
86
+ align-items: center;
87
+ gap: inherit;
88
+ }
89
+
90
+ .tds-tag-title {
91
+ font-weight: 500;
92
+ }
93
+
94
+ ::slotted(tds-icon) {
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: center;
98
+ flex-shrink: 0;
99
+ }
package/dist/collection/components/tag/tag.js ADDED
@@ -0,0 +1,91 @@
1
+ import { h, Host } from "@stencil/core";
2
+ import hasSlot from "../../utils/hasSlot";
3
+ /**
4
+ * @slot icon - Slot used to display an Icon in the Tag.
5
+ */
6
+ export class TdsTag {
7
+ constructor() {
8
+ this.text = '';
9
+ this.size = 'Large';
10
+ this.variant = 'Neutral';
11
+ }
12
+ render() {
13
+ const hasIconSlot = hasSlot('icon', this.host);
14
+ return (h(Host, { key: '6059f9ecefbd3ce536037804429454ae670acd44', class: {
15
+ 'tds-tag': true,
16
+ [`tds-tag-${this.size.toLowerCase()}`]: true,
17
+ [`tds-tag-${this.variant.toLowerCase()}`]: true,
18
+ } }, h("div", { key: '8f871751024d626980c581100589e3df4de415a8', class: "tds-tag-content" }, hasIconSlot && h("slot", { key: '4d392f960e9a8687f7004d8ac1efec51b2beb8d6', name: "icon" }), h("span", { key: 'bec8d6e661e655be333966c522e8179a4b05ca74', class: "tds-tag-title" }, this.text))));
19
+ }
20
+ static get is() { return "tds-tag"; }
21
+ static get encapsulation() { return "scoped"; }
22
+ static get originalStyleUrls() {
23
+ return {
24
+ "$": ["tag.scss"]
25
+ };
26
+ }
27
+ static get styleUrls() {
28
+ return {
29
+ "$": ["tag.css"]
30
+ };
31
+ }
32
+ static get properties() {
33
+ return {
34
+ "text": {
35
+ "type": "string",
36
+ "mutable": false,
37
+ "complexType": {
38
+ "original": "string",
39
+ "resolved": "string",
40
+ "references": {}
41
+ },
42
+ "required": false,
43
+ "optional": false,
44
+ "docs": {
45
+ "tags": [],
46
+ "text": "The title text to display in the tag"
47
+ },
48
+ "attribute": "text",
49
+ "reflect": false,
50
+ "defaultValue": "''"
51
+ },
52
+ "size": {
53
+ "type": "string",
54
+ "mutable": false,
55
+ "complexType": {
56
+ "original": "'Large' | 'Small'",
57
+ "resolved": "\"Large\" | \"Small\"",
58
+ "references": {}
59
+ },
60
+ "required": false,
61
+ "optional": false,
62
+ "docs": {
63
+ "tags": [],
64
+ "text": "Sets the size of the tag"
65
+ },
66
+ "attribute": "size",
67
+ "reflect": false,
68
+ "defaultValue": "'Large'"
69
+ },
70
+ "variant": {
71
+ "type": "string",
72
+ "mutable": false,
73
+ "complexType": {
74
+ "original": "'Success' | 'Warning' | 'New' | 'Neutral' | 'Information' | 'Error'",
75
+ "resolved": "\"Error\" | \"Information\" | \"Neutral\" | \"New\" | \"Success\" | \"Warning\"",
76
+ "references": {}
77
+ },
78
+ "required": false,
79
+ "optional": false,
80
+ "docs": {
81
+ "tags": [],
82
+ "text": "Sets the variant mode of the tag"
83
+ },
84
+ "attribute": "variant",
85
+ "reflect": false,
86
+ "defaultValue": "'Neutral'"
87
+ }
88
+ };
89
+ }
90
+ static get elementRef() { return "host"; }
91
+ }
package/dist/collection/components/text-field/text-field.js CHANGED
@@ -76,7 +76,7 @@ export class TdsTextField {
76
76
  var _a;
77
77
  const usesPrefixSlot = hasSlot('prefix', this.host);
78
78
  const usesSuffixSlot = hasSlot('suffix', this.host);
79
- return (h("div", { key: '985928ef59662762648f2d95d5decad2e3188e05', class: {
79
+ return (h("div", { key: 'd89807d294eef78042812ab972347b02bf09ca3b', class: {
80
80
  'form-text-field': true,
81
81
  'form-text-field-nomin': this.noMinWidth,
82
82
  'text-field-focus': this.focusInput && !this.disabled,
@@ -94,12 +94,12 @@ export class TdsTextField {
94
94
  'form-text-field-sm': this.size === 'sm',
95
95
  'form-text-field-error': this.state === 'error',
96
96
  'form-text-field-success': this.state === 'success',
97
- } }, this.labelPosition === 'outside' && (h("div", { key: '7a409b43a1fee8b7b078abc5f96c925ab97bcedc', class: "text-field-label-outside" }, h("label", { key: 'c6bdaab4e6f81a95aa71a4e23a1f02fb1bcef9ec', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '945f7901a92850da22ab84c5fe77e2d97738aaa9', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d6cb2facb8ff90b7393409b769c2b5e5a860421', class: {
97
+ } }, this.labelPosition === 'outside' && (h("div", { key: 'e47d71e8415802cef02fd832d67ae3fabc941f61', class: "text-field-label-outside" }, h("label", { key: 'a840356fe2a5758bb8d219a42121d4896fb460e9', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '937a2edc262e2d2f7523b18d562e847f4c6a68cf', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'ffec573debf07ce940c56e0c5b53b37ffb3e4a7b', class: {
98
98
  'text-field-slot-wrap-prefix': true,
99
99
  'text-field-error': this.state === 'error',
100
100
  'text-field-success': this.state === 'success',
101
101
  'text-field-default': this.state === 'default',
102
- } }, h("slot", { key: 'b0f0e3ebb96dbd2af021150b68690af566db44b9', name: "prefix" }))), h("div", { key: 'c5b172ee6c561256ab930490113f406b88eae67c', class: "text-field-input-container" }, h("input", { key: '2e0a9070b41bde39a2a0f14b132f474692eb0e04', ref: (inputEl) => {
102
+ } }, h("slot", { key: '0024d886c26708f326f9750fce178c0d916e1fcd', name: "prefix" }))), h("div", { key: '6612a79dca8842c4fa50683a28d33d4a813a6557', class: "text-field-input-container" }, h("input", { key: 'f3a3a2476289e3b87409dbf5bb67c8983c5cdcd3', ref: (inputEl) => {
103
103
  this.textInput = inputEl;
104
104
  }, class: {
105
105
  'text-field-input': true,
@@ -114,13 +114,13 @@ export class TdsTextField {
114
114
  if (!this.readOnly) {
115
115
  this.handleBlur(event);
116
116
  }
117
- }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ffb3bbb84ab718c2259134f32ee6dd0eb348cb9f', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '166da0147311d28064b7e03bbefd1a0ee18db5ca', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '4bb21d12957bf65d525931c88a5a89fff49d4eaf', class: {
117
+ }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '85148d3ad53ac2261f39fab3951e34d6031fe491', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '237b915b922532e3e56e4164f6ac6478addfd98a', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'b6ad2a2bb9e1bed1c6483f917b6821e348498509', class: {
118
118
  'text-field-slot-wrap-suffix': true,
119
119
  'text-field-error': this.state === 'error',
120
120
  'text-field-success': this.state === 'success',
121
121
  'text-field-default': this.state === 'default',
122
122
  'tds-u-display-none': this.readOnly,
123
- } }, h("slot", { key: '7e67dbc8f4f67cb0c7d194e01e5787ae18ffab13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'd213ec000d837cbd4b711468ef3cfa826cc65ac2', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'b89530a2422cdf782e92a124e7c353b4432b9719', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'fa2a35bc8514d802152a147d9c17c9a8dbe952c8', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '902924863a2e58f820647b89f289c4e649dd63a5', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '6bc81db447e040154a7d35acddbe732d8fbc5134', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '990205934bb31c179478c68cca7a991056678838', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'cfc4b7b95164832fcfa4c744a640356187ac41c1', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'bbcaee6e47a36ccce4e05ba672d92211f2612fd1', class: {
123
+ } }, h("slot", { key: '3eafecee94e39288fc7c2e102067c85c2627d304', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '0a87c83bc31ec47877743d37e390cf29c2555f6c', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '81e830a4bca0448f750ba6a40d0010b998ca7a05', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '16cf9d03aabc841336893bc4bfbc3cc8e430b30c', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'c8e2dcb1f2e8b5eaa11df4a055ee9569710b9f87', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'c7f347e44f3c3529e4f52958fc0b51403669a473', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'a208201df33fad685bd7548f2d4653e4b560e8a8', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '0de28c14b12992c9627c6d0b32158dc98e4e4716', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '02c33ab122b01d3e9ebcd891ce8000f0654bbcb4', class: {
124
124
  'text-field-textcounter-divider': true,
125
125
  'text-field-textcounter-disabled': this.disabled,
126
126
  } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
package/dist/collection/components/textarea/textarea.js CHANGED
@@ -65,7 +65,7 @@ export class TdsTextarea {
65
65
  }
66
66
  render() {
67
67
  var _a;
68
- return (h("div", { key: '06fd8ce87614410858a7d9253fac73a6f1cf20ec', class: {
68
+ return (h("div", { key: '4e4048bca7482372c33e4bc2e0790f848c7bef37', class: {
69
69
  'textarea-container': true,
70
70
  'textarea-label-inside': this.labelPosition === 'inside',
71
71
  'textarea-focus': this.focusInput,
@@ -75,7 +75,7 @@ export class TdsTextarea {
75
75
  'textarea-data': this.value !== '',
76
76
  [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
77
77
  'no-min-width': this.noMinWidth,
78
- } }, this.labelPosition !== 'no-label' && (h("label", { key: '1a02a333e4164b39fd223c68cc3d27d7c53487fb', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '6d45e8c8427770accc82c7ad9e10fbed016437a4', class: "textarea-wrapper" }, h("textarea", { key: '614c30a5b5077060b1568744cf0800580e746819', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
78
+ } }, this.labelPosition !== 'no-label' && (h("label", { key: 'bc9ed66490b0826b6010b7b3f15e897a1c56fab2', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'c44d68a2f207c55924d381d5feaa5d45b8d1693a', class: "textarea-wrapper" }, h("textarea", { key: 'fb810672ae5625d88ddef2cb619ebf82a89bd1b8', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
79
79
  this.textEl = inputEl;
80
80
  }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
81
81
  if (!this.readOnly) {
@@ -85,7 +85,7 @@ export class TdsTextarea {
85
85
  if (!this.readOnly) {
86
86
  this.handleBlur(event);
87
87
  }
88
- }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'e0574ae32d1ce9c69156dc2aa52d8d1881b6ff9b', class: "textarea-resizer-icon" }, h("svg", { key: '23e79729cc099b7e4f07192c05aa4a304b91788a', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '54891720aa51af768f467be5bd8a72fc7adc8d47', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '72e3586f1be99460ced66d640392b4596e5b8c2f', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '9f84391a75b5ae428c71d3b713a9d281c4475a09', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '55e195bb50d8b707ec3a403c8c62cad74d738919', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'ff2043a19ebb129178ecfd36126b0d23eacde4d1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '84b0991ef5ddab7f960ba75db22c65762b0b5d20', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '963b3a3bdafeabec6ad2bd3663c07ed0d4a5b3fd', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '8496a0ae44721cdcd9443e09ff6a709b6d3c704f', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
88
+ }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '2c5e563c67c1a9653fa8f4cac4d7bb6fad597798', class: "textarea-resizer-icon" }, h("svg", { key: '05aa8ee404423cd45a413f8c515ebbd5a0369614', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '40ddf0c7ec5e8252c03eebaa831338d6a7636eed', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '33c3089fdc770b7c1a7d385278e6e2e0169185f8', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'f949026759c34a02ef86003bc2cd5caf763cbe23', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '4095c8b15b6435dfd9e055410489f18bca750eba', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'b1a5609ab86bd12636e6ef9e809f1a6b920d3f13', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '4eeeac4f43dd0d5f07e01067792e56872fcb6a2a', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '3308422db35a916e93737c59f985fe3b4d8cdc3e', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'f7e00b0dcf13980aebbee3fa4041ff8708df8cc5', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
89
89
  }
90
90
  static get is() { return "tds-textarea"; }
91
91
  static get encapsulation() { return "scoped"; }
package/dist/collection/components/toast/toast.js CHANGED
@@ -65,12 +65,12 @@ export class TdsToast {
65
65
  const usesHeaderSlot = hasSlot('header', this.host);
66
66
  const usesSubheaderSlot = hasSlot('subheader', this.host);
67
67
  const usesActionsSlot = hasSlot('actions', this.host);
68
- return (h(Host, { key: '433c25165487688ff40c78a0455d30cedd08c76f', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
68
+ return (h(Host, { key: 'f33d6a47e353526288cb2cc54c40c2698381cbb2', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
69
69
  hide: this.hidden,
70
70
  show: !this.hidden,
71
- } }, h("div", { key: '2734573a413d9cdf1a329675fe0e0db374243cbf', class: `
71
+ } }, h("div", { key: '16b1cb526bde852d747dfe584aafc37179b36c72', class: `
72
72
  wrapper
73
- ${this.variant}` }, h("tds-icon", { key: '88d4ab6fd55d64c93ad3089c695d0fa4075208a6', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '02de15f884420946530d2e04c330987f73c9ca44', class: `content` }, h("div", { key: '4eb8c6a13a7bb53313a18b47bfa8e2ab1211cdbc', class: "header-subheader" }, this.header && h("div", { key: '1b707e29cdd68a5cc73a2b694b8b93698cbac661', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'ffe2b463f8fc6e4ca3b563d7a4ae55968cb4a478', name: "header" }), this.subheader && h("div", { key: '8164b591452e4a6f025f752951c678a15443fff9', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '2bca8428e8eb128cf8c0f62b31a0da54ef555df3', name: "subheader" })), usesActionsSlot && (h("div", { key: 'de84bc19257b09127b861b357240509a7346f2e7', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'b85a46c5dc97dc7d3b95feb816145731887711fb', name: "actions" })))), this.closable && (h("button", { key: '69adb03d815ece9e50cf436957927c5dcd4d3ab8', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '9b4f062079caa32c5900202aaf1c2a7a5ef8e18c', name: "cross", size: "20px", svgTitle: "cross" }))))));
73
+ ${this.variant}` }, h("tds-icon", { key: 'c5695d9563d0fa24a1d660f47a756929642716c9', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '4b1466c8269089e214cfed8050377cdf17f90378', class: `content` }, h("div", { key: '9e74a8209fde4dc8fbb8463c0e25497c61044bab', class: "header-subheader" }, this.header && h("div", { key: '1d79b8d5576356b782f5e43512e1cdbdc7069f39', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'df3ac4d75cd808f9f3d7d7707e27f1e710c1b184', name: "header" }), this.subheader && h("div", { key: 'e13f983261bd6e0ca9ee90f3ad73454c4caeb57f', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '5166e94e2b48331c1d7be57672f53cd09f3fb618', name: "subheader" })), usesActionsSlot && (h("div", { key: '8a7421250f3d1cc25f04ce8896abb728ae4f6fd4', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'd3bb660be4e75abc70140c208d852ec433813b8b', name: "actions" })))), this.closable && (h("button", { key: '19a88d43fd6e170b9e8bcae5356339045ca5295b', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '89b3346a798ef07ff803cdaf20ecee1529f7babb', name: "cross", size: "20px", svgTitle: "cross" }))))));
74
74
  }
75
75
  static get is() { return "tds-toast"; }
76
76
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/toggle/toggle.js CHANGED
@@ -44,10 +44,10 @@ export class TdsToggle {
44
44
  }
45
45
  }
46
46
  render() {
47
- return (h("div", { key: '212a541d06f0cc534855ac872cfb386dc1b2d4ff', class: "tds-toggle" }, this.headline && (h("div", { key: '076c51461d4898d2bfa3c86fadd94ac2ad63c7a8', class: {
47
+ return (h("div", { key: 'd98ff698099b1222d41a66b4e35c9ab0242a2cdf', class: "tds-toggle" }, this.headline && (h("div", { key: '994abebdadee463f9a479682bc80643e24473e68', class: {
48
48
  'toggle-headline': true,
49
49
  'disabled': this.disabled,
50
- } }, this.headline)), h("input", { key: 'e0e849d7b05b77612fc949894cac8befa5b89370', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '4d1dcc70f896695657ca7ca68fd832ee4d13417a', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '800ea4ee2760efee8cdfe1ac3aee4b3a6f95f199', name: "label" })))));
50
+ } }, this.headline)), h("input", { key: 'c49a01a12d19808aeb85f9d3a1372cecdafdd345', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '07e08f38a0ed29958dc0625f87b1b427ba91c40f', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '3eade689bc89606faf163d312431cf41b271d6b3', name: "label" })))));
51
51
  }
52
52
  static get is() { return "tds-toggle"; }
53
53
  static get encapsulation() { return "scoped"; }
package/dist/collection/components/tooltip/tooltip.js CHANGED
@@ -58,7 +58,7 @@ export class TdsTooltip {
58
58
  }
59
59
  render() {
60
60
  var _a;
61
- return (h(Host, { key: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'e4b263f4414f6ce9d2e557fc5431040d718aff3c' }, this.inheritedAttributes, { class: {
61
+ return (h(Host, { key: 'c518845d34957658ed27d9d43ffca884e5f073f9', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '4aadabafa37f45f19c212c52e303e21294bffe3e' }, this.inheritedAttributes, { class: {
62
62
  'tds-tooltip': true,
63
63
  [`tds-tooltip-${this.border}`]: true,
64
64
  [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -71,7 +71,7 @@ export class TdsTooltip {
71
71
  // @ts-ignore
72
72
  onInternalTdsClose: () => {
73
73
  this.show = false;
74
- }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
74
+ }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '71da01903c44079c0fec8cec1ff882f0782c4555' }))));
75
75
  }
76
76
  static get is() { return "tds-tooltip"; }
77
77
  static get encapsulation() { return "scoped"; }
package/dist/components/{p-9cee9d7f.js → p-3edd7602.js} RENAMED
@@ -62,7 +62,7 @@ const TdsTooltip = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H {
62
62
  }
63
63
  render() {
64
64
  var _a;
65
- return (h(Host, { key: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'e4b263f4414f6ce9d2e557fc5431040d718aff3c' }, this.inheritedAttributes, { class: {
65
+ return (h(Host, { key: 'c518845d34957658ed27d9d43ffca884e5f073f9', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '4aadabafa37f45f19c212c52e303e21294bffe3e' }, this.inheritedAttributes, { class: {
66
66
  'tds-tooltip': true,
67
67
  [`tds-tooltip-${this.border}`]: true,
68
68
  [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -75,7 +75,7 @@ const TdsTooltip = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H {
75
75
  // @ts-ignore
76
76
  onInternalTdsClose: () => {
77
77
  this.show = false;
78
- }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
78
+ }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '71da01903c44079c0fec8cec1ff882f0782c4555' }))));
79
79
  }
80
80
  get host() { return this; }
81
81
  static get style() { return TdsTooltipStyle0; }
package/dist/components/tds-tag.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { Components, JSX } from "../types/components";
2
+
3
+ interface TdsTag extends Components.TdsTag, HTMLElement {}
4
+ export const TdsTag: {
5
+ prototype: TdsTag;
6
+ new (): TdsTag;
7
+ };
8
+ /**
9
+ * Used to define this component and all nested components recursively.
10
+ */
11
+ export const defineCustomElement: () => void;
package/dist/components/tds-tag.js ADDED
@@ -0,0 +1,48 @@
1
+ import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
2
+ import { h as hasSlot } from './p-ae110fc2.js';
3
+
4
+ const tagCss = ".sc-tds-tag:root,.tds-mode-light.sc-tds-tag{--tds-tag-success-background:var(--tds-green-100);--tds-tag-success-color:var(--tds-green-700);--tds-tag-warning-background:var(--tds-yellow-50);--tds-tag-warning-color:var(--tds-yellow-700);--tds-tag-new-background:var(--tds-blue-100);--tds-tag-new-color:var(--tds-blue-700);--tds-tag-neutral-background:var(--tds-grey-150);--tds-tag-neutral-color:var(--tds-grey-700);--tds-tag-information-background:var(--tds-blue-200);--tds-tag-information-color:var(--tds-blue-800);--tds-tag-error-background:var(--tds-red-100);--tds-tag-error-color:var(--tds-red-700)}.tds-mode-dark.sc-tds-tag{--tds-tag-success-background:var(--tds-green-200);--tds-tag-success-color:var(--tds-green-800);--tds-tag-warning-background:var(--tds-yellow-100);--tds-tag-warning-color:var(--tds-yellow-800);--tds-tag-new-background:var(--tds-blue-100);--tds-tag-new-color:var(--tds-blue-800);--tds-tag-neutral-background:var(--tds-grey-200);--tds-tag-neutral-color:var(--tds-grey-800);--tds-tag-information-background:var(--tds-blue-200);--tds-tag-information-color:var(--tds-blue-800);--tds-tag-error-background:var(--tds-red-200);--tds-tag-error-color:var(--tds-red-800)}.sc-tds-tag-h{box-sizing:border-box;display:inline-block}.sc-tds-tag-h *.sc-tds-tag{box-sizing:border-box}.sc-tds-tag-h{display:inline-flex;align-items:center;border-radius:4px;background-color:var(--tds-tag-neutral-background);color:var(--tds-tag-neutral-color)}.tds-tag-large.sc-tds-tag-h{padding:4px;gap:4px}.tds-tag-small.sc-tds-tag-h{border-radius:2px;gap:4px;padding:2px 4px}.tds-tag-success.sc-tds-tag-h{background-color:var(--tds-tag-success-background);color:var(--tds-tag-success-color)}.tds-tag-warning.sc-tds-tag-h{background-color:var(--tds-tag-warning-background);color:var(--tds-tag-warning-color)}.tds-tag-new.sc-tds-tag-h{background-color:var(--tds-tag-new-background);color:var(--tds-tag-new-color)}.tds-tag-neutral.sc-tds-tag-h{background-color:var(--tds-tag-neutral-background);color:var(--tds-tag-neutral-color)}.tds-tag-information.sc-tds-tag-h{background-color:var(--tds-tag-information-background);color:var(--tds-tag-information-color)}.tds-tag-error.sc-tds-tag-h{background-color:var(--tds-tag-error-background);color:var(--tds-tag-error-color)}.tds-mode-dark.sc-tds-tag-h{color:var(--tds-grey-100)}.tds-tag-content.sc-tds-tag{display:flex;align-items:center;gap:inherit}.tds-tag-title.sc-tds-tag{font-weight:500}.sc-tds-tag-s>tds-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}";
5
+ const TdsTagStyle0 = tagCss;
6
+
7
+ const TdsTag$1 = /*@__PURE__*/ proxyCustomElement(class TdsTag extends H {
8
+ constructor() {
9
+ super();
10
+ this.__registerHost();
11
+ this.text = '';
12
+ this.size = 'Large';
13
+ this.variant = 'Neutral';
14
+ }
15
+ render() {
16
+ const hasIconSlot = hasSlot('icon', this.host);
17
+ return (h(Host, { key: '6059f9ecefbd3ce536037804429454ae670acd44', class: {
18
+ 'tds-tag': true,
19
+ [`tds-tag-${this.size.toLowerCase()}`]: true,
20
+ [`tds-tag-${this.variant.toLowerCase()}`]: true,
21
+ } }, h("div", { key: '8f871751024d626980c581100589e3df4de415a8', class: "tds-tag-content" }, hasIconSlot && h("slot", { key: '4d392f960e9a8687f7004d8ac1efec51b2beb8d6', name: "icon" }), h("span", { key: 'bec8d6e661e655be333966c522e8179a4b05ca74', class: "tds-tag-title" }, this.text))));
22
+ }
23
+ get host() { return this; }
24
+ static get style() { return TdsTagStyle0; }
25
+ }, [6, "tds-tag", {
26
+ "text": [1],
27
+ "size": [1],
28
+ "variant": [1]
29
+ }]);
30
+ function defineCustomElement$1() {
31
+ if (typeof customElements === "undefined") {
32
+ return;
33
+ }
34
+ const components = ["tds-tag"];
35
+ components.forEach(tagName => { switch (tagName) {
36
+ case "tds-tag":
37
+ if (!customElements.get(tagName)) {
38
+ customElements.define(tagName, TdsTag$1);
39
+ }
40
+ break;
41
+ } });
42
+ }
43
+ defineCustomElement$1();
44
+
45
+ const TdsTag = TdsTag$1;
46
+ const defineCustomElement = defineCustomElement$1;
47
+
48
+ export { TdsTag, defineCustomElement };
package/dist/components/tds-text-field.js CHANGED
@@ -3,7 +3,7 @@ import { h as hasSlot } from './p-ae110fc2.js';
3
3
  import { g as generateUniqueId } from './p-11648030.js';
4
4
  import { d as defineCustomElement$4 } from './p-b390ece5.js';
5
5
  import { d as defineCustomElement$3 } from './p-d3866be7.js';
6
- import { d as defineCustomElement$2 } from './p-9cee9d7f.js';
6
+ import { d as defineCustomElement$2 } from './p-3edd7602.js';
7
7
 
8
8
  const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly.sc-tds-text-field .tds-tooltip.sc-tds-text-field{min-width:150px}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
9
9
  const TdsTextFieldStyle0 = textFieldCss;
@@ -85,7 +85,7 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
85
85
  var _a;
86
86
  const usesPrefixSlot = hasSlot('prefix', this.host);
87
87
  const usesSuffixSlot = hasSlot('suffix', this.host);
88
- return (h("div", { key: '985928ef59662762648f2d95d5decad2e3188e05', class: {
88
+ return (h("div", { key: 'd89807d294eef78042812ab972347b02bf09ca3b', class: {
89
89
  'form-text-field': true,
90
90
  'form-text-field-nomin': this.noMinWidth,
91
91
  'text-field-focus': this.focusInput && !this.disabled,
@@ -103,12 +103,12 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
103
103
  'form-text-field-sm': this.size === 'sm',
104
104
  'form-text-field-error': this.state === 'error',
105
105
  'form-text-field-success': this.state === 'success',
106
- } }, this.labelPosition === 'outside' && (h("div", { key: '7a409b43a1fee8b7b078abc5f96c925ab97bcedc', class: "text-field-label-outside" }, h("label", { key: 'c6bdaab4e6f81a95aa71a4e23a1f02fb1bcef9ec', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '945f7901a92850da22ab84c5fe77e2d97738aaa9', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '5d6cb2facb8ff90b7393409b769c2b5e5a860421', class: {
106
+ } }, this.labelPosition === 'outside' && (h("div", { key: 'e47d71e8415802cef02fd832d67ae3fabc941f61', class: "text-field-label-outside" }, h("label", { key: 'a840356fe2a5758bb8d219a42121d4896fb460e9', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '937a2edc262e2d2f7523b18d562e847f4c6a68cf', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'ffec573debf07ce940c56e0c5b53b37ffb3e4a7b', class: {
107
107
  'text-field-slot-wrap-prefix': true,
108
108
  'text-field-error': this.state === 'error',
109
109
  'text-field-success': this.state === 'success',
110
110
  'text-field-default': this.state === 'default',
111
- } }, h("slot", { key: 'b0f0e3ebb96dbd2af021150b68690af566db44b9', name: "prefix" }))), h("div", { key: 'c5b172ee6c561256ab930490113f406b88eae67c', class: "text-field-input-container" }, h("input", { key: '2e0a9070b41bde39a2a0f14b132f474692eb0e04', ref: (inputEl) => {
111
+ } }, h("slot", { key: '0024d886c26708f326f9750fce178c0d916e1fcd', name: "prefix" }))), h("div", { key: '6612a79dca8842c4fa50683a28d33d4a813a6557', class: "text-field-input-container" }, h("input", { key: 'f3a3a2476289e3b87409dbf5bb67c8983c5cdcd3', ref: (inputEl) => {
112
112
  this.textInput = inputEl;
113
113
  }, class: {
114
114
  'text-field-input': true,
@@ -123,13 +123,13 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
123
123
  if (!this.readOnly) {
124
124
  this.handleBlur(event);
125
125
  }
126
- }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ffb3bbb84ab718c2259134f32ee6dd0eb348cb9f', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '166da0147311d28064b7e03bbefd1a0ee18db5ca', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '4bb21d12957bf65d525931c88a5a89fff49d4eaf', class: {
126
+ }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '85148d3ad53ac2261f39fab3951e34d6031fe491', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '237b915b922532e3e56e4164f6ac6478addfd98a', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'b6ad2a2bb9e1bed1c6483f917b6821e348498509', class: {
127
127
  'text-field-slot-wrap-suffix': true,
128
128
  'text-field-error': this.state === 'error',
129
129
  'text-field-success': this.state === 'success',
130
130
  'text-field-default': this.state === 'default',
131
131
  'tds-u-display-none': this.readOnly,
132
- } }, h("slot", { key: '7e67dbc8f4f67cb0c7d194e01e5787ae18ffab13', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: 'd213ec000d837cbd4b711468ef3cfa826cc65ac2', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'b89530a2422cdf782e92a124e7c353b4432b9719', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'fa2a35bc8514d802152a147d9c17c9a8dbe952c8', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '902924863a2e58f820647b89f289c4e649dd63a5', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '6bc81db447e040154a7d35acddbe732d8fbc5134', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '990205934bb31c179478c68cca7a991056678838', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'cfc4b7b95164832fcfa4c744a640356187ac41c1', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'bbcaee6e47a36ccce4e05ba672d92211f2612fd1', class: {
132
+ } }, h("slot", { key: '3eafecee94e39288fc7c2e102067c85c2627d304', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '0a87c83bc31ec47877743d37e390cf29c2555f6c', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '81e830a4bca0448f750ba6a40d0010b998ca7a05', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '16cf9d03aabc841336893bc4bfbc3cc8e430b30c', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'c8e2dcb1f2e8b5eaa11df4a055ee9569710b9f87', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'c7f347e44f3c3529e4f52958fc0b51403669a473', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'a208201df33fad685bd7548f2d4653e4b560e8a8', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '0de28c14b12992c9627c6d0b32158dc98e4e4716', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '02c33ab122b01d3e9ebcd891ce8000f0654bbcb4', class: {
133
133
  'text-field-textcounter-divider': true,
134
134
  'text-field-textcounter-disabled': this.disabled,
135
135
  } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
package/dist/components/tds-textarea.js CHANGED
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js
2
2
  import { g as generateUniqueId } from './p-11648030.js';
3
3
  import { d as defineCustomElement$4 } from './p-b390ece5.js';
4
4
  import { d as defineCustomElement$3 } from './p-d3866be7.js';
5
- import { d as defineCustomElement$2 } from './p-9cee9d7f.js';
5
+ import { d as defineCustomElement$2 } from './p-3edd7602.js';
6
6
 
7
7
  const textareaCss = ".textarea-container.sc-tds-textarea{border-radius:4px 4px 0 0;position:relative;box-sizing:border-box;height:auto;width:100%;min-width:208px;display:inline-flex;background-color:transparent;flex-flow:row wrap;border-bottom:0}.textarea-container.no-min-width.sc-tds-textarea{min-width:unset}.textarea-container.sc-tds-textarea .textarea-wrapper.sc-tds-textarea{position:relative;width:unset;min-width:100%}.textarea-input.sc-tds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-textarea-color);background-color:var(--tds-textarea-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--tds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-tds-textarea:read-only{background-color:var(--tds-textarea-read-only-background)}.textarea-input.sc-tds-textarea::placeholder{opacity:1;color:var(--tds-textarea-placeholder);transition:color 200ms ease}.textarea-input.sc-tds-textarea:disabled{background-color:var(--tds-textarea-disabled-background);color:var(--tds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-tds-textarea:disabled::placeholder{color:var(--tds-textarea-disabled-placeholder)}.textarea-input.sc-tds-textarea::-webkit-resizer{display:none}.textarea-input.sc-tds-textarea:hover{border-bottom-color:var(--tds-textarea-border-bottom-hover)}.textarea-input.sc-tds-textarea:hover::placeholder{color:var(--tds-textarea-placeholder-hover)}.textarea-input.sc-tds-textarea:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0;border-bottom:1px solid transparent}.textarea-resizer-icon.sc-tds-textarea{color:var(--tds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--tds-textarea-background)}.textarea-resizer-icon.sc-tds-textarea svg.sc-tds-textarea{display:block}.textarea-label.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);transition:0.1s ease all;color:var(--tds-textarea-label-inside-color);position:absolute;top:var(--tds-spacing-element-20);left:var(--tds-spacing-element-16)}.textarea-container.textarea-label-inside.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea .sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--tds-textarea-placeholder)}.textarea-container.textarea-focus.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-container.textarea-data.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-textcounter.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--tds-spacing-element-4)}.textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter-divider)}.textarea-helper.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--tds-spacing-element-4);color:var(--tds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-tds-textarea~.textarea-textcounter.sc-tds-textarea{flex-basis:auto}.textarea-success.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-success)}.textarea-error.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-error)}.textarea-error.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-error)}.textarea-disabled.sc-tds-textarea{cursor:not-allowed}.textarea-disabled.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:transparent;pointer-events:none;user-select:none}.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-disabled.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-icon__readonly.sc-tds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--tds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-tds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;color:var(--tds-textarea-icon-read-only-label-color);background-color:var(--tds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-tds-textarea .textarea-icon__readonly.sc-tds-textarea{display:block}.textarea-readonly.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-read-only-color)}.textarea-readonly.sc-tds-textarea .textfield-container.sc-tds-textarea{background-color:transparent}.textarea-readonly.sc-tds-textarea:has(.textarea-icon__readonly) .textarea-input.sc-tds-textarea{padding-right:54px}";
8
8
  const TdsTextareaStyle0 = textareaCss;
@@ -78,7 +78,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
78
78
  }
79
79
  render() {
80
80
  var _a;
81
- return (h("div", { key: '06fd8ce87614410858a7d9253fac73a6f1cf20ec', class: {
81
+ return (h("div", { key: '4e4048bca7482372c33e4bc2e0790f848c7bef37', class: {
82
82
  'textarea-container': true,
83
83
  'textarea-label-inside': this.labelPosition === 'inside',
84
84
  'textarea-focus': this.focusInput,
@@ -88,7 +88,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
88
88
  'textarea-data': this.value !== '',
89
89
  [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
90
90
  'no-min-width': this.noMinWidth,
91
- } }, this.labelPosition !== 'no-label' && (h("label", { key: '1a02a333e4164b39fd223c68cc3d27d7c53487fb', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '6d45e8c8427770accc82c7ad9e10fbed016437a4', class: "textarea-wrapper" }, h("textarea", { key: '614c30a5b5077060b1568744cf0800580e746819', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
91
+ } }, this.labelPosition !== 'no-label' && (h("label", { key: 'bc9ed66490b0826b6010b7b3f15e897a1c56fab2', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: 'c44d68a2f207c55924d381d5feaa5d45b8d1693a', class: "textarea-wrapper" }, h("textarea", { key: 'fb810672ae5625d88ddef2cb619ebf82a89bd1b8', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
92
92
  this.textEl = inputEl;
93
93
  }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
94
94
  if (!this.readOnly) {
@@ -98,7 +98,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
98
98
  if (!this.readOnly) {
99
99
  this.handleBlur(event);
100
100
  }
101
- }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'e0574ae32d1ce9c69156dc2aa52d8d1881b6ff9b', class: "textarea-resizer-icon" }, h("svg", { key: '23e79729cc099b7e4f07192c05aa4a304b91788a', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '54891720aa51af768f467be5bd8a72fc7adc8d47', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '72e3586f1be99460ced66d640392b4596e5b8c2f', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '9f84391a75b5ae428c71d3b713a9d281c4475a09', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '55e195bb50d8b707ec3a403c8c62cad74d738919', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'ff2043a19ebb129178ecfd36126b0d23eacde4d1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '84b0991ef5ddab7f960ba75db22c65762b0b5d20', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '963b3a3bdafeabec6ad2bd3663c07ed0d4a5b3fd', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '8496a0ae44721cdcd9443e09ff6a709b6d3c704f', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
101
+ }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '2c5e563c67c1a9653fa8f4cac4d7bb6fad597798', class: "textarea-resizer-icon" }, h("svg", { key: '05aa8ee404423cd45a413f8c515ebbd5a0369614', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '40ddf0c7ec5e8252c03eebaa831338d6a7636eed', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '33c3089fdc770b7c1a7d385278e6e2e0169185f8', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'f949026759c34a02ef86003bc2cd5caf763cbe23', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '4095c8b15b6435dfd9e055410489f18bca750eba', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'b1a5609ab86bd12636e6ef9e809f1a6b920d3f13', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '4eeeac4f43dd0d5f07e01067792e56872fcb6a2a', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '3308422db35a916e93737c59f985fe3b4d8cdc3e', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'f7e00b0dcf13980aebbee3fa4041ff8708df8cc5', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
102
102
  }
103
103
  static get style() { return TdsTextareaStyle0; }
104
104
  }, [2, "tds-textarea", {
package/dist/components/tds-toast.js CHANGED
@@ -69,12 +69,12 @@ const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends H {
69
69
  const usesHeaderSlot = hasSlot('header', this.host);
70
70
  const usesSubheaderSlot = hasSlot('subheader', this.host);
71
71
  const usesActionsSlot = hasSlot('actions', this.host);
72
- return (h(Host, { key: '433c25165487688ff40c78a0455d30cedd08c76f', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
72
+ return (h(Host, { key: 'f33d6a47e353526288cb2cc54c40c2698381cbb2', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
73
73
  hide: this.hidden,
74
74
  show: !this.hidden,
75
- } }, h("div", { key: '2734573a413d9cdf1a329675fe0e0db374243cbf', class: `
75
+ } }, h("div", { key: '16b1cb526bde852d747dfe584aafc37179b36c72', class: `
76
76
  wrapper
77
- ${this.variant}` }, h("tds-icon", { key: '88d4ab6fd55d64c93ad3089c695d0fa4075208a6', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '02de15f884420946530d2e04c330987f73c9ca44', class: `content` }, h("div", { key: '4eb8c6a13a7bb53313a18b47bfa8e2ab1211cdbc', class: "header-subheader" }, this.header && h("div", { key: '1b707e29cdd68a5cc73a2b694b8b93698cbac661', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'ffe2b463f8fc6e4ca3b563d7a4ae55968cb4a478', name: "header" }), this.subheader && h("div", { key: '8164b591452e4a6f025f752951c678a15443fff9', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '2bca8428e8eb128cf8c0f62b31a0da54ef555df3', name: "subheader" })), usesActionsSlot && (h("div", { key: 'de84bc19257b09127b861b357240509a7346f2e7', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'b85a46c5dc97dc7d3b95feb816145731887711fb', name: "actions" })))), this.closable && (h("button", { key: '69adb03d815ece9e50cf436957927c5dcd4d3ab8', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '9b4f062079caa32c5900202aaf1c2a7a5ef8e18c', name: "cross", size: "20px", svgTitle: "cross" }))))));
77
+ ${this.variant}` }, h("tds-icon", { key: 'c5695d9563d0fa24a1d660f47a756929642716c9', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '4b1466c8269089e214cfed8050377cdf17f90378', class: `content` }, h("div", { key: '9e74a8209fde4dc8fbb8463c0e25497c61044bab', class: "header-subheader" }, this.header && h("div", { key: '1d79b8d5576356b782f5e43512e1cdbdc7069f39', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'df3ac4d75cd808f9f3d7d7707e27f1e710c1b184', name: "header" }), this.subheader && h("div", { key: 'e13f983261bd6e0ca9ee90f3ad73454c4caeb57f', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '5166e94e2b48331c1d7be57672f53cd09f3fb618', name: "subheader" })), usesActionsSlot && (h("div", { key: '8a7421250f3d1cc25f04ce8896abb728ae4f6fd4', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'd3bb660be4e75abc70140c208d852ec433813b8b', name: "actions" })))), this.closable && (h("button", { key: '19a88d43fd6e170b9e8bcae5356339045ca5295b', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '89b3346a798ef07ff803cdaf20ecee1529f7babb', name: "cross", size: "20px", svgTitle: "cross" }))))));
78
78
  }
79
79
  get host() { return this; }
80
80
  static get style() { return TdsToastStyle0; }