@scania/tegel 1.39.0 → 1.40.0-stencil-core-4.38.1-beta.0

package/dist/components/{p-3b58a9f3.js → p-Ip9G3co9.js}

@@ -1,42 +1,57 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
-import { h as hasSlot } from './p-ae110fc2.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { g as getAriaInvalid } from './p-bbf9492a.js';
-import { d as defineCustomElement$3 } from './p-b390ece5.js';
-import { d as defineCustomElement$2 } from './p-d3866be7.js';
-import { d as defineCustomElement$1 } from './p-40253725.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { h as hasSlot } from './p-DDX6uFcm.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
+import { g as getAriaInvalid } from './p-wEP_nEaO.js';
+import { d as defineCustomElement$3 } from './p-CPDv0bBc.js';
+import { d as defineCustomElement$2 } from './p-X1sPx4t5.js';
+import { d as defineCustomElement$1 } from './p-DnzQe_HU.js';
 
 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);border-top:1px solid transparent;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-container.sc-tds-text-field:focus-within{border:2px solid var(--tds-focus-outline-color);margin:0 -2px}.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-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)}.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}";
-const TdsTextFieldStyle0 = textFieldCss;
 
 const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.tdsChange = createEvent(this, "tdsChange", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.uuid = generateUniqueId();
+        /** Which input type, text, password or similar */
         this.type = 'text';
+        /** Position of the label for the Text Field. */
         this.labelPosition = 'no-label';
+        /** Label text */
         this.label = '';
-        this.min = undefined;
-        this.max = undefined;
-        this.helper = undefined;
+        /** Placeholder text */
         this.placeholder = '';
+        /** Value of the input text */
         this.value = '';
+        /** Set input in disabled state */
         this.disabled = false;
+        /** Set input in readonly state */
         this.readOnly = false;
+        /** Hides the read-only icon in the Text Field. Requires Read Only to be enabled. */
         this.hideReadOnlyIcon = false;
+        /** Size of the input */
         this.size = 'lg';
+        /** Mode variant of the Text Field */
         this.modeVariant = null;
+        /** Unset minimum width of 208px. */
         this.noMinWidth = false;
+        /** Name property */
         this.name = '';
+        /** Error state of input */
         this.state = 'default';
-        this.maxLength = undefined;
+        /** Autofocus for input */
         this.autofocus = false;
-        this.tdsAriaLabel = undefined;
+        /** Makes the text field required */
+        this.required = false;
+        /** Value to be used for the text field's autocomplete attribute */
+        this.autocomplete = 'off';
+        /** Listen to the focus state of the input */
         this.focusInput = false;
     }
     handleChange(event) {
@@ -81,7 +96,7 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '323df30951c2ee070b043228f78c3045b33e2fc9', class: {
+        return (h("div", { key: '3a072497874b410339fc3368f49b9048fdcc6641', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -99,12 +114,12 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: 'fe9768bbf8999dc49f90e096bfd138710a91e7bb', class: "text-field-label-outside" }, h("label", { key: '91d39c768b49e7867a87f7fc78b50ec4034c4560', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'abb84b67da94a281e986891a00a8bd348ad3b131', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '4661114d6fe3e809ee7c0254686c9feb55fce6ad', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '190b617811d0993b85b3df6951a41678bc51879e', class: "text-field-label-outside" }, h("label", { key: '6e5099cc43259b790d83d3f127e85463e58c9ac2', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'd5064e04015238d38a70b09c9eba4cbbb1da19cb', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '69af0c24b21e3edda262749538cc9775c501e115', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: '40aac31a850fb3ad1d703834b578c73a35c9f255', name: "prefix" }))), h("div", { key: '1c85331cb4dd7a03527c3730996f07a5d25293d7', class: "text-field-input-container" }, h("input", { key: '498c3ae25cc2508c28dd2e5f8483c35adb9f8bb9', ref: (inputEl) => {
+            } }, h("slot", { key: 'f397647f1458b1d132080cb15b92be60e2942459', name: "prefix" }))), h("div", { key: '33674576cce732cc66e7ca830669b7535aea7f00', class: "text-field-input-container" }, h("input", { key: 'a27eca3e8862b099475fd46c2182f86d7d110533', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -119,20 +134,20 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-invalid": getAriaInvalid(this.host, this.state), "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: '41a2f20f416c65fb2d7d9992286f4bc9c9dcc52c', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '2b7b63efd24c1398d2d40a3d5a48d3003931cff8', class: {
+            }, "aria-invalid": getAriaInvalid(this.host, this.state), "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}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '7671a287273c976a1ad73032020838d6c4cedab0', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '19a93786e8647aa1d2e5b9a9b80c71c250330d8d', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: 'b594b47a2ee6bfb393b44c8b704232881e53c119', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '5a9d4e1492b908a397881a42f9c0229d32e2a457', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '02bb93263fc40d5d6aeb2dda3ad5ac49f2e2ccf6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'e926eb2de3946822875badbcc7e325e9981b8271', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'ac28d59eb12ef9efe38cd940daf1299b06dd4446', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: 'd1b09c6f543f0e985476b798ee642c6a11cb7485', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '160ca65e021a3f313b828dbcf82b158036d748ad', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '34bb9eaa6c267d882fc28a9b80fd331523bd981b', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '6b1ad7dbce2e2fe37e116c1d8f0b11f2dfe00260', class: {
+            } }, h("slot", { key: 'dd76e5bb941bc791caa395206be040319e00a708', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '2ba57774f40412b9a337ef7bf47ce65bcf44a704', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'bfb0f704470e77f9ce6e11fe3d01af3dd8569015', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '28ded9080cb2abfe6a06b284af3807584f4dda02', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '636205c9e69b3a2602ea0b8817a585e5cd4e16b2', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '4ece49df31864f53d0fadc3709cd06d34da6830a', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ba1e7f916ebbfa6775b46febed47e4bf55af9fd3', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '45eb885352b32dd3483a1c01f4dbaa49fcfda8ba', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '9934f078456a0af683b0d1f8a997c5484e58868c', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
     }
     get host() { return this; }
-    static get style() { return TdsTextFieldStyle0; }
-}, [6, "tds-text-field", {
+    static get style() { return textFieldCss; }
+}, [262, "tds-text-field", {
         "type": [513],
         "labelPosition": [1, "label-position"],
         "label": [1],
@@ -152,6 +167,8 @@ const TdsTextField = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends
         "maxLength": [2, "max-length"],
         "autofocus": [4],
         "tdsAriaLabel": [1, "tds-aria-label"],
+        "required": [4],
+        "autocomplete": [1],
         "focusInput": [32],
         "focusElement": [64]
     }]);

package/dist/components/{p-0bd4c19c.js → p-Q3W78DlP.js}

@@ -1,4 +1,4 @@
-import { i as inheritAttributes } from './p-3fe9cbbf.js';
+import { i as inheritAttributes } from './p-CF8bH08v.js';
 
 /**
  * List of available ARIA attributes + `role`.

package/dist/components/{p-d0cf68be.js → p-QnvG_QPu.js}

@@ -1,18 +1,19 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './p-859e3ebf.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './p-CuIyaNyT.js';
 
 const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:unset;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([size=lg]){width:320px}";
-const TdsHeaderDropdownListStyle0 = headerDropdownListCss;
 
 const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownList extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         // A Map to store the slots and their associated slotchange listeners.
         this.slotListeners = new Map();
+        /** The size of the component. */
         this.size = 'md';
-        this.headingElement = undefined;
     }
     componentWillLoad() {
         const { children } = this.host;
@@ -75,11 +76,11 @@ const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDr
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, Object.assign({ key: '3eeb33a5a5ba4afbfa21bd65fc4ad8ca7d8feddf' }, attributes), h("slot", { key: '5561862a0377a76cae8d781849c4de10c9e8cdeb' })));
+        return (h(Host, Object.assign({ key: '57e8ecd046b7a260f1516fc80673e9d095ffd4d3' }, attributes), h("slot", { key: 'e0bafe5fffcf8864faebd4603597e3e424a35046' })));
     }
     get host() { return this; }
-    static get style() { return TdsHeaderDropdownListStyle0; }
-}, [1, "tds-header-dropdown-list", {
+    static get style() { return headerDropdownListCss; }
+}, [257, "tds-header-dropdown-list", {
         "size": [513],
         "headingElement": [32]
     }]);

package/dist/components/{p-d3866be7.js → p-X1sPx4t5.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -144,7 +144,7 @@ function effect$2(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const applyStyles$1 = {
+var applyStyles$1 = {
   name: 'applyStyles',
   enabled: true,
   phase: 'write',
@@ -459,7 +459,7 @@ function effect$1(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const arrow$1 = {
+var arrow$1 = {
   name: 'arrow',
   enabled: true,
   phase: 'main',
@@ -626,7 +626,7 @@ function computeStyles(_ref5) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const computeStyles$1 = {
+var computeStyles$1 = {
   name: 'computeStyles',
   enabled: true,
   phase: 'beforeWrite',
@@ -673,7 +673,7 @@ function effect(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const eventListeners = {
+var eventListeners = {
   name: 'eventListeners',
   enabled: true,
   phase: 'write',
@@ -983,7 +983,6 @@ function detectOverflow(state, options) {
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
     element: popperRect,
-    strategy: 'absolute',
     placement: placement
   });
   var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
@@ -1179,7 +1178,7 @@ function flip(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const flip$1 = {
+var flip$1 = {
   name: 'flip',
   enabled: true,
   phase: 'main',
@@ -1241,7 +1240,7 @@ function hide(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const hide$1 = {
+var hide$1 = {
   name: 'hide',
   enabled: true,
   phase: 'main',
@@ -1293,7 +1292,7 @@ function offset(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const offset$1 = {
+var offset$1 = {
   name: 'offset',
   enabled: true,
   phase: 'main',
@@ -1311,13 +1310,12 @@ function popperOffsets(_ref) {
   state.modifiersData[name] = computeOffsets({
     reference: state.rects.reference,
     element: state.rects.popper,
-    strategy: 'absolute',
     placement: state.placement
   });
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const popperOffsets$1 = {
+var popperOffsets$1 = {
   name: 'popperOffsets',
   enabled: true,
   phase: 'read',
@@ -1452,7 +1450,7 @@ function preventOverflow(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const preventOverflow$1 = {
+var preventOverflow$1 = {
   name: 'preventOverflow',
   enabled: true,
   phase: 'main',
@@ -1816,14 +1814,42 @@ const generateClassList = (classes) => {
 };
 
 const tdsPopoverCoreCss = ".sc-tds-popover-core-h{pointer-events:none;display:block}.tds-animation-enter-fade.sc-tds-popover-core-h{animation:tds-fade-in var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter) forwards}.tds-animation-exit-fade.sc-tds-popover-core-h{animation:tds-fade-out var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit) forwards}.is-shown.sc-tds-popover-core-h{opacity:1;pointer-events:auto;visibility:visible}.is-hidden.sc-tds-popover-core-h{opacity:0;pointer-events:none;visibility:hidden}.initially-hidden.sc-tds-popover-core-h{opacity:0;pointer-events:none;visibility:hidden}";
-const TdsPopoverCoreStyle0 = tdsPopoverCoreCss;
 
 const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.internalTdsShow = createEvent(this, "internalTdsShow", 4);
         this.internalTdsClose = createEvent(this, "internalTdsClose", 0);
+        /** Decides if the component should be visible from the start. */
+        this.defaultShow = false;
+        /** Whether the popover should animate when being opened/closed or not */
+        this.animation = 'none';
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
+        this.show = null;
+        /** Decides the placement of the Popover Menu */
+        this.placement = 'auto';
+        /** Sets the offset skidding */
+        this.offsetSkidding = 0;
+        /** Sets the offset distance */
+        this.offsetDistance = 8;
+        /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
+        this.modifiers = [];
+        /** What triggers the popover to show */
+        this.trigger = 'click';
+        /** Decides if the popover should hide automatically.
+         * Alternatevly it can be hidden externally based on emitted events. */
+        this.autoHide = true;
+        this.renderedShowValue = false;
+        this.isShown = false;
+        this.disableLogic = false;
+        this.hasShownAtLeastOnce = false;
+        this.openedByKeyboard = false;
         this.uuid = generateUniqueId();
         this.setIsShown = function setIsShown(isShown) {
             if (typeof isShown === 'function') {
@@ -1860,24 +1886,6 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
             event.stopPropagation();
             this.setIsShown(false);
         }.bind(this);
-        this.selector = undefined;
-        this.referenceEl = undefined;
-        this.defaultShow = false;
-        this.animation = 'none';
-        this.show = null;
-        this.placement = 'auto';
-        this.offsetSkidding = 0;
-        this.offsetDistance = 8;
-        this.modifiers = [];
-        this.trigger = 'click';
-        this.autoHide = true;
-        this.renderedShowValue = false;
-        this.popperInstance = undefined;
-        this.target = undefined;
-        this.isShown = false;
-        this.disableLogic = false;
-        this.hasShownAtLeastOnce = false;
-        this.openedByKeyboard = false;
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -2044,7 +2052,7 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
             'tds-animation-exit-fade': !this.isShown && this.animation === 'fade',
         };
         const classList = generateClassList(classes);
-        return (h(Host, { key: 'e00527f6f668e309529ff607c744eb64bba30c6a', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: 'e562ffae5ecbca928a541de6b50f88efa1eded8c' })));
+        return (h(Host, { key: '5c557610103827aedbabbd37a79730580d15ca2d', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '487a937b3c9d87b91425f6bd9eb88bc3fa85d7df' })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -2053,8 +2061,8 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
         "trigger": ["onTriggerChanged"],
         "isShown": ["onIsShownChange"]
     }; }
-    static get style() { return TdsPopoverCoreStyle0; }
-}, [6, "tds-popover-core", {
+    static get style() { return tdsPopoverCoreCss; }
+}, [262, "tds-popover-core", {
         "selector": [1],
         "referenceEl": [16],
         "defaultShow": [4, "default-show"],

package/dist/components/tds-accordion-item.js

@@ -1,21 +1,28 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { d as defineCustomElement$2 } from './p-b390ece5.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
-const accordionItemCss = ".tds-accordion-item{box-sizing:border-box;list-style:none;color:var(--tds-accordion-color);position:relative;border-top:1px solid var(--tds-accordion-border)}.tds-accordion-item *{box-sizing:border-box}.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{all:unset}.tds-accordion-item .tds-accordion-header-icon-start,.tds-accordion-item .tds-accordion-header-icon-end,.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding:var(--tds-spacing-element-16);background-color:var(--tds-accordion-background)}.tds-accordion-item .tds-accordion-header-icon-start *,.tds-accordion-item .tds-accordion-header-icon-end *,.tds-accordion-item button.tds-accordion-header-icon-start *,.tds-accordion-item button.tds-accordion-header-icon-end *{box-sizing:border-box}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--tds-accordion-icon-color)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon>tds-icon{display:block}.tds-accordion-item .tds-accordion-title{flex-grow:2}.tds-accordion-item .tds-accordion-panel{cursor:default;padding:var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);display:none;font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls)}.tds-accordion-item .tds-accordion-panel p{margin:0;padding:0}.tds-accordion-item .tds-accordion-panel--padding-reset{padding-right:var(--tds-spacing-element-16)}.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon{margin:0 0 0 var(--tds-spacing-element-32)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-title{order:1}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon{order:0;margin:0 var(--tds-spacing-element-16) 0 0}.tds-accordion-item.disabled,.tds-accordion-item.disabled .tds-accordion-header-icon-end,.tds-accordion-item.disabled .tds-accordion-header-icon-start,.tds-accordion-item.disabled .tds-accordion-panel{color:var(--tds-accordion-color-disabled);cursor:not-allowed}.tds-accordion-item.disabled .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-panel .tds-accordion-icon{color:var(--tds-accordion-color-disabled)}.tds-accordion-item.disabled:hover,.tds-accordion-item.disabled:hover *,.tds-accordion-item.disabled:active,.tds-accordion-item.disabled:active *,.tds-accordion-item.disabled.active,.tds-accordion-item.disabled.active *{cursor:not-allowed}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after{border-color:transparent}.tds-accordion-item.expanded .tds-accordion-panel{display:block;padding-bottom:31px}.tds-accordion-item.expanded .tds-accordion-icon{transform:rotate(180deg)}.tds-accordion-item.expanded .tds-accordion-header-icon-end .tds-accordion-icon{margin-right:0;margin-left:var(--tds-spacing-element-32)}.tds-accordion-item.expanded .tds-accordion-header-icon-start .tds-accordion-icon{margin-left:0;margin-right:var(--tds-spacing-element-16)}.tds-accordion-item:has(.tds-accordion-header-icon-start:focus-visible),.tds-accordion-item:has(.tds-accordion-header-icon-end:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;background-color:var(--tds-accordion-background-focus);margin-bottom:-1px;border-bottom:1px solid var(--tds-accordion-border)}.tds-accordion-item:has(.tds-accordion-header-icon-start:focus-visible):hover,.tds-accordion-item:has(.tds-accordion-header-icon-end:focus-visible):hover{background-color:var(--tds-accordion-background-hover)}.tds-accordion-item:has(.tds-accordion-header-icon-start:focus-visible):active,.tds-accordion-item:has(.tds-accordion-header-icon-end:focus-visible):active{background-color:var(--tds-accordion-background-active)}.tds-accordion-item[disabled=true]:focus-visible{border-color:var(--tds-accordion-border)}:host(:hover) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-hover)}.tds-accordion-item:has(:hover){background-color:var(--tds-accordion-background-hover)}.tds-accordion-item:has(.tds-accordion-header-icon-start:active),.tds-accordion-item:has(.tds-accordion-header-icon-end:active){background-color:var(--tds-accordion-background-active)}:host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-start:active) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-end:active) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active)}.tds-accordion-header-icon-start:active,.tds-accordion-header-icon-end:active{outline:none}";
-const TdsAccordionItemStyle0 = accordionItemCss;
+const accordionItemCss = ".tds-accordion-item{box-sizing:border-box;list-style:none;color:var(--tds-accordion-color);position:relative;border-top:1px solid var(--tds-accordion-border)}.tds-accordion-item *{box-sizing:border-box}.tds-accordion-item:hover{background-color:var(--tds-accordion-background-hover);border-bottom:1px solid var(--tds-accordion-border-hover);border-top:1px solid var(--tds-accordion-border-hover);margin-bottom:-1px;z-index:1}.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{all:unset}.tds-accordion-item .tds-accordion-header-icon-start,.tds-accordion-item .tds-accordion-header-icon-end,.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding:var(--tds-spacing-element-16);background-color:var(--tds-accordion-background)}.tds-accordion-item .tds-accordion-header-icon-start *,.tds-accordion-item .tds-accordion-header-icon-end *,.tds-accordion-item button.tds-accordion-header-icon-start *,.tds-accordion-item button.tds-accordion-header-icon-end *{box-sizing:border-box}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--tds-accordion-icon-color)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon>tds-icon{display:block}.tds-accordion-item .tds-accordion-title{flex-grow:2}.tds-accordion-item .tds-accordion-panel{cursor:default;padding:var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);display:none;font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls)}.tds-accordion-item .tds-accordion-panel p{margin:0;padding:0}.tds-accordion-item .tds-accordion-panel--padding-reset{padding-right:var(--tds-spacing-element-16)}.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon{margin:0 0 0 var(--tds-spacing-element-32)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-title{order:1}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon{order:0;margin:0 var(--tds-spacing-element-16) 0 0}.tds-accordion-item.disabled,.tds-accordion-item.disabled .tds-accordion-header-icon-end,.tds-accordion-item.disabled .tds-accordion-header-icon-start,.tds-accordion-item.disabled .tds-accordion-panel{color:var(--tds-accordion-color-disabled);cursor:not-allowed}.tds-accordion-item.disabled .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-panel .tds-accordion-icon{color:var(--tds-accordion-color-disabled)}.tds-accordion-item.disabled:hover,.tds-accordion-item.disabled:hover *,.tds-accordion-item.disabled:active,.tds-accordion-item.disabled:active *,.tds-accordion-item.disabled.active,.tds-accordion-item.disabled.active *{cursor:not-allowed}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after{border-color:transparent}.tds-accordion-item.expanded .tds-accordion-panel{display:block;padding-bottom:31px}.tds-accordion-item.expanded .tds-accordion-icon{transform:rotate(180deg)}.tds-accordion-item.expanded .tds-accordion-header-icon-end .tds-accordion-icon{margin-right:0;margin-left:var(--tds-spacing-element-32)}.tds-accordion-item.expanded .tds-accordion-header-icon-start .tds-accordion-icon{margin-left:0;margin-right:var(--tds-spacing-element-16)}.tds-accordion-item:has(:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;z-index:2}.tds-accordion-item[disabled=true]:focus-visible{border-color:var(--tds-accordion-border)}";
 
 const TdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordionItem extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsToggle = createEvent(this, "tdsToggle", 7);
+        /** The header gives users the context about the additional information available inside the panel */
         this.header = '';
+        /** Changes position of the expand icon. */
         this.expandIconPosition = 'end';
+        /** Disabled option in `boolean`. */
         this.disabled = false;
+        /** Set to true to expand panel open */
         this.expanded = false;
+        /** When true, 16px on right padding instead of 64px */
         this.paddingReset = false;
+        /** Specifies the heading level (aria-level) for accessibility. Only accepts values between 1 and 6. */
         this.ariaLevelValue = '6';
     }
     /** Method for toggling the expanded state of the Accordion Item. */
@@ -59,8 +66,8 @@ const TdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordionIt
             ${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
             ` }, h("slot", { key: '274f9aff706adceb82aea35db3a91494e798ab2c' })))));
     }
-    static get style() { return TdsAccordionItemStyle0; }
-}, [1, "tds-accordion-item", {
+    static get style() { return accordionItemCss; }
+}, [257, "tds-accordion-item", {
         "header": [1],
         "expandIconPosition": [1, "expand-icon-position"],
         "disabled": [4],

package/dist/components/tds-accordion.js

@@ -1,14 +1,17 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 
 const accordionCss = ":host{display:block;box-sizing:border-box;background-color:transparent}:host *{box-sizing:border-box}:host .tds-accordion-header-icon-start,:host .tds-accordion-header-icon-end{position:relative}:host(:active) .tds-accordion-item .tds-accordion-header-icon-start,:host(:active) .tds-accordion-item .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active);outline:none}:host(:active) .disabled,:host(:active) .disabled *{cursor:not-allowed}:host(:active) .disabled .tds-accordion-header-icon-start,:host(:active) .disabled .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}:host(:active) .disabled .tds-accordion-header-icon-start::after,:host(:active) .disabled .tds-accordion-header-icon-end::after{border-color:transparent}:host(:last-child){border-bottom:1px solid var(--tds-accordion-border)}:host(.hide-last-border:last-child){border-bottom:none}:host(.tds-mode-variant-secondary){background-color:var(--tds-accordion-background)}:host(.tds-mode-variant-primary){background-color:var(--tds-accordion-background)}";
-const TdsAccordionStyle0 = accordionCss;
 
 const TdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordion extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Set the variant of the Accordion. */
         this.modeVariant = null;
+        /** Removes the bottom border of the last Accordion item. */
         this.hideLastBorder = false;
     }
     render() {
@@ -18,8 +21,8 @@ const TdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordion exten
                 'hide-last-border': this.hideLastBorder,
             } }, h("slot", { key: '4dd6d46024e918a3cd5e7594449147a94d07d6a0' })));
     }
-    static get style() { return TdsAccordionStyle0; }
-}, [1, "tds-accordion", {
+    static get style() { return accordionCss; }
+}, [257, "tds-accordion", {
         "modeVariant": [1, "mode-variant"],
         "hideLastBorder": [4, "hide-last-border"]
     }]);

package/dist/components/tds-badge.js

@@ -1,16 +1,21 @@
-import { p as proxyCustomElement, H, h } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 
 const badgeCss = ":host{--tds-badge-background-color:var(--tds-red-400);--tds-badge-color-text:var(--tds-white);box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-badge{display:block;border-radius:12px;background-color:var(--tds-badge-background-color);text-align:center}.tds-badge.tds-badge-sm{height:8px;width:8px;line-height:8px}.tds-badge.tds-badge-lg{height:20px;line-height:20px;width:20px}.tds-badge.tds-badge-pill{display:inline-block;width:unset;padding-left:8px;padding-right:8px}.tds-badge.tds-badge-hidden{display:none}.tds-badge-text{font-size:12px;color:var(--tds-badge-color-text);font-weight:bold}";
-const TdsBadgeStyle0 = badgeCss;
 
 const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Value shown in Badge */
         this.value = '';
+        /** Changes visibility of Badge */
         this.hidden = false;
+        /** Sets component size. */
         this.size = 'lg';
+        /** Defines aria-live attribute */
         this.tdsAriaLive = 'polite';
         this.tdsAriaLabel = '';
         this.shape = '';
@@ -42,8 +47,8 @@ const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends H {
         "value": ["watchProps"],
         "size": ["watchProps"]
     }; }
-    static get style() { return TdsBadgeStyle0; }
-}, [1, "tds-badge", {
+    static get style() { return badgeCss; }
+}, [257, "tds-badge", {
         "value": [1],
         "hidden": [516],
         "size": [1],

package/dist/components/tds-banner.js

@@ -1,17 +1,32 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { h as hasSlot } from './p-ae110fc2.js';
-import { d as defineCustomElement$2 } from './p-b390ece5.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
+import { h as hasSlot } from './p-DDX6uFcm.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const bannerCss = ":host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400;padding-left:16px}:host .banner-icon{padding-left:4px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=actions]::slotted(*){display:block;width:fit-content;padding-top:12px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}";
-const TdsBannerStyle0 = bannerCss;
 
 const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsClose = createEvent(this, "tdsClose", 7);
+        /** Variant of Banner */
+        this.variant = 'default';
+        /** ID used for internal table functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Banner close events, you need to set this ID yourself to identify the Banner,
+         * as the default ID is random and will be different every time.
+         */
+        this.bannerId = generateUniqueId();
+        /** Hides the Banner */
+        this.hidden = false;
+        /** Defines the ARIA role of the banner. Defaults to "banner" for global use,
+         * but can be set to "region" or "alert" if used differently.
+         */
+        this.roleType = 'banner';
         this.handleClose = () => {
             const tdsCloseEvent = this.tdsClose.emit({
                 bannerId: this.bannerId,
@@ -20,13 +35,6 @@ const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends H {
                 this.hidden = true;
             }
         };
-        this.icon = undefined;
-        this.header = undefined;
-        this.subheader = undefined;
-        this.variant = 'default';
-        this.bannerId = generateUniqueId();
-        this.hidden = false;
-        this.roleType = 'banner';
     }
     /** Hides the Banner. */
     async hideBanner() {
@@ -55,8 +63,8 @@ const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends H {
             } }, this.icon && (h("div", { key: '45b0a63ff1015c7a24bb37211eccfa5c8b5320ca', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: '2375c0c7a5a785fc788088e4568ad04a7d5f778e', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '0b4a58d3d3ab8405193bd771797badde39e23729', class: "content" }, h("div", { key: 'e9b26e4b13055853ea659cec8d990f7f2eb76999', class: "header-subheader" }, this.header && h("div", { key: '5cedf44a46330c77259c3d64cf567052ef26af0b', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'a2c9897a3befbbd5603262962a7652a763650048', name: "header" }), this.subheader && h("div", { key: 'a7916827ee4ea924270242c9f06ce75989021c3b', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'fba6caffbf916a12b8e5975966551c4c9d03a5c9', name: "subheader" })), usesActionsSlot && h("slot", { key: '7a1b89ac09e9aa7e79740f225960818d2622d4b4', name: "actions" })), h("div", { key: '9dca236d2f8253c64a8a9ff67981f69c6f473c77', class: `banner-close` }, h("button", { key: 'cabd5fa950e125babecc6caf8109c51d05142ec3', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '2ec160b7e458fc4e99528c390f6190dea039f02a', name: "cross", size: "20px", svgTitle: "Close" })))));
     }
     get host() { return this; }
-    static get style() { return TdsBannerStyle0; }
-}, [1, "tds-banner", {
+    static get style() { return bannerCss; }
+}, [257, "tds-banner", {
         "icon": [1],
         "header": [1],
         "subheader": [1],