@scania/tegel 1.40.0 → 1.41.0-beta.0

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-f7d94947.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],

package/dist/components/tds-block.js

@@ -1,14 +1,17 @@
-import { p as proxyCustomElement, H, h } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 
 const blockCss = ".tds-block{box-sizing:border-box;color:var(--tds-block-color);background-color:var(--tds-block-background);border-radius:4px;padding:16px;font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls)}.tds-block *{box-sizing:border-box}.tds-mode-variant-primary{background-color:var(--tds-block-background-primary)}.tds-mode-variant-secondary{background-color:var(--tds-block-background-secondary)}.tds-block-even{background-color:var(--tds-block-background-even)}.tds-block-odd{background-color:var(--tds-block-background-odd)}";
-const TdsBlockStyle0 = blockCss;
 
 const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
+        /** Specifies the HTML tag to be used for the component wrapper. */
         this.componentTag = 'div';
     }
     getNestingLevel() {
@@ -37,8 +40,8 @@ const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends H {
         return (h(TagType, { key: '34385f3ac01d173e6bb568432418304186d261c7', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '569b04916fb165fb460711ec659ed2dc3e9ebd12' })));
     }
     get host() { return this; }
-    static get style() { return TdsBlockStyle0; }
-}, [1, "tds-block", {
+    static get style() { return blockCss; }
+}, [257, "tds-block", {
         "modeVariant": [1, "mode-variant"],
         "componentTag": [1, "component-tag"]
     }]);

package/dist/components/tds-body-cell.js

@@ -1,7 +1,6 @@
-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 tableBodyCellCss = ":host(.tds-table__body-cell){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.tds-table__body-cell) *{box-sizing:border-box}:host(.tds-table__body-cell--hover){background-color:var(--tds-table-body-cell-background-hover)}:host(.tds-table__compact){padding:var(--tds-spacing-element-8) var(--tds-spacing-element-16)}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}";
-const TdsBodyCellStyle0 = tableBodyCellCss;
 
 const relevantTableProps = [
     'verticalDividers',
@@ -9,15 +8,14 @@ const relevantTableProps = [
     'noMinWidth',
 ];
 const TdsTableBodyCell = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
-        this.cellValue = undefined;
-        this.cellKey = undefined;
+        /** Disables internal padding. Useful when passing other components to cell. */
         this.disablePadding = false;
-        this.textAlign = undefined;
-        this.textAlignState = undefined;
         this.activeSorting = false;
         this.verticalDividers = false;
         this.compactDesign = false;
@@ -96,8 +94,8 @@ const TdsTableBodyCell = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell
             }, style: dynamicStyles, role: "cell" }, this.cellValue, h("slot", { key: 'cb0466abad9e73f9daed8483304246deb79d37e8' })));
     }
     get host() { return this; }
-    static get style() { return TdsBodyCellStyle0; }
-}, [1, "tds-body-cell", {
+    static get style() { return tableBodyCellCss; }
+}, [257, "tds-body-cell", {
         "cellValue": [520, "cell-value"],
         "cellKey": [520, "cell-key"],
         "disablePadding": [516, "disable-padding"],

package/dist/components/tds-breadcrumb.js

@@ -1,20 +1,22 @@
-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 breadcrumbCss = "@charset \"UTF-8\";:host([role=listitem]) div ::slotted(*){color:var(--tds-breadcrumb-color);text-decoration:none}:host([role=listitem]) div:hover ::slotted(*){color:var(--tds-breadcrumb-color-hover);text-decoration:underline}:host([role=listitem]) div ::slotted(*: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;outline-offset:0}:host([role=listitem]) div.current ::slotted(*),:host([role=listitem]) div [aria-current=page] ::slotted(*){pointer-events:none;cursor:default;color:var(--tds-breadcrumb-color-current)}:host([role=listitem]) div.current:hover ::slotted(*),:host([role=listitem]) div [aria-current=page]:hover ::slotted(*){text-decoration:none;cursor:not-allowed}:host([role=listitem]) div::after{content:\"›\";color:var(--tds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}:host([role=listitem]) .current::after{display:none}";
-const TdsBreadcrumbStyle0 = breadcrumbCss;
 
 const TdsBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class TdsBreadcrumb extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Boolean for the current link */
         this.current = false;
     }
     render() {
         return (h(Host, { key: 'f1a223cf44e435b547b42382e8b3d47979c71793', role: "listitem" }, h("div", Object.assign({ key: '41baa33ae1474121ae4512ddf89fb960670d1cea', class: { current: this.current } }, (this.current ? { 'aria-current': 'page' } : {})), h("slot", { key: '8f14f28f7e9824e76886a1d49f15d3404666771a' }))));
     }
-    static get style() { return TdsBreadcrumbStyle0; }
-}, [1, "tds-breadcrumb", {
+    static get style() { return breadcrumbCss; }
+}, [257, "tds-breadcrumb", {
         "current": [4]
     }]);
 function defineCustomElement$1() {

package/dist/components/tds-breadcrumbs.js

@@ -1,14 +1,14 @@
-import { p as proxyCustomElement, H, h } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h } from './index.js';
 
 const breadcrumbsCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host [role=list]{padding:0;margin:0;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;flex-wrap:wrap;list-style-type:none}";
-const TdsBreadcrumbsStyle0 = breadcrumbsCss;
 
 const TdsBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class TdsBreadcrumbs extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
-        this.tdsAriaLabel = undefined;
     }
     render() {
         var _a;
@@ -16,8 +16,8 @@ const TdsBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class TdsBreadcrumbs e
         return (h("nav", { key: 'd79f99fbdf47a75d66376c7900a1ba2ccfad0ef2', "aria-label": this.tdsAriaLabel }, h("div", { key: 'c06fa49904e230b1fcbaa8eeba1e2d6059f4eccd', role: "list", class: "tds-breadcrumb" }, h("slot", { key: 'fd44b69cd45ffaed95c865988832fa56c545125c' }))));
     }
     get host() { return this; }
-    static get style() { return TdsBreadcrumbsStyle0; }
-}, [1, "tds-breadcrumbs", {
+    static get style() { return breadcrumbsCss; }
+}, [257, "tds-breadcrumbs", {
         "tdsAriaLabel": [1, "tds-aria-label"]
     }]);
 function defineCustomElement$1() {

package/dist/components/tds-button.js

@@ -1,4 +1,4 @@
-import { T as TdsButton$1, d as defineCustomElement$1 } from './p-c62b61fe.js';
+import { T as TdsButton$1, d as defineCustomElement$1 } from './p-ChCWm6If.js';
 
 const TdsButton = TdsButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-card.js

@@ -1,19 +1,44 @@
-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$4 } from './p-c62b61fe.js';
-import { d as defineCustomElement$3 } from './p-381677ec.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.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$4 } from './p-ChCWm6If.js';
+import { d as defineCustomElement$3 } from './p-FqP1yGh_.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const cardCss = ".card{box-sizing:border-box;box-shadow:var(--tds-card-box);background-color:var(--tds-card-background);display:block;border-radius:4px;overflow:hidden}.card *{box-sizing:border-box}.card.clickable:hover{box-shadow:var(--tds-card-box-hover);cursor:pointer}.card .card-header{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-header slot[name=thumbnail]::slotted(*){width:36px;height:36px;border-radius:100%;margin-right:16px}.card .card-header .card-top-header{padding-left:16px;display:flex;flex-direction:column}.card .card-header .card-top-header.no-header-img{padding-left:0}.card .card-header.below{padding-top:16px}.card .card-header.expandable tds-icon{cursor:pointer;margin-left:auto;transition:transform 160ms ease-in-out, opacity 120ms ease-in-out}.card .card-header.expandable tds-icon.rotated{transform:rotate(180deg)}.card .header-subheader{display:flex;flex-direction:column;width:100%;gap:4px}.card .header-subheader .header,.card .header-subheader slot[name=header]{color:var(--tds-card-headline)}.card .header-subheader .subheader,.card .header-subheader slot[name=subheader]{color:var(--tds-card-sub-headline)}.card .card-body-img{width:100%}.card .tds-divider{margin:16px 16px 0;background-color:var(--tds-card-divider);height:1px}.card .card-body{display:block;word-wrap:break-word}.card slot[name=body]::slotted(*){font:var(--tds-detail-03) !important;letter-spacing:var(--tds-detail-03-ls) !important;color:var(--tds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px;max-width:336px}.card slot[name=actions]::slotted(*){display:flex;padding:16px;color:var(--tds-card-icon-color)}button{width:100%;border:none;text-align:left;padding:0}button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--tds-card-box-pressed)}.below-header-stretch,.above-header-stretch{display:flex;flex-direction:column}.below-header-stretch .stretch,.above-header-stretch .stretch{display:flex;flex-direction:column;flex-grow:1;width:100%}.below-header-stretch .card-body,.above-header-stretch .card-body{display:flex;flex-direction:column;flex-grow:1}.below-header-stretch .card-body slot[name=body]::slotted(*),.above-header-stretch .card-body slot[name=body]::slotted(*){max-width:unset;flex-grow:1}:host([expandable]:not([expanded])) .card-body slot[name=body]{display:none}";
-const TdsCardStyle0 = cardCss;
 
 const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsClick = createEvent(this, "tdsClick", 6);
+        /** Variant of the Card based on the theme used. */
+        this.modeVariant = null;
+        /** Placement of the header */
+        this.imagePlacement = 'below-header';
+        /** Divider for the body */
+        this.bodyDivider = false;
+        /** Makes the Card clickable. */
+        this.clickable = false;
+        this.stretch = false;
+        /** ID for the Card, must be unique.
+         *
+         * **NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card,
+         * as the default ID is random and will be different every time.
+         */
+        this.cardId = generateUniqueId();
+        /**
+         * Enables expandable behaviour.
+         * When true, clicking the header toggles content visibility.
+         */
+        this.expandable = false;
+        /**
+         * Tracks the current expanded state when expandable is enabled.
+         */
+        this.expanded = false;
         this.toggleExpand = () => {
             if (this.expandable) {
                 this.expanded = !this.expanded;
@@ -37,18 +62,6 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
             const bodyId = `body-${this.cardId}`;
             return (h("div", { class: this.stretch && 'stretch', "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
-        this.modeVariant = null;
-        this.imagePlacement = 'below-header';
-        this.header = undefined;
-        this.subheader = undefined;
-        this.bodyImg = undefined;
-        this.bodyImgAlt = undefined;
-        this.bodyDivider = false;
-        this.clickable = false;
-        this.stretch = false;
-        this.cardId = generateUniqueId();
-        this.expandable = false;
-        this.expanded = false;
     }
     render() {
         const cardStyle = {
@@ -61,8 +74,8 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
         return (h(Host, { key: '14e4d2ece54e021a186661c8dfef2dae78791782', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     get host() { return this; }
-    static get style() { return TdsCardStyle0; }
-}, [1, "tds-card", {
+    static get style() { return cardCss; }
+}, [257, "tds-card", {
         "modeVariant": [1, "mode-variant"],
         "imagePlacement": [1, "image-placement"],
         "header": [1],

package/dist/components/tds-checkbox.js

@@ -1,4 +1,4 @@
-import { T as TdsCheckbox$1, d as defineCustomElement$1 } from './p-44f5b5e1.js';
+import { T as TdsCheckbox$1, d as defineCustomElement$1 } from './p-Ca3wGDna.js';
 
 const TdsCheckbox = TdsCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-chip.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 { 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';
 
 const chipCss = ".sc-tds-chip-s>*{display:inline-flex;align-items:center}.sc-tds-chip-h.sc-tds-chip-s>[slot=label],.sc-tds-chip-h .sc-tds-chip-s>[slot=label]{padding-top:2px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip{display:inline-flex}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background);color:var(--tds-chips-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:32px;border:1px solid var(--tds-chips-border);cursor:pointer;white-space:nowrap}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip:hover{background-color:var(--tds-chips-background-hover);border-color:var(--tds-chips-border-hover)}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background-disabled);color:var(--tds-chips-text-disabled);border-color:transparent;cursor:default;pointer-events:none}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input.sc-tds-chip{pointer-events:none}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input[type=radio].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active-disabled);color:var(--tds-chips-text-checked-disabled);border-color:transparent}.component.sc-tds-chip .tds-chip-component.disabled.sc-tds-chip input[type=checkbox].sc-tds-chip:checked:disabled+label.sc-tds-chip{background-color:var(--tds-chips-background-active-disabled);color:var(--tds-chips-text-checked-disabled);border-color:transparent}.component.sc-tds-chip .tds-chip-component.lg.sc-tds-chip label.sc-tds-chip{height:16px;padding:8px 16px;gap:6px}.component.sc-tds-chip .tds-chip-component.sm.sc-tds-chip label.sc-tds-chip{height:16px;padding:4px 12px;gap:4px}.component.sc-tds-chip .tds-chip-component.sm.prefix.sc-tds-chip label.sc-tds-chip{padding:4px 12px 4px 8px}.component.sc-tds-chip .tds-chip-component.sm.suffix.sc-tds-chip label.sc-tds-chip{padding:4px 8px 4px 12px}.component.sc-tds-chip .tds-chip-component.lg.prefix.sc-tds-chip label.sc-tds-chip{padding:8px 16px 8px 10px}.component.sc-tds-chip .tds-chip-component.lg.suffix.sc-tds-chip label.sc-tds-chip{padding:8px 10px 8px 16px}.component.sc-tds-chip .tds-chip-component.sm.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:4px 8px}.component.sc-tds-chip .tds-chip-component.lg.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:8px 10px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip{opacity:0;position:absolute;z-index:-1}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:focus-visible+label.sc-tds-chip{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-chips-background-focus);border-color:transparent}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-color-active);border-color:var(--tds-chips-background-active)}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip:hover{background-color:var(--tds-chips-background-active-hover);border-color:var(--tds-chips-border-selected-hover)}";
-const TdsChipStyle0 = chipCss;
 
 const TdsChip$1 = /*@__PURE__*/ proxyCustomElement(class TdsChip extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.tdsChange = createEvent(this, "tdsChange", 6);
         this.internalRadioOnChange = createEvent(this, "internalRadioOnChange", 6);
         this.tdsClick = createEvent(this, "tdsClick", 6);
+        /** Type of Chip, depends on usage */
+        this.type = 'button';
+        /** Size of the Chip component */
+        this.size = 'lg';
+        /** ID used for internal Chip functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for input events, you need to set this ID yourself to identify the input,
+         * as the default ID is random and will be different every time.
+         */
+        this.chipId = generateUniqueId();
+        /** Controls component's checked attribute. Valid only for type checkbox and radio. */
+        this.checked = false;
+        /** Sets the Chip in a disabled state */
+        this.disabled = false;
         this.handleChange = () => {
             if (!this.disabled) {
                 // Only proceed if not disabled
@@ -44,14 +59,6 @@ const TdsChip$1 = /*@__PURE__*/ proxyCustomElement(class TdsChip extends H {
                 });
             }
         };
-        this.type = 'button';
-        this.size = 'lg';
-        this.chipId = generateUniqueId();
-        this.checked = false;
-        this.name = undefined;
-        this.value = undefined;
-        this.disabled = false;
-        this.tdsAriaLabel = undefined;
     }
     handleInternaRadioChange(event) {
         const { chipId, checked, groupName } = event.detail;
@@ -88,8 +95,8 @@ const TdsChip$1 = /*@__PURE__*/ proxyCustomElement(class TdsChip extends H {
         return (h(Host, { key: '4a498e81dbdd096e01d502a1bc378bfa9f7ea61d' }, h("div", { key: '441e76b25ec9fb91485f3394e6df08fa2ac0363f', class: "component" }, h("div", { key: '88658da3bae225792261b6b3b7796c514d76e665', class: chipClasses }, h("input", Object.assign({ key: '1e495bd583136ba481b7f11891f008c8584b0b38', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": this.tdsAriaLabel }, inputAttributes)), h("label", { key: 'ffaff7dd33befe64eb69fc6f786efd38eb654628', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '95a6bf9c4d337a9d9caaf66b598615af657045c3', name: "prefix" }), hasLabelSlot && h("slot", { key: '2e732390348814bbeea2bb0c4c5fa0b9206a6578', name: "label" }), hasSuffixSlot && h("slot", { key: '716254ff0b5995b2d2a99dcd2aaa2f94613255d0', name: "suffix" }))))));
     }
     get host() { return this; }
-    static get style() { return TdsChipStyle0; }
-}, [6, "tds-chip", {
+    static get style() { return chipCss; }
+}, [262, "tds-chip", {
         "type": [1],
         "size": [1],
         "chipId": [1, "chip-id"],

package/dist/components/tds-core-header-item.js

@@ -1,4 +1,4 @@
-import { T as TdsCoreHeaderItem$1, d as defineCustomElement$1 } from './p-e1622f4a.js';
+import { T as TdsCoreHeaderItem$1, d as defineCustomElement$1 } from './p-BhLq7lgx.js';
 
 const TdsCoreHeaderItem = TdsCoreHeaderItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-datetime.js

@@ -1,18 +1,43 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const datetimeCss = "@supports selector(input::-webkit-datetime-edit){.tds-datetime-input.sc-tds-datetime:not(:focus)::-webkit-datetime-edit,.tds-datetime-input-md.sc-tds-datetime:not(:focus)::-webkit-datetime-edit,.tds-datetime-input-sm.sc-tds-datetime:not(:focus)::-webkit-datetime-edit{color:var(--tds-datetime-placeholder-color)}}.tds-datetime-input[type=datetime-local].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-md[type=datetime-local].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-sm[type=datetime-local].sc-tds-datetime~.icon-time.sc-tds-datetime{display:none}.tds-datetime-input[type=date].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-md[type=date].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-sm[type=date].sc-tds-datetime~.icon-time.sc-tds-datetime{display:none}.tds-datetime-input[type=month].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-md[type=month].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-sm[type=month].sc-tds-datetime~.icon-time.sc-tds-datetime{display:none}.tds-datetime-input[type=week].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-md[type=week].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-sm[type=week].sc-tds-datetime~.icon-time.sc-tds-datetime{display:none}.tds-datetime-input[type=time].sc-tds-datetime~.icon-datetime-local.sc-tds-datetime,.tds-datetime-input-md[type=time].sc-tds-datetime~.icon-datetime-local.sc-tds-datetime,.tds-datetime-input-sm[type=time].sc-tds-datetime~.icon-datetime-local.sc-tds-datetime{display:none}.tds-datetime-input.sc-tds-datetime{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-datetime-color);background-color:var(--tds-datetime-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.tds-datetime-input.sc-tds-datetime *.sc-tds-datetime{box-sizing:border-box}.tds-datetime-input.sc-tds-datetime:disabled{background-color:var(--tds-datetime-background-disabled);color:var(--tds-datetime-color-disabled);cursor:not-allowed}.tds-datetime-input.sc-tds-datetime:disabled~.tds-datetime-label-inside.sc-tds-datetime{color:var(--tds-datetime-label-disabled)}.tds-datetime-input-md.sc-tds-datetime{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-datetime-color);background-color:var(--tds-datetime-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.tds-datetime-input-md.sc-tds-datetime *.sc-tds-datetime{box-sizing:border-box}.tds-datetime-input-md.sc-tds-datetime:disabled{background-color:var(--tds-datetime-background-disabled);color:var(--tds-datetime-color-disabled);cursor:not-allowed}.tds-datetime-input-md.sc-tds-datetime:disabled~.tds-datetime-label-inside.sc-tds-datetime{color:var(--tds-datetime-label-disabled)}.tds-datetime-input-sm.sc-tds-datetime{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-datetime-color);background-color:var(--tds-datetime-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.tds-datetime-input-sm.sc-tds-datetime *.sc-tds-datetime{box-sizing:border-box}.tds-datetime-input-sm.sc-tds-datetime:disabled{background-color:var(--tds-datetime-background-disabled);color:var(--tds-datetime-color-disabled);cursor:not-allowed}.tds-datetime-input-sm.sc-tds-datetime:disabled~.tds-datetime-label-inside.sc-tds-datetime{color:var(--tds-datetime-label-disabled)}.tds-datetime-container.sc-tds-datetime{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-datetime-background);border-bottom:1px solid var(--tds-datetime-border-bottom);transition:border-bottom-color 200ms ease}.tds-datetime-container.sc-tds-datetime:hover{border-bottom-color:var(--tds-datetime-border-bottom-hover)}.tds-form-datetime-md.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{height:48px}.tds-form-datetime-sm.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{height:40px}.tds-datetime-input-container.sc-tds-datetime{position:relative;width:100%}.tds-datetime-input-container.sc-tds-datetime .datetime-icon.sc-tds-datetime{height:20px;width:20px;position:absolute;top:50%;transform:translateY(-50%);right:18px;pointer-events:none;color:var(--tds-datetime-icon)}.tds-datetime-label.sc-tds-datetime{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-datetime-label-color)}.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-datetime-label-inside-color);left:16px}.tds-datetime-label-inside.iphone.sc-tds-datetime{left:8px !important}.tds-form-datetime.sc-tds-datetime{display:block;min-width:208px;background:unset}.tds-form-datetime-nomin.sc-tds-datetime{min-width:auto}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{top:20px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{top:16px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{top:16px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.tds-datetime-focus.sc-tds-datetime .tds-datetime-input.sc-tds-datetime,.tds-datetime-focus.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime,.tds-datetime-focus.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime{border-radius:0;outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px;z-index:1}.tds-datetime-focus.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom:none}.tds-datetime-helper.sc-tds-datetime{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-datetime-helper)}.tds-datetime-helper.sc-tds-datetime .tds-helper.sc-tds-datetime{display:inline-flex;gap:8px}.tds-form-datetime-disabled.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom-color:transparent}.tds-form-datetime-disabled.sc-tds-datetime .datetime-icon.sc-tds-datetime tds-icon.sc-tds-datetime{color:var(--tds-datetime-icon-disabled)}.tds-form-datetime-disabled.sc-tds-datetime .tds-datetime-label.sc-tds-datetime{color:var(--tds-datetime-label-disabled);cursor:not-allowed}.tds-form-datetime-disabled.sc-tds-datetime .tds-datetime-helper.sc-tds-datetime{color:var(--tds-datetime-helper-disabled)}.tds-form-datetime-success.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom-color:var(--tds-datetime-border-bottom-success);color:var(--tds-datetime-color-success)}.tds-form-datetime-error.sc-tds-datetime .tds-datetime-helper.sc-tds-datetime{color:var(--tds-datetime-helper-error)}.tds-form-datetime-error.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom-color:var(--tds-datetime-border-bottom-error)}.tds-datetime-textcounter.sc-tds-datetime{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-datetime-textcounter);float:right}.tds-datetime-textcounter.sc-tds-datetime .tds-datetime-textcounter-divider.sc-tds-datetime{letter-spacing:var(--tds-detail-05-ls);color:var(--tds-datetime-textcounter-divider)}input[type=datetime-local].sc-tds-datetime::-webkit-inner-spin-button,input[type=datetime-local].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=date].sc-tds-datetime::-webkit-inner-spin-button,input[type=date].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=month].sc-tds-datetime::-webkit-inner-spin-button,input[type=month].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=week].sc-tds-datetime::-webkit-inner-spin-button,input[type=week].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=time].sc-tds-datetime::-webkit-inner-spin-button,input[type=time].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}@supports (-moz-appearance: none){.type-datetime-local.sc-tds-datetime .icon-datetime-local.sc-tds-datetime,.type-date.sc-tds-datetime .icon-datetime-local.sc-tds-datetime{display:none}}";
-const TdsDatetimeStyle0 = datetimeCss;
 
 const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.tdsChange = createEvent(this, "tdsChange", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
+        /** Sets an input type */
+        this.type = 'datetime-local';
+        /** Value of the input text */
+        this.value = '';
+        /** Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www  Format for date-time: YY-MM-DDTHH-MM */
+        this.defaultValue = 'none';
+        /** Set input in disabled state */
+        this.disabled = false;
+        /** Size of the input */
+        this.size = 'lg';
+        /** Resets min width rule */
+        this.noMinWidth = false;
+        /** Set the variant of the Datetime component. */
+        this.modeVariant = null;
+        /** Name property. Uses a unique ID as fallback if not specified. */
+        this.name = `datetime-${generateUniqueId()}`;
+        /** Autofocus for input */
+        this.autofocus = false;
+        /** Label text for the component */
+        this.label = '';
+        /** Position of the label */
+        this.labelPosition = 'no-label';
+        /** Helper text for the component */
+        this.helper = '';
         this.getDefaultValue = () => {
             const dateTimeObj = {
                 year: this.defaultValue.slice(0, 4),
@@ -37,23 +62,6 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
                     throw new Error('Invalid type.');
             }
         };
-        this.type = 'datetime-local';
-        this.value = '';
-        this.min = undefined;
-        this.max = undefined;
-        this.defaultValue = 'none';
-        this.disabled = false;
-        this.size = 'lg';
-        this.noMinWidth = false;
-        this.modeVariant = null;
-        this.name = `datetime-${generateUniqueId()}`;
-        this.state = undefined;
-        this.autofocus = false;
-        this.label = '';
-        this.labelPosition = 'no-label';
-        this.helper = '';
-        this.tdsAriaLabel = undefined;
-        this.focusInput = undefined;
     }
     /** Method that resets the value of the Datetime, using defaultValue if is not 'none' */
     async reset() {
@@ -146,8 +154,8 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
                 this.textInput = inputEl;
             }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, id: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label }), this.labelPosition === 'inside' && this.size !== 'sm' && this.label && (h("label", { key: '48d096356ad9f547bacbf407af12c4411d5dd45f', class: `tds-datetime-label-inside ${iphone && 'iphone'}`, htmlFor: this.name }, this.label)), h("div", { key: '0ea83c4003923ffed9b11ef22131000bb696a80f', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '6ab6fde60c3d8ce0ad212c0d248c597a23cc6ce7', size: "20px", name: "calendar", svgTitle: "Calendar" })), h("div", { key: '4c304db3c9e6159a7827b6a83c6f81d04cbf0d19', class: "datetime-icon icon-time" }, h("tds-icon", { key: '2a91a579dc5307d35ffbd47aa67616e2e692dd1c', size: "20px", name: "clock", svgTitle: "Clock" })))), this.helper && (h("div", { key: '4883298ade40b2177450f1af3cda0b02a9c24786', class: "tds-datetime-helper" }, h("div", { key: '5baaf00b0372f50341f1995c713e3cbece2c8a4d', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'a8d4aedbbba2e083578825efadbeaede47d83055', name: "error", size: "16px", svgTitle: "error" }), this.helper)))));
     }
-    static get style() { return TdsDatetimeStyle0; }
-}, [2, "tds-datetime", {
+    static get style() { return datetimeCss; }
+}, [258, "tds-datetime", {
         "type": [513],
         "value": [1537],
         "min": [1],

package/dist/components/tds-divider.js

@@ -1,4 +1,4 @@
-import { D as Divider, d as defineCustomElement$1 } from './p-381677ec.js';
+import { D as Divider, d as defineCustomElement$1 } from './p-FqP1yGh_.js';
 
 const TdsDivider = Divider;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-dropdown-option.js

@@ -1,4 +1,4 @@
-import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-6ef207b2.js';
+import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-Ee9QeMgy.js';
 
 const TdsDropdownOption = TdsDropdownOption$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-dropdown.js

@@ -1,4 +1,4 @@
-import { T as TdsDropdown$1, d as defineCustomElement$1 } from './p-2a2d66fe.js';
+import { T as TdsDropdown$1, d as defineCustomElement$1 } from './p-BhQM9_yR.js';
 
 const TdsDropdown = TdsDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-folder-tab.js

@@ -1,16 +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 folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none}:host ::slotted(*:focus-within)::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host div:not(.selected){background-color:var(--tds-folder-tab-background);position:relative}:host div:not(.selected)::before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:var(--tds-folder-tab-divider-color)}:host div:not(.selected) ::slotted(*){border-top:2px solid transparent;color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top:2px solid var(--tds-folder-tab-top-border-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled{background-color:var(--tds-folder-tab-item-background-disabled)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}:host div:not(.selected).disabled ::slotted(*:focus-visible){outline:none}:host div:not(.selected).disabled ::slotted(*:hover){cursor:not-allowed}:host div:not(.selected).disabled ::slotted(*::after){content:none}:host .selected{background-color:var(--tds-folder-tab-background-selected);border-top:2px solid var(--tds-folder-tab-border-selected)}:host .selected::after{content:\" \";background-color:var(--tds-folder-tab-divider-color);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host .selected:hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host .selected:hover:not(.disabled) ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) ::slotted(*){border-left-color:transparent}:host(.first) .selected{border-left:none}";
-const TdsFolderTabStyle0 = folderTabCss;
 
 const TdsFolderTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTab extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
-        this.tabWidth = undefined;
     }
     /** @internal Method to set the width of the tab. Used by the <tds-folder-tabs> */
     async setTabWidth(width) {
@@ -45,8 +46,8 @@ const TdsFolderTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTab exten
             }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'bef9798df6d9e27873ac28b481f1b61342dde861' }))));
     }
     get host() { return this; }
-    static get style() { return TdsFolderTabStyle0; }
-}, [1, "tds-folder-tab", {
+    static get style() { return folderTabCss; }
+}, [257, "tds-folder-tab", {
         "disabled": [4],
         "selected": [32],
         "tabWidth": [32],

package/dist/components/tds-folder-tabs.js

@@ -1,15 +1,27 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-within::before,:host .scroll-left-button:focus-within::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:\"\";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
-const TdsFolderTabsStyle0 = folderTabsCss;
 
 const TdsFolderTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTabs extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsChange = createEvent(this, "tdsChange", 7);
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = null;
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        this.buttonWidth = 0;
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
@@ -63,14 +75,6 @@ const TdsFolderTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTabs ext
                 }
             });
         };
-        this.modeVariant = null;
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.buttonWidth = 0;
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
@@ -168,16 +172,16 @@ const TdsFolderTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTabs ext
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '8c8c4916fe50279d530f99d21fef8f4ceb89fe55', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '5850bbcf52dfadf7a08dbe420916d98ed6d14b41', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '654c328d868d1f8d4e835aa3e953813415d9162d', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '294e02bcd45d662f556498b8f79179c98d5a9899', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '9506486a1d6a2415bc8213cf1c0ab8c7789ad82c', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'e721ba34d2d703bd0ee2fe833e7859f282b6b332', name: "chevron_left", size: "20px" })), h("slot", { key: 'ee2558c4a7d35d8d6355df59b735344151742884', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6ac20fbd52634a08bd6ef369a45fe0ebb7de9d5d', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '20a1096cec8ef7e121200f469761fac9a2a5086d', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: 'e079f0d843342d1aac64cacfbacefed6151f9059', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '747aa96f5385c04699168bae31c3942044725a10', name: "chevron_left", size: "20px" })), h("slot", { key: '08d6bb2da6f3edf676b35f7e032d901acff9f10e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '2a4b75885039d6410a69e34e4c56d46882461e43', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'a85ec055d4f485db7d64ce536438ade9d3988fab', name: "chevron_right", size: "20px" })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "selectedIndex": ["handleSelectedIndexUpdate"]
     }; }
-    static get style() { return TdsFolderTabsStyle0; }
-}, [1, "tds-folder-tabs", {
+    static get style() { return folderTabsCss; }
+}, [257, "tds-folder-tabs", {
         "modeVariant": [1, "mode-variant"],
         "defaultSelectedIndex": [2, "default-selected-index"],
         "selectedIndex": [514, "selected-index"],