@scania/tegel 1.18.0-1.18.0-tdsheaderitembeta.2 → 1.18.0-beta.2

package/dist/collection/components/button/button.css

@@ -189,369 +189,240 @@
   --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
 }
 
-button {
+:host {
   box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 4px;
+  text-decoration: none;
+  cursor: pointer;
+  position: relative;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host button {
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
   display: inline-flex;
   align-items: center;
   border-radius: 4px;
-  border: none;
+  border: 1px solid;
   box-shadow: none;
   position: relative;
   text-decoration: none;
   cursor: pointer;
-  height: 56px;
   padding: var(--tds-spacing-element-20);
-  border: 1px solid;
-}
-button * {
-  box-sizing: border-box;
-}
-button:disabled, button.disabled {
-  cursor: unset;
-}
-button:focus {
+  height: 56px;
   outline: none;
 }
-button:focus-visible {
+:host button:disabled, :host button.disabled {
+  cursor: not-allowed;
+}
+:host button:focus-visible {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-button.xs {
+:host button.xs {
   padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
   height: 24px;
   font-size: 12px;
   border-radius: 2px;
 }
-button.xs:focus-visible {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
-}
-button.sm {
+:host button.sm {
   padding: var(--tds-spacing-element-12);
   height: 40px;
 }
-button.sm.icon {
+:host button.sm.icon {
   padding: 10px var(--tds-spacing-element-12);
 }
-button.sm.only-icon {
+:host button.sm.only-icon {
   padding: 11px;
 }
-button.sm:focus-visible {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
-}
-button.md {
+:host button.md {
   padding: var(--tds-spacing-element-16);
   height: 48px;
 }
-button.md.icon {
+:host button.md.icon {
   padding: 14px var(--tds-spacing-element-16);
 }
-button.md.only-icon {
+:host button.md.only-icon {
   padding: 13px;
 }
-button.md:focus-visible {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
-}
-button.lg {
+:host button.lg {
   padding: var(--tds-spacing-element-20);
   height: 56px;
 }
-button.lg.icon {
+:host button.lg.icon {
   padding: 18px var(--tds-spacing-element-20);
 }
-button.lg.only-icon {
+:host button.lg.only-icon {
   padding: 17px;
 }
-button.lg:focus-visible {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
-}
-button.fullbleed {
+:host button.fullbleed {
   width: 100%;
   display: flex;
   justify-content: center;
 }
-button.primary {
+:host button.primary {
   background: var(--tds-btn-primary-background);
   border-color: var(--tds-btn-primary-border-color);
   color: var(--tds-btn-primary-color);
   outline-color: var(--tds-btn-primary-outline-color);
 }
-button.primary.icon {
+:host button.primary.icon {
   fill: var(--tds-btn-icon-primary-fill);
   color: var(--tds-btn-icon-primary-fill);
   fill: var(--tds-btn-icon-primary-color);
   color: var(--tds-btn-icon-primary-color);
 }
-button.primary:hover {
+:host button.primary:hover {
   background: var(--tds-btn-primary-background-hover);
   border-color: var(--tds-btn-primary-border-color-hover);
   color: var(--tds-btn-primary-color-hover);
   outline-color: var(--tds-btn-primary-outline-color-hover);
 }
-button.primary:hover:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-primary-fill-hover);
-  color: var(--tds-btn-icon-primary-fill-hover);
-  fill: var(--tds-btn-icon-primary-color-hover);
-  color: var(--tds-btn-icon-primary-color-hover);
-}
-button.primary:focus-visible {
+:host button.primary:focus-visible {
   background: var(--tds-btn-primary-background-focus);
   border-color: var(--tds-btn-primary-border-color-focus);
   color: var(--tds-btn-primary-color-focus);
   outline-color: var(--tds-btn-primary-outline-color-focus);
 }
-button.primary:focus-visible ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-primary-fill-focus);
-  color: var(--tds-btn-icon-primary-fill-focus);
-  fill: var(--tds-btn-icon-primary-color-focus);
-  color: var(--tds-btn-icon-primary-color-focus);
-}
-button.primary:active, button.primary.active {
+:host button.primary:active, :host button.primary.active {
   background: var(--tds-btn-primary-background-active);
   border-color: var(--tds-btn-primary-border-color-active);
   color: var(--tds-btn-primary-color-active);
   outline-color: var(--tds-btn-primary-outline-color-active);
 }
-button.primary:active:not(.disabled) ::slotted([slot=icon]), button.primary.active:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-primary-fill-active);
-  color: var(--tds-btn-icon-primary-fill-active);
-  fill: var(--tds-btn-icon-primary-color-active);
-  color: var(--tds-btn-icon-primary-color-active);
-}
-button.primary.disabled, button.primary:disabled {
-  cursor: not-allowed;
+:host button.primary.disabled, :host button.primary:disabled {
   background: var(--tds-btn-primary-background-disabled);
-  cursor: not-allowed;
   border-color: var(--tds-btn-primary-border-color-disabled);
-  cursor: not-allowed;
   color: var(--tds-btn-primary-color-disabled);
-  cursor: not-allowed;
   outline-color: var(--tds-btn-primary-outline-color-disabled);
 }
-button.secondary {
+:host button.secondary {
   background: var(--tds-btn-secondary-background);
   border-color: var(--tds-btn-secondary-border-color);
   color: var(--tds-btn-secondary-color);
   outline-color: var(--tds-btn-secondary-outline-color);
 }
-button.secondary.icon {
+:host button.secondary.icon {
   fill: var(--tds-btn-icon-secondary-fill);
   color: var(--tds-btn-icon-secondary-fill);
   fill: var(--tds-btn-icon-secondary-color);
   color: var(--tds-btn-icon-secondary-color);
 }
-button.secondary:hover {
+:host button.secondary:hover {
   background: var(--tds-btn-secondary-background-hover);
   border-color: var(--tds-btn-secondary-border-color-hover);
   color: var(--tds-btn-secondary-color-hover);
   outline-color: var(--tds-btn-secondary-outline-color-hover);
 }
-button.secondary:hover:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-secondary-fill-hover);
-  color: var(--tds-btn-icon-secondary-fill-hover);
-  fill: var(--tds-btn-icon-secondary-color-hover);
-  color: var(--tds-btn-icon-secondary-color-hover);
-}
-button.secondary:focus-visible {
+:host button.secondary:focus-visible {
   background: var(--tds-btn-secondary-background-focus);
   border-color: var(--tds-btn-secondary-border-color-focus);
   color: var(--tds-btn-secondary-color-focus);
   outline-color: var(--tds-btn-secondary-outline-color-focus);
 }
-button.secondary:focus-visible ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-secondary-fill-focus);
-  color: var(--tds-btn-icon-secondary-fill-focus);
-  fill: var(--tds-btn-icon-secondary-color-focus);
-  color: var(--tds-btn-icon-secondary-color-focus);
-}
-button.secondary:active, button.secondary.active {
+:host button.secondary:active, :host button.secondary.active {
   background: var(--tds-btn-secondary-background-active);
   border-color: var(--tds-btn-secondary-border-color-active);
   color: var(--tds-btn-secondary-color-active);
   outline-color: var(--tds-btn-secondary-outline-color-active);
 }
-button.secondary:active:not(.disabled) ::slotted([slot=icon]), button.secondary.active:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-secondary-fill-active);
-  color: var(--tds-btn-icon-secondary-fill-active);
-  fill: var(--tds-btn-icon-secondary-color-active);
-  color: var(--tds-btn-icon-secondary-color-active);
-}
-button.secondary.disabled, button.secondary:disabled {
-  cursor: not-allowed;
+:host button.secondary.disabled, :host button.secondary:disabled {
   background: var(--tds-btn-secondary-background-disabled);
-  cursor: not-allowed;
   border-color: var(--tds-btn-secondary-border-color-disabled);
-  cursor: not-allowed;
   color: var(--tds-btn-secondary-color-disabled);
-  cursor: not-allowed;
   outline-color: var(--tds-btn-secondary-outline-color-disabled);
 }
-button.ghost {
+:host button.ghost {
   background: var(--tds-btn-ghost-background);
   border-color: var(--tds-btn-ghost-border-color);
   color: var(--tds-btn-ghost-color);
   outline-color: var(--tds-btn-ghost-outline-color);
 }
-button.ghost.icon {
+:host button.ghost.icon {
   fill: var(--tds-btn-icon-ghost-fill);
   color: var(--tds-btn-icon-ghost-fill);
   fill: var(--tds-btn-icon-ghost-color);
   color: var(--tds-btn-icon-ghost-color);
 }
-button.ghost:hover {
+:host button.ghost:hover {
   background: var(--tds-btn-ghost-background-hover);
   border-color: var(--tds-btn-ghost-border-color-hover);
   color: var(--tds-btn-ghost-color-hover);
   outline-color: var(--tds-btn-ghost-outline-color-hover);
 }
-button.ghost:hover:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-ghost-fill-hover);
-  color: var(--tds-btn-icon-ghost-fill-hover);
-  fill: var(--tds-btn-icon-ghost-color-hover);
-  color: var(--tds-btn-icon-ghost-color-hover);
-}
-button.ghost:focus-visible {
+:host button.ghost:focus-visible {
   background: var(--tds-btn-ghost-background-focus);
   border-color: var(--tds-btn-ghost-border-color-focus);
   color: var(--tds-btn-ghost-color-focus);
   outline-color: var(--tds-btn-ghost-outline-color-focus);
 }
-button.ghost:focus-visible ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-ghost-fill-focus);
-  color: var(--tds-btn-icon-ghost-fill-focus);
-  fill: var(--tds-btn-icon-ghost-color-focus);
-  color: var(--tds-btn-icon-ghost-color-focus);
-}
-button.ghost:active, button.ghost.active {
+:host button.ghost:active, :host button.ghost.active {
   background: var(--tds-btn-ghost-background-active);
   border-color: var(--tds-btn-ghost-border-color-active);
   color: var(--tds-btn-ghost-color-active);
   outline-color: var(--tds-btn-ghost-outline-color-active);
 }
-button.ghost:active:not(.disabled) ::slotted([slot=icon]), button.ghost.active:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-ghost-fill-active);
-  color: var(--tds-btn-icon-ghost-fill-active);
-  fill: var(--tds-btn-icon-ghost-color-active);
-  color: var(--tds-btn-icon-ghost-color-active);
-}
-button.ghost.disabled, button.ghost:disabled {
-  cursor: not-allowed;
+:host button.ghost.disabled, :host button.ghost:disabled {
   background: var(--tds-btn-ghost-background-disabled);
-  cursor: not-allowed;
   border-color: var(--tds-btn-ghost-border-color-disabled);
-  cursor: not-allowed;
   color: var(--tds-btn-ghost-color-disabled);
-  cursor: not-allowed;
   outline-color: var(--tds-btn-ghost-outline-color-disabled);
 }
-button.danger {
+:host button.danger {
   background: var(--tds-btn-danger-background);
   border-color: var(--tds-btn-danger-border-color);
   color: var(--tds-btn-danger-color);
   outline-color: var(--tds-btn-danger-outline-color);
 }
-button.danger.icon {
+:host button.danger.icon {
   fill: var(--tds-btn-icon-danger-fill);
   color: var(--tds-btn-icon-danger-fill);
   fill: var(--tds-btn-icon-danger-color);
   color: var(--tds-btn-icon-danger-color);
 }
-button.danger:hover {
+:host button.danger:hover {
   background: var(--tds-btn-danger-background-hover);
   border-color: var(--tds-btn-danger-border-color-hover);
   color: var(--tds-btn-danger-color-hover);
   outline-color: var(--tds-btn-danger-outline-color-hover);
 }
-button.danger:hover:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-danger-fill-hover);
-  color: var(--tds-btn-icon-danger-fill-hover);
-  fill: var(--tds-btn-icon-danger-color-hover);
-  color: var(--tds-btn-icon-danger-color-hover);
-}
-button.danger:focus-visible {
+:host button.danger:focus-visible {
   background: var(--tds-btn-danger-background-focus);
   border-color: var(--tds-btn-danger-border-color-focus);
   color: var(--tds-btn-danger-color-focus);
   outline-color: var(--tds-btn-danger-outline-color-focus);
 }
-button.danger:focus-visible ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-danger-fill-focus);
-  color: var(--tds-btn-icon-danger-fill-focus);
-  fill: var(--tds-btn-icon-danger-color-focus);
-  color: var(--tds-btn-icon-danger-color-focus);
-}
-button.danger:active, button.danger.active {
+:host button.danger:active, :host button.danger.active {
   background: var(--tds-btn-danger-background-active);
   border-color: var(--tds-btn-danger-border-color-active);
   color: var(--tds-btn-danger-color-active);
   outline-color: var(--tds-btn-danger-outline-color-active);
 }
-button.danger:active:not(.disabled) ::slotted([slot=icon]), button.danger.active:not(.disabled) ::slotted([slot=icon]) {
-  fill: var(--tds-btn-icon-danger-fill-active);
-  color: var(--tds-btn-icon-danger-fill-active);
-  fill: var(--tds-btn-icon-danger-color-active);
-  color: var(--tds-btn-icon-danger-color-active);
-}
-button.danger.disabled, button.danger:disabled {
-  cursor: not-allowed;
+:host button.danger.disabled, :host button.danger:disabled {
   background: var(--tds-btn-danger-background-disabled);
-  cursor: not-allowed;
   border-color: var(--tds-btn-danger-border-color-disabled);
-  cursor: not-allowed;
   color: var(--tds-btn-danger-color-disabled);
-  cursor: not-allowed;
   outline-color: var(--tds-btn-danger-outline-color-disabled);
 }
-
-:host(tds-button) {
-  display: inline-flex;
-  align-items: center;
-}
-:host(tds-button) ::slotted([slot=icon]) {
+:host ::slotted([slot=icon]) {
   width: var(--tds-spacing-element-20);
   height: var(--tds-spacing-element-20);
 }
-:host(tds-button) .sm ::slotted([slot=icon]) {
+:host .sm ::slotted([slot=icon]) {
   width: var(--tds-spacing-element-16);
   height: var(--tds-spacing-element-16);
 }
-
-:host(tds-button[disabled=true]) {
+:host[disabled=true] {
   pointer-events: none;
 }
-:host(tds-button[disabled=true]) ::slotted([slot=icon]) {
+:host[disabled=true] ::slotted([slot=icon]) {
   pointer-events: none;
 }
-
-:host(tds-button[fullbleed]) {
+:host[fullbleed] {
   width: 100%;
   justify-content: center;
-}
-
-tds-button button {
-  display: inline-flex;
-  align-items: center;
-}
-tds-button button.sm::slotted([slot=icon]) {
-  margin-left: var(--tds-spacing-element-12);
-  width: var(--tds-spacing-element-16);
-  height: var(--tds-spacing-element-16);
-}
-tds-button button.md::slotted([slot=icon]) {
-  margin-left: var(--tds-spacing-element-16);
-  width: var(--tds-spacing-element-20);
-  height: var(--tds-spacing-element-20);
-}
-tds-button button.lg::slotted([slot=icon]) {
-  margin-left: var(--tds-spacing-element-20);
-  width: var(--tds-spacing-element-20);
-  height: var(--tds-spacing-element-20);
-}
-tds-button button.only-icon::slotted([slot=icon]) {
-  margin-left: 0;
 }

package/dist/collection/components/button/button.js

@@ -21,7 +21,7 @@ export class TdsButton {
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { key: '5a23d142b00352b282b888daac7ab1b319f2916b', class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { key: '7cef70a1d3c191304dc7c1c62f43184f45c6acf7', type: this.type, disabled: this.disabled, class: {
+        return (h(Host, { key: 'bc1016f248709a78c51b655ed9a7e6e5d1645a48', class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { key: 'b1968dfbbd3b2efb212833c32b1823a1b33680d2', type: this.type, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -34,7 +34,7 @@ export class TdsButton {
                 'fullbleed': this.fullbleed,
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
-            } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '206ad435a82571501e4eac3d2cc6e83b70261487', name: "label" }), hasIconSlot && h("slot", { key: '8fa3440787c237542fb2ab0005aa1cda79af70bf', name: "icon" }))));
+            } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '47b7c91724aaac51684bd990c4c6bb8304f2ffa8', name: "label" }), hasIconSlot && h("slot", { key: '17a004151ddd450efd4ebc74220aa6b449fc81cd', name: "icon" }))));
     }
     static get is() { return "tds-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/card/card.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 import hasSlot from "../../utils/hasSlot";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot header - Slot for the Card header.
  * @slot subheader - Slot for the Card subheader.
@@ -26,7 +27,8 @@ export class TdsCard {
             const usesBodySlot = hasSlot('body', this.host);
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
-            return (h("div", { class: this.stretch && 'stretch' }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, 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` })));
+            const prefixedTagNames = getPrefixedTagNames(this.host);
+            return (h("div", { class: this.stretch && 'stretch' }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, 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(prefixedTagNames.tdsDivider, null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
         this.modeVariant = null;
         this.imagePlacement = 'below-header';
@@ -40,7 +42,7 @@ export class TdsCard {
         this.cardId = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'd777b6ef9815b43c55749ff8a03ef5d8cb21cf74', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}`, onClick: () => {
+        return (h(Host, { key: '7919fe89b0e312b6f75439d35382d86141f5f3e5', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}`, onClick: () => {
                 if (this.clickable) {
                     this.handleClick();
                 }

package/dist/collection/components/checkbox/checkbox.js

@@ -44,11 +44,11 @@ export class TdsCheckbox {
         this.tdsBlur.emit(event);
     }
     render() {
-        return (h("div", { key: '0efb982ab13c1d75681614675b649e010707b701', class: "tds-checkbox" }, h("input", { key: '834b29962978ea1cf7249018e6b7eea2417da5f4',
+        return (h("div", { key: '2dcea9f37f97567ee76642f57c5f6a8d906459bd', class: "tds-checkbox" }, h("input", { key: '65c80f9b2adf4ff01858cdb52dd22e99a0e35064',
             // eslint-disable-next-line no-return-assign
             ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: '2150346b336440768beac655de035bf470f9e492', htmlFor: this.checkboxId }, h("slot", { key: 'df61654810e46b8707709d86bae7bdfd627724ee', name: "label" }))));
+            } }), h("label", { key: '14c426721c7c13700b8f81428b048da05eeed964', htmlFor: this.checkboxId }, h("slot", { key: '79539b265977d9a4a73a2c397ed9722597c5dfc4', name: "label" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/chip/chip.js

@@ -65,7 +65,7 @@ export class TdsChip {
             'suffix': hasSuffixSlot,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: '55b7fc609e99fb0fa5f5298306ca3aa0eed6a2f8' }, h("div", { key: '4b791c7f631c7dd60702148943bd6a8caa37d463', class: "component" }, h("div", { key: 'f119cfec2efac0f10e14b6af442ab420dbf4839a', class: chipClasses }, h("input", Object.assign({ key: 'f31ded36f63135c096ae85a8048bc195024b3347', type: this.type, id: this.chipId }, inputAttributes)), h("label", { key: '377c2a90bfbf870e1dafaf8f680ccad1a68ae91f', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: 'ca26c5285118539e6ced83e8c2c3ae10618576e9', name: "prefix" }), hasLabelSlot && h("slot", { key: 'dee7bf1815cd513bf6531eb8b0d02ba20b738e9f', name: "label" }), hasSuffixSlot && h("slot", { key: '489d7d0ba260cb9ccacef37cb7f9125a1619e4d2', name: "suffix" }))))));
+        return (h(Host, { key: 'e200e4b70d546e6aa6afe5c5f3c1fd32b8592007' }, h("div", { key: 'd65350d24487c61af52d46343c6b0d6e69a87000', class: "component" }, h("div", { key: '688892e439a0c258d539b2391d7a63606409525d', class: chipClasses }, h("input", Object.assign({ key: '4cb5f915bb6c4ec9962daad0c7e969cd2fa06e2c', type: this.type, id: this.chipId }, inputAttributes)), h("label", { key: '103cb30a64c4eb294bd3d1f69cfc7ec931e635f6', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '8461ef357e4c27a202cc9f59b43fccf350974329', name: "prefix" }), hasLabelSlot && h("slot", { key: 'f707d5f78e01223d4493728e828abc104eb466d2', name: "label" }), hasSuffixSlot && h("slot", { key: '12caf12952cc7ba7ad6b71f55639696d798982dc', name: "suffix" }))))));
     }
     static get is() { return "tds-chip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/datetime/datetime.css

@@ -301,7 +301,7 @@
 .tds-form-datetime-disabled .tds-datetime-container {
   border-bottom-color: transparent;
 }
-.tds-form-datetime-disabled .datetime-icon tds-icon {
+.tds-form-datetime-disabled .datetime-icon {
   color: var(--tds-datetime-icon-disabled);
 }
 .tds-form-datetime-disabled .tds-datetime-label {
@@ -326,7 +326,7 @@
 .tds-form-datetime-error .tds-datetime-bar::before, .tds-form-datetime-error .tds-datetime-bar::after {
   background: var(--tds-datetime-bar-error);
 }
-.tds-form-datetime-error .datetime-icon tds-icon {
+.tds-form-datetime-error .datetime-icon {
   color: var(--tds-datetime-icon-error);
 }
 

package/dist/collection/components/datetime/datetime.js

@@ -1,4 +1,5 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../utils/tagName";
 export class TdsDatetime {
     constructor() {
         this.getDefaultValue = () => {
@@ -73,6 +74,7 @@ export class TdsDatetime {
         this.tdsBlur.emit(e);
     }
     render() {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         let className = ' tds-datetime-input';
         if (this.size === 'md') {
             className += `${className}-md`;
@@ -80,7 +82,7 @@ export class TdsDatetime {
         if (this.size === 'sm') {
             className += `${className}-sm`;
         }
-        return (h("div", { key: 'bbf891d5e12a402775f253dc7010aa57ac0aa3b2', class: `
+        return (h("div", { key: '2133b5518351bb4b8a6a82e37b3ef64adc6e98e3', class: `
         ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
         ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
         ${this.value.length > 0 ? 'tds-datetime-data' : ''}
@@ -90,7 +92,7 @@ export class TdsDatetime {
         ${this.state === 'error' || this.state === 'success'
                 ? `tds-form-datetime-${this.state}`
                 : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { key: '5d82dd3550ec13ee724f27ed351c825a68fef879', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '6c33d37db85b9d2456bf798b5ebc3511278ed20c', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '8180010cb4c1a486ca0ad38cf5e071dc2c3cdf8e', class: "tds-datetime-input-container" }, h("input", { key: '57ebc684980064f0e80c2098f6b4ecce43c51043', ref: (inputEl) => (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, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '201c1a161d7a432c25fe950f1b0ab89b39661007', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '5d1d5507b58eefedbd4bb547749850649d73279b', size: "20px", name: "calendar" })), h("div", { key: '627fcb60cefc9652cd30234f300e77c5abd36934', class: "datetime-icon icon-time" }, h("tds-icon", { key: 'e44e6fc4e7eaf8979ecfcc69d57c36fd00bde8b6', size: "20px", name: "clock" }))), h("div", { key: 'c167492c99eb44ab832b70d9a814455c54a5135b', class: "tds-datetime-bar" })), this.helper && (h("div", { key: '67a91d166c2ef9653518add8f16d2d850dd1b4cf', class: "tds-datetime-helper" }, h("div", { key: '1dc9e8119c99d15a0f72cdf8320982e2edbe34d7', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'fec21bee110bd7a4e83bf44b23961713d5d63511', name: "error", size: "16px" }), this.helper)))));
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { key: 'a74df0aa8cfb210eb6d15dc3b1e0a2743ddfbb1b', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'b6beb7697e9aa94db692644c692790a6c80d18e8', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'b74e3ae0f6ef6bff8fcaa6603b4cb91b0753d16f', class: "tds-datetime-input-container" }, h("input", { key: 'c80f6949e442242b991712d8256435b3ea91d0fb', ref: (inputEl) => (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, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '25fe9159c890b94f56bdbcef2167219af063093e', class: "datetime-icon icon-datetime-local" }, h(prefixedTagNames.tdsIcon, { key: 'b9adc2450c44f29fa8e1a84d16a3c999e314f84e', size: "20px", name: "calendar" })), h("div", { key: '3b883bc9fb956f3d53ebc0bb220243a3334baa51', class: "datetime-icon icon-time" }, h(prefixedTagNames.tdsIcon, { key: '1035445f66725caace6486e042435a6167bf31fb', size: "20px", name: "clock" }))), h("div", { key: '0c2852861c3a90677a060525217fee8348c5e037', class: "tds-datetime-bar" })), this.helper && (h("div", { key: '8bbfab83045c3d9151d5c5d6d17a9a39b8632f3a', class: "tds-datetime-helper" }, h("div", { key: 'cb4dbf4e14ec82c9c3eb279d427e24d38bf560ce', class: "tds-helper" }, this.state === 'error' && h(prefixedTagNames.tdsIcon, { key: '0ac05beaffc4bd473d9ee4f388f53383833b939b', name: "error", size: "16px" }), this.helper)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -465,6 +467,7 @@ export class TdsDatetime {
             }
         };
     }
+    static get elementRef() { return "host"; }
     static get listeners() {
         return [{
                 "name": "focus",

package/dist/collection/components/divider/divider.js

@@ -4,7 +4,7 @@ export class Divider {
         this.orientation = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '52a57f6bab64f6329412bbab154f213864382e98', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: '5ba2a5d20d84748b4b76e7ec24155f29cab69bc5', class: `divider ${this.orientation}` })));
+        return (h(Host, { key: '5954ae4e797bd954c8f63c185591525783bdd727', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: '9729c0940d33b4ccf5b1c4cb6bc04f6a2804b30d', class: `divider ${this.orientation}` })));
     }
     static get is() { return "tds-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,14 +1,13 @@
 import { Host, h, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
+import { findClosestComponent } from "../../../utils/findClosestComponent";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the option label text.
  */
 export class TdsDropdownOption {
     constructor() {
         this.componentWillRender = () => {
-            this.parentElement =
-                this.host.parentElement.tagName === 'TDS-DROPDOWN'
-                    ? this.host.parentElement
-                    : this.host.getRootNode().host;
+            this.parentElement = findClosestComponent(this.host, 'tdsDropdown');
             this.multiselect = this.parentElement.multiselect;
             this.size = this.parentElement.size;
             this.label = this.host.textContent.trim();
@@ -62,7 +61,8 @@ export class TdsDropdownOption {
         this.selected = selected;
     }
     render() {
-        return (h(Host, { key: '1cb00a19c5dbcc47e1b2bc97d1d5ccc8ac5a532a', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: '5deaf44c7306f4b1856200bf0a5640e99fcb449d', class: `dropdown-option 
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '1ae8430247cd5aaa9c1fbaa8a01220bb28352f7e', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'b2bf323c6907de57720cfec607e1d53f6b951cdb', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -70,13 +70,13 @@ export class TdsDropdownOption {
                 if (event.key === 'Escape') {
                     this.parentElement.close();
                 }
-            } }, h("tds-checkbox", { onTdsChange: (event) => {
+            } }, h(prefixedTagNames.tdsCheckbox, { onTdsChange: (event) => {
                 this.handleMultiselect(event);
             }, disabled: this.disabled, checked: this.selected, class: {
                 [this.size]: true,
             } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
                 this.handleSingleSelect();
-            }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
+            }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h(prefixedTagNames.tdsIcon, { name: "tick", size: "16px" })))))));
     }
     static get is() { return "tds-dropdown-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.css

@@ -157,7 +157,7 @@
 :host .filter input:disabled::placeholder {
   color: var(--tds-dropdown-disabled-color);
 }
-:host .filter tds-icon {
+:host .filter .icon {
   cursor: pointer;
 }
 :host .filter .menu-icon {
@@ -402,9 +402,9 @@ body {
 :host .menu-icon {
   color: var(--tds-dropdown-menu-icon-color);
 }
-:host tds-icon {
+:host .icon {
   transition: transform 0.2s ease-in-out;
 }
-:host tds-icon.open {
+:host .icon.open {
   transform: rotateZ(180deg);
 }