@scania/tegel 0.0.7 → 0.0.8

package/dist/collection/components/data-table/table-toolbar/table-toolbar.js

@@ -38,7 +38,16 @@ export class TableToolbar {
   searchFunction(event) {
     const searchTerm = event.currentTarget.value.toLowerCase();
     const sddsTableSearchBar = event.currentTarget.parentElement;
-    this.sddsFilter.emit([this.tableId, searchTerm]);
+    const sddsFilterEvent = this.sddsFilterChange.emit({
+      tableId: this.tableId,
+      query: searchTerm,
+    });
+    if (!sddsFilterEvent.defaultPrevented) {
+      this.internalSddsFilter.emit({
+        tableId: this.tableId,
+        query: searchTerm,
+      });
+    }
     if (searchTerm.length > 0) {
       sddsTableSearchBar.classList.add('sdds-table__searchbar--active');
     }
@@ -112,18 +121,36 @@ export class TableToolbar {
   }
   static get events() {
     return [{
-        "method": "sddsFilter",
-        "name": "sddsFilter",
+        "method": "sddsFilterChange",
+        "name": "sddsFilterChange",
         "bubbles": true,
-        "cancelable": false,
+        "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
           "text": "Used for sending users input to main parent <sdds-table> component, can also be listened to in order to implement custom sorting logic."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "{\n    tableId: string;\n    query: string;\n  }",
+          "resolved": "{ tableId: string; query: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "internalSddsFilter",
+        "name": "internalSddsFilter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Internal event to notify sdds-table-body that a filter/search has been made."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{\n    tableId: string;\n    query: string;\n  }",
+          "resolved": "{ tableId: string; query: string; }",
           "references": {}
         }
       }];

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

@@ -64,7 +64,7 @@ export class DropdownOption {
       }, 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("label", { class: "sdds-form-label" }, h("input", { class: "sdds-form-input", type: "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" }))))));
+      }, 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" }))))));
   }
   static get is() { return "sdds-dropdown-option"; }
   static get encapsulation() { return "shadow"; }

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);

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

@@ -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' &&

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;
+}