@scania/tegel 0.0.52 → 0.0.71-beta

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

@@ -1,109 +1,3 @@
-/* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
-:root {
-  /* FUNCTIONAL TYPOGRAPHY */
-  --sdds-headline-01: normal normal bold 40px/40px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-01-ls: 0;
-  --sdds-headline-02: normal normal bold 32px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-02-ls: -0.04em;
-  --sdds-headline-03: normal normal bold 24px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-03-ls: -0.03em;
-  --sdds-headline-04: normal normal bold 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-04-ls: -0.02em;
-  --sdds-headline-05: normal normal bold 14px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-05-ls: -0.02em;
-  --sdds-headline-06: normal normal bold 14px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-06-ls: -0.02em;
-  --sdds-headline-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-07-ls: -0.01em;
-  --sdds-paragraph-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-01-ls: -0.03em;
-  --sdds-paragraph-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-02-ls: -0.01em;
-  --sdds-body-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-01-ls: -0.02em;
-  --sdds-body-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-02-ls: -0.02em;
-  --sdds-detail-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-01-ls: -0.01em;
-  --sdds-detail-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-02-ls: -0.01em;
-  --sdds-detail-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-03-ls: -0.01em;
-  --sdds-detail-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-04-ls: 0.08em;
-  --sdds-detail-04-tt: uppercase;
-  --sdds-detail-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-05-ls: 0;
-  --sdds-detail-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-06-ls: 0.08em;
-  --sdds-detail-06-tt: uppercase;
-  --sdds-detail-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-07-ls: 0;
-  /* EXPRESSIVE TYPOGRAPHY */
-  --sdds-expressive-headline-01: normal normal bold 80px/80px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-01-ls: 0;
-  --sdds-expressive-headline-02: normal normal bold 56px/56px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-02-ls: 0;
-  --sdds-headline-ex-01: normal normal bold 40px/40px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-01-ls: 0;
-  --sdds-headline-ex-02: normal normal bold 32px/32px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-02-ls: -0.04em;
-  --sdds-headline-ex-03: normal normal bold 24px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-03-ls: -0.03em;
-  --sdds-headline-ex-04: normal normal bold 20px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-04-ls: -0.01em;
-  --sdds-headline-ex-05: normal normal bold 16px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-05-ls: -0.02em;
-  --sdds-headline-ex-06: normal normal bold 14px/16px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-06-ls: -0.02em;
-  --sdds-headline-ex-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-07-ls: -0.01em;
-  --sdds-paragraph-ex-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-01-ls: -0.03em;
-  --sdds-paragraph-ex-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-02-ls: -0.01em;
-  --sdds-body-ex-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-01-ls: -0.02em;
-  --sdds-body-ex-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-02-ls: -0.01em;
-  --sdds-detail-ex-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-01-ls: -0.01em;
-  --sdds-detail-ex-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-02-ls: -0.01em;
-  --sdds-detail-ex-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-03-ls: -0.01em;
-  --sdds-detail-ex-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-04-ls: 0.08em;
-  --sdds-detail-ex-04-tt: uppercase;
-  --sdds-detail-ex-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-05-ls: 0;
-  --sdds-detail-ex-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-06-ls: 0.08em;
-  --sdds-detail-ex-06-tt: uppercase;
-  --sdds-detail-ex-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-07-ls: 0;
-}
-
 :root,
 .sdds-mode-light {
   /* This one is overriding the --sdds-link css for the link component. */
@@ -184,237 +78,6 @@
   margin-bottom: var(--sdds-spacing-element-8);
 }
 
-/* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
-:root {
-  /* FUNCTIONAL TYPOGRAPHY */
-  --sdds-headline-01: normal normal bold 40px/40px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-01-ls: 0;
-  --sdds-headline-02: normal normal bold 32px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-02-ls: -0.04em;
-  --sdds-headline-03: normal normal bold 24px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-03-ls: -0.03em;
-  --sdds-headline-04: normal normal bold 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-04-ls: -0.02em;
-  --sdds-headline-05: normal normal bold 14px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-05-ls: -0.02em;
-  --sdds-headline-06: normal normal bold 14px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-headline-06-ls: -0.02em;
-  --sdds-headline-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-07-ls: -0.01em;
-  --sdds-paragraph-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-01-ls: -0.03em;
-  --sdds-paragraph-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-02-ls: -0.01em;
-  --sdds-body-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-01-ls: -0.02em;
-  --sdds-body-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-02-ls: -0.02em;
-  --sdds-detail-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-01-ls: -0.01em;
-  --sdds-detail-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-02-ls: -0.01em;
-  --sdds-detail-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-03-ls: -0.01em;
-  --sdds-detail-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-04-ls: 0.08em;
-  --sdds-detail-04-tt: uppercase;
-  --sdds-detail-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-05-ls: 0;
-  --sdds-detail-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-06-ls: 0.08em;
-  --sdds-detail-06-tt: uppercase;
-  --sdds-detail-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-07-ls: 0;
-  /* EXPRESSIVE TYPOGRAPHY */
-  --sdds-expressive-headline-01: normal normal bold 80px/80px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-01-ls: 0;
-  --sdds-expressive-headline-02: normal normal bold 56px/56px "Scania Sans Headline", arial,
-    helvetica, sans-serif;
-  --sdds-expressive-headline-02-ls: 0;
-  --sdds-headline-ex-01: normal normal bold 40px/40px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-01-ls: 0;
-  --sdds-headline-ex-02: normal normal bold 32px/32px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-02-ls: -0.04em;
-  --sdds-headline-ex-03: normal normal bold 24px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-03-ls: -0.03em;
-  --sdds-headline-ex-04: normal normal bold 20px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-04-ls: -0.01em;
-  --sdds-headline-ex-05: normal normal bold 16px/24px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-05-ls: -0.02em;
-  --sdds-headline-ex-06: normal normal bold 14px/16px "Scania Sans Headline", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-06-ls: -0.02em;
-  --sdds-headline-ex-07: normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,
-    sans-serif;
-  --sdds-headline-ex-07-ls: -0.01em;
-  --sdds-paragraph-ex-01: normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-01-ls: -0.03em;
-  --sdds-paragraph-ex-02: normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-paragraph-ex-02-ls: -0.01em;
-  --sdds-body-ex-01: normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-01-ls: -0.02em;
-  --sdds-body-ex-02: normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-body-ex-02-ls: -0.01em;
-  --sdds-detail-ex-01: normal normal normal 16px/24px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-01-ls: -0.01em;
-  --sdds-detail-ex-02: normal normal normal 14px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-02-ls: -0.01em;
-  --sdds-detail-ex-03: normal normal normal 14px/20px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-03-ls: -0.01em;
-  --sdds-detail-ex-04: normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-04-ls: 0.08em;
-  --sdds-detail-ex-04-tt: uppercase;
-  --sdds-detail-ex-05: normal normal normal 12px/16px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-05-ls: 0;
-  --sdds-detail-ex-06: normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;
-  --sdds-detail-ex-06-ls: 0.08em;
-  --sdds-detail-ex-06-tt: uppercase;
-  --sdds-detail-ex-07: normal normal normal 10px/8px "Scania Sans Semi Condensed",
-    "Scania Sans Condensed", arial, helvetica, sans-serif;
-  --sdds-detail-ex-07-ls: 0;
-}
-
-:root,
-.sdds-mode-light {
-  --sdds-checkbox-color: var(--sdds-grey-900);
-  --sdds-checkbox-interaction-01: var(--sdds-blue-800);
-  --sdds-checkbox-interaction-02: var(--sdds-white);
-  --sdds-checkbox-background-hover: var(--sdds-blue-800);
-  --sdds-checkbox-background-focus: var(--sdds-blue-800);
-  --sdds-checkbox-background-opacity-hover: 0.12;
-  --sdds-checkbox-background-opacity-focus: 0.24;
-  --sdds-checkbox-disabled: var(--sdds-grey-400);
-  --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-border-color-disabled-after: var(--sdds-grey-500);
-  --sdds-checkbox-color-disabled-after: var(--sdds-grey-500);
-}
-:root .sdds-mode-dark,
-.sdds-mode-light .sdds-mode-dark {
-  --sdds-checkbox-color: var(--sdds-white);
-  --sdds-checkbox-interaction-01: var(--sdds-white);
-  --sdds-checkbox-interaction-02: var(--sdds-grey-958);
-  --sdds-checkbox-background-hover: var(--sdds-grey-600);
-  --sdds-checkbox-background-focus: var(--sdds-grey-600);
-  --sdds-checkbox-background-opacity-hover: 0.48;
-  --sdds-checkbox-background-opacity-focus: 0.72;
-  --sdds-checkbox-disabled: white;
-  --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
-  --sdds-checkbox-border-color-disabled-after: var(--sdds-grey-700);
-  --sdds-checkbox-color-disabled-after: var(--sdds-grey-700);
-}
-
-.sdds-checkbox-item {
-  box-sizing: border-box;
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-checkbox-text);
-  display: flex;
-  align-items: center;
-  margin-left: -4px;
-}
-.sdds-checkbox-item * {
-  box-sizing: border-box;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox] {
-  appearance: none;
-  outline: none;
-  margin: 0;
-  border: 0;
-  border-radius: 2px;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  cursor: pointer;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox] + label {
-  color: var(--sdds-checkbox-color);
-  padding-left: var(--sdds-spacing-element-4);
-  padding-top: var(--sdds-spacing-element-4);
-  padding-bottom: var(--sdds-spacing-element-4);
-  cursor: pointer;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]::before, .sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
-  content: "";
-  position: absolute;
-  box-sizing: border-box;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]::before {
-  width: 24px;
-  height: 24px;
-  left: 0;
-  top: 0;
-  border-radius: 4px;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
-  border: 1px solid var(--sdds-checkbox-interaction-01);
-  background-color: var(--sdds-checkbox-interaction-02);
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border-radius: 2px;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before {
-  background-color: var(--sdds-checkbox-background-hover);
-  opacity: var(--sdds-checkbox-background-opacity-hover);
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before {
-  background-color: var(--sdds-checkbox-background-focus);
-  opacity: var(--sdds-checkbox-background-opacity-focus);
-  transition: opacity 0.2s ease-in-out;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled {
-  cursor: not-allowed;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after {
-  border-color: var(--sdds-checkbox-border-color-disabled-after);
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled + label, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled + label {
-  color: var(--sdds-grey-600);
-  cursor: not-allowed;
-}
-.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before {
-  display: none;
-}
-
-.sdds-form-input[type=checkbox]:checked::after {
-  background-image: var(--sdds-checkbox-background-img);
-  background-color: var(--sdds-checkbox-interaction-01);
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.sdds-form-input[type=checkbox]:checked:disabled:hover::before, .sdds-form-input[type=checkbox]:checked:disabled::before, .sdds-form-input[type=checkbox]:checked.disabled:hover::before, .sdds-form-input[type=checkbox]:checked.disabled::before {
-  display: block;
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid #b0b7c4;
-}
-.sdds-form-input[type=checkbox]:checked:disabled::after, .sdds-form-input[type=checkbox]:checked.disabled::after {
-  background-image: var(--sdds-checkbox-background-img-disabled);
-  background-color: var(--sdds-checkbox-interaction-02);
-  color: var(--sdds-checkbox-color-disabled-after);
-}
-
 :host,
 ::slotted(*) {
   color: var(--sdds-grey-958);
@@ -428,13 +91,16 @@
 
 :host,
 ::slotted(*) {
-  --sdds-dropdown-label-outside: var(--sdds-dropdown-label-outside);
-  --sdds-dropdown-label-outside-text-decoration: none;
   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;

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

@@ -156,7 +156,7 @@ export class Dropdown {
     if (typeof this.textInput !== 'undefined' || this.textInput === null) {
       if (!this.selectedLabel && this.selectedLabel.length <= 0) {
         this.textInput.value = '';
-        this.inputSearch.emit('');
+        this.internalSddsSearch.emit('');
       }
       if (this.selectedLabel !== this.textInput.value) {
         this.textInput.value = this.selectedLabel;
@@ -184,7 +184,7 @@ export class Dropdown {
   }
   handleSearch(ev) {
     const searchTerm = ev.target.value;
-    this.inputSearch.emit(searchTerm);
+    this.internalSddsSearch.emit(searchTerm);
     this.open = true;
   }
   deselectAll() {
@@ -220,7 +220,7 @@ export class Dropdown {
         : ''}
                 ${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
         ? `sdds-dropdown-toggle-label-inside-${this.size}`
-        : `sdds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, h("span", { class: "sdds-dropdown-label" }, this.type === 'filter' ? (h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "sdds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, onInput: (event) => this.handleSearch(event), autoComplete: "off" })) : (h("span", { class: {
+        : `sdds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, h("span", { class: "sdds-dropdown-label" }, this.type === 'filter' ? (h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "sdds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, autoComplete: "off" })) : (h("span", { class: {
         'sdds-dropdown-label-container': true,
         'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
           this.size !== 'sm' &&
@@ -515,13 +515,16 @@ export class Dropdown {
   }
   static get events() {
     return [{
-        "method": "inputSearch",
-        "name": "inputSearch",
+        "method": "internalSddsSearch",
+        "name": "internalSddsSearch",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "internal",
+              "text": "Search event that is emitted to the sdds-dropdown-filter"
+            }],
           "text": ""
         },
         "complexType": {
@@ -580,4 +583,3 @@ export class Dropdown {
       }];
   }
 }
-//# sourceMappingURL=dropdown.js.map

package/dist/collection/components/dropdown-v2/dropdown-option-v2/dropdown-option-v2.css

@@ -0,0 +1,64 @@
+:host {
+  display: block;
+  background-color: var(--sdds-dropdown-option-background);
+}
+:host .dropdown-option {
+  display: flex;
+  align-items: center;
+  color: var(--sdds-dropdown-option-color);
+  border-bottom: 1px solid var(--sdds-dropdown-option-border);
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+}
+:host .dropdown-option.selected {
+  background-color: var(--sdds-dropdown-option-background-selected);
+}
+:host .dropdown-option.disabled {
+  color: var(--sdds-dropdown-option-color-disabled);
+}
+:host .dropdown-option.lg {
+  height: 47px;
+}
+:host .dropdown-option.md {
+  height: 47px;
+}
+:host .dropdown-option.sm {
+  height: 39px;
+}
+:host .dropdown-option button {
+  all: unset;
+  width: 100%;
+  height: 100%;
+}
+:host .dropdown-option button .single-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+:host .dropdown-option button:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .dropdown-option .multiselect {
+  padding: 0 16px;
+  width: 100%;
+}
+:host .dropdown-option .multiselect sdds-checkbox,
+:host .dropdown-option .multiselect .sdds-checkbox-webcomponent,
+:host .dropdown-option .multiselect label {
+  height: 100%;
+  width: 100%;
+}
+:host .dropdown-option:hover {
+  background-color: var(--sdds-dropdown-option-background-hover);
+  cursor: pointer;
+}
+:host .dropdown-option:hover.disabled {
+  background-color: var(--sdds-dropdown-option-background);
+  cursor: not-allowed;
+}
+
+:host([hidden]) {
+  display: none;
+}