@scania/tegel 1.3.3-event-types.0 → 1.4.0

package/dist/components/side-menu-item.js

@@ -4,85 +4,85 @@ import { d as dfs } from './dfs.js';
 const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
 
 const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.selected = false;
-    this.active = false;
-    this.collapsed = false;
-  }
-  updateSlotted(searchPredicate, mutationCallback) {
-    const assignedElements = this.slotEl.assignedElements({ flatten: true });
-    const firstSlottedElement = assignedElements[0];
-    if (firstSlottedElement) {
-      const foundElement = dfs(firstSlottedElement, searchPredicate);
-      if (foundElement) {
-        mutationCallback(foundElement);
-      }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.selected = false;
+        this.active = false;
+        this.collapsed = false;
     }
-  }
-  /**
-   * This function is needed because we can't use CSS selectors to style something in the light dom
-   */
-  updateSlottedElements() {
-    if (this.slotEl) {
-      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
-      const addIconClass = (element) => {
-        element.classList.add('__tds-side-menu-item-icon');
-        if (this.collapsed) {
-          element.classList.add('__tds-side-menu-item-icon-collapsed');
+    updateSlotted(searchPredicate, mutationCallback) {
+        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        const firstSlottedElement = assignedElements[0];
+        if (firstSlottedElement) {
+            const foundElement = dfs(firstSlottedElement, searchPredicate);
+            if (foundElement) {
+                mutationCallback(foundElement);
+            }
         }
-        else {
-          element.classList.remove('__tds-side-menu-item-icon-collapsed');
+    }
+    /**
+     * This function is needed because we can't use CSS selectors to style something in the light dom
+     */
+    updateSlottedElements() {
+        if (this.slotEl) {
+            const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
+            const addIconClass = (element) => {
+                element.classList.add('__tds-side-menu-item-icon');
+                if (this.collapsed) {
+                    element.classList.add('__tds-side-menu-item-icon-collapsed');
+                }
+                else {
+                    element.classList.remove('__tds-side-menu-item-icon-collapsed');
+                }
+            };
+            this.updateSlotted(isIconOrSvg, addIconClass);
         }
-      };
-      this.updateSlotted(isIconOrSvg, addIconClass);
     }
-  }
-  connectedCallback() {
-    var _a;
-    // closest() will return null if side-menu-item is inside a shadowRoot that
-    // does not contain a side-menu. This is the case for the side-menu-dropdown.
-    this.sideMenuEl = this.host.closest('tds-side-menu');
-    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
-  }
-  componentDidLoad() {
-    this.slotEl = this.host.shadowRoot.querySelector('slot');
-    this.updateSlottedElements();
-    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
-  }
-  collapseSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-    this.updateSlottedElements();
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'component': true,
-        'component-selected': this.selected,
-        'component-active': this.active,
-        'component-collapsed': this.collapsed,
-      } }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get style() { return sideMenuItemCss; }
+    connectedCallback() {
+        var _a;
+        // closest() will return null if side-menu-item is inside a shadowRoot that
+        // does not contain a side-menu. This is the case for the side-menu-dropdown.
+        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+    }
+    componentDidLoad() {
+        this.slotEl = this.host.shadowRoot.querySelector('slot');
+        this.updateSlottedElements();
+        this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+    }
+    collapseSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+        this.updateSlottedElements();
+    }
+    render() {
+        return (h(Host, null, h("div", { class: {
+                'component': true,
+                'component-selected': this.selected,
+                'component-active': this.active,
+                'component-collapsed': this.collapsed,
+            } }, h("slot", null))));
+    }
+    get host() { return this; }
+    static get style() { return sideMenuItemCss; }
 }, [1, "tds-side-menu-item", {
-    "selected": [4],
-    "active": [4],
-    "collapsed": [32]
-  }, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
+        "selected": [4],
+        "active": [4],
+        "collapsed": [32]
+    }, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-side-menu-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-side-menu-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsSideMenuItem);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-side-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-side-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsSideMenuItem);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/side-menu-user-image.js

@@ -3,33 +3,33 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
 
 const TdsSideMenuUserImage = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUserImage extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.src = undefined;
-    this.alt = undefined;
-  }
-  render() {
-    return (h(Host, null, h("slot", null), this.src && h("img", { src: this.src, alt: this.alt })));
-  }
-  static get style() { return sideMenuUserImageCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.src = undefined;
+        this.alt = undefined;
+    }
+    render() {
+        return (h(Host, null, h("slot", null), this.src && h("img", { src: this.src, alt: this.alt })));
+    }
+    static get style() { return sideMenuUserImageCss; }
 }, [1, "tds-side-menu-user-image", {
-    "src": [1],
-    "alt": [1]
-  }]);
+        "src": [1],
+        "alt": [1]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-side-menu-user-image"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-side-menu-user-image":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsSideMenuUserImage);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-side-menu-user-image"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-side-menu-user-image":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsSideMenuUserImage);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/side-menu-user-label.js

@@ -3,33 +3,33 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
 
 const TdsSideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUserLabel extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.heading = undefined;
-    this.subheading = undefined;
-  }
-  render() {
-    return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
-  }
-  static get style() { return sideMenuUserLabelCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.heading = undefined;
+        this.subheading = undefined;
+    }
+    render() {
+        return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
+    }
+    static get style() { return sideMenuUserLabelCss; }
 }, [1, "tds-side-menu-user-label", {
-    "heading": [1],
-    "subheading": [1]
-  }]);
+        "heading": [1],
+        "subheading": [1]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-side-menu-user-label"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-side-menu-user-label":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsSideMenuUserLabel);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-side-menu-user-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-side-menu-user-label":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsSideMenuUserLabel);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/tds-accordion-item.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface TdsAccordionItem extends Components.TdsAccordionItem, HTMLElement {}
 export const TdsAccordionItem: {
-  prototype: TdsAccordionItem;
-  new (): TdsAccordionItem;
+    prototype: TdsAccordionItem;
+    new (): TdsAccordionItem;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -4,61 +4,61 @@ import { d as defineCustomElement$2 } from './icon.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:focus,.tds-accordion-item.disabled:focus *,.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:focus .tds-accordion-header-icon-start,.tds-accordion-item.disabled:focus .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:focus .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:focus .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:focus{border-top:1px solid var(--tds-accordion-border-focus)}.tds-accordion-item[disabled=true]:focus{border-color:var(--tds-accordion-border)}:host(:focus) .tds-accordion-item{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-focus);outline:none}:host(:hover) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-hover)}:host(:active) .tds-accordion-header-icon-start,:host(:active) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active);outline:none}";
 
 const TdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordionItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.tdsToggle = createEvent(this, "tdsToggle", 7);
-    this.header = '';
-    this.expandIconPosition = 'end';
-    this.disabled = false;
-    this.expanded = false;
-    this.paddingReset = false;
-  }
-  /** Method for toggling the expanded state of the Accordion Item. */
-  async toggleAccordionItem() {
-    // This is negated in order to emit the value the Accordion Item will have after it has expanded/redacted.
-    const event = this.tdsToggle.emit({
-      expanded: !this.expanded,
-    });
-    if (!event.defaultPrevented) {
-      this.expanded = !this.expanded;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tdsToggle = createEvent(this, "tdsToggle", 7);
+        this.header = '';
+        this.expandIconPosition = 'end';
+        this.disabled = false;
+        this.expanded = false;
+        this.paddingReset = false;
     }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: `tds-accordion-item
+    /** Method for toggling the expanded state of the Accordion Item. */
+    async toggleAccordionItem() {
+        // This is negated in order to emit the value the Accordion Item will have after it has expanded/redacted.
+        const event = this.tdsToggle.emit({
+            expanded: !this.expanded,
+        });
+        if (!event.defaultPrevented) {
+            this.expanded = !this.expanded;
+        }
+    }
+    render() {
+        return (h(Host, null, h("div", { class: `tds-accordion-item
         ${this.disabled ? 'disabled' : ''}
         ${this.expanded ? 'expanded' : ''}
         ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { class: "tds-accordion-title" }, this.header, h("slot", { name: "header" })), h("div", { class: "tds-accordion-icon" }, h("tds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `tds-accordion-panel
             ${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
             ` }, h("slot", null)))));
-  }
-  static get style() { return accordionItemCss; }
+    }
+    static get style() { return accordionItemCss; }
 }, [1, "tds-accordion-item", {
-    "header": [1],
-    "expandIconPosition": [1, "expand-icon-position"],
-    "disabled": [4],
-    "expanded": [4],
-    "paddingReset": [4, "padding-reset"],
-    "toggleAccordionItem": [64]
-  }]);
+        "header": [1],
+        "expandIconPosition": [1, "expand-icon-position"],
+        "disabled": [4],
+        "expanded": [4],
+        "paddingReset": [4, "padding-reset"],
+        "toggleAccordionItem": [64]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-accordion-item", "tds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-accordion-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsAccordionItem$1);
-      }
-      break;
-    case "tds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-accordion-item", "tds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-accordion-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsAccordionItem$1);
+            }
+            break;
+        case "tds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 

package/dist/components/tds-accordion.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface TdsAccordion extends Components.TdsAccordion, HTMLElement {}
 export const TdsAccordion: {
-  prototype: TdsAccordion;
-  new (): TdsAccordion;
+    prototype: TdsAccordion;
+    new (): TdsAccordion;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/tds-accordion.js

@@ -3,31 +3,31 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const accordionCss = ":host{display:block;box-sizing:border-box}:host *{box-sizing:border-box}:host .tds-accordion-header-icon-start,:host .tds-accordion-header-icon-end{position:relative}:host(:focus){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-focus);outline:none}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start::after,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end::after{border-color:var(--tds-accordion-border-focus)}:host(:focus) .disabled,:host(:focus) .disabled *{cursor:not-allowed}:host(:focus) .disabled .tds-accordion-header-icon-start,:host(:focus) .disabled .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}:host(:focus) .disabled .tds-accordion-header-icon-start::after,:host(:focus) .disabled .tds-accordion-header-icon-end::after{border-color:transparent}:host(:active) .tds-accordion-header-icon-start,:host(:active) .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)}";
 
 const TdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordion extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.modeVariant = null;
-  }
-  render() {
-    return (h(Host, { class: `tds-accordion ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
-  }
-  static get style() { return accordionCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.modeVariant = null;
+    }
+    render() {
+        return (h(Host, { class: `tds-accordion ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+    }
+    static get style() { return accordionCss; }
 }, [1, "tds-accordion", {
-    "modeVariant": [1, "mode-variant"]
-  }]);
+        "modeVariant": [1, "mode-variant"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-accordion"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-accordion":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsAccordion$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-accordion"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsAccordion$1);
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 

package/dist/components/tds-badge.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface TdsBadge extends Components.TdsBadge, HTMLElement {}
 export const TdsBadge: {
-  prototype: TdsBadge;
-  new (): TdsBadge;
+    prototype: TdsBadge;
+    new (): TdsBadge;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/tds-badge.js

@@ -3,66 +3,66 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const badgeCss = ":host{--tds-badge-background-color:var(--tds-negative);--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-family:var(--tds-font-family-semi-condensed-bold);font-size:12px;color:var(--tds-badge-color-text);font-weight:bold}";
 
 const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.value = '';
-    this.hidden = false;
-    this.size = 'lg';
-    this.shape = '';
-    this.text = '';
-  }
-  watchProps() {
-    this.checkProps();
-  }
-  componentWillLoad() {
-    this.checkProps();
-  }
-  checkProps() {
-    const valueAsNumber = parseInt(this.value);
-    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
-      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
-      this.size = 'lg';
-      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.value = '';
+        this.hidden = false;
+        this.size = 'lg';
+        this.shape = '';
+        this.text = '';
     }
-    else {
-      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-      if (this.value !== '' && this.size !== 'sm') {
-        console.warn('The provided value is either empty or string, please provide value as number.');
-      }
+    watchProps() {
+        this.checkProps();
     }
-  }
-  render() {
-    return (h("host", { class: `tds-badge tds-badge-${this.size} ${this.shape === 'pill' ? 'tds-badge-pill' : ''} ${this.hidden ? 'tds-badge-hidden' : ''}` }, h("div", { class: "tds-badge-text" }, this.text)));
-  }
-  static get watchers() { return {
-    "value": ["watchProps"],
-    "size": ["watchProps"]
-  }; }
-  static get style() { return badgeCss; }
+    componentWillLoad() {
+        this.checkProps();
+    }
+    checkProps() {
+        const valueAsNumber = parseInt(this.value);
+        if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
+            this.shape = this.value.toString().length >= 2 ? 'pill' : '';
+            this.size = 'lg';
+            this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
+        }
+        else {
+            // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+            if (this.value !== '' && this.size !== 'sm') {
+                console.warn('The provided value is either empty or string, please provide value as number.');
+            }
+        }
+    }
+    render() {
+        return (h("host", { class: `tds-badge tds-badge-${this.size} ${this.shape === 'pill' ? 'tds-badge-pill' : ''} ${this.hidden ? 'tds-badge-hidden' : ''}` }, h("div", { class: "tds-badge-text" }, this.text)));
+    }
+    static get watchers() { return {
+        "value": ["watchProps"],
+        "size": ["watchProps"]
+    }; }
+    static get style() { return badgeCss; }
 }, [1, "tds-badge", {
-    "value": [1],
-    "hidden": [516],
-    "size": [1],
-    "shape": [32],
-    "text": [32]
-  }, undefined, {
-    "value": ["watchProps"],
-    "size": ["watchProps"]
-  }]);
+        "value": [1],
+        "hidden": [516],
+        "size": [1],
+        "shape": [32],
+        "text": [32]
+    }, undefined, {
+        "value": ["watchProps"],
+        "size": ["watchProps"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-badge"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-badge":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsBadge$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsBadge$1);
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 

package/dist/components/tds-banner.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface TdsBanner extends Components.TdsBanner, HTMLElement {}
 export const TdsBanner: {
-  prototype: TdsBanner;
-  new (): TdsBanner;
+    prototype: TdsBanner;
+    new (): TdsBanner;
 };
 /**
  * Used to define this component and all nested components recursively.