@scania/tegel 0.0.8 → 0.0.9

package/dist/esm/tds-button.entry.js

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
+import { d as disableClickOnElement } from './utils-9ac24735.js';
+
+const buttonCss = ":root,.tds-mode-light{--tds-btn-primary-background:var(--tds-blue-600);--tds-btn-primary-color:var(--tds-white);--tds-btn-primary-border-color:transparent;--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-color-hover:var(--tds-white);--tds-btn-primary-border-color-hover:transparent;--tds-btn-primary-background-active:var(--tds-blue-700);--tds-btn-primary-color-active:var(--tds-white);--tds-btn-primary-border-color-active:var(--tds-blue-700);--tds-btn-primary-background-focus:var(--tds-blue-400);--tds-btn-primary-color-focus:var(--tds-white);--tds-btn-primary-border-color-focus:var(--tds-blue-600);--tds-btn-primary-outline-color-focus:var(--tds-blue-600);--tds-btn-primary-background-disabled-primary:var(--tds-grey-50);--tds-btn-primary-background-disabled-secondary:var(--tds-white);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-400);--tds-btn-primary-border-color-disabled:transparent;--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-black);--tds-btn-secondary-border-color:rgb(0 0 0 / 48%);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-black);--tds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-black);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--tds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-black);--tds-btn-icon-secondary-fill-focus:var(--tds-black);--tds-btn-icon-secondary-fill:var(--tds-black);--tds-btn-icon-secondary-color:var(--tds-black);--tds-btn-icon-secondary-fill-hover:var(--tds-grey-50);--tds-btn-icon-secondary-color-hover:var(--tds-grey-50);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-black);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-black);--tds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-black);--tds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-black);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-black);--tds-btn-icon-ghost-color:var(--tds-black);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:var(--tds-red-700);--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-50);--tds-btn-danger-background-disabled-secondary:var(--tds-white);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-white);--tds-btn-icon-danger-color:var(--tds-white)}:root .tds-mode-variant-primary,.tds-mode-light .tds-mode-variant-primary{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}:root .tds-mode-variant-secondary,.tds-mode-light .tds-mode-variant-secondary{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}.tds-mode-dark{--tds-btn-primary-background:var(--tds-blue-400);--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-background-active:var(--tds-blue-300);--tds-btn-primary-background-focus:var(--tds-blue-600);--tds-btn-primary-border-color-focus:var(--tds-blue-400);--tds-btn-primary-outline-color-focus:var(--tds-blue-400);--tds-btn-primary-background-disabled-primary:var(--tds-grey-900);--tds-btn-primary-background-disabled-secondary:var(--tds-grey-868);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-600);--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-white);--tds-btn-secondary-border-color:var(--tds-white);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-white);--tds-btn-secondary-border-color-active:var(--tds-white);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-white);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:var(--tds-white);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--tds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--tds-btn-icon-secondary-color-focus:var(--tds-white);--tds-btn-icon-secondary-fill-focus:var(--tds-white);--tds-btn-icon-secondary-fill:var(--tds-grey-50);--tds-btn-icon-secondary-color:var(--tds-grey-50);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-white);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-white);--tds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-white);--tds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-white);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-50);--tds-btn-icon-ghost-color:var(--tds-grey-50);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:transparent;--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-900);--tds-btn-danger-background-disabled-secondary:var(--tds-grey-868);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-white);--tds-btn-icon-danger-color:var(--tds-white)}.tds-mode-dark .tds-mode-variant-primary{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.tds-mode-dark .tds-mode-variant-secondary{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}button{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:4px;border:none;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{outline:none}button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}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{padding:var(--tds-spacing-element-12);height:40px}button.sm.only-icon{padding:11px}button.sm:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.md{padding:var(--tds-spacing-element-16);height:48px}button.md.only-icon{padding:13px}button.md:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.lg{padding:var(--tds-spacing-element-20);height:56px}button.lg.only-icon{padding:17px}button.lg:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.fullbleed{width:inherit;display:flex;justify-content:center}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{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);font-size:16px}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{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{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.disabled,button.primary:disabled{cursor:not-allowed;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{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{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);font-size:16px}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{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{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.disabled,button.secondary:disabled{cursor:not-allowed;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{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{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);font-size:16px}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{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{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.disabled,button.ghost:disabled{cursor:not-allowed;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{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{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);font-size:16px}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{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{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.disabled,button.danger:disabled{cursor:not-allowed;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]){width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}:host(tds-button) .sm ::slotted([slot=icon]){width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}:host(tds-button[fullbleed]){width:100%;justify-content:center}:host(tds-button[only-icon]) .sm{padding:11px}:host(tds-button[only-icon]) .md{padding:13px}:host(tds-button[only-icon]) .lg{padding:17px}:host(tds-button:not([only-icon])){display:inline-flex;align-items:center}:host(tds-button:not([only-icon])) .sm ::slotted([slot=icon]){margin-left:var(--tds-spacing-element-12);width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}:host(tds-button:not([only-icon])) .md ::slotted([slot=icon]){margin-left:var(--tds-spacing-element-16);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}:host(tds-button:not([only-icon])) .lg ::slotted([slot=icon]){margin-left:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}";
+
+const TdsButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.text = undefined;
+    this.type = 'primary';
+    this.size = 'lg';
+    this.disabled = false;
+    this.fullbleed = false;
+    this.modeVariant = null;
+    this.onlyIcon = false;
+    this.slotElement = undefined;
+  }
+  connectedCallback() {
+    var _a;
+    this.slotElement = this.host.children ? this.host.children[0] : null;
+    if (this.disabled) {
+      disableClickOnElement(this.host);
+      if (((_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.slot) === 'icon') {
+        disableClickOnElement(this.slotElement);
+      }
+    }
+    if (!this.text) {
+      this.onlyIcon = true;
+      this.host.setAttribute('only-icon', '');
+    }
+  }
+  render() {
+    return (h(Host, { class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { disabled: this.disabled, class: `${this.type}
+            ${this.size}
+            ${this.disabled ? 'disabled' : ''}
+            ${this.fullbleed ? 'fullbleed' : ''}
+            ${this.onlyIcon ? 'only-icon' : ''}
+            ` }, this.text, h("slot", { name: "icon" }))));
+  }
+  get host() { return getElement(this); }
+};
+TdsButton.style = buttonCss;
+
+export { TdsButton as tds_button };

package/dist/esm/tds-card.entry.js

@@ -0,0 +1,52 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23ee700b.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-top{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-top img.card-top-image{width:36px;height:36px;border-radius:100%}.card .card-top .card-top-header{padding-left:16px;display:flex;flex-direction:column;row-gap:4px}.card .card-top .card-top-header.no-header-img{padding-left:0}.card .card-top .card-top-header.single-line-header{row-gap:0}.card .card-top.below{padding-top:16px}.card .card-header{color:var(--tds-card-headline)}.card .card-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=card-body]::slotted(*){font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls);color:var(--tds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px;max-width:336px}.card slot[name=card-bottom]::slotted(*){display:flex;padding:16px;color:var(--tds-card-icon-color)}button{border:none;text-align:left;padding:0}button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--tds-card-box-pressed)}";
+
+const TdsCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tdsClick = createEvent(this, "tdsClick", 6);
+    this.handleClick = () => {
+      this.tdsClick.emit({
+        cardId: this.cardId,
+      });
+    };
+    this.getCardContent = () => (h("div", null, this.headerPlacement === 'above' && (h("div", { class: `card-top ${this.headerPlacement}` }, this.headerImg && (h("img", { class: `card-top-image`, src: this.headerImg, alt: this.headerImgAlt })), ' ', h("div", { class: `
+          card-top-header
+          ${!this.headerImg ? 'no-header-img' : ''}
+          ${!this.header || !this.subheader ? 'single-line-header' : ''}
+          ` }, h("span", { class: `card-header` }, this.header), h("span", { class: `card-subheader` }, this.subheader)))), h("div", { class: `card-body` }, this.bodyImg && h("img", { class: `card-body-img`, src: this.bodyImg, alt: this.bodyImgAlt }), this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (h("div", { class: `card-top ${this.headerPlacement}` }, this.headerImg && (h("img", { class: `card-top-image`, src: this.headerImg, alt: this.headerImgAlt })), h("div", { class: `
+            card-top-header
+            ${!this.headerImg ? 'no-header-img' : ''}
+            ${!this.header || !this.subheader ? 'single-line-header' : ''}
+            ` }, h("span", { class: `card-header` }, this.header), h("span", { class: `card-subheader` }, this.subheader)))), this.bodyDivider && h("tds-divider", null), h("slot", { name: "card-body" })), h("div", { class: `card-bottom` }, this.hasCardBottomSlot && h("slot", { name: `card-bottom` }))));
+    this.modeVariant = null;
+    this.headerPlacement = 'above';
+    this.header = undefined;
+    this.subheader = undefined;
+    this.headerImg = undefined;
+    this.headerImgAlt = undefined;
+    this.bodyImg = undefined;
+    this.bodyImgAlt = undefined;
+    this.bodyDivider = false;
+    this.clickable = false;
+    this.cardId = crypto.randomUUID();
+    this.hasCardBottomSlot = false;
+    this.hasCardBodySlot = false;
+  }
+  connectedCallback() {
+    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot="card-bottom"]');
+    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot="card-body"]');
+  }
+  render() {
+    return (h(Host, { class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`, onClick: () => {
+        if (this.clickable) {
+          this.handleClick();
+        }
+      } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}` }, this.getCardContent()))));
+  }
+  get hostElement() { return getElement(this); }
+};
+TdsCard.style = cardCss;
+
+export { TdsCard as tds_card };

package/dist/esm/tds-checkbox.entry.js

@@ -0,0 +1,51 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-23ee700b.js';
+
+const checkboxCss = ".tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
+
+const TdsCheckbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tdsChange = createEvent(this, "tdsChange", 6);
+    this.tdsFocus = createEvent(this, "tdsFocus", 6);
+    this.tdsBlur = createEvent(this, "tdsBlur", 6);
+    this.handleChange = () => {
+      this.checked = !this.checked;
+      this.tdsChange.emit({
+        checkboxId: this.checkboxId,
+        checked: this.checked,
+        value: this.value,
+      });
+    };
+    this.name = undefined;
+    this.checkboxId = crypto.randomUUID();
+    this.disabled = false;
+    this.required = false;
+    this.checked = false;
+    this.value = undefined;
+  }
+  /** Toggles the checked value of the component. */
+  async toggleCheckbox() {
+    this.checked = !this.checked;
+    return {
+      checkboxId: this.checkboxId,
+      checked: this.checked,
+    };
+  }
+  /** Set the input as focus when clicking the component */
+  handleFocus(event) {
+    this.tdsFocus.emit(event);
+  }
+  /** Set the input as blur when clicking outside the component */
+  handleBlur(event) {
+    this.tdsBlur.emit(event);
+  }
+  render() {
+    return (h("div", { class: "tds-checkbox" }, h("input", { "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", { htmlFor: this.checkboxId }, h("slot", { name: "label" }))));
+  }
+  get host() { return getElement(this); }
+};
+TdsCheckbox.style = checkboxCss;
+
+export { TdsCheckbox as tds_checkbox };

package/dist/esm/tds-chip.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-23ee700b.js';
+
+const chipCss = ".sc-tds-chip-s>*{display:inline-flex;align-items:center}.sc-tds-chip-h[size=sm] .sc-tds-chip-s>*{gap:6px}.sc-tds-chip-h[size=lg] .sc-tds-chip-s>*{gap:8px}.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:16px;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)}.component.sc-tds-chip .tds-chip-component.lg.sc-tds-chip label.sc-tds-chip{height:32px;padding:1px 16px 0;gap:8px}.component.sc-tds-chip .tds-chip-component.sm.sc-tds-chip label.sc-tds-chip{height:24px;padding:1px 12px 0;gap:6px}.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-blue-400);outline-offset:-2px}.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)}.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)}";
+
+const TdsChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tdsChange = createEvent(this, "tdsChange", 6);
+    this.tdsClick = createEvent(this, "tdsClick", 6);
+    this.handleChange = () => {
+      this.tdsChange.emit({
+        chipId: this.chipId,
+        value: this.value,
+      });
+    };
+    this.handleClick = () => {
+      this.tdsClick.emit({
+        chipId: this.chipId,
+      });
+    };
+    this.type = 'button';
+    this.size = 'lg';
+    this.chipId = crypto.randomUUID();
+    this.checked = false;
+    this.name = undefined;
+    this.value = undefined;
+  }
+  renderInputAttributes() {
+    if (this.type !== 'button') {
+      return {
+        value: this.value,
+        checked: this.checked,
+        name: this.name,
+        onChange: () => this.handleChange(),
+      };
+    }
+    return {
+      onClick: () => this.handleClick(),
+    };
+  }
+  render() {
+    const inputAttributes = this.renderInputAttributes();
+    return (h(Host, null, h("div", { class: "component" }, h("div", { class: `tds-chip-component ${this.size}` }, h("input", Object.assign({ type: this.type, id: this.chipId }, inputAttributes)), h("label", { htmlFor: this.chipId }, h("slot", { name: "label" }))))));
+  }
+};
+TdsChip.style = chipCss;
+
+export { TdsChip as tds_chip };

package/dist/esm/tds-core-header-item_2.entry.js

@@ -0,0 +1,62 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
+import { h as dfs } from './utils-9ac24735.js';
+
+const coreHeaderItemCss = ":host{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--tds-header-height);height:var(--tds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
+
+const TdsCoreHeaderItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "item" }, h("slot", null))));
+  }
+};
+TdsCoreHeaderItem.style = coreHeaderItemCss;
+
+const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
+
+const TdsHeaderItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.active = false;
+    this.selected = 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);
+      }
+    }
+  }
+  /**
+   * 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-header-item-icon');
+      this.updateSlotted(isIconOrSvg, addIconClass);
+      const isImage = (element) => element.tagName.toLowerCase() === 'img';
+      const addImageClass = (element) => element.classList.add('__tds-header-item-image');
+      this.updateSlotted(isImage, addImageClass);
+    }
+  }
+  componentDidLoad() {
+    this.slotEl = this.host.shadowRoot.querySelector('slot');
+    this.updateSlottedElements();
+    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+  }
+  render() {
+    return (h(Host, null, h("tds-core-header-item", { class: {
+        'component-active': this.active,
+        'component-selected': this.selected,
+      } }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+};
+TdsHeaderItem.style = headerItemCss;
+
+export { TdsCoreHeaderItem as tds_core_header_item, TdsHeaderItem as tds_header_item };

package/dist/esm/tds-datetime.entry.js

@@ -0,0 +1,100 @@
+import { r as registerInstance, c as createEvent, h } from './index-23ee700b.js';
+
+const datetimeCss = ".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=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::placeholder{opacity:1;color:var(--tds-datetime-placeholder)}.tds-datetime-input.sc-tds-datetime:focus::placeholder{color:var(--tds-datetime-placeholder-color-focus)}.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::placeholder{color:var(--tds-datetime-placeholder-disabled)}.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::placeholder{opacity:1;color:var(--tds-datetime-placeholder)}.tds-datetime-input-md.sc-tds-datetime:focus::placeholder{color:var(--tds-datetime-placeholder-color-focus)}.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::placeholder{color:var(--tds-datetime-placeholder-disabled)}.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::placeholder{opacity:1;color:var(--tds-datetime-placeholder)}.tds-datetime-input-sm.sc-tds-datetime:focus::placeholder{color:var(--tds-datetime-placeholder-color-focus)}.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::placeholder{color:var(--tds-datetime-placeholder-disabled)}.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-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.sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime .sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime:focus::placeholder{transition:color 0.35s ease;color:var(--tds-datetime-placeholder-color-focus)}.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-md.sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime .sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime:focus::placeholder{transition:color 0.35s ease;color:var(--tds-datetime-placeholder-color-focus)}.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::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime .sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime:focus::placeholder{transition:color 0.35s ease;color:var(--tds-datetime-placeholder-color-focus)}.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-focus.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime,.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-data.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.tds-datetime-focus.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime,.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-data.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.tds-datetime-focus.sc-tds-datetime .tds-datetime-input.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime,.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-data.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-bar.sc-tds-datetime{position:absolute;width:100%}.tds-datetime-bar.sc-tds-datetime::before,.tds-datetime-bar.sc-tds-datetime::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--tds-datetime-bar);transition:0.35s ease all}.tds-form-datetime-md.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::before,.tds-form-datetime-md.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::after{top:46px}.tds-form-datetime-sm.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::before,.tds-form-datetime-sm.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::after{top:40px}.tds-datetime-bar.sc-tds-datetime::before{left:50%}.tds-datetime-bar.sc-tds-datetime::after{right:50%}.tds-datetime-focus.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::before,.tds-datetime-focus.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::after{width:50%}.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-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-success.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::before,.tds-form-datetime-success.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::after{background:var(--tds-datetime-bar-sucess)}.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-form-datetime-error.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::before,.tds-form-datetime-error.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::after{background:var(--tds-datetime-bar-error)}.tds-form-datetime-error.sc-tds-datetime .datetime-icon.sc-tds-datetime tds-icon.sc-tds-datetime{color:var(--tds-datetime-icon-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=time].sc-tds-datetime::-webkit-inner-spin-button,input[type=time].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}.tds-mode-variant-primary.sc-tds-datetime{--tds-datetime-background:var(--tds-datetime-background-primary)}.tds-mode-variant-secondary.sc-tds-datetime{--tds-datetime-background:var(--tds-datetime-background-secondary)}";
+
+const TdsDatetime = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tdsChange = createEvent(this, "tdsChange", 6);
+    this.tdsBlur = createEvent(this, "tdsBlur", 6);
+    this.tdsFocus = createEvent(this, "tdsFocus", 6);
+    this.getDefaultValue = () => {
+      const dateTimeObj = {
+        year: this.defaultValue.slice(0, 4),
+        month: this.defaultValue.slice(5, 7),
+        day: this.defaultValue.slice(8, 10),
+        hours: this.defaultValue.slice(11, 13),
+        minutes: this.defaultValue.slice(14, 16),
+      };
+      switch (this.type) {
+        case 'datetime-local':
+          return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;
+        case 'date':
+          return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;
+        case 'time':
+          return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;
+        default:
+          throw new Error('Invalid type.');
+      }
+    };
+    this.type = 'datetime-local';
+    this.value = '';
+    this.defaultValue = 'none';
+    this.disabled = false;
+    this.size = 'lg';
+    this.noMinWidth = false;
+    this.modeVariant = null;
+    this.name = '';
+    this.state = undefined;
+    this.autofocus = false;
+    this.label = '';
+    this.helper = '';
+    this.focusInput = undefined;
+  }
+  componentWillLoad() {
+    if (this.defaultValue !== 'none') {
+      this.value = this.getDefaultValue();
+    }
+  }
+  // Listener if input enters focus state
+  handleFocusIn() {
+    this.focusInput = true;
+  }
+  // Listener if input leaves focus state
+  handleFocusOut() {
+    this.focusInput = false;
+  }
+  // Data input event in value prop
+  handleInput(e) {
+    this.value = e.target.value;
+    this.tdsChange.emit(e);
+  }
+  // Change event isn't a composed:true by default in for input
+  handleChange(e) {
+    this.tdsChange.emit(e);
+  }
+  /** Set the input as focus when clicking the whole Datetime with suffix/prefix */
+  handleFocusClick(e) {
+    this.textInput.focus();
+    this.tdsFocus.emit(e);
+  }
+  /** Set the input as focus when clicking the whole Datetime with suffix/prefix */
+  handleBlur(e) {
+    this.textInput.blur();
+    this.tdsBlur.emit(e);
+  }
+  render() {
+    let className = ' tds-datetime-input';
+    if (this.size === 'md') {
+      className += `${className}-md`;
+    }
+    if (this.size === 'sm') {
+      className += `${className}-sm`;
+    }
+    return (h("div", { 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' : ''}
+        ${this.disabled ? 'tds-form-datetime-disabled' : ''}
+        ${this.size === 'md' ? 'tds-form-datetime-md' : ''}
+        ${this.size === 'sm' ? 'tds-form-datetime-sm' : ''}
+        ${this.state === 'error' || this.state === 'success'
+        ? `tds-form-datetime-${this.state}`
+        : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
+        ` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), h("div", { class: "tds-datetime-helper" }, this.helper && (h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
+  }
+};
+TdsDatetime.style = datetimeCss;
+
+export { TdsDatetime as tds_datetime };

package/dist/esm/tds-divider.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, H as Host } from './index-23ee700b.js';
+
+const dividerCss = ".divider{box-sizing:border-box}.divider *{box-sizing:border-box}.divider.horizontal{background-color:var(--tds-divider-background);width:100%;height:1px}.divider.vertical{background-color:var(--tds-divider-background);height:100%;width:1px}";
+
+const Divider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.orientation = 'horizontal';
+  }
+  render() {
+    return (h(Host, { role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { class: `divider ${this.orientation}` })));
+  }
+};
+Divider.style = dividerCss;
+
+export { Divider as tds_divider };

package/dist/esm/tds-dropdown-filter.entry.js

@@ -0,0 +1,92 @@
+import { r as registerInstance, h, H as Host } from './index-23ee700b.js';
+
+const dropdownCss = ":root,.tds-mode-light{--tds-link-text-decoration:none;--tds-dropdown-color:var(--tds-grey-958);--tds-dropdown-background:var(--tds-grey-50);--tds-dropdown-background-hover:var(--tds-grey-100);--tds-dropdown-disabled:var(--tds-grey-400);--tds-dropdown-border:var(--tds-grey-100);--tds-dropdown-label-inside:var(--tds-grey-700);--tds-dropdown-label-outside:var(--tds-grey-958);--tds-dropdown-placeholder:var(--tds-grey-700);--tds-dropdown-border-not-focused:var(--tds-grey-600);--tds-dropdown-option-color:var(--tds-grey-900);--tds-dropdown-option-disabled-color:var(--tds-grey-400);--tds-dropdown-background-disabled:var(--tds-dropdown-background)}:root .tds-mode-variant-primary,.tds-mode-light .tds-mode-variant-primary{--tds-dropdown-background:var(--tds-grey-50);--tds-dropdown-background-hover:var(--tds-grey-100)}:root .tds-mode-variant-secondary,.tds-mode-light .tds-mode-variant-secondary{--tds-dropdown-background:var(--tds-white);--tds-dropdown-background-hover:var(--tds-grey-50)}.tds-mode-dark{--tds-link-text-decoration:none;--tds-dropdown-color:var(--tds-grey-400);--tds-dropdown-background:var(--tds-grey-868);--tds-dropdown-background-hover:var(--tds-grey-800);--tds-dropdown-disabled:var(--tds-grey-800);--tds-dropdown-border:var(--tds-grey-800);--tds-dropdown-label-inside:var(--tds-grey-400);--tds-dropdown-label-outside:var(--tds-grey-100);--tds-dropdown-placeholder:var(--tds-grey-400);--tds-dropdown-border-not-focused:var(--tds-grey-600);--tds-dropdown-option-color:var(--tds-grey-50);--tds-dropdown-option-disabled-color:var(--tds-grey-800);--tds-dropdown-background-disabled:var(--tds-dropdown-background)}.tds-mode-dark .tds-mode-variant-primary{--tds-dropdown-background:var(--tds-grey-868);--tds-dropdown-background-hover:var(--tds-grey-800)}.tds-mode-dark .tds-mode-variant-secondary{--tds-dropdown-background:var(--tds-grey-900);--tds-dropdown-background-hover:var(--tds-grey-800)}.tds-dropdown-helper{font:var(--tds-detail-ex-05);letter-spacing:var(--tds-detail-ex-05-ls);color:var(--tds-grey-700);margin-top:var(--tds-spacing-element-4);display:flex}.tds-dropdown-helper .tds-dropdown-error-icon{width:16px;height:16px;padding-right:9px;display:none}.tds-dropdown-label-inside{font:var(--tds-detail-ex-07);letter-spacing:var(--tds-detail-ex-07-ls);color:var(--tds-dropdown-label-inside)}.tds-dropdown-label-outside{font:var(--tds-detail-ex-05);letter-spacing:var(--tds-detail-ex-05-ls);display:block;color:var(--tds-dropdown-label-outside);margin-bottom:var(--tds-spacing-element-8)}:host,::slotted(*){color:var(--tds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-grey-958);box-sizing:border-box}:host .tds-dropdown-label-outside,::slotted(*) .tds-dropdown-label-outside{color:var(--tds-dropdown-label-outside);text-decoration:none}:host{position:relative;z-index:auto}:host::part(dropdown-filter-disabled){cursor:not-allowed;caret-color:transparent;pointer-events:none;color:var(--tds-dropdown-disabled);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--tds-dropdown-disabled)}.tds-dropdown{position:relative;display:flex;flex-flow:column wrap;width:100%;border:0}.tds-dropdown,.tds-dropdown *{box-sizing:border-box}.tds-dropdown .tds-dropdown-toggle{font:var(--tds-detail-ex-02);letter-spacing:var(--tds-detail-ex-02-ls);color:var(--tds-dropdown-color);display:flex;align-items:center;background-color:var(--tds-dropdown-background);cursor:pointer;transition:box-shadow 0.1s ease-in, border-bottom-color 150ms ease;border-radius:4px 4px 0 0;border:none;border-bottom:1px solid var(--tds-dropdown-border-not-focused);box-shadow:none;width:100%;text-align:left;outline:none;padding:20px 16px;display:flex;align-items:center}.tds-dropdown .tds-dropdown-toggle:hover{border-bottom-color:var(--tds-grey-600)}.tds-dropdown .tds-dropdown-toggle:focus::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:2px solid var(--tds-blue-400)}.tds-dropdown .tds-dropdown-toggle:active,.tds-dropdown .tds-dropdown-toggle.active .tds-dropdown .tds-dropdown-toggle.selected{border-bottom-color:var(--tds-dropdown-border-not-focused)}.tds-dropdown .tds-dropdown-toggle.is-filter{transition:border 0.1s ease-in 0.1s;cursor:text}.tds-dropdown .tds-dropdown-toggle-lg{padding:20px 16px}.tds-dropdown .tds-dropdown-toggle-md{padding:16px}.tds-dropdown .tds-dropdown-toggle-sm{padding:12px 16px}.tds-dropdown .tds-dropdown-toggle.tds-dropdown-toggle-label-inside-lg{padding:20px 16px 16px}.tds-dropdown .tds-dropdown-toggle.tds-dropdown-toggle-label-inside-md{padding:16px 16px 12px}.tds-dropdown .tds-dropdown-toggle--selected:not(:focus){border-bottom:1px solid var(--tds-dropdown-border-not-focused)}.tds-dropdown .tds-dropdown-arrow{width:20px;position:absolute;right:16px;color:inherit;transform:rotate(0);transition:transform ease 250ms}.tds-dropdown .tds-dropdown-placeholder{color:var(--tds-grey-700)}.tds-dropdown .tds-dropdown-label{display:grid;width:calc(100% - 25px)}.tds-dropdown .tds-dropdown-label-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tds-dropdown.tds-dropdown.tds-dropdown-sm .tds-dropdown-label-container--label-inside{padding-bottom:12px}.tds-dropdown .tds-dropdown-filter{border:0;outline:none;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-dropdown-link);width:100%;background:transparent}.tds-dropdown .tds-dropdown-filter:focus{outline:none}.tds-dropdown .tds-dropdown-filter::placeholder{color:var(--tds-grey-700);opacity:1}.tds-dropdown .tds-dropdown-menu{z-index:100;background-color:var(--tds-dropdown-background);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--tds-dropdown-border);border-right-color:var(--tds-dropdown-border);overflow-x:hidden;overflow-y:auto;transform:scaleY(0);transform-origin:top;transition:transform 250ms ease}.tds-dropdown .tds-dropdown-menu::-webkit-scrollbar{width:4px;background-color:inherit}.tds-dropdown .tds-dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}.tds-dropdown .tds-dropdown-menu ::-webkit-scrollbar-button{height:0;width:0}.tds-dropdown.tds-dropdown-lg .tds-dropdown-toggle{height:56px}.tds-dropdown.tds-dropdown-md .tds-dropdown-toggle{height:48px}.tds-dropdown.tds-dropdown-sm .tds-dropdown-toggle{height:40px}:host(.tds-dropdown--open-upwards) .tds-dropdown .tds-dropdown-menu{top:auto;bottom:100%;box-shadow:0 -1px 3px 0 rgba(0, 0, 0, 0.1);transform-origin:bottom}:host(.tds-dropdown--open-upwards[label-position=outside]) span.tds-dropdown-menu{bottom:calc(100% - 24px)}:host([disabled=true]){cursor:not-allowed}:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle{pointer-events:none;color:var(--tds-dropdown-option-disabled-color);border:none;padding:0 16px}:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle .tds-dropdown-placeholder{color:var(--tds-dropdown-placeholder)}:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle .tds-dropdown-label-inside{color:var(--tds-dropdown-label-inside)}:host([disabled=true]) .tds-dropdown .tds-dropdown-toggle:focus::before{content:none}:host(.tds-dropdown--error) .tds-dropdown .tds-dropdown-toggle{border-color:var(--tds-negative)}:host(.tds-dropdown--error) .tds-dropdown .tds-dropdown-toggle:focus::before{border-color:var(--tds-negative)}:host(.tds-dropdown--error) .tds-dropdown-helper{color:var(--tds-negative)}:host(.tds-dropdown--error) .tds-dropdown-helper .tds-dropdown-error-icon{display:flex}:host ::slotted(tds-dropdown-option){display:flex;padding:var(--tds-spacing-element-16);background-color:var(--tds-dropdown-background);border-top:1px solid transparent;border-bottom:1px solid var(--tds-dropdown-border);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box;color:var(--tds-dropdown-option-color)}:host ::slotted(tds-dropdown-option:last-child){border-bottom-color:transparent;border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::slotted(tds-dropdown-option:hover),:host ::slotted(tds-dropdown-option:focus){background-color:var(--tds-dropdown-background-hover)}:host ::slotted(tds-dropdown-option:hover:not(:focus):not(tds-dropdown-option.selected)){background-color:var(--tds-dropdown-background-hover)}:host ::slotted(tds-dropdown-option:hover:focus){outline:none}:host ::slotted(tds-dropdown-option:focus){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host ::slotted(tds-dropdown-option.tds-dropdown--selected),:host ::slotted(tds-dropdown-option.selected),:host ::slotted(tds-dropdown-option.active),:host ::slotted(tds-dropdown-option:active){background-color:var(--tds-dropdown-background-hover);border-top:1px solid var(--tds-dropdown-border);border-bottom:1px solid var(--tds-dropdown-border)}:host ::slotted(tds-dropdown-option.tds-option--no-result){cursor:not-allowed;pointer-events:none}:host ::slotted(tds-dropdown-option.tds-dropdown-option-disabled),:host ::slotted(tds-dropdown-option.selected.tds-dropdown-option-disabled){cursor:not-allowed;color:var(--tds-dropdown-option-disabled-color);background-color:var(--tds-dropdown-background-disabled)}:host(.tds-dropdown--open-upwards) ::slotted(tds-dropdown-option:first-child){border-radius:4px 4px 0 0}:host(.tds-dropdown--open-upwards) ::slotted(tds-dropdown-option:last-child){border-radius:0;border-bottom:1px solid var(--tds-dropdown-border)}.tds-option-label{margin:auto 0;display:flex;align-content:center;text-decoration:none;flex-grow:2}.tds-option-checkmark{color:inherit;opacity:0;transition:opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);margin-left:var(--tds-spacing-element-16)}.tds-option-checkmark path{color:var(--tds-dropdown-option-color)}:host([size=sm]) ::slotted(tds-dropdown-option){padding:var(--tds-spacing-element-12) var(--tds-spacing-element-16)}:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-toggle{box-shadow:0 -1px 3px -1px rgba(0, 0, 0, 0.1);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-toggle.is-filter::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:1px solid var(--tds-blue-400)}:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-arrow{transform:rotate(180deg)}:host(.tds-dropdown--open) .tds-dropdown .tds-dropdown-menu{transform:scaleY(1)}:host(.tds-dropdown--open) ::slotted(tds-dropdown-option){visibility:visible;opacity:1}:host(.selected) .tds-option-checkmark{opacity:1}.tds-dropdown-label-inside{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-dropdown-label-inside);position:absolute;transition:transform 250ms ease, color 200ms ease;width:calc(100% - 63px);overflow:hidden;text-overflow:ellipsis;transform:translate(0, -10px);font-size:10px}.tds-dropdown-label-container.tds-dropdown-label-container--label-inside .tds-dropdown-placeholder{display:block;padding-top:4px}.tds-dropdown-lg .tds-dropdown-label-inside{display:block;top:16px}.tds-dropdown-md .tds-dropdown-label-inside{display:block;top:12px}.tds-dropdown.tds-dropdown-sm .tds-dropdown-label-inside{display:none}.tds-dropdown-multiselect-result{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tds-option-checkbox{margin-right:8px}.tds-form-label{display:flex}";
+
+const TdsDropdownFilter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dataOptions = [];
+    this.filteredContent = [];
+    this.searchTerm = '';
+    this.selectedOptionState = undefined;
+    this.dropdownRef = undefined;
+    this.modeVariant = null;
+    this.placeholder = '';
+    this.label = undefined;
+    this.defaultOption = undefined;
+    this.openDirection = 'auto';
+    this.selectedOption = undefined;
+    this.disabled = false;
+    this.size = 'lg';
+    this.inline = false;
+    this.labelPosition = 'no-label';
+    this.state = false;
+    this.helper = '';
+    this.data = undefined;
+    this.selectedLabel = 'no-selected';
+    this.selectedValue = 'no-selected';
+  }
+  componentWillLoad() {
+    this.parseData(this.data);
+    if (this.defaultOption) {
+      this.selectedOptionState = this.defaultOption;
+    }
+  }
+  parseData(newValue) {
+    if (newValue)
+      this.dataOptions = JSON.parse(newValue);
+    this.filteredContent = this.dataOptions;
+  }
+  updateOptionsContent(event) {
+    this.searchTerm = event.detail;
+    this.findData();
+  }
+  selectOptionHandler(event) {
+    this.selectedOptionState = event.detail.value;
+    this.selectedLabel = event.detail.label;
+    this.selectedValue = event.detail.value;
+    // Reset list when search is done and the user has selected one option
+    // To match with animation time for an option list to fadeout first
+    setTimeout(() => {
+      this.filteredContent = this.dataOptions;
+    }, 200);
+  }
+  findData() {
+    const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');
+    this.filteredContent = this.dataOptions.filter((option) => {
+      if (option.label) {
+        const listItem = option.label.toLowerCase();
+        const searchResultList = listItem.match(searchAsRegEx);
+        if (searchResultList) {
+          return searchResultList;
+        }
+        this.selectedOptionState = null;
+        this.selectedLabel = 'no-result';
+        this.selectedValue = 'no-result';
+      }
+    });
+  }
+  setOptionsContent() {
+    const newList = this.filteredContent.map((obj) => (h("tds-dropdown-option", { tabindex: "0", value: obj.value, class: `${this.selectedOptionState === obj.value ? 'selected' : ''}` }, obj.label)));
+    if (newList.length > 0) {
+      return newList;
+    }
+    return (h("tds-dropdown-option", { tabindex: "-1", value: "no-result", class: "tds-option--no-result" }, "No result"));
+  }
+  /** Use this method to reset the Dropdown. Then it will go back to its initial state. */
+  async resetOption() {
+    var _a;
+    await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.resetOption());
+  }
+  render() {
+    return (h(Host, { "selected-value": this.selectedValue, "selected-text": this.selectedLabel, class: `
+      ${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}
+     ` }, h("tds-dropdown", { ref: (el) => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null, openDirection: this.openDirection }, this.setOptionsContent())));
+  }
+  static get watchers() { return {
+    "data": ["parseData"]
+  }; }
+};
+TdsDropdownFilter.style = dropdownCss;
+
+export { TdsDropdownFilter as tds_dropdown_filter };