@scania/tegel 0.0.7 → 0.0.8

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

@@ -186,60 +186,7 @@
   --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-secondary);
 }
 
-.sdds-on-white-bg {
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);
-}
-
-.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon {
-  position: relative;
-}
-.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
-  font-size: 20px;
-  line-height: 1;
-  position: absolute;
-  right: 0;
-}
-.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before {
-  font-size: 20px;
-  line-height: 1.25;
-}
-
-.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon {
-  position: relative;
-}
-.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
-  font-size: 20px;
-  line-height: 1;
-  position: absolute;
-  right: 0;
-}
-.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before {
-  font-size: 20px;
-  line-height: 1.25;
-}
-
-.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon {
-  position: relative;
-}
-.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
-  font-size: 16px;
-  line-height: 1;
-  position: absolute;
-  right: 0;
-}
-.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before {
-  font-size: 16px;
-  line-height: 1.25;
-}
-
-.sdds-btn.sdds-btn-primary .sdds-btn-icon {
-  fill: var(--sdds-btn-primary-icon-fill);
-  color: var(--sdds-btn-primary-icon-color);
-  font-size: 16px;
-}
-
-.sdds-btn {
+button {
   box-sizing: border-box;
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
@@ -255,147 +202,111 @@
   padding: var(--sdds-spacing-element-20);
   border: 1px solid;
 }
-.sdds-btn * {
+button * {
   box-sizing: border-box;
 }
-.sdds-btn:disabled, .sdds-btn.disabled {
+button:disabled, button.disabled {
   cursor: unset;
 }
-.sdds-btn:focus {
+button:focus {
   outline: none;
 }
-.sdds-btn:focus-visible {
+button:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
-.sdds-btn span.sdds-btn-text + .sdds-btn-icon {
-  margin-left: var(--sdds-spacing-element-16);
-  width: 20px;
-  height: 20px;
-  line-height: 0;
-}
-.sdds-btn.sdds-btn-xs {
+button.xs {
   padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);
   height: 24px;
   font-size: 12px;
   border-radius: 2px;
 }
-.sdds-btn.sdds-btn-xs:focus-visible {
+button.xs:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
-.sdds-btn.sdds-btn-sm {
+button.sm {
   padding: var(--sdds-spacing-element-12);
   height: 40px;
 }
-.sdds-btn.sdds-btn-sm.sdds-btn-only-icon {
+button.sm.only-icon {
   padding: 11px;
 }
-.sdds-btn.sdds-btn-sm:focus-visible {
+button.sm:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
-.sdds-btn.sdds-btn-sm span.sdds-btn-text + .sdds-btn-icon {
-  margin: unset;
-  margin-left: var(--sdds-spacing-element-24);
-  width: 16px;
-  height: 16px;
-}
-.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
-  margin: unset;
-  margin-left: var(--sdds-spacing-element-12);
-}
-.sdds-btn.sdds-btn-md {
+button.md {
   padding: var(--sdds-spacing-element-16);
   height: 48px;
 }
-.sdds-btn.sdds-btn-md.sdds-btn-only-icon {
+button.md.only-icon {
   padding: 13px;
 }
-.sdds-btn.sdds-btn-md:focus-visible {
+button.md:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
-.sdds-btn.sdds-btn-md span.sdds-btn-text + .sdds-btn-icon {
-  margin: unset;
-  margin-left: var(--sdds-spacing-element-20);
-}
-.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
-  margin-left: var(--sdds-spacing-element-16);
-}
-.sdds-btn.sdds-btn-lg {
+button.lg {
   padding: var(--sdds-spacing-element-20);
   height: 56px;
 }
-.sdds-btn.sdds-btn-lg.sdds-btn-only-icon {
+button.lg.only-icon {
   padding: 17px;
 }
-.sdds-btn.sdds-btn-lg:focus-visible {
+button.lg:focus-visible {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
-.sdds-btn.sdds-btn-lg span.sdds-btn-text + .sdds-btn-icon {
-  margin: unset;
-  margin-left: 28px;
-}
-.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
-  margin-left: var(--sdds-spacing-element-16);
-}
-.sdds-btn.sdds-btn-fullbleed {
+button.fullbleed {
   width: inherit;
   display: flex;
   justify-content: center;
 }
-.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon, .sdds-btn.sdds-btn-fullbleed.sdds-btn-icon {
-  margin-left: var(--sdds-spacing-element-8);
-}
-.sdds-btn span.sdds-btn-text {
-  align-self: baseline;
-}
-.sdds-btn.sdds-btn-primary {
+button.primary {
   background: var(--sdds-btn-primary-background);
   border-color: var(--sdds-btn-primary-border-color);
   color: var(--sdds-btn-primary-color);
   outline-color: var(--sdds-btn-primary-outline-color);
 }
-.sdds-btn.sdds-btn-primary .sdds-btn-icon {
+button.primary .icon {
   fill: var(--sdds-btn-icon-primary-fill);
   color: var(--sdds-btn-icon-primary-fill);
   fill: var(--sdds-btn-icon-primary-color);
   color: var(--sdds-btn-icon-primary-color);
   font-size: 16px;
 }
-.sdds-btn.sdds-btn-primary:hover {
+button.primary:hover {
   background: var(--sdds-btn-primary-background-hover);
   border-color: var(--sdds-btn-primary-border-color-hover);
   color: var(--sdds-btn-primary-color-hover);
   outline-color: var(--sdds-btn-primary-outline-color-hover);
 }
-.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon {
+button.primary:hover:not(.disabled) ::slotted([slot=icon]) {
   fill: var(--sdds-btn-icon-primary-fill-hover);
   color: var(--sdds-btn-icon-primary-fill-hover);
   fill: var(--sdds-btn-icon-primary-color-hover);
   color: var(--sdds-btn-icon-primary-color-hover);
 }
-.sdds-btn.sdds-btn-primary:focus-visible {
+button.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-visible .sdds-btn-icon {
+button.primary:focus-visible ::slotted([slot=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);
   color: var(--sdds-btn-icon-primary-color-focus);
 }
-.sdds-btn.sdds-btn-primary:active, .sdds-btn.sdds-btn-primary.active {
+button.primary:active, button.primary.active {
   background: var(--sdds-btn-primary-background-active);
   border-color: var(--sdds-btn-primary-border-color-active);
   color: var(--sdds-btn-primary-color-active);
   outline-color: var(--sdds-btn-primary-outline-color-active);
 }
-.sdds-btn.sdds-btn-primary.disabled, .sdds-btn.sdds-btn-primary:disabled {
+button.primary.disabled, button.primary:disabled {
   cursor: not-allowed;
   background: var(--sdds-btn-primary-background-disabled);
   cursor: not-allowed;
@@ -405,53 +316,50 @@
   cursor: not-allowed;
   outline-color: var(--sdds-btn-primary-outline-color-disabled);
 }
-.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 {
+button.secondary {
   background: var(--sdds-btn-secondary-background);
   border-color: var(--sdds-btn-secondary-border-color);
   color: var(--sdds-btn-secondary-color);
   outline-color: var(--sdds-btn-secondary-outline-color);
 }
-.sdds-btn.sdds-btn-secondary .sdds-btn-icon {
+button.secondary .icon {
   fill: var(--sdds-btn-icon-secondary-fill);
   color: var(--sdds-btn-icon-secondary-fill);
   fill: var(--sdds-btn-icon-secondary-color);
   color: var(--sdds-btn-icon-secondary-color);
   font-size: 16px;
 }
-.sdds-btn.sdds-btn-secondary:hover {
+button.secondary:hover {
   background: var(--sdds-btn-secondary-background-hover);
   border-color: var(--sdds-btn-secondary-border-color-hover);
   color: var(--sdds-btn-secondary-color-hover);
   outline-color: var(--sdds-btn-secondary-outline-color-hover);
 }
-.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon {
+button.secondary:hover:not(.disabled) ::slotted([slot=icon]) {
   fill: var(--sdds-btn-icon-secondary-fill-hover);
   color: var(--sdds-btn-icon-secondary-fill-hover);
   fill: var(--sdds-btn-icon-secondary-color-hover);
   color: var(--sdds-btn-icon-secondary-color-hover);
 }
-.sdds-btn.sdds-btn-secondary:focus-visible {
+button.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-visible .sdds-btn-icon {
+button.secondary:focus-visible ::slotted([slot=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);
   color: var(--sdds-btn-icon-secondary-color-focus);
 }
-.sdds-btn.sdds-btn-secondary:active, .sdds-btn.sdds-btn-secondary.active {
+button.secondary:active, button.secondary.active {
   background: var(--sdds-btn-secondary-background-active);
   border-color: var(--sdds-btn-secondary-border-color-active);
   color: var(--sdds-btn-secondary-color-active);
   outline-color: var(--sdds-btn-secondary-outline-color-active);
 }
-.sdds-btn.sdds-btn-secondary.disabled, .sdds-btn.sdds-btn-secondary:disabled {
+button.secondary.disabled, button.secondary:disabled {
   cursor: not-allowed;
   background: var(--sdds-btn-secondary-background-disabled);
   cursor: not-allowed;
@@ -461,53 +369,50 @@
   cursor: not-allowed;
   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: rgba(0, 0, 0, 0.38);
-}
-.sdds-btn.sdds-btn-ghost {
+button.ghost {
   background: var(--sdds-btn-ghost-background);
   border-color: var(--sdds-btn-ghost-border-color);
   color: var(--sdds-btn-ghost-color);
   outline-color: var(--sdds-btn-ghost-outline-color);
 }
-.sdds-btn.sdds-btn-ghost .sdds-btn-icon {
+button.ghost .icon {
   fill: var(--sdds-btn-icon-ghost-fill);
   color: var(--sdds-btn-icon-ghost-fill);
   fill: var(--sdds-btn-icon-ghost-color);
   color: var(--sdds-btn-icon-ghost-color);
   font-size: 16px;
 }
-.sdds-btn.sdds-btn-ghost:hover {
+button.ghost:hover {
   background: var(--sdds-btn-ghost-background-hover);
   border-color: var(--sdds-btn-ghost-border-color-hover);
   color: var(--sdds-btn-ghost-color-hover);
   outline-color: var(--sdds-btn-ghost-outline-color-hover);
 }
-.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon {
+button.ghost:hover:not(.disabled) ::slotted([slot=icon]) {
   fill: var(--sdds-btn-icon-ghost-fill-hover);
   color: var(--sdds-btn-icon-ghost-fill-hover);
   fill: var(--sdds-btn-icon-ghost-color-hover);
   color: var(--sdds-btn-icon-ghost-color-hover);
 }
-.sdds-btn.sdds-btn-ghost:focus-visible {
+button.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-visible .sdds-btn-icon {
+button.ghost:focus-visible ::slotted([slot=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);
   color: var(--sdds-btn-icon-ghost-color-focus);
 }
-.sdds-btn.sdds-btn-ghost:active, .sdds-btn.sdds-btn-ghost.active {
+button.ghost:active, button.ghost.active {
   background: var(--sdds-btn-ghost-background-active);
   border-color: var(--sdds-btn-ghost-border-color-active);
   color: var(--sdds-btn-ghost-color-active);
   outline-color: var(--sdds-btn-ghost-outline-color-active);
 }
-.sdds-btn.sdds-btn-ghost.disabled, .sdds-btn.sdds-btn-ghost:disabled {
+button.ghost.disabled, button.ghost:disabled {
   cursor: not-allowed;
   background: var(--sdds-btn-ghost-background-disabled);
   cursor: not-allowed;
@@ -517,53 +422,50 @@
   cursor: not-allowed;
   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: rgba(0, 0, 0, 0.38);
-}
-.sdds-btn.sdds-btn-danger {
+button.danger {
   background: var(--sdds-btn-danger-background);
   border-color: var(--sdds-btn-danger-border-color);
   color: var(--sdds-btn-danger-color);
   outline-color: var(--sdds-btn-danger-outline-color);
 }
-.sdds-btn.sdds-btn-danger .sdds-btn-icon {
+button.danger .icon {
   fill: var(--sdds-btn-icon-danger-fill);
   color: var(--sdds-btn-icon-danger-fill);
   fill: var(--sdds-btn-icon-danger-color);
   color: var(--sdds-btn-icon-danger-color);
   font-size: 16px;
 }
-.sdds-btn.sdds-btn-danger:hover {
+button.danger:hover {
   background: var(--sdds-btn-danger-background-hover);
   border-color: var(--sdds-btn-danger-border-color-hover);
   color: var(--sdds-btn-danger-color-hover);
   outline-color: var(--sdds-btn-danger-outline-color-hover);
 }
-.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon {
+button.danger:hover:not(.disabled) ::slotted([slot=icon]) {
   fill: var(--sdds-btn-icon-danger-fill-hover);
   color: var(--sdds-btn-icon-danger-fill-hover);
   fill: var(--sdds-btn-icon-danger-color-hover);
   color: var(--sdds-btn-icon-danger-color-hover);
 }
-.sdds-btn.sdds-btn-danger:focus-visible {
+button.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-visible .sdds-btn-icon {
+button.danger:focus-visible ::slotted([slot=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);
   color: var(--sdds-btn-icon-danger-color-focus);
 }
-.sdds-btn.sdds-btn-danger:active, .sdds-btn.sdds-btn-danger.active {
+button.danger:active, button.danger.active {
   background: var(--sdds-btn-danger-background-active);
   border-color: var(--sdds-btn-danger-border-color-active);
   color: var(--sdds-btn-danger-color-active);
   outline-color: var(--sdds-btn-danger-outline-color-active);
 }
-.sdds-btn.sdds-btn-danger.disabled, .sdds-btn.sdds-btn-danger:disabled {
+button.danger.disabled, button.danger:disabled {
   cursor: not-allowed;
   background: var(--sdds-btn-danger-background-disabled);
   cursor: not-allowed;
@@ -573,13 +475,6 @@
   cursor: not-allowed;
   outline-color: var(--sdds-btn-danger-outline-color-disabled);
 }
-.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: inline-flex;
@@ -589,7 +484,7 @@ i.sdds-btn-icon[slot=icon] {
   width: var(--sdds-spacing-element-20);
   height: var(--sdds-spacing-element-20);
 }
-:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]) {
+:host(sdds-button) .sm ::slotted([slot=icon]) {
   width: var(--sdds-spacing-element-16);
   height: var(--sdds-spacing-element-16);
 }
@@ -599,13 +494,13 @@ i.sdds-btn-icon[slot=icon] {
   justify-content: center;
 }
 
-:host(sdds-button[only-icon]) .sdds-btn-sm {
+:host(sdds-button[only-icon]) .sm {
   padding: 11px;
 }
-:host(sdds-button[only-icon]) .sdds-btn-md {
+:host(sdds-button[only-icon]) .md {
   padding: 13px;
 }
-:host(sdds-button[only-icon]) .sdds-btn-lg {
+:host(sdds-button[only-icon]) .lg {
   padding: 17px;
 }
 
@@ -613,27 +508,18 @@ i.sdds-btn-icon[slot=icon] {
   display: inline-flex;
   align-items: center;
 }
-:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-24);
+:host(sdds-button:not([only-icon])) .sm ::slotted([slot=icon]) {
+  margin-left: var(--sdds-spacing-element-12);
   width: var(--sdds-spacing-element-16);
   height: var(--sdds-spacing-element-16);
 }
-:host(sdds-button:not([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-12);
-}
-:host(sdds-button:not([only-icon])) .sdds-btn-md ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-20);
+:host(sdds-button:not([only-icon])) .md ::slotted([slot=icon]) {
+  margin-left: var(--sdds-spacing-element-16);
   width: var(--sdds-spacing-element-20);
   height: var(--sdds-spacing-element-20);
 }
-:host(sdds-button:not([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-16);
-}
-:host(sdds-button:not([only-icon])) .sdds-btn-lg ::slotted([slot=icon]) {
-  margin-left: 28px;
+:host(sdds-button:not([only-icon])) .lg ::slotted([slot=icon]) {
+  margin-left: var(--sdds-spacing-element-20);
   width: var(--sdds-spacing-element-20);
   height: var(--sdds-spacing-element-20);
-}
-:host(sdds-button:not([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]) {
-  margin-left: var(--sdds-spacing-element-16);
 }

package/dist/collection/components/button/{button-component.js → button.js}

@@ -1,26 +1,37 @@
 import { h, Host } from '@stencil/core';
+import { disableClickOnElement } from '../../utils/utils';
 export class SddsButton {
   constructor() {
-    this.text = '';
+    this.text = undefined;
     this.type = 'primary';
     this.size = 'lg';
     this.disabled = false;
     this.fullbleed = false;
     this.modeVariant = null;
     this.onlyIcon = false;
+    this.slotElement = undefined;
   }
-  componentWillLoad() {
-    if (this.text === '') {
+  connectedCallback() {
+    var _a;
+    this.slotElement = this.host.children ? this.host.children[0] : null;
+    if (this.disabled) {
+      disableClickOnElement(this.host);
+      if (((_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.slot) === 'icon') {
+        disableClickOnElement(this.slotElement);
+      }
+    }
+    if (!this.text) {
       this.onlyIcon = true;
       this.host.setAttribute('only-icon', '');
     }
   }
   render() {
-    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { class: `sdds-btn sdds-btn-${this.type} 
-        ${`sdds-btn-${this.size}`}
-        ${this.disabled ? 'disabled' : ''}
-        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}
-        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}` }, h("span", { class: "sdds-btn-text" }, this.text), h("slot", { name: "icon" }))));
+    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { disabled: this.disabled, class: `${this.type}
+            ${this.size}
+            ${this.disabled ? 'disabled' : ''}
+            ${this.fullbleed ? 'fullbleed' : ''}
+            ${this.onlyIcon ? 'only-icon' : ''}
+            ` }, this.text, h("slot", { name: "icon" }))));
   }
   static get is() { return "sdds-button"; }
   static get encapsulation() { return "shadow"; }
@@ -48,11 +59,10 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Text inside a button"
+          "text": "Text displayed inside the Button"
         },
         "attribute": "text",
-        "reflect": false,
-        "defaultValue": "''"
+        "reflect": false
       },
       "type": {
         "type": "string",
@@ -66,7 +76,7 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Type of button"
+          "text": "Type of Button"
         },
         "attribute": "type",
         "reflect": false,
@@ -102,7 +112,7 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Control for disabled state of component"
+          "text": "Control for disabled state of a component"
         },
         "attribute": "disabled",
         "reflect": false,
@@ -120,7 +130,7 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When enabled, makes button take 100% width"
+          "text": "When enabled, the Button takes 100% width"
         },
         "attribute": "fullbleed",
         "reflect": false,
@@ -138,7 +148,7 @@ export class SddsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the mode variant of the the button."
+          "text": "Set the mode variant of the Button."
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -148,7 +158,8 @@ export class SddsButton {
   }
   static get states() {
     return {
-      "onlyIcon": {}
+      "onlyIcon": {},
+      "slotElement": {}
     };
   }
   static get elementRef() { return "host"; }

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

@@ -66,7 +66,7 @@ export class SddsCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variant of the card based on the theme used."
+          "text": "Variant of the Card based on the theme used."
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -222,7 +222,7 @@ export class SddsCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Makes the card clickable."
+          "text": "Makes the Card clickable."
         },
         "attribute": "clickable",
         "reflect": false,
@@ -240,7 +240,7 @@ export class SddsCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "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."
+          "text": "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."
         },
         "attribute": "card-id",
         "reflect": false,
@@ -263,7 +263,7 @@ export class SddsCard {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique card identifier when the card is clicked, if clickable=true"
+          "text": "Sends unique Card identifier when the Card is clicked, if clickable=true"
         },
         "complexType": {
           "original": "{\n    cardId: string;\n  }",

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

@@ -20,6 +20,8 @@
   height: 24px;
   position: relative;
   cursor: pointer;
+  flex-shrink: 0;
+  align-self: flex-start;
 }
 .sdds-checkbox-webcomponent input[type=checkbox] + label {
   color: var(--sdds-checkbox-color);
@@ -27,6 +29,8 @@
   padding-top: var(--sdds-spacing-element-4);
   padding-bottom: var(--sdds-spacing-element-4);
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 .sdds-checkbox-webcomponent input[type=checkbox]::before, .sdds-checkbox-webcomponent input[type=checkbox]::after {
   content: "";