@scania/tegel 0.0.5 → 0.0.6

package/dist/collection/components/banner/sdds-banner.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\nimport readme from './readme.md';\n\n// FIXME: CMS: Change state to type in Code tab of component\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'Changes the type of the component.',\n      options: ['Default', 'Error', 'Information'],\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'none' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Sets text to be displayed in the header section.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Sets text to be displayed in the subheader section.',\n      control: {\n        type: 'text',\n      },\n    },\n    linkText: {\n      name: 'Link',\n      description: 'Sets text to be displayed in the link section.',\n      control: {\n        type: 'text',\n      },\n    },\n    href: {\n      name: 'Link href',\n      description: 'Sets the href for the link.',\n      control: {\n        type: 'text',\n      },\n    },\n    linkTarget: {\n      name: 'Link target',\n      description: 'Sets where to open the linked URL.',\n      control: {\n        type: 'radio',\n      },\n      options: ['_self', '_blank', '_parent', '_top'],\n      table: {\n        defaultValue: { summary: '_self' },\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Name of icon to display, choose `none` to remove the icon.',\n      control: {\n        type: 'select',\n      },\n      options: [...iconsNames, 'none'],\n      if: { arg: 'type', eq: 'Default' },\n    },\n    persistent: {\n      name: 'Disable closing',\n      description: `Removes the 'close button' in the banner.`,\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    type: 'Default',\n    header: 'This is a header text area',\n    subheader: 'SubHeader text area',\n    linkText: 'Learn more',\n    href: 'tegel.scania.com',\n    linkTarget: '_self',\n    icon: 'truck',\n    persistent: false,\n  },\n};\n\nconst Template = ({ type, icon, header, subheader, linkText, href, persistent, linkTarget }) =>\n  formatHtmlPreview(`\n      <sdds-banner\n          ${type !== 'Default' ? `type=\"${type.toLowerCase()}\"` : ''}\n          ${icon !== 'none' ? `icon=\"${icon}\"` : ''}\n          ${header !== '' ? `header=\"${header}\"` : ''}\n          ${subheader !== '' ? `subheader=\"${subheader}\"` : ''}\n          ${linkText !== '' ? `link-text=\"${linkText}\"` : ''}\n          ${href !== '' ? `href=\"${href}\"` : ''}\n          ${linkTarget !== '' ? `link-target=\"${linkTarget}\"` : ''}\n\n          ${persistent ? `persistent` : ''}\n          >\n      </sdds-banner>\n\n      <!-- Script tag with eventlistener for demo purposes. -->\n      <script>\n        document.addEventListener('sddsClose', (event) => {\n          console.log('Closed banner with BannerID: ', event.detail.bannerId)\n        })\n      </script>\n    `);\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\nimport readme from './readme.md';\n\n// FIXME: CMS: Change state to type in Code tab of component\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'Changes the type of the component.',\n      options: ['Default', 'Error', 'Information'],\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'none' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Sets text to be displayed in the header section.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Sets text to be displayed in the subheader section.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Sets a link to be displayed in the link section.',\n      control: {\n        type: 'text',\n      },\n    },\n\n    icon: {\n      name: 'Icon',\n      description: 'Name of icon to display, choose `none` to remove the icon.',\n      control: {\n        type: 'select',\n      },\n      options: [...iconsNames, 'none'],\n      if: { arg: 'type', eq: 'Default' },\n    },\n    persistent: {\n      name: 'Disable closing',\n      description: `Removes the 'close button' in the banner.`,\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    type: 'Default',\n    header: 'This is a header text area',\n    subheader: '<div slot=\"banner-subheader\">Short subheader</div>',\n    link: '<sdds-link slot=\"banner-link\" ><a href=\"/\">Link example</a></sdds-link>',\n    icon: 'truck',\n    persistent: false,\n  },\n};\n\nconst Template = ({ type, icon, header, subheader, persistent, link }) =>\n  formatHtmlPreview(`\n      <sdds-banner\n          ${type !== 'Default' ? `type=\"${type.toLowerCase()}\"` : ''}\n          ${icon !== 'none' ? `icon=\"${icon}\"` : ''}\n          ${header !== '' ? `header=\"${header}\"` : ''}\n          ${persistent ? `persistent` : ''}\n          >\n          ${subheader ? `${subheader}` : ''}\n          ${link ? `${link}` : ''}\n      </sdds-banner>\n\n      <!-- Script tag with eventlistener for demo purposes. -->\n      <script>\n        document.addEventListener('sddsClose', (event) => {\n          console.log(event)\n        })\n        document.addEventListener('sddsShow', (event) => {\n          console.log(event)\n        })\n      </script>\n    `);\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+[role=listitem] ::slotted(*) {
+  color: var(--sdds-breadcrumb-color);
+  text-decoration: none;
+}
+[role=listitem]:hover ::slotted(*) {
+  color: var(--sdds-breadcrumb-color-hover);
+  text-decoration: underline;
+}
+[role=listitem]:focus-visible {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+[role=listitem].disabled ::slotted(*), [role=listitem].current ::slotted(*),
+[role=listitem] [aria-current=page] ::slotted(*) {
+  pointer-events: none;
+  cursor: default;
+  color: var(--sdds-breadcrumb-color-disabled);
+}
+[role=listitem].disabled:hover ::slotted(*), [role=listitem].current:hover ::slotted(*),
+[role=listitem] [aria-current=page]:hover ::slotted(*) {
+  text-decoration: none;
+  cursor: not-allowed;
+}
+[role=listitem] ::slotted(*)::after {
+  content: "›";
+  color: var(--sdds-breadcrumb-separator-color);
+  margin-right: 4px;
+  margin-left: 4px;
+  display: inline-block;
+  width: 4px;
+  height: 8px;
+}
+
+:host(.last) ::slotted(*)::after {
+  display: none;
+}

package/dist/collection/components/{tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.js → breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.js}

@@ -1,28 +1,28 @@
-import { Host, h } from '@stencil/core';
-export class SddsInlineTabsButton {
+import { h } from '@stencil/core';
+export class SddsBreadcrumbItem {
   constructor() {
+    this.current = false;
     this.disabled = false;
-    this.selected = false;
   }
   render() {
-    return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
-        ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", null)))));
+    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
+        ${this.disabled ? 'disabled' : ''}` }, h("slot", null)));
   }
-  static get is() { return "sdds-inline-tabs-button"; }
+  static get is() { return "sdds-breadcrumb-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["sdds-inline-tabs-button.scss"]
+      "$": ["sdds-breadcrumb-item.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["sdds-inline-tabs-button.css"]
+      "$": ["sdds-breadcrumb-item.css"]
     };
   }
   static get properties() {
     return {
-      "disabled": {
+      "current": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -34,13 +34,13 @@ export class SddsInlineTabsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Disables the tab."
+          "text": "Boolean for the current link"
         },
-        "attribute": "disabled",
+        "attribute": "current",
         "reflect": false,
         "defaultValue": "false"
       },
-      "selected": {
+      "disabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -52,13 +52,13 @@ export class SddsInlineTabsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Marks the tab as the selected one."
+          "text": "Toggle the disabled state for the breadcrumb"
         },
-        "attribute": "selected",
+        "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
       }
     };
   }
 }
-//# sourceMappingURL=sdds-inline-tabs-button.js.map
+//# sourceMappingURL=sdds-breadcrumb-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-breadcrumb-item.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;;mBAEF,KAAK;oBAGJ,KAAK;;EAEjC,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;MAEnC,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-item',\n  styleUrl: 'sdds-breadcrumb-item.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbItem {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <div\n        role=\"listitem\"\n        class={`${this.current ? 'current' : ''} \n        ${this.disabled ? 'disabled' : ''}`}\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

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,9 +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({});

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kCAAkC,CAAC;AAC1D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE;IAC5D,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,6GAA6G;OACnH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,6GAA6G;OACnH;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;OAMG,CACJ,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import itemReadme from './sdds-breadcrumb-link/readme.md';\nimport readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  parameters: {\n    notes: { 'Breadcumb': readme, 'Breadcumb Link': itemReadme },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `   \n      <sdds-breadcrumb>\n        <sdds-breadcrumb-link href=\"#\">Page 1</sdds-breadcrumb-link>\n        <sdds-breadcrumb-link href=\"google.se\">Page 2</sdds-breadcrumb-link>\n        <sdds-breadcrumb-link current>Page 3</sdds-breadcrumb-link>\n      </sdds-breadcrumb>\n      `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kCAAkC,CAAC;AAC1D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE;IAC5D,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,6GAA6G;OACnH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,6GAA6G;OACnH;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;OAYG,CACJ,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import itemReadme from './sdds-breadcrumb-item/readme.md';\nimport readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  parameters: {\n    notes: { 'Breadcumb': readme, 'Breadcumb Item': itemReadme },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `   \n      <sdds-breadcrumb>\n        <sdds-breadcrumb-item>\n          <a href=\"#\">Page 1</a>\n        </sdds-breadcrumb-item>\n        <sdds-breadcrumb-item>\n          <a href=\"#\">Page 2</a>\n        </sdds-breadcrumb-item>\n        <sdds-breadcrumb-item current>\n          <a href=\"#\">Page 3</a>\n        </sdds-breadcrumb-item>\n      </sdds-breadcrumb>\n      `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}

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/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": [],

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-card.js","sourceRoot":"","sources":["../../../src/components/card/sdds-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-card',\n  styleUrl: 'sdds-card.scss',\n  shadow: true,\n})\nexport class SddsCard {\n  /** Variant of the card based on the theme used. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placement of the header */\n  @Prop() headerPlacement: 'above' | 'below' = 'above';\n\n  /** Text in the header */\n  @Prop() header: string;\n\n  /** Subheader text in the header */\n  @Prop() subheader: string;\n\n  /** Header image src */\n  @Prop() headerImg: string;\n\n  /** Alt text for the header image */\n  @Prop() headerImgAlt: string;\n\n  /** Body image src */\n  @Prop() bodyImg: string;\n\n  /** Alt text for the body image */\n  @Prop() bodyImgAlt: string;\n\n  /** Divider for the body */\n  @Prop() bodyDivider: boolean = false;\n\n  /** Makes the card clickable. */\n  @Prop() clickable: boolean = false;\n\n  /** ID for the card, must be unique.\n   *\n   * **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n   */\n  @Prop() cardId: string = crypto.randomUUID();\n\n  /** Sends unique card identifier when the card is clicked, if clickable=true */\n  @Event({\n    eventName: 'sddsClick',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClick: EventEmitter<{\n    cardId: string;\n  }>;\n\n  @Element() hostElement: HTMLSddsCardElement;\n\n  @State() hasCardBottomSlot: boolean = false;\n\n  @State() hasCardBodySlot: boolean = false;\n\n  connectedCallback() {\n    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n  }\n\n  handleClick = () => {\n    this.sddsClick.emit({\n      cardId: this.cardId,\n    });\n  };\n\n  getCardContent = () => (\n    <div>\n      {this.headerPlacement === 'above' && (\n        <div class={`card-top ${this.headerPlacement}`}>\n          {this.headerImg && (\n            <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n          )}{' '}\n          <div\n            class={`\n          card-top-header\n          ${!this.headerImg ? 'no-header-img' : ''}\n          ${!this.header || !this.subheader ? 'single-line-header' : ''}\n          `}\n          >\n            <span class={`card-header`}>{this.header}</span>\n            <span class={`card-subheader`}>{this.subheader}</span>\n          </div>\n        </div>\n      )}\n      <div class={`card-body`}>\n        {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n        {this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (\n          <div class={`card-top ${this.headerPlacement}`}>\n            {this.headerImg && (\n              <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n            )}\n            <div\n              class={`\n            card-top-header\n            ${!this.headerImg ? 'no-header-img' : ''}\n            ${!this.header || !this.subheader ? 'single-line-header' : ''}\n            `}\n            >\n              <span class={`card-header`}>{this.header}</span>\n              <span class={`card-subheader`}>{this.subheader}</span>\n            </div>\n          </div>\n        )}\n        {this.bodyDivider && <div class={`sdds-divider`}></div>}\n        <slot name=\"card-body\"></slot>\n      </div>\n      <div class={`card-bottom`}>\n        {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n      </div>\n    </div>\n  );\n\n  render() {\n    return (\n      <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n        {this.clickable ? (\n          <button\n            class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n            onClick={() => {\n              if (this.clickable) {\n                this.handleClick();\n              }\n            }}\n          >\n            {this.getCardContent()}\n          </button>\n        ) : (\n          <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n            {this.getCardContent()}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-card.js","sourceRoot":"","sources":["../../../src/components/card/sdds-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-card',\n  styleUrl: 'sdds-card.scss',\n  shadow: true,\n})\nexport class SddsCard {\n  /** Variant of the card based on the theme used. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placement of the header */\n  @Prop() headerPlacement: 'above' | 'below' = 'above';\n\n  /** Text in the header */\n  @Prop() header: string;\n\n  /** Subheader text in the header */\n  @Prop() subheader: string;\n\n  /** Header image src */\n  @Prop() headerImg: string;\n\n  /** Alt text for the header image */\n  @Prop() headerImgAlt: string;\n\n  /** Body image src */\n  @Prop() bodyImg: string;\n\n  /** Alt text for the body image */\n  @Prop() bodyImgAlt: string;\n\n  /** Divider for the body */\n  @Prop() bodyDivider: boolean = false;\n\n  /** Makes the card clickable. */\n  @Prop() clickable: boolean = false;\n\n  /** ID for the card, must be unique.\n   *\n   * **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n   */\n  @Prop() cardId: string = crypto.randomUUID();\n\n  /** Sends unique card identifier when the card is clicked, if clickable=true */\n  @Event({\n    eventName: 'sddsClick',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsClick: EventEmitter<{\n    cardId: string;\n  }>;\n\n  @Element() hostElement: HTMLSddsCardElement;\n\n  @State() hasCardBottomSlot: boolean = false;\n\n  @State() hasCardBodySlot: boolean = false;\n\n  connectedCallback() {\n    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n  }\n\n  handleClick = () => {\n    this.sddsClick.emit({\n      cardId: this.cardId,\n    });\n  };\n\n  getCardContent = () => (\n    <div>\n      {this.headerPlacement === 'above' && (\n        <div class={`card-top ${this.headerPlacement}`}>\n          {this.headerImg && (\n            <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n          )}{' '}\n          <div\n            class={`\n          card-top-header\n          ${!this.headerImg ? 'no-header-img' : ''}\n          ${!this.header || !this.subheader ? 'single-line-header' : ''}\n          `}\n          >\n            <span class={`card-header`}>{this.header}</span>\n            <span class={`card-subheader`}>{this.subheader}</span>\n          </div>\n        </div>\n      )}\n      <div class={`card-body`}>\n        {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n        {this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (\n          <div class={`card-top ${this.headerPlacement}`}>\n            {this.headerImg && (\n              <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n            )}\n            <div\n              class={`\n            card-top-header\n            ${!this.headerImg ? 'no-header-img' : ''}\n            ${!this.header || !this.subheader ? 'single-line-header' : ''}\n            `}\n            >\n              <span class={`card-header`}>{this.header}</span>\n              <span class={`card-subheader`}>{this.subheader}</span>\n            </div>\n          </div>\n        )}\n        {this.bodyDivider && <div class={`sdds-divider`}></div>}\n        <slot name=\"card-body\"></slot>\n      </div>\n      <div class={`card-bottom`}>\n        {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n      </div>\n    </div>\n  );\n\n  render() {\n    return (\n      <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n        {this.clickable ? (\n          <button\n            class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n            onClick={() => {\n              if (this.clickable) {\n                this.handleClick();\n              }\n            }}\n          >\n            {this.getCardContent()}\n          </button>\n        ) : (\n          <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n            {this.getCardContent()}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/sdds-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AASzF,MAAM,OAAO,YAAY;;IA4CvB,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;;sBA9C2B,MAAM,CAAC,UAAU,EAAE;oBAGpB,KAAK;oBAGL,KAAK;mBAGW,KAAK;;;EAOjD,kDAAkD;EAElD,KAAK,CAAC,cAAc;IAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;EACJ,CAAC;EAiCD,kFAAkF;EAClF,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAWD,kFAAkF;EAClF,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,4BAA4B;MACrC,6BACgB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,sBACV,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,QAAQ,EAAE,GAAG,EAAE;UACb,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC,GACD;MACF,aAAO,OAAO,EAAE,IAAI,CAAC,UAAU;QAC7B,eAAa,CACP,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-checkbox',\n  styleUrl: 'sdds-checkbox.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsCheckbox {\n  /** Name for the checkbox's input element. */\n  @Prop() name: string;\n\n  /** ID for the checkbox's input element. Randomly generated if not specified. */\n  @Prop() checkboxId: string = crypto.randomUUID();\n\n  /** Sets the checkbox in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Make the checkbox required */\n  @Prop() required: boolean = false;\n\n  /** Sets the checkbox as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Value for the checkbox */\n  @Prop() value: string;\n\n  @Element() host: HostElement;\n\n  /** Toggles the checked value of the component. */\n  @Method()\n  async toggleCheckbox() {\n    this.checked = !this.checked;\n    return {\n      checkboxId: this.checkboxId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique checkbox identifier and checked status when it is checked/unchecked. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    checkboxId: string;\n    checked: boolean;\n    value?: string;\n  }>;\n\n  handleChange = () => {\n    this.checked = !this.checked;\n    this.sddsChange.emit({\n      checkboxId: this.checkboxId,\n      checked: this.checked,\n      value: this.value,\n    });\n  };\n\n  /** Focus event for the checkbox */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the checkbox */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleBlur(event): void {\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <div class=\"sdds-checkbox-webcomponent\">\n        <input\n          aria-checked={this.checked}\n          aria-required={this.required}\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          value={this.value}\n          id={this.checkboxId}\n          checked={this.checked}\n          disabled={this.disabled}\n          onFocus={(event) => this.handleFocus(event)}\n          onBlur={(event) => this.handleBlur(event)}\n          onChange={() => {\n            this.handleChange();\n          }}\n        />\n        <label htmlFor={this.checkboxId}>\n          <slot></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/sdds-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AASzF,MAAM,OAAO,YAAY;;IA4CvB,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;;sBA9C2B,MAAM,CAAC,UAAU,EAAE;oBAGpB,KAAK;oBAGL,KAAK;mBAGW,KAAK;;;EAOjD,kDAAkD;EAElD,KAAK,CAAC,cAAc;IAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;EACJ,CAAC;EAiCD,kFAAkF;EAClF,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAWD,kFAAkF;EAClF,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,4BAA4B;MACrC,6BACgB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,sBACV,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,QAAQ,EAAE,GAAG,EAAE;UACb,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC,GACD;MACF,aAAO,OAAO,EAAE,IAAI,CAAC,UAAU;QAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-checkbox',\n  styleUrl: 'sdds-checkbox.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsCheckbox {\n  /** Name for the checkbox's input element. */\n  @Prop() name: string;\n\n  /** ID for the checkbox's input element. Randomly generated if not specified. */\n  @Prop() checkboxId: string = crypto.randomUUID();\n\n  /** Sets the checkbox in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Make the checkbox required */\n  @Prop() required: boolean = false;\n\n  /** Sets the checkbox as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Value for the checkbox */\n  @Prop() value: string;\n\n  @Element() host: HostElement;\n\n  /** Toggles the checked value of the component. */\n  @Method()\n  async toggleCheckbox() {\n    this.checked = !this.checked;\n    return {\n      checkboxId: this.checkboxId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique checkbox identifier and checked status when it is checked/unchecked. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    checkboxId: string;\n    checked: boolean;\n    value?: string;\n  }>;\n\n  handleChange = () => {\n    this.checked = !this.checked;\n    this.sddsChange.emit({\n      checkboxId: this.checkboxId,\n      checked: this.checked,\n      value: this.value,\n    });\n  };\n\n  /** Focus event for the checkbox */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the checkbox */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleBlur(event): void {\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <div class=\"sdds-checkbox-webcomponent\">\n        <input\n          aria-checked={this.checked}\n          aria-required={this.required}\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          value={this.value}\n          id={this.checkboxId}\n          checked={this.checked}\n          disabled={this.disabled}\n          onFocus={(event) => this.handleFocus(event)}\n          onBlur={(event) => this.handleBlur(event)}\n          onChange={() => {\n            this.handleChange();\n          }}\n        />\n        <label htmlFor={this.checkboxId}>\n          <slot name=\"label\"></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"]}

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. -->

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

@@ -1 +1 @@
-{"version":3,"file":"sdds-checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/sdds-checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAChD,iBAAiB,CAAC;;UAEV,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACxB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;UAG1B,KAAK;;;;;;;;;;;;;;;;GAgBZ,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Checkbox',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label text',\n      description: 'Sets the label of the component.',\n      control: {\n        type: 'text',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Checks the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    label: 'Label',\n    checked: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ label, checked, disabled }) =>\n  formatHtmlPreview(`\n    <sdds-checkbox\n        ${checked ? 'checked' : ''}\n        ${disabled ? 'disabled' : ''}\n        value=\"checkbox-value\"\n        >\n        ${label}\n    </sdds-checkbox>\n    \n    <!-- Script tag with event listener for demo purposes. -->\n    <script>\n        checkboxElement = document.querySelector('sdds-checkbox')\n        checkboxElement.addEventListener('sddsChange', (event) => {\n            console.log('Checkbox with id: ', event.detail.checkboxId, ' is ', event.detail.checked)\n        })\n        checkboxElement.addEventListener('sddsFocus',(event) => {\n          console.log(event)\n        })\n        checkboxElement.addEventListener('sddsBlur',(event) => {\n          console.log(event)\n        })\n    </script>\n  `);\n\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/sdds-checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,sBAAsB;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAChD,iBAAiB,CAAC;;UAEV,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACxB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;4BAGR,KAAK;;;;;;;;;;;;;;;;GAgB9B,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Checkbox',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label text',\n      description: 'Sets the label of the component.',\n      control: {\n        type: 'text',\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Checks the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    label: 'Label',\n    checked: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ label, checked, disabled }) =>\n  formatHtmlPreview(`\n    <sdds-checkbox\n        ${checked ? 'checked' : ''}\n        ${disabled ? 'disabled' : ''}\n        value=\"checkbox-value\"\n        >\n        <div slot=\"label\">${label}</div>\n    </sdds-checkbox>\n    \n    <!-- Script tag with event listener for demo purposes. -->\n    <script>\n        checkboxElement = document.querySelector('sdds-checkbox')\n        checkboxElement.addEventListener('sddsChange', (event) => {\n            console.log('Checkbox with id: ', event.detail.checkboxId, ' is ', event.detail.checked)\n        })\n        checkboxElement.addEventListener('sddsFocus',(event) => {\n          console.log(event)\n        })\n        checkboxElement.addEventListener('sddsBlur',(event) => {\n          console.log(event)\n        })\n    </script>\n  `);\n\nexport const WebComponent = Template.bind({});\n"]}