@scania/tegel 0.0.5 → 0.0.7

package/dist/collection/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.js

@@ -0,0 +1,63 @@
+import { h } from '@stencil/core';
+export class SddsBreadcrumbItem {
+  constructor() {
+    this.current = false;
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
+        ${this.disabled ? 'disabled' : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-breadcrumb-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-breadcrumb-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-breadcrumb-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "current": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Boolean for the current link"
+        },
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Toggle the disabled state for the breadcrumb"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/breadcrumb/sdds-breadcrumb.js

@@ -20,4 +20,3 @@ export class SddsBreadcrumb {
   }
   static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=sdds-breadcrumb.js.map

package/dist/collection/components/breadcrumb/sdds-breadcrumb.stories.js

@@ -1,10 +1,10 @@
-import itemReadme from './sdds-breadcrumb-link/readme.md';
+import itemReadme from './sdds-breadcrumb-item/readme.md';
 import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
   title: 'Components/Breadcrumb',
   parameters: {
-    notes: { 'Breadcumb': readme, 'Breadcumb Link': itemReadme },
+    notes: { 'Breadcumb': readme, 'Breadcumb Item': itemReadme },
     design: [
       {
         name: 'Figma',
@@ -21,10 +21,15 @@ export default {
 };
 const Template = () => formatHtmlPreview(`   
       <sdds-breadcrumb>
-        <sdds-breadcrumb-link href="#">Page 1</sdds-breadcrumb-link>
-        <sdds-breadcrumb-link href="google.se">Page 2</sdds-breadcrumb-link>
-        <sdds-breadcrumb-link current>Page 3</sdds-breadcrumb-link>
+        <sdds-breadcrumb-item>
+          <a href="#">Page 1</a>
+        </sdds-breadcrumb-item>
+        <sdds-breadcrumb-item>
+          <a href="#">Page 2</a>
+        </sdds-breadcrumb-item>
+        <sdds-breadcrumb-item current>
+          <a href="#">Page 3</a>
+        </sdds-breadcrumb-item>
       </sdds-breadcrumb>
       `);
 export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-breadcrumb.stories.js.map

package/dist/collection/components/button/button-component.js

@@ -153,4 +153,3 @@ export class SddsButton {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=button-component.js.map

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

@@ -192,4 +192,3 @@ NativeOnlyIcon.args = {
   onlyIcon: true,
   icon: 'truck',
 };
-//# sourceMappingURL=button-native.stories.js.map

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

@@ -190,4 +190,3 @@ WebComponentOnlyIcon.args = {
   onlyIcon: true,
   icon: 'truck',
 };
-//# sourceMappingURL=button-webcomponent.stories.js.map

package/dist/collection/components/button/button.css

@@ -8,7 +8,7 @@
   --sdds-btn-primary-border-color-hover: transparent;
   --sdds-btn-primary-background-active: var(--sdds-blue-700);
   --sdds-btn-primary-color-active: var(--sdds-white);
-  --sdds-btn-primary-border-color-active: transparent;
+  --sdds-btn-primary-border-color-active: var(--sdds-blue-700);
   --sdds-btn-primary-background-focus: var(--sdds-blue-400);
   --sdds-btn-primary-color-focus: var(--sdds-white);
   --sdds-btn-primary-border-color-focus: var(--sdds-blue-600);
@@ -23,7 +23,7 @@
   --sdds-btn-icon-primary-color: var(--sdds-grey-50);
   --sdds-btn-secondary-background: transparent;
   --sdds-btn-secondary-color: var(--sdds-black);
-  --sdds-btn-secondary-border-color: rgb(0 0 0 / 38%);
+  --sdds-btn-secondary-border-color: rgb(0 0 0 / 48%);
   --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
   --sdds-btn-secondary-color-hover: var(--sdds-white);
   --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
@@ -32,20 +32,20 @@
   --sdds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
   --sdds-btn-secondary-background-focus: transparent;
   --sdds-btn-secondary-color-focus: var(--sdds-black);
-  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-300);
+  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-400);
   --sdds-btn-secondary-outline-color: rgb(0 0 0 / 38%);
+  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-400);
   --sdds-btn-secondary-background-disabled: transparent;
   --sdds-btn-secondary-color-disabled: rgb(0 0 0 / 38%);
   --sdds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
+  --sdds-btn-icon-secondary-color-focus: var(--sdds-black);
+  --sdds-btn-icon-secondary-fill-focus: var(--sdds-black);
   /* ICON */
   --sdds-btn-icon-secondary-fill: var(--sdds-black);
   --sdds-btn-icon-secondary-color: var(--sdds-black);
   /* ICON HOVER */
   --sdds-btn-icon-secondary-fill-hover: var(--sdds-grey-50);
   --sdds-btn-icon-secondary-color-hover: var(--sdds-grey-50);
-  /* ICON FOCUS */
-  --sdds-btn-icon-secondary-fill-focus: var(--sdds-black);
-  --sdds-btn-icon-secondary-color-focus: var(--sdds-black);
   --sdds-btn-ghost-background: transparent;
   --sdds-btn-ghost-color: var(--sdds-black);
   --sdds-btn-ghost-border-color: transparent;
@@ -74,7 +74,7 @@
   --sdds-btn-danger-border-color-hover: transparent;
   --sdds-btn-danger-background-active: var(--sdds-red-700);
   --sdds-btn-danger-color-active: var(--sdds-white);
-  --sdds-btn-danger-border-color-active: transparent;
+  --sdds-btn-danger-border-color-active: var(--sdds-red-700);
   --sdds-btn-danger-background-focus: var(--sdds-red-400);
   --sdds-btn-danger-color-focus: var(--sdds-white);
   --sdds-btn-danger-border-color-focus: var(--sdds-red-400);
@@ -124,12 +124,14 @@
   --sdds-btn-secondary-border-color-active: var(--sdds-white);
   --sdds-btn-secondary-background-focus: transparent;
   --sdds-btn-secondary-color-focus: var(--sdds-white);
-  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-300);
+  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-400);
+  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-400);
   --sdds-btn-secondary-outline-color: var(--sdds-white);
-  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-300);
   --sdds-btn-secondary-background-disabled: transparent;
   --sdds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
   --sdds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
+  --sdds-btn-icon-secondary-color-focus: var(--sdds-white);
+  --sdds-btn-icon-secondary-fill-focus: var(--sdds-white);
   /* ICON */
   --sdds-btn-icon-secondary-fill: var(--sdds-grey-50);
   --sdds-btn-icon-secondary-color: var(--sdds-grey-50);
@@ -241,7 +243,7 @@
   box-sizing: border-box;
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
-  display: flex;
+  display: inline-flex;
   align-items: center;
   border-radius: 4px;
   border: none;
@@ -260,6 +262,9 @@
   cursor: unset;
 }
 .sdds-btn:focus {
+  outline: none;
+}
+.sdds-btn:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -275,7 +280,7 @@
   font-size: 12px;
   border-radius: 2px;
 }
-.sdds-btn.sdds-btn-xs:focus {
+.sdds-btn.sdds-btn-xs:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -286,7 +291,7 @@
 .sdds-btn.sdds-btn-sm.sdds-btn-only-icon {
   padding: 11px;
 }
-.sdds-btn.sdds-btn-sm:focus {
+.sdds-btn.sdds-btn-sm:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -307,7 +312,7 @@
 .sdds-btn.sdds-btn-md.sdds-btn-only-icon {
   padding: 13px;
 }
-.sdds-btn.sdds-btn-md:focus {
+.sdds-btn.sdds-btn-md:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -325,7 +330,7 @@
 .sdds-btn.sdds-btn-lg.sdds-btn-only-icon {
   padding: 17px;
 }
-.sdds-btn.sdds-btn-lg:focus {
+.sdds-btn.sdds-btn-lg:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -372,13 +377,13 @@
   fill: var(--sdds-btn-icon-primary-color-hover);
   color: var(--sdds-btn-icon-primary-color-hover);
 }
-.sdds-btn.sdds-btn-primary:focus {
+.sdds-btn.sdds-btn-primary:focus-visible {
   background: var(--sdds-btn-primary-background-focus);
   border-color: var(--sdds-btn-primary-border-color-focus);
   color: var(--sdds-btn-primary-color-focus);
   outline-color: var(--sdds-btn-primary-outline-color-focus);
 }
-.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon {
+.sdds-btn.sdds-btn-primary:focus-visible .sdds-btn-icon {
   fill: var(--sdds-btn-icon-primary-fill-focus);
   color: var(--sdds-btn-icon-primary-fill-focus);
   fill: var(--sdds-btn-icon-primary-color-focus);
@@ -403,15 +408,6 @@
 .sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
   color: var(--sdds-grey-300);
 }
-.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
 .sdds-btn.sdds-btn-secondary {
   background: var(--sdds-btn-secondary-background);
   border-color: var(--sdds-btn-secondary-border-color);
@@ -437,13 +433,13 @@
   fill: var(--sdds-btn-icon-secondary-color-hover);
   color: var(--sdds-btn-icon-secondary-color-hover);
 }
-.sdds-btn.sdds-btn-secondary:focus {
+.sdds-btn.sdds-btn-secondary:focus-visible {
   background: var(--sdds-btn-secondary-background-focus);
   border-color: var(--sdds-btn-secondary-border-color-focus);
   color: var(--sdds-btn-secondary-color-focus);
   outline-color: var(--sdds-btn-secondary-outline-color-focus);
 }
-.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon {
+.sdds-btn.sdds-btn-secondary:focus-visible .sdds-btn-icon {
   fill: var(--sdds-btn-icon-secondary-fill-focus);
   color: var(--sdds-btn-icon-secondary-fill-focus);
   fill: var(--sdds-btn-icon-secondary-color-focus);
@@ -466,16 +462,7 @@
   outline-color: var(--sdds-btn-secondary-outline-color-disabled);
 }
 .sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
+  color: rgba(0, 0, 0, 0.38);
 }
 .sdds-btn.sdds-btn-ghost {
   background: var(--sdds-btn-ghost-background);
@@ -502,13 +489,13 @@
   fill: var(--sdds-btn-icon-ghost-color-hover);
   color: var(--sdds-btn-icon-ghost-color-hover);
 }
-.sdds-btn.sdds-btn-ghost:focus {
+.sdds-btn.sdds-btn-ghost:focus-visible {
   background: var(--sdds-btn-ghost-background-focus);
   border-color: var(--sdds-btn-ghost-border-color-focus);
   color: var(--sdds-btn-ghost-color-focus);
   outline-color: var(--sdds-btn-ghost-outline-color-focus);
 }
-.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon {
+.sdds-btn.sdds-btn-ghost:focus-visible .sdds-btn-icon {
   fill: var(--sdds-btn-icon-ghost-fill-focus);
   color: var(--sdds-btn-icon-ghost-fill-focus);
   fill: var(--sdds-btn-icon-ghost-color-focus);
@@ -531,16 +518,7 @@
   outline-color: var(--sdds-btn-ghost-outline-color-disabled);
 }
 .sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
+  color: rgba(0, 0, 0, 0.38);
 }
 .sdds-btn.sdds-btn-danger {
   background: var(--sdds-btn-danger-background);
@@ -567,13 +545,13 @@
   fill: var(--sdds-btn-icon-danger-color-hover);
   color: var(--sdds-btn-icon-danger-color-hover);
 }
-.sdds-btn.sdds-btn-danger:focus {
+.sdds-btn.sdds-btn-danger:focus-visible {
   background: var(--sdds-btn-danger-background-focus);
   border-color: var(--sdds-btn-danger-border-color-focus);
   color: var(--sdds-btn-danger-color-focus);
   outline-color: var(--sdds-btn-danger-outline-color-focus);
 }
-.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon {
+.sdds-btn.sdds-btn-danger:focus-visible .sdds-btn-icon {
   fill: var(--sdds-btn-icon-danger-fill-focus);
   color: var(--sdds-btn-icon-danger-fill-focus);
   fill: var(--sdds-btn-icon-danger-color-focus);
@@ -598,22 +576,13 @@
 .sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
   color: var(--sdds-grey-300);
 }
-.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
-.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
-  color: var(--sdds-grey-300);
-}
 
 i.sdds-btn-icon[slot=icon] {
   line-height: 1;
 }
 
 :host(sdds-button) {
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 :host(sdds-button) ::slotted([slot=icon]) {
@@ -641,7 +610,7 @@ i.sdds-btn-icon[slot=icon] {
 }
 
 :host(sdds-button:not([only-icon])) {
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 :host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]) {

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

@@ -162,4 +162,3 @@ const Template = ({ modeVariant, header, subheader, headerImg, headerPlacement,
     </div>
   `);
 export const Native = Template.bind({});
-//# sourceMappingURL=card.stories.js.map

package/dist/collection/components/card/sdds-card.css

@@ -63,6 +63,7 @@
 .card slot[name=card-bottom]::slotted(*) {
   display: flex;
   padding: 16px;
+  color: var(--sdds-card-icon-color);
 }
 
 button {

package/dist/collection/components/card/sdds-card.js

@@ -259,7 +259,7 @@ export class SddsCard {
         "method": "sddsClick",
         "name": "sddsClick",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
@@ -274,4 +274,3 @@ export class SddsCard {
   }
   static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=sdds-card.js.map

package/dist/collection/components/card/sdds-card.stories.js

@@ -157,4 +157,3 @@ const Template = ({ modeVariant, header, subheader, headerImg, headerPlacement,
   : ''}
   `);
 export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-card.stories.js.map

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

@@ -60,4 +60,3 @@ const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
     </div>
   `);
 export const Native = Template.bind({});
-//# sourceMappingURL=checkbox.stories.js.map

package/dist/collection/components/checkbox/sdds-checkbox.css

@@ -32,13 +32,13 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-  border-radius: 2px;
 }
 .sdds-checkbox-webcomponent input[type=checkbox]::before {
   width: 24px;
   height: 24px;
   left: 0;
   top: 0;
+  border-radius: 4px;
 }
 .sdds-checkbox-webcomponent input[type=checkbox]::after {
   border: 1px solid var(--sdds-checkbox-interaction-01);
@@ -47,14 +47,15 @@
   height: 16px;
   left: 4px;
   top: 4px;
+  border-radius: 2px;
 }
 .sdds-checkbox-webcomponent input[type=checkbox]:hover::before {
   background-color: var(--sdds-checkbox-background-hover);
-  opacity: 0.12;
+  opacity: var(--sdds-checkbox-background-opacity-hover);
 }
 .sdds-checkbox-webcomponent 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-webcomponent input[type=checkbox]:disabled, .sdds-checkbox-webcomponent input[type=checkbox].disabled {
@@ -78,7 +79,7 @@
 }
 .sdds-checkbox-webcomponent input[type=checkbox]:checked:hover::before {
   background-color: var(--sdds-checkbox-background-hover);
-  opacity: 0.12;
+  opacity: var(--sdds-checkbox-background-opacity-hover);
 }
 .sdds-checkbox-webcomponent input[type=checkbox]:checked:disabled:hover::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked:disabled::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked.disabled:hover::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked.disabled::before {
   display: block;

package/dist/collection/components/checkbox/sdds-checkbox.js

@@ -35,7 +35,7 @@ export class SddsCheckbox {
   render() {
     return (h("div", { class: "sdds-checkbox-webcomponent" }, 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", null))));
+      } }), h("label", { htmlFor: this.checkboxId }, h("slot", { name: "label" }))));
   }
   static get is() { return "sdds-checkbox"; }
   static get encapsulation() { return "scoped"; }
@@ -237,4 +237,3 @@ export class SddsCheckbox {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=sdds-checkbox.js.map

package/dist/collection/components/checkbox/sdds-checkbox.stories.js

@@ -59,7 +59,7 @@ const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
         ${disabled ? 'disabled' : ''}
         value="checkbox-value"
         >
-        ${label}
+        <div slot="label">${label}</div>
     </sdds-checkbox>
     
     <!-- Script tag with event listener for demo purposes. -->
@@ -77,4 +77,3 @@ const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
     </script>
   `);
 export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-checkbox.stories.js.map

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

@@ -0,0 +1,126 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Chips',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    active: {
+      name: 'Active',
+      description: 'Toggles if the chip is active or not.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the chip size.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'Large' },
+      },
+    },
+    placeholderText: {
+      name: 'Placeholder',
+      description: 'Sets custom chip text.',
+      control: {
+        type: 'text',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Adds an icon to the chip.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    iconPosition: {
+      name: 'Icon position',
+      description: 'Sets the placement of the icon.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon left', 'Icon right'],
+      if: { arg: 'icon', eq: true },
+      table: {
+        defaultValue: { summary: 'Icon right' },
+      },
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Switch between showing a native or a web component icon.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      if: { arg: 'icon', eq: true },
+      table: {
+        defaultValue: { summary: 'Native' },
+      },
+    },
+  },
+  args: {
+    active: false,
+    size: 'Large',
+    placeholderText: 'Chip text',
+    icon: false,
+    iconPosition: 'Icon right',
+    iconType: 'Native',
+  },
+};
+const Template = ({ active, size, placeholderText, icon, iconPosition, iconType }) => {
+  const activeValue = active === true ? 'sdds-chip-active' : '';
+  const sizeValue = size === 'Small' ? 'sdds-chip-sm' : '';
+  const iconPositionLookup = {
+    'Icon left': 'sdds-chip-icon-left',
+    'Icon right': 'sdds-chip-icon-right',
+  };
+  // TODO - Add dark theme to story
+  const iconSvg = `
+    ${iconType === 'Native'
+    ? '<i class=" sdds-icon notification"></i>'
+    : '<sdds-icon name="notification" size="16px"></sdds-icon>'}
+    `;
+  return formatHtmlPreview(`
+  ${iconType === 'Native'
+    ? `<style>
+/* Note: In case you are using WebFont icons, please make sure to import icons css file in your implementation */
+    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
+
+          </style>`
+    : ''}
+    <!-- Below is a chip button implementation. Please use the proper html element 
+    depending on usage (button, checkbox, radio, etc) -->
+    <button class="sdds-chip ${icon ? iconPositionLookup[iconPosition] : ''} ${activeValue} ${sizeValue}">
+      ${icon
+    ? `
+      <div class="sdds-chip-icon">
+        ${iconSvg}
+      </div>
+      `
+    : ''}<span class="sdds-chip-text">${placeholderText}</span>
+    </button>
+    `);
+};
+export const Native = Template.bind({});