@scania/tegel 0.0.8 → 0.0.9

package/dist/collection/components/toggle/toggle.js

@@ -0,0 +1,209 @@
+import { h } from '@stencil/core';
+export class TdsToggle {
+  constructor() {
+    this.handleToggle = () => {
+      this.checked = !this.checked;
+      this.tdsToggle.emit({
+        toggleId: this.toggleId,
+        checked: this.checked,
+      });
+    };
+    this.checked = false;
+    this.required = false;
+    this.size = 'lg';
+    this.name = undefined;
+    this.headline = undefined;
+    this.disabled = false;
+    this.toggleId = crypto.randomUUID();
+  }
+  /** Toggles the Toggle. */
+  async toggle() {
+    this.checked = !this.checked;
+    return {
+      toggleId: this.toggleId,
+      checked: this.checked,
+    };
+  }
+  render() {
+    return (h("div", { class: "tds-toggle" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { name: "label" }))));
+  }
+  static get is() { return "tds-toggle"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["toggle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["toggle.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the Toggle as checked"
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Make the Toggle required"
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'lg'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the Toggle"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the toggle's input element"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "headline": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Headline for the Toggle"
+        },
+        "attribute": "headline",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the Toggle in a disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "toggleId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID of the Toggle's input element, if not specified, it's randomly generated"
+        },
+        "attribute": "toggle-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsToggle",
+        "name": "tdsToggle",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique Toggle identifier and status when it is toggled."
+        },
+        "complexType": {
+          "original": "{\n    toggleId: string;\n    checked: boolean;\n  }",
+          "resolved": "{ toggleId: string; checked: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<{ toggleId: string; checked: boolean; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ toggleId: string; checked: boolean; }>"
+        },
+        "docs": {
+          "text": "Toggles the Toggle.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/tooltip/tooltip.css

@@ -1,20 +1,20 @@
 :root,
-.sdds-mode-light {
-  --sdds-tooltip-background: var(--sdds-grey-800);
-  --sdds-tooltip-color: var(--sdds-white);
+.tds-mode-light {
+  --tds-tooltip-background: var(--tds-grey-800);
+  --tds-tooltip-color: var(--tds-white);
 }
 
-.sdds-mode-dark {
-  --sdds-tooltip-background: var(--sdds-grey-200);
-  --sdds-tooltip-color: var(--sdds-grey-958);
+.tds-mode-dark {
+  --tds-tooltip-background: var(--tds-grey-200);
+  --tds-tooltip-color: var(--tds-grey-958);
 }
 
-.sdds-tooltip {
+.tds-tooltip {
   box-sizing: border-box;
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-tooltip-color);
-  background-color: var(--sdds-tooltip-background);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-tooltip-color);
+  background-color: var(--tds-tooltip-background);
   border-radius: 4px;
   padding: 8px;
   word-wrap: break-word;
@@ -24,23 +24,23 @@
   visibility: hidden;
   transition: opacity 200ms ease-in, visibility 200ms ease-in;
 }
-.sdds-tooltip * {
+.tds-tooltip * {
   box-sizing: border-box;
 }
-.sdds-tooltip.sdds-tooltip-top-left {
+.tds-tooltip.tds-tooltip-top-left {
   border-radius: 0 4px 4px;
 }
-.sdds-tooltip.sdds-tooltip-top-right {
+.tds-tooltip.tds-tooltip-top-right {
   border-radius: 4px 0 4px 4px;
 }
-.sdds-tooltip.sdds-tooltip-bottom-right {
+.tds-tooltip.tds-tooltip-bottom-right {
   border-radius: 4px 4px 0;
 }
-.sdds-tooltip.sdds-tooltip-bottom-left {
+.tds-tooltip.tds-tooltip-bottom-left {
   border-radius: 4px 4px 4px 0;
 }
 
-.sdds-tooltip-show {
+.tds-tooltip-show {
   opacity: 1;
   visibility: visible;
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import { createPopper } from '@popperjs/core';
-export class Tooltip {
+export class TdsTooltip {
   constructor() {
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
@@ -88,9 +88,9 @@ export class Tooltip {
   render() {
     return (h("span", { ref: (el) => {
         this.tooltip = el;
-      }, class: `sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}` }, this.text, h("slot", null)));
+      }, class: `tds-tooltip tds-tooltip-${this.border} ${this.show ? 'tds-tooltip-show' : ''}` }, this.text, h("slot", null)));
   }
-  static get is() { return "sdds-tooltip"; }
+  static get is() { return "tds-tooltip"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -116,7 +116,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "In case Tooltip contains only text, no HTML, text can be passed by this prop"
+          "text": "In case Tooltip contains only text, no HTML, a text can be passed by this prop"
         },
         "attribute": "text",
         "reflect": false,

package/dist/collection/utils/utils.spec.js

@@ -0,0 +1,15 @@
+import { demoFormat } from './utils';
+describe('format', () => {
+  it('returns empty string for no names defined', () => {
+    expect(demoFormat(undefined, undefined, undefined)).toEqual('');
+  });
+  it('formats just first names', () => {
+    expect(demoFormat('Joseph', undefined, undefined)).toEqual('Joseph');
+  });
+  it('formats first and last names', () => {
+    expect(demoFormat('Joseph', undefined, 'Publique')).toEqual('Joseph Publique');
+  });
+  it('formats first, middle and last names', () => {
+    expect(demoFormat('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique');
+  });
+});

package/dist/components/checkbox.js

@@ -0,0 +1,73 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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 this; }
+  static get style() { return checkboxCss; }
+}, [6, "tds-checkbox", {
+    "name": [1],
+    "checkboxId": [1, "checkbox-id"],
+    "disabled": [4],
+    "required": [4],
+    "checked": [516],
+    "value": [1],
+    "toggleCheckbox": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsCheckbox);
+      }
+      break;
+  } });
+}
+
+export { TdsCheckbox as T, defineCustomElement as d };

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

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const coreHeaderItemCss = ":host{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--sdds-header-height);height:var(--sdds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
+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 CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class CoreHeaderItem extends HTMLElement {
+const TdsCoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsCoreHeaderItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -12,19 +12,19 @@ const CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class CoreHeaderItem ext
     return (h(Host, null, h("div", { class: "item" }, h("slot", null))));
   }
   static get style() { return coreHeaderItemCss; }
-}, [1, "sdds-core-header-item"]);
+}, [1, "tds-core-header-item"]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-core-header-item"];
+  const components = ["tds-core-header-item"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-core-header-item":
+    case "tds-core-header-item":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, CoreHeaderItem);
+        customElements.define(tagName, TdsCoreHeaderItem);
       }
       break;
   } });
 }
 
-export { CoreHeaderItem as C, defineCustomElement as d };
+export { TdsCoreHeaderItem as T, defineCustomElement as d };

package/dist/components/divider.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.orientation = 'horizontal';
+  }
+  render() {
+    return (h(Host, { role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { class: `divider ${this.orientation}` })));
+  }
+  static get style() { return dividerCss; }
+}, [1, "tds-divider", {
+    "orientation": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Divider);
+      }
+      break;
+  } });
+}
+
+export { Divider as D, defineCustomElement as d };

package/dist/components/dropdown-option.js

@@ -1,14 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './sdds-checkbox2.js';
+import { d as defineCustomElement$1 } from './checkbox.js';
 
-const dropdownCss = ":root,.sdds-mode-light{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-958);--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100);--sdds-dropdown-disabled:var(--sdds-grey-400);--sdds-dropdown-border:var(--sdds-grey-100);--sdds-dropdown-label-inside:var(--sdds-grey-700);--sdds-dropdown-label-outside:var(--sdds-grey-958);--sdds-dropdown-placeholder:var(--sdds-grey-700);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-900);--sdds-dropdown-option-disabled-color:var(--sdds-grey-400);--sdds-dropdown-background-disabled:var(--sdds-dropdown-background)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-white);--sdds-dropdown-background-hover:var(--sdds-grey-50)}.sdds-mode-dark{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-400);--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-disabled:var(--sdds-grey-800);--sdds-dropdown-border:var(--sdds-grey-800);--sdds-dropdown-label-inside:var(--sdds-grey-400);--sdds-dropdown-label-outside:var(--sdds-grey-100);--sdds-dropdown-placeholder:var(--sdds-grey-400);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-50);--sdds-dropdown-option-disabled-color:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-dropdown-background)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.sdds-dropdown-helper{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);color:var(--sdds-grey-700);margin-top:var(--sdds-spacing-element-4);display:flex}.sdds-dropdown-helper .sdds-dropdown-error-icon{width:16px;height:16px;padding-right:9px;display:none}.sdds-dropdown-label-inside{font:var(--sdds-detail-ex-07);letter-spacing:var(--sdds-detail-ex-07-ls);color:var(--sdds-dropdown-label-inside)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-dropdown-label-outside);margin-bottom:var(--sdds-spacing-element-8)}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);box-sizing:border-box}:host .sdds-dropdown-label-outside,::slotted(*) .sdds-dropdown-label-outside{color:var(--sdds-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(--sdds-dropdown-disabled);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-dropdown-disabled)}.sdds-dropdown{position:relative;display:flex;flex-flow:column wrap;width:100%;border:0}.sdds-dropdown,.sdds-dropdown *{box-sizing:border-box}.sdds-dropdown .sdds-dropdown-toggle{font:var(--sdds-detail-ex-02);letter-spacing:var(--sdds-detail-ex-02-ls);color:var(--sdds-dropdown-color);display:flex;align-items:center;background-color:var(--sdds-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(--sdds-dropdown-border-not-focused);box-shadow:none;width:100%;text-align:left;outline:none;padding:20px 16px;display:flex;align-items:center}.sdds-dropdown .sdds-dropdown-toggle:hover{border-bottom-color:var(--sdds-grey-600)}.sdds-dropdown .sdds-dropdown-toggle:focus::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:2px solid var(--sdds-blue-400)}.sdds-dropdown .sdds-dropdown-toggle:active,.sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected{border-bottom-color:var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-toggle.is-filter{transition:border 0.1s ease-in 0.1s;cursor:text}.sdds-dropdown .sdds-dropdown-toggle-lg{padding:20px 16px}.sdds-dropdown .sdds-dropdown-toggle-md{padding:16px}.sdds-dropdown .sdds-dropdown-toggle-sm{padding:12px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-lg{padding:20px 16px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-md{padding:16px 16px 12px}.sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus){border-bottom:1px solid var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-arrow{width:20px;position:absolute;right:16px;color:inherit;transform:rotate(0);transition:transform ease 250ms}.sdds-dropdown .sdds-dropdown-placeholder{color:var(--sdds-grey-700)}.sdds-dropdown .sdds-dropdown-label{display:grid;width:calc(100% - 25px)}.sdds-dropdown .sdds-dropdown-label-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-dropdown.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-container--label-inside{padding-bottom:12px}.sdds-dropdown .sdds-dropdown-filter{border:0;outline:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-link);width:100%;background:transparent}.sdds-dropdown .sdds-dropdown-filter:focus{outline:none}.sdds-dropdown .sdds-dropdown-filter::placeholder{color:var(--sdds-grey-700);opacity:1}.sdds-dropdown .sdds-dropdown-menu{z-index:100;background-color:var(--sdds-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(--sdds-dropdown-border);border-right-color:var(--sdds-dropdown-border);overflow-x:hidden;overflow-y:auto;transform:scaleY(0);transform-origin:top;transition:transform 250ms ease}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar{width:4px;background-color:inherit}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}.sdds-dropdown .sdds-dropdown-menu ::-webkit-scrollbar-button{height:0;width:0}.sdds-dropdown.sdds-dropdown-lg .sdds-dropdown-toggle{height:56px}.sdds-dropdown.sdds-dropdown-md .sdds-dropdown-toggle{height:48px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-toggle{height:40px}:host(.sdds-dropdown--open-upwards) .sdds-dropdown .sdds-dropdown-menu{top:auto;bottom:100%;box-shadow:0 -1px 3px 0 rgba(0, 0, 0, 0.1);transform-origin:bottom}:host(.sdds-dropdown--open-upwards[label-position=outside]) span.sdds-dropdown-menu{bottom:calc(100% - 24px)}:host([disabled=true]){cursor:not-allowed}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle{pointer-events:none;color:var(--sdds-dropdown-option-disabled-color);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-dropdown-placeholder)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-dropdown-label-inside)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before{content:none}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle:focus::before{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper{color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper .sdds-dropdown-error-icon{display:flex}:host ::slotted(sdds-dropdown-option){display:flex;padding:var(--sdds-spacing-element-16);background-color:var(--sdds-dropdown-background);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-dropdown-border);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box;color:var(--sdds-dropdown-option-color)}:host ::slotted(sdds-dropdown-option:last-child){border-bottom-color:transparent;border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::slotted(sdds-dropdown-option:hover),:host ::slotted(sdds-dropdown-option:focus){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:focus){outline:none}:host ::slotted(sdds-dropdown-option:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host ::slotted(sdds-dropdown-option.sdds-dropdown--selected),:host ::slotted(sdds-dropdown-option.selected),:host ::slotted(sdds-dropdown-option.active),:host ::slotted(sdds-dropdown-option:active){background-color:var(--sdds-dropdown-background-hover);border-top:1px solid var(--sdds-dropdown-border);border-bottom:1px solid var(--sdds-dropdown-border)}:host ::slotted(sdds-dropdown-option.sdds-option--no-result){cursor:not-allowed;pointer-events:none}:host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),:host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled){cursor:not-allowed;color:var(--sdds-dropdown-option-disabled-color);background-color:var(--sdds-dropdown-background-disabled)}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child){border-radius:4px 4px 0 0}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child){border-radius:0;border-bottom:1px solid var(--sdds-dropdown-border)}.sdds-option-label{margin:auto 0;display:flex;align-content:center;text-decoration:none;flex-grow:2}.sdds-option-checkmark{color:inherit;opacity:0;transition:opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);margin-left:var(--sdds-spacing-element-16)}.sdds-option-checkmark path{color:var(--sdds-dropdown-option-color)}:host([size=sm]) ::slotted(sdds-dropdown-option){padding:var(--sdds-spacing-element-12) var(--sdds-spacing-element-16)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-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(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle.is-filter::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:1px solid var(--sdds-blue-400)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-arrow{transform:rotate(180deg)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-menu{transform:scaleY(1)}:host(.sdds-dropdown--open) ::slotted(sdds-dropdown-option){visibility:visible;opacity:1}:host(.selected) .sdds-option-checkmark{opacity:1}.sdds-dropdown-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-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}.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside .sdds-dropdown-placeholder{display:block;padding-top:4px}.sdds-dropdown-lg .sdds-dropdown-label-inside{display:block;top:16px}.sdds-dropdown-md .sdds-dropdown-label-inside{display:block;top:12px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-inside{display:none}.sdds-dropdown-multiselect-result{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-option-checkbox{margin-right:8px}.sdds-form-label{display:flex}";
+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 DropdownOption = /*@__PURE__*/ proxyCustomElement(class DropdownOption extends HTMLElement {
+const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOption extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.internalSddsSelect = createEvent(this, "internalSddsSelect", 6);
+    this.internalTdsSelect = createEvent(this, "internalTdsSelect", 6);
     this.innerValue = undefined;
     this.selected = false;
     this.disabled = false;
@@ -32,13 +32,13 @@ const DropdownOption = /*@__PURE__*/ proxyCustomElement(class DropdownOption ext
   componentWillLoad() {
     this.innerValue = this.value;
     this.isMultiSelectOption = this.host
-      .closest('sdds-dropdown')
-      .classList.contains('sdds-dropdown-multiselect');
+      .closest('tds-dropdown')
+      .classList.contains('tds-dropdown-multiselect');
   }
   handleClick(value) {
     if (!this.disabled) {
       const listOptions = value.parent.childNodes;
-      this.internalSddsSelect.emit(value);
+      this.internalTdsSelect.emit(value);
       if (!this.isMultiSelectOption) {
         listOptions.forEach((optionEl) => {
           optionEl.selected = false;
@@ -71,12 +71,12 @@ const DropdownOption = /*@__PURE__*/ proxyCustomElement(class DropdownOption ext
         });
       }, class: {
         'selected': this.selected,
-        'sdds-dropdown-option-disabled': this.disabled,
-      }, tabindex: "-1", "aria-disabled": this.disabled }, this.isMultiSelectOption && (h("div", { class: "sdds-checkbox-item sdds-option-checkbox" }, h("sdds-checkbox", { checked: this.selected, disabled: this.disabled }))), h("span", { class: "sdds-option-label" }, h("slot", null)), !this.isMultiSelectOption && (h("span", { class: "sdds-option-checkmark" }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 3L4 6L9 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        'tds-dropdown-option-disabled': this.disabled,
+      }, tabindex: "-1", "aria-disabled": this.disabled }, this.isMultiSelectOption && (h("div", { class: "tds-checkbox-item tds-option-checkbox" }, h("tds-checkbox", { checked: this.selected, disabled: this.disabled }))), h("span", { class: "tds-option-label" }, h("slot", null)), !this.isMultiSelectOption && (h("span", { class: "tds-option-checkmark" }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 3L4 6L9 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
   }
   get host() { return this; }
   static get style() { return dropdownCss; }
-}, [1, "sdds-dropdown-option", {
+}, [1, "tds-dropdown-option", {
     "selected": [4],
     "disabled": [4],
     "value": [513],
@@ -86,14 +86,14 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-dropdown-option", "sdds-checkbox"];
+  const components = ["tds-dropdown-option", "tds-checkbox"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-dropdown-option":
+    case "tds-dropdown-option":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, DropdownOption);
+        customElements.define(tagName, TdsDropdownOption);
       }
       break;
-    case "sdds-checkbox":
+    case "tds-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }
@@ -101,4 +101,4 @@ function defineCustomElement() {
   } });
 }
 
-export { DropdownOption as D, defineCustomElement as d };
+export { TdsDropdownOption as T, defineCustomElement as d };