@scania/tegel 0.0.5 → 0.0.7

package/dist/collection/components/data-table/table-body-row/table-body-row.js

@@ -112,7 +112,7 @@ export class TableBodyRow {
         "method": "internalSddsRowChange",
         "name": "internalSddsRowChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -130,7 +130,7 @@ export class TableBodyRow {
         "method": "internalSddsPagination",
         "name": "internalSddsPagination",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -169,4 +169,3 @@ export class TableBodyRow {
       }];
   }
 }
-//# sourceMappingURL=table-body-row.js.map

package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js

@@ -115,7 +115,7 @@ export class TableBodyRowExpandable {
         "method": "internalSddsRowExpanded",
         "name": "internalSddsRowExpanded",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -133,7 +133,7 @@ export class TableBodyRowExpandable {
         "method": "internalSddsPagination",
         "name": "internalSddsPagination",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -160,4 +160,3 @@ export class TableBodyRowExpandable {
       }];
   }
 }
-//# sourceMappingURL=table-body-row-expandable.js.map

package/dist/collection/components/data-table/table-component-basic.stories.js

@@ -181,4 +181,3 @@ const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, disablePa
       </sdds-table-body>
   </sdds-table>`);
 export const Default = BasicTemplate.bind({});
-//# sourceMappingURL=table-component-basic.stories.js.map

package/dist/collection/components/data-table/table-component-batch-actions.stories.js

@@ -147,4 +147,3 @@ const BatchActionTemplate = ({ modeVariant, compactDesign, responsiveDesign, bat
           </sdds-table-body>
   </sdds-table>`);
 export const BatchAction = BatchActionTemplate.bind({});
-//# sourceMappingURL=table-component-batch-actions.stories.js.map

package/dist/collection/components/data-table/table-component-bodydata.stories.js

@@ -50,4 +50,3 @@ const DataPropertyTemplate = ({ bodyData }) => formatHtmlPreview(`
       </sdds-table-body>
   </sdds-table>`);
 export const DataProperty = DataPropertyTemplate.bind({});
-//# sourceMappingURL=table-component-bodydata.stories.js.map

package/dist/collection/components/data-table/table-component-custom-width.stories.js

@@ -171,4 +171,3 @@ const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalD
       </sdds-table-body>
   </sdds-table>`);
 export const CustomWidth = BasicTemplate.bind({});
-//# sourceMappingURL=table-component-custom-width.stories.js.map

package/dist/collection/components/data-table/table-component-event-listeners.stories.js

@@ -150,7 +150,7 @@ const EventListenersTemplate = ({ modeVariant, compactDesign, responsiveDesign,
               <sdds-header-cell column-key='country' column-title='Country' sortable ${column3Width ? `custom-width="${column3Width}"` : ''}></sdds-header-cell>
               <sdds-header-cell column-key='mileage' column-title='Mileage' sortable text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></sdds-header-cell>
           </sdds-table-header>
-          <sdds-table-body disable-pagination-function disable-filtering-function disable-sorting-function enable-dummy-data>
+          <sdds-table-body disable-pagination-function disable-filtering-function disable-sorting-function enable-json-data>
               <sdds-table-body-row>
                   <sdds-body-cell cell-value="Test value 5" cell-key="truck"></sdds-body-cell>
                   <sdds-body-cell cell-value="Test value 6" cell-key="driver"></sdds-body-cell>
@@ -173,4 +173,3 @@ const EventListenersTemplate = ({ modeVariant, compactDesign, responsiveDesign,
     <textarea id="event-value-textarea" rows="1" cols="50" readonly></textarea>
   </div>`);
 export const EventListeners = EventListenersTemplate.bind({});
-//# sourceMappingURL=table-component-event-listeners.stories.js.map

package/dist/collection/components/data-table/table-component-expandable-rows.stories.js

@@ -157,4 +157,3 @@ const ExpandableRowTemplate = ({ modeVariant, compactDesign, responsiveDesign, v
       </sdds-table-body>
   </sdds-table>`);
 export const ExpandableRows = ExpandableRowTemplate.bind({});
-//# sourceMappingURL=table-component-expandable-rows.stories.js.map

package/dist/collection/components/data-table/table-component-filtering.stories.js

@@ -154,4 +154,3 @@ const FilteringTemplate = ({ modeVariant, compactDesign, responsiveDesign, useDa
           </sdds-table-body>
   </sdds-table>`);
 export const Filtering = FilteringTemplate.bind({});
-//# sourceMappingURL=table-component-filtering.stories.js.map

package/dist/collection/components/data-table/table-component-multiselect.stories.js

@@ -178,4 +178,3 @@ const MultiselectTemplate = ({ modeVariant, compactDesign, responsiveDesign, ena
     <textarea id="selected-rows-value-textarea" rows="5" cols="50" readonly></textarea>
   </div>`);
 export const Multiselect = MultiselectTemplate.bind({});
-//# sourceMappingURL=table-component-multiselect.stories.js.map

package/dist/collection/components/data-table/table-component-pagination.stories.js

@@ -147,4 +147,3 @@ const PaginationTemplate = ({ modeVariant, compactDesign, responsiveDesign, rows
           <sdds-table-footer enable-pagination rows-per-page="${rowsPerPageControl}"></sdds-table-footer>
   </sdds-table>`);
 export const Pagination = PaginationTemplate.bind({});
-//# sourceMappingURL=table-component-pagination.stories.js.map

package/dist/collection/components/data-table/table-component-sorting.stories.js

@@ -180,4 +180,3 @@ const SortingTemplate = ({ modeVariant, compactDesign, responsiveDesign, column1
           </sdds-table-body>
   </sdds-table>`);
 export const Sorting = SortingTemplate.bind({});
-//# sourceMappingURL=table-component-sorting.stories.js.map

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

@@ -307,7 +307,7 @@ export class TableFooter {
         "method": "internalSddsEnablePagination",
         "name": "internalSddsEnablePagination",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -325,7 +325,7 @@ export class TableFooter {
         "method": "sddsPageChange",
         "name": "sddsPageChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
@@ -355,4 +355,3 @@ export class TableFooter {
       }];
   }
 }
-//# sourceMappingURL=table-footer.js.map

package/dist/collection/components/data-table/table-header/table-header.css

@@ -6,6 +6,8 @@
   --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>");
@@ -17,8 +19,10 @@
   --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: white;
-  --sdds-checkbox-background-focus: white;
+  --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>");
@@ -60,13 +64,13 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-  border-radius: 2px;
 }
 .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);
@@ -75,14 +79,15 @@
   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: 0.12;
+  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: 0.24;
+  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 {

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

@@ -114,7 +114,7 @@ export class TableHeaderRow {
         "method": "internalSddsMainCheckboxSelect",
         "name": "internalSddsMainCheckboxSelect",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -153,4 +153,3 @@ export class TableHeaderRow {
       }];
   }
 }
-//# sourceMappingURL=table-header.js.map

package/dist/collection/components/data-table/table-header-cell/table-header-cell.js

@@ -239,7 +239,7 @@ export class TableHeaderCell {
         "method": "sddsSortChange",
         "name": "sddsSortChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
@@ -254,7 +254,7 @@ export class TableHeaderCell {
         "method": "internalSddsTextAlign",
         "name": "internalSddsTextAlign",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -272,7 +272,7 @@ export class TableHeaderCell {
         "method": "internalSddsHover",
         "name": "internalSddsHover",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
@@ -311,4 +311,3 @@ export class TableHeaderCell {
       }];
   }
 }
-//# sourceMappingURL=table-header-cell.js.map

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

@@ -115,7 +115,7 @@ export class TableToolbar {
         "method": "sddsFilter",
         "name": "sddsFilter",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
@@ -139,4 +139,3 @@ export class TableToolbar {
       }];
   }
 }
-//# sourceMappingURL=table-toolbar.js.map

package/dist/collection/components/datetime/datetime.css

@@ -182,6 +182,7 @@
 .sdds-form-datetime {
   display: block;
   min-width: 208px;
+  background: unset;
 }
 .sdds-form-datetime-nomin {
   min-width: auto;
@@ -320,8 +321,8 @@
 .sdds-form-datetime-disabled .sdds-datetime-container {
   border-bottom-color: transparent;
 }
-.sdds-form-datetime-disabled .datetime-icon svg path {
-  fill: var(--sdds-datetime-icon-disabled);
+.sdds-form-datetime-disabled .datetime-icon sdds-icon {
+  color: var(--sdds-datetime-icon-disabled);
 }
 .sdds-form-datetime-disabled .sdds-datetime-label {
   color: var(--sdds-datetime-label-disabled);
@@ -345,8 +346,8 @@
 .sdds-form-datetime-error .sdds-datetime-bar::before, .sdds-form-datetime-error .sdds-datetime-bar::after {
   background: var(--sdds-datetime-bar-error);
 }
-.sdds-form-datetime-error .datetime-icon path {
-  fill: var(--sdds-datetime-icon-error);
+.sdds-form-datetime-error .datetime-icon sdds-icon {
+  color: var(--sdds-datetime-icon-error);
 }
 
 .sdds-datetime-textcounter {

package/dist/collection/components/datetime/datetime.js

@@ -85,10 +85,10 @@ export class Datetime {
         ? `sdds-form-datetime-${this.state}`
         : ''}
         ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ` }, this.label && (h("label", { htmlFor: this.name, class: "sdds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "sdds-datetime-container sdds-datetime-container" }, h("div", { class: "sdds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z", fill: "currentColor" }))), h("div", { class: "datetime-icon icon-time" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z", fill: "currentColor" })))), h("div", { class: "sdds-datetime-bar" })), h("div", { class: "sdds-datetime-helper" }, this.helper && (h("div", { class: "sdds-helper" }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper)))));
+        ` }, this.label && (h("label", { htmlFor: this.name, class: "sdds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "sdds-datetime-container sdds-datetime-container" }, h("div", { class: "sdds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("sdds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("sdds-icon", { size: "20px", name: "clock" }))), h("div", { class: "sdds-datetime-bar" })), h("div", { class: "sdds-datetime-helper" }, this.helper && (h("div", { class: "sdds-helper" }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper)))));
   }
   static get is() { return "sdds-datetime"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["datetime.scss"]
@@ -328,7 +328,7 @@ export class Datetime {
         "method": "sddsChange",
         "name": "sddsChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
@@ -395,4 +395,3 @@ export class Datetime {
       }];
   }
 }
-//# sourceMappingURL=datetime.js.map

package/dist/collection/components/datetime/datetime.stories.js

@@ -205,4 +205,3 @@ export const Date = datetimeTemplate.bind({});
 Date.args = {
   type: 'Date',
 };
-//# sourceMappingURL=datetime.stories.js.map

package/dist/collection/components/divider/divider-webcomponent.stories.js

@@ -59,4 +59,3 @@ const Template = ({ orientation, width, height }) => formatHtmlPreview(`
   </div>
 `);
 export const WebComponent = Template.bind({});
-//# sourceMappingURL=divider-webcomponent.stories.js.map

package/dist/collection/components/divider/divider.js

@@ -41,4 +41,3 @@ export class Divider {
     };
   }
 }
-//# sourceMappingURL=divider.js.map

package/dist/collection/components/divider/divider.stories.js

@@ -17,9 +17,9 @@ export default {
     ],
   },
   argTypes: {
-    type: {
-      name: 'Type',
-      description: 'Sets the divider type.',
+    orientation: {
+      name: 'Orientation',
+      description: 'Choose divider orientation.',
       control: {
         type: 'radio',
       },
@@ -39,7 +39,7 @@ export default {
       control: {
         type: 'number',
       },
-      if: { arg: 'type', eq: 'Horizontal' },
+      if: { arg: 'orientation', eq: 'Horizontal' },
     },
     height: {
       name: 'Height',
@@ -47,17 +47,17 @@ export default {
       control: {
         type: 'number',
       },
-      if: { arg: 'type', eq: 'Vertical' },
+      if: { arg: 'orientation', eq: 'Vertical' },
     },
   },
   args: {
-    type: 'Horizontal',
+    orientation: 'Horizontal',
     direction: 'Top',
     width: 150,
     height: 150,
   },
 };
-const Template = ({ type, width, height }) => {
+const Template = ({ orientation, width, height }) => {
   const classLookup = {
     Horizontal: `sdds-divider`,
     Vertical: `sdds-divider-vertical`,
@@ -83,7 +83,7 @@ const Template = ({ type, width, height }) => {
      
       
       <div
-  class="demo-div ${classLookup[type]}"></div>
+  class="demo-div ${classLookup[orientation]}"></div>
   `);
 };
 const BorderTemplate = ({ direction }) => {
@@ -126,6 +126,5 @@ Border.args = {
   direction: 'Top'
 };
 Border.argTypes = {
-  type: { table: { disable: true } }
+  orientation: { table: { disable: true } }
 };
-//# sourceMappingURL=divider.stories.js.map

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

@@ -10,6 +10,7 @@ export class DropdownFilter {
     this.placeholder = '';
     this.label = undefined;
     this.defaultOption = undefined;
+    this.openDirection = 'auto';
     this.selectedOption = undefined;
     this.disabled = false;
     this.size = 'lg';
@@ -76,7 +77,7 @@ export class DropdownFilter {
   render() {
     return (h(Host, { "selected-value": this.selectedValue, "selected-text": this.selectedLabel, class: `
       ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
-     ` }, h("sdds-dropdown", { ref: (el) => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null }, this.setOptionsContent())));
+     ` }, h("sdds-dropdown", { ref: (el) => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null, openDirection: this.openDirection }, this.setOptionsContent())));
   }
   static get is() { return "sdds-dropdown-filter"; }
   static get encapsulation() { return "shadow"; }
@@ -162,6 +163,24 @@ export class DropdownFilter {
         "attribute": "default-option",
         "reflect": false
       },
+      "openDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'down' | 'up' | 'auto'",
+          "resolved": "\"auto\" | \"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction that the dropdown will open. Default is auto."
+        },
+        "attribute": "open-direction",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
       "selectedOption": {
         "type": "string",
         "mutable": false,
@@ -345,7 +364,7 @@ export class DropdownFilter {
   }
   static get listeners() {
     return [{
-        "name": "inputSearch",
+        "name": "internalSddsSearch",
         "method": "updateOptionsContent",
         "target": undefined,
         "capture": false,
@@ -359,4 +378,3 @@ export class DropdownFilter {
       }];
   }
 }
-//# sourceMappingURL=dropdown-filter.js.map

package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js

@@ -180,4 +180,3 @@ const FilterTemplate = ({ modeVariant, state = false, size, openDirection, label
   `);
 };
 export const Default = FilterTemplate.bind({});
-//# sourceMappingURL=dropdown-filter.stories.js.map

package/dist/collection/components/dropdown/dropdown-native.stories.js

@@ -44,7 +44,7 @@ export default {
       options: ['Large', 'Medium', 'Small'],
     },
     label: {
-      name: 'Label',
+      name: 'Label text',
       description: 'Sets a label text to help describe what the dropdown contains.',
       control: {
         type: 'text',
@@ -101,4 +101,3 @@ const NativeTemplate = ({ modeVariant, state, size, label, helper, disabled }) =
  `);
 };
 export const Native = NativeTemplate.bind({});
-//# sourceMappingURL=dropdown-native.stories.js.map

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

@@ -188,4 +188,3 @@ export class DropdownOption {
       }];
   }
 }
-//# sourceMappingURL=dropdown-option.js.map

package/dist/collection/components/dropdown/dropdown-wc-default.stories.js

@@ -172,4 +172,3 @@ const Template = ({ modeVariant, state = false, size, openDirection, labelText,
   `);
 };
 export const WebComponentDefault = Template.bind({});
-//# sourceMappingURL=dropdown-wc-default.stories.js.map

package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js

@@ -167,4 +167,3 @@ const Template = ({ modeVariant, state = false, size, openDirection, labelPositi
   `);
 };
 export const WebComponentMultiselect = Template.bind({});
-//# sourceMappingURL=dropdown-wc-multiselect.stories.js.map

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

@@ -119,18 +119,17 @@
   --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);
-  --sdds-dropdown-background-disabled: var(--sdds-grey-50);
 }
 :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-dropdown-background-disabled: var(--sdds-white);
 }
 
 .sdds-mode-dark {
@@ -138,7 +137,6 @@
   --sdds-dropdown-color: var(--sdds-grey-400);
   --sdds-dropdown-background: var(--sdds-grey-868);
   --sdds-dropdown-background-hover: var(--sdds-grey-800);
-  --sdds-dropdown-background-disabled: var(--sdds-grey-900);
   --sdds-dropdown-disabled: var(--sdds-grey-800);
   --sdds-dropdown-border: var(--sdds-grey-800);
   --sdds-dropdown-label-inside: var(--sdds-grey-400);
@@ -147,16 +145,15 @@
   --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-dropdown-background-disabled: var(--sdds-grey-868);
 }
 .sdds-mode-dark .sdds-mode-variant-secondary {
   --sdds-dropdown-background: var(--sdds-grey-900);
   --sdds-dropdown-background-hover: var(--sdds-grey-800);
-  --sdds-dropdown-background-disabled: var(--sdds-grey-900);
 }
 
 .sdds-dropdown-helper {
@@ -300,6 +297,8 @@
   --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>");
@@ -311,8 +310,10 @@
   --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: white;
-  --sdds-checkbox-background-focus: white;
+  --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>");
@@ -354,13 +355,13 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-  border-radius: 2px;
 }
 .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);
@@ -369,14 +370,15 @@
   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: 0.12;
+  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: 0.24;
+  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 {
@@ -426,13 +428,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;