@scania/tegel 0.0.34 → 0.0.52

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

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sddsBreadcrumbLinkCss = "@charset \"UTF-8\";[role=listitem]{display:flex;align-items:center;color:var(--sdds-breadcrumb-color)}[role=listitem] a{color:var(--sdds-breadcrumb-color);text-decoration:none}[role=listitem]:hover{cursor:pointer}[role=listitem]:hover a{color:var(--sdds-breadcrumb-color-hover);text-decoration:underline}[role=listitem].disabled{pointer-events:none}[role=listitem].disabled a,[role=listitem].current a,[role=listitem] [aria-current=page] a{cursor:default;color:var(--sdds-breadcrumb-color-disabled)}[role=listitem].disabled:hover a,[role=listitem].current:hover a,[role=listitem] [aria-current=page]:hover a{color:var(--sdds-breadcrumb-color-disabled);text-decoration:none}[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}";
+
+const SddsBreadcrumbLink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.current = false;
+    this.href = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
+      ${this.disabled ? 'disabled' : ''}` }, h("a", { href: !this.disabled ? this.href : null, target: this.target, rel: this.rel }, h("slot", { name: "label" }))));
+  }
+  static get style() { return sddsBreadcrumbLinkCss; }
+}, [1, "sdds-breadcrumb-link", {
+    "current": [4],
+    "href": [1],
+    "target": [1],
+    "rel": [1],
+    "disabled": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-breadcrumb-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-breadcrumb-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsBreadcrumbLink$1);
+      }
+      break;
+  } });
+}
+
+const SddsBreadcrumbLink = SddsBreadcrumbLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsBreadcrumbLink, defineCustomElement };
+
+//# sourceMappingURL=sdds-breadcrumb-link.js.map

package/dist/components/sdds-breadcrumb-link.js.map

@@ -0,0 +1 @@
+{"file":"sdds-breadcrumb-link.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,23BAA23B;;MCO54BA,oBAAkB;;;;;mBAEF,KAAK;;kBAM0B,OAAO;eAG3C,UAAU;oBAGJ,KAAK;;EAEjC,MAAM;IACJ,QACE,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE;QACvC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAEjC,SAAG,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAC5E,YAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,CACA,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBreadcrumbLink"],"sources":["./src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.scss?tag=sdds-breadcrumb-link&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n\n[role='listitem'] {\n  display: flex;\n  align-items: center;\n  color: var(--sdds-breadcrumb-color);\n\n  a {\n    color: var(--sdds-breadcrumb-color);\n    text-decoration: none;\n  }\n\n  &:hover {\n    a {\n      color: var(--sdds-breadcrumb-color-hover);\n      text-decoration: underline;\n    }\n\n    cursor: pointer;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  &.disabled,\n  &.current,\n  [aria-current='page'] {\n    a {\n      cursor: default;\n      color: var(--sdds-breadcrumb-color-disabled);\n    }\n\n    &:hover {\n      a {\n        color: var(--sdds-breadcrumb-color-disabled);\n        text-decoration: none;\n      }\n    }\n  }\n\n  ::slotted(*)::after {\n    content: '\\203A';\n    color: var(--sdds-breadcrumb-separator-color);\n    margin-right: 4px;\n    margin-left: 4px;\n    display: inline-block;\n    width: 4px;\n    height: 8px;\n  }\n}\n\n:host(.last) {\n  ::slotted(*)::after {\n    display: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-link',\n  styleUrl: 'sdds-breadcrumb-link.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbLink {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\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        <a href={!this.disabled ? this.href : null} target={this.target} rel={this.rel}>\n          <slot name=\"label\"></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-breadcrumb.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const breadcrumbComponentCss = ":root,.sdds-mode-light{--sdds-breadcrumb-color:var(--sdds-grey-900);--sdds-breadcrumb-color-hover:var(--sdds-grey-700);--sdds-breadcrumb-color-focus:var(--sdds-grey-700);--sdds-breadcrumb-color-disabled:var(--sdds-grey-500);--sdds-breadcrumb-separator-color:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-breadcrumb-color:var(--sdds-grey-300);--sdds-breadcrumb-color-hover:var(--sdds-grey-500);--sdds-breadcrumb-color-focus:var(--sdds-grey-500);--sdds-breadcrumb-color-disabled:var(--sdds-grey-700);--sdds-breadcrumb-separator-color:var(--sdds-grey-700)}nav ol.sdds-breadcrumb{box-sizing:border-box;padding:0;margin:0;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;flex-wrap:wrap;list-style-type:none}nav ol.sdds-breadcrumb *{box-sizing:border-box}";
+const sddsBreadcrumbCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host [role=list]{padding:0;margin:0;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;flex-wrap:wrap;list-style-type:none}";
 
 const SddsBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -9,13 +9,13 @@ const SddsBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.__attachShadow();
   }
   connectedCallback() {
-    this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');
+    this.el.children[this.el.children.length - 1].classList.add('last');
   }
   render() {
-    return (h("nav", null, h("ol", { class: 'sdds-breadcrumb' }, h("slot", null))));
+    return (h("nav", null, h("div", { role: "list", class: 'sdds-breadcrumb' }, h("slot", null))));
   }
   get el() { return this; }
-  static get style() { return breadcrumbComponentCss; }
+  static get style() { return sddsBreadcrumbCss; }
 }, [1, "sdds-breadcrumb"]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"sdds-breadcrumb.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,4wBAA4wB;;MCO9xBA,gBAAc;;;;;;EAGzB,iBAAiB;IACf,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;GAC1F;EAED,MAAM;IACJ,QACE,eACE,UAAI,KAAK,EAAE,iBAAiB,IAC1B,eAAa,CACV,CACD,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBreadcrumb"],"sources":["./src/components/breadcrumb/breadcrumb-component.scss?tag=sdds-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@import 'breadcrumb-theme-vars';\n@import '../../mixins/box-sizing';\n\nnav ol.sdds-breadcrumb {\n  @include sdds-box-sizing;\n\n  padding: 0;\n  margin: 0;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: flex;\n  flex-wrap: wrap;\n  list-style-type: none;\n}\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb',\n  styleUrl: 'breadcrumb-component.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumb {\n  @Element() el: HTMLElement;\n\n  connectedCallback() {\n    this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');\n  }\n\n  render() {\n    return (\n      <nav>\n        <ol class={'sdds-breadcrumb'}>\n          <slot></slot>\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-breadcrumb.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,qNAAqN;;MCOlOA,gBAAc;;;;;;EAGzB,iBAAiB;IACf,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;GACrE;EAED,MAAM;IACJ,QACE,eACE,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,iBAAiB,IACvC,eAAa,CACT,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBreadcrumb"],"sources":["./src/components/breadcrumb/sdds-breadcrumb.scss?tag=sdds-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  [role='list'] {\n    padding: 0;\n    margin: 0;\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    display: flex;\n    flex-wrap: wrap;\n    list-style-type: none;\n  }\n}\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb',\n  styleUrl: 'sdds-breadcrumb.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumb {\n  @Element() el: HTMLElement;\n\n  connectedCallback() {\n    this.el.children[this.el.children.length - 1].classList.add('last');\n  }\n\n  render() {\n    return (\n      <nav>\n        <div role=\"list\" class={'sdds-breadcrumb'}>\n          <slot></slot>\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-button.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const buttonCss = ":root,.sdds-mode-light{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--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-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-primary-background-disabled-secondary:var(--sdds-white);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--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-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-black);--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-outline-color:rgb(0 0 0 / 38%);--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-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-icon-secondary-fill-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-color-hover:var(--sdds-grey-50);--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;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-black);--sdds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-black);--sdds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-black);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--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-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-danger-background-disabled-secondary:var(--sdds-white);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-mode-dark{--sdds-btn-primary-background:var(--sdds-blue-400);--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-background-active:var(--sdds-blue-300);--sdds-btn-primary-background-focus:var(--sdds-blue-600);--sdds-btn-primary-border-color-focus:var(--sdds-blue-400);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-primary-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-600);--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-white);--sdds-btn-secondary-border-color:var(--sdds-white);--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);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-white);--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-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-fill:var(--sdds-grey-50);--sdds-btn-icon-secondary-color:var(--sdds-grey-50);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-white);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-white);--sdds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-white);--sdds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-white);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-grey-50);--sdds-btn-icon-ghost-color:var(--sdds-grey-50);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--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-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-danger-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--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{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--sdds-spacing-element-20);border:1px solid}.sdds-btn *{box-sizing:border-box}.sdds-btn:disabled,.sdds-btn.disabled{cursor:unset}.sdds-btn:focus{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{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{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm{padding:var(--sdds-spacing-element-12);height:40px}.sdds-btn.sdds-btn-sm.sdds-btn-only-icon{padding:11px}.sdds-btn.sdds-btn-sm:focus{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{padding:var(--sdds-spacing-element-16);height:48px}.sdds-btn.sdds-btn-md.sdds-btn-only-icon{padding:13px}.sdds-btn.sdds-btn-md:focus{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{padding:var(--sdds-spacing-element-20);height:56px}.sdds-btn.sdds-btn-lg.sdds-btn-only-icon{padding:17px}.sdds-btn.sdds-btn-lg:focus{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{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{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{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{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{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{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{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{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{cursor:not-allowed;background:var(--sdds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-primary-color-disabled);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-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);color:var(--sdds-btn-secondary-color);outline-color:var(--sdds-btn-secondary-outline-color)}.sdds-btn.sdds-btn-secondary .sdds-btn-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{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{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{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{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{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{cursor:not-allowed;background:var(--sdds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-secondary-color-disabled);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: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)}.sdds-btn.sdds-btn-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{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{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{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{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{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{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{cursor:not-allowed;background:var(--sdds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-ghost-color-disabled);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: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)}.sdds-btn.sdds-btn-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{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{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{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{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{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{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{cursor:not-allowed;background:var(--sdds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-danger-color-disabled);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)}.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;align-items:center}:host(sdds-button) ::slotted([slot=icon]){width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]){width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button[fullbleed]){width:inherit;justify-content:center}:host(sdds-button[only-icon]) .sdds-btn-sm{padding:11px}:host(sdds-button[only-icon]) .sdds-btn-md{padding:13px}:host(sdds-button[only-icon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([only-icon])){display:flex;align-items:center}:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-24);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);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;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)}";
+const buttonCss = ":root,.sdds-mode-light{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--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: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);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-primary-background-disabled-secondary:var(--sdds-white);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--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 / 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);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-black);--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-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);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-icon-secondary-fill-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-color-hover:var(--sdds-grey-50);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-black);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-black);--sdds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-black);--sdds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-black);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--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: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);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-danger-background-disabled-secondary:var(--sdds-white);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-mode-dark{--sdds-btn-primary-background:var(--sdds-blue-400);--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-background-active:var(--sdds-blue-300);--sdds-btn-primary-background-focus:var(--sdds-blue-600);--sdds-btn-primary-border-color-focus:var(--sdds-blue-400);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-primary-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-600);--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-white);--sdds-btn-secondary-border-color:var(--sdds-white);--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);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-white);--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-400);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-secondary-outline-color:var(--sdds-white);--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);--sdds-btn-icon-secondary-fill:var(--sdds-grey-50);--sdds-btn-icon-secondary-color:var(--sdds-grey-50);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-white);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-white);--sdds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-white);--sdds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-white);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-grey-50);--sdds-btn-icon-ghost-color:var(--sdds-grey-50);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--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-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-danger-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--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{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--sdds-spacing-element-20);border:1px solid}.sdds-btn *{box-sizing:border-box}.sdds-btn:disabled,.sdds-btn.disabled{cursor:unset}.sdds-btn:focus{outline:none}.sdds-btn: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{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{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm{padding:var(--sdds-spacing-element-12);height:40px}.sdds-btn.sdds-btn-sm.sdds-btn-only-icon{padding:11px}.sdds-btn.sdds-btn-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{padding:var(--sdds-spacing-element-16);height:48px}.sdds-btn.sdds-btn-md.sdds-btn-only-icon{padding:13px}.sdds-btn.sdds-btn-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{padding:var(--sdds-spacing-element-20);height:56px}.sdds-btn.sdds-btn-lg.sdds-btn-only-icon{padding:17px}.sdds-btn.sdds-btn-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{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{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{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{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{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{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{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{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{cursor:not-allowed;background:var(--sdds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-primary-color-disabled);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{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{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{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{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{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{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{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{cursor:not-allowed;background:var(--sdds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-secondary-color-disabled);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{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{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{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{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{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{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{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{cursor:not-allowed;background:var(--sdds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-ghost-color-disabled);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{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{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{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{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{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{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{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{cursor:not-allowed;background:var(--sdds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-danger-color-disabled);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:flex;align-items:center}:host(sdds-button) ::slotted([slot=icon]){width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]){width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button[fullbleed]){width:100%;justify-content:center}:host(sdds-button[only-icon]) .sdds-btn-sm{padding:11px}:host(sdds-button[only-icon]) .sdds-btn-md{padding:13px}:host(sdds-button[only-icon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([only-icon])){display:flex;align-items:center}:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-24);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);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;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)}";
 
 const SddsButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/sdds-button.js.map

@@ -1 +1 @@
-{"file":"sdds-button.js","mappings":";;AAAA,MAAM,SAAS,GAAG,w1yBAAw1yB;;MCQ71yBA,YAAU;;;;;gBAGE,EAAE;gBAGoC,SAAS;gBAE5B,IAAI;oBAGlB,KAAK;qBAGJ,KAAK;uBAGa,IAAI;oBAEtB,KAAK;;EAIlC,iBAAiB;IACf,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,EAAE;MACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KACzC;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IACzF,cACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI;UACnC,YAAY,IAAI,CAAC,IAAI,EAAE;UACvB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;UAC1C,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EAAE,IAE7C,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC9C,YAAM,IAAI,EAAC,MAAM,GAAG,CACb,CACF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsButton"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-theme-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  border: none;\n  box-shadow: none;\n  position: relative;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.sdds-btn-lg {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 20px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 20px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn-md {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 20px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 20px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn-sm {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 16px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 16px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n  fill: var(--sdds-btn-primary-icon-fill);\n  color: var(--sdds-btn-primary-icon-color);\n  font-size: 16px;\n}\n\n.sdds-btn {\n  @include button-base;\n\n  height: $btn-lg-height;\n  padding: var(--sdds-spacing-element-20);\n  border: 1px solid;\n\n  &:disabled,\n  &.disabled {\n    cursor: unset;\n  }\n\n  &:focus {\n    // TODO: decide on what tod o with these @include sdds-focus-state;\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  span.sdds-btn-text + .sdds-btn-icon {\n    margin-left: var(--sdds-spacing-element-16);\n    width: 20px;\n    height: 20px;\n    line-height: 0;\n  }\n\n  &.sdds-btn-xs {\n    padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n    height: $btn-xs-height;\n    font-size: 12px;\n    border-radius: 2px;\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n  }\n\n  &.sdds-btn-sm {\n    padding: var(--sdds-spacing-element-12);\n    height: $btn-sm-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-sm-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: var(--sdds-spacing-element-24);\n      width: 16px;\n      height: 16px;\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin: unset;\n        margin-left: var(--sdds-spacing-element-12);\n      }\n    }\n  }\n\n  &.sdds-btn-md {\n    padding: var(--sdds-spacing-element-16);\n    height: $btn-md-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-md-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  &.sdds-btn-lg {\n    padding: var(--sdds-spacing-element-20);\n    height: $btn-lg-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-lg-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: 28px;\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  &.sdds-btn-fullbleed {\n    width: inherit;\n    display: flex;\n    justify-content: center;\n\n    .sdds-btn-icon,\n    &.sdds-btn-icon {\n      margin-left: var(--sdds-spacing-element-8);\n    }\n  }\n\n  span.sdds-btn-text {\n    align-self: baseline;\n  }\n\n  @each $type in $types {\n    &.sdds-btn-#{$type} {\n      @each $prop in $props {\n        #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n      }\n\n      .sdds-btn-icon {\n        @each $prop in $iconProps {\n          fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n          color: var(--sdds-btn-icon-#{$type}-#{$prop});\n        }\n\n        font-size: 16px; //16px\n      }\n\n      &:hover {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n        }\n\n        .sdds-btn-icon {\n          @each $prop in $iconProps {\n            fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n            color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n          }\n        }\n      }\n\n      &:focus {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n        }\n\n        .sdds-btn-icon {\n          @each $prop in $iconProps {\n            fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n            color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n          }\n        }\n      }\n\n      &:active,\n      &.active {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n        }\n      }\n\n      &.disabled,\n      &:disabled {\n        @each $prop in $props {\n          cursor: not-allowed;\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n\n          .sdds-btn-icon,\n          &.sdds-btn-icon {\n            color: var(--sdds-grey-300);\n          }\n        }\n      }\n    }\n  }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n  line-height: 1;\n}\n\n:host(sdds-button) {\n  display: flex;\n  align-items: center;\n\n  ::slotted([slot='icon']) {\n    width: var(--sdds-spacing-element-20);\n    height: var(--sdds-spacing-element-20);\n  }\n\n  .sdds-btn-sm {\n    ::slotted([slot='icon']) {\n      width: var(--sdds-spacing-element-16);\n      height: var(--sdds-spacing-element-16);\n    }\n  }\n}\n\n:host(sdds-button[fullbleed]) {\n  width: inherit;\n  justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n  .sdds-btn-sm {\n    padding: $btn-sm-only-icon-padding;\n  }\n\n  .sdds-btn-md {\n    padding: $btn-md-only-icon-padding;\n  }\n\n  .sdds-btn-lg {\n    padding: $btn-lg-only-icon-padding;\n  }\n}\n\n:host(sdds-button:not([only-icon])) {\n  display: flex;\n  align-items: center;\n\n  .sdds-btn-sm {\n    ::slotted([slot='icon']) {\n      margin-left: var(--sdds-spacing-element-24);\n      width: var(--sdds-spacing-element-16);\n      height: var(--sdds-spacing-element-16);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-12);\n      }\n    }\n  }\n\n  .sdds-btn-md {\n    ::slotted([slot='icon']) {\n      margin-left: var(--sdds-spacing-element-20);\n      width: var(--sdds-spacing-element-20);\n      height: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  .sdds-btn-lg {\n    ::slotted([slot='icon']) {\n      // TODO - This should be a var value\n      margin-left: 28px;\n      width: var(--sdds-spacing-element-20);\n      height: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class SddsButton {\n  // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n  /** Text inside a button */\n  @Prop() text: string = '';\n\n  /** Type of button */\n  @Prop() type: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary';\n\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Control for disabled state of component */\n  @Prop() disabled: boolean = false;\n\n  /** When enabled, makes button take 100% width */\n  @Prop() fullbleed: boolean = false;\n\n  /** Set the mode variant of the the button. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() onlyIcon: boolean = false;\n\n  @Element() host: HostElement;\n\n  componentWillLoad() {\n    if (this.text === '') {\n      this.onlyIcon = true;\n      this.host.setAttribute('only-icon', '');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n      <button\n        class={`sdds-btn sdds-btn-${this.type} \n        ${`sdds-btn-${this.size}`}\n        ${this.disabled ? 'disabled' : ''}\n        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n      >\n        <span class=\"sdds-btn-text\">{this.text}</span>\n        <slot name=\"icon\" />\n      </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-button.js","mappings":";;AAAA,MAAM,SAAS,GAAG,s+tBAAs+tB;;MCQ3+tBA,YAAU;;;;;gBAGE,EAAE;gBAGoC,SAAS;gBAE5B,IAAI;oBAGlB,KAAK;qBAGJ,KAAK;uBAGa,IAAI;oBAEtB,KAAK;;EAIlC,iBAAiB;IACf,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,EAAE;MACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KACzC;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IACzF,cACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI;UACnC,YAAY,IAAI,CAAC,IAAI,EAAE;UACvB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;UAC1C,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EAAE,IAE7C,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC9C,YAAM,IAAI,EAAC,MAAM,GAAG,CACb,CACF,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsButton"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  border: none;\n  box-shadow: none;\n  position: relative;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.sdds-btn-lg {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 20px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 20px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn-md {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 20px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 20px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn-sm {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 16px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 16px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n  fill: var(--sdds-btn-primary-icon-fill);\n  color: var(--sdds-btn-primary-icon-color);\n  font-size: 16px;\n}\n\n.sdds-btn {\n  @include button-base;\n\n  height: $btn-lg-height;\n  padding: var(--sdds-spacing-element-20);\n  border: 1px solid;\n\n  &:disabled,\n  &.disabled {\n    cursor: unset;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    // TODO: decide on what tod o with these @include sdds-focus-state;\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  span.sdds-btn-text + .sdds-btn-icon {\n    margin-left: var(--sdds-spacing-element-16);\n    width: 20px;\n    height: 20px;\n    line-height: 0;\n  }\n\n  &.sdds-btn-xs {\n    padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n    height: $btn-xs-height;\n    font-size: 12px;\n    border-radius: 2px;\n\n    &:focus-visible {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n  }\n\n  &.sdds-btn-sm {\n    padding: var(--sdds-spacing-element-12);\n    height: $btn-sm-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-sm-only-icon-padding;\n    }\n\n    &:focus-visible {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: var(--sdds-spacing-element-24);\n      width: 16px;\n      height: 16px;\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin: unset;\n        margin-left: var(--sdds-spacing-element-12);\n      }\n    }\n  }\n\n  &.sdds-btn-md {\n    padding: var(--sdds-spacing-element-16);\n    height: $btn-md-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-md-only-icon-padding;\n    }\n\n    &:focus-visible {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  &.sdds-btn-lg {\n    padding: var(--sdds-spacing-element-20);\n    height: $btn-lg-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-lg-only-icon-padding;\n    }\n\n    &:focus-visible {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: 28px;\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  &.sdds-btn-fullbleed {\n    width: inherit;\n    display: flex;\n    justify-content: center;\n\n    .sdds-btn-icon,\n    &.sdds-btn-icon {\n      margin-left: var(--sdds-spacing-element-8);\n    }\n  }\n\n  span.sdds-btn-text {\n    align-self: baseline;\n  }\n\n  @each $type in $types {\n    &.sdds-btn-#{$type} {\n      @each $prop in $props {\n        #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n      }\n\n      .sdds-btn-icon {\n        @each $prop in $iconProps {\n          fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n          color: var(--sdds-btn-icon-#{$type}-#{$prop});\n        }\n\n        font-size: 16px; //16px\n      }\n\n      &:hover {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n        }\n\n        .sdds-btn-icon {\n          @each $prop in $iconProps {\n            fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n            color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n          }\n        }\n      }\n\n      &:focus-visible {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n        }\n\n        .sdds-btn-icon {\n          @each $prop in $iconProps {\n            fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n            color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n          }\n        }\n      }\n\n      &:active,\n      &.active {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n        }\n      }\n\n      &.disabled,\n      &:disabled {\n        @each $prop in $props {\n          cursor: not-allowed;\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n        }\n\n        @if $type == 'ghost' or $type == 'secondary' {\n          .sdds-btn-icon,\n          &.sdds-btn-icon {\n            color: rgb(0 0 0 / 38%);\n          }\n        } @else {\n          .sdds-btn-icon,\n          &.sdds-btn-icon {\n            color: var(--sdds-grey-300);\n          }\n        }\n      }\n    }\n  }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n  line-height: 1;\n}\n\n:host(sdds-button) {\n  display: flex;\n  align-items: center;\n\n  ::slotted([slot='icon']) {\n    width: var(--sdds-spacing-element-20);\n    height: var(--sdds-spacing-element-20);\n  }\n\n  .sdds-btn-sm {\n    ::slotted([slot='icon']) {\n      width: var(--sdds-spacing-element-16);\n      height: var(--sdds-spacing-element-16);\n    }\n  }\n}\n\n:host(sdds-button[fullbleed]) {\n  width: 100%;\n  justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n  .sdds-btn-sm {\n    padding: $btn-sm-only-icon-padding;\n  }\n\n  .sdds-btn-md {\n    padding: $btn-md-only-icon-padding;\n  }\n\n  .sdds-btn-lg {\n    padding: $btn-lg-only-icon-padding;\n  }\n}\n\n:host(sdds-button:not([only-icon])) {\n  display: flex;\n  align-items: center;\n\n  .sdds-btn-sm {\n    ::slotted([slot='icon']) {\n      margin-left: var(--sdds-spacing-element-24);\n      width: var(--sdds-spacing-element-16);\n      height: var(--sdds-spacing-element-16);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-12);\n      }\n    }\n  }\n\n  .sdds-btn-md {\n    ::slotted([slot='icon']) {\n      margin-left: var(--sdds-spacing-element-20);\n      width: var(--sdds-spacing-element-20);\n      height: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  .sdds-btn-lg {\n    ::slotted([slot='icon']) {\n      // TODO - This should be a var value\n      margin-left: 28px;\n      width: var(--sdds-spacing-element-20);\n      height: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class SddsButton {\n  // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n  /** Text inside a button */\n  @Prop() text: string = '';\n\n  /** Type of button */\n  @Prop() type: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary';\n\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Control for disabled state of component */\n  @Prop() disabled: boolean = false;\n\n  /** When enabled, makes button take 100% width */\n  @Prop() fullbleed: boolean = false;\n\n  /** Set the mode variant of the the button. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() onlyIcon: boolean = false;\n\n  @Element() host: HostElement;\n\n  componentWillLoad() {\n    if (this.text === '') {\n      this.onlyIcon = true;\n      this.host.setAttribute('only-icon', '');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n      <button\n        class={`sdds-btn sdds-btn-${this.type} \n        ${`sdds-btn-${this.size}`}\n        ${this.disabled ? 'disabled' : ''}\n        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n      >\n        <span class=\"sdds-btn-text\">{this.text}</span>\n        <slot name=\"icon\" />\n      </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-card.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const sddsCardCss = ".card{box-shadow:var(--sdds-card-box);background-color:var(--sdds-card-background);display:block;border-radius:4px;max-width:368px;overflow:hidden}.card.clickable:hover{box-shadow:var(--sdds-card-box-hover);cursor:pointer}.card .card-top{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-top img.card-top-image{width:36px;height:36px;border-radius:100%}.card .card-top .card-top-header{padding-left:16px;display:flex;flex-direction:column;row-gap:4px}.card .card-top .card-top-header.no-header-img{padding-left:0}.card .card-top .card-top-header.single-line-header{row-gap:0}.card .card-top.below{padding-top:16px}.card .card-header{color:var(--sdds-card-headline)}.card .card-subheader{color:var(--sdds-card-sub-headline)}.card .card-body-img{width:100%}.card .sdds-divider{margin:16px 16px 0;background-color:var(--sdds-card-divider);height:1px}.card slot[name=card-body]::slotted(*){font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls);color:var(--sdds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px}.card slot[name=card-bottom]::slotted(*){display:flex;padding:16px}button{border:none;text-align:left;padding:0}button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--sdds-card-box-pressed)}";
+const sddsCardCss = ".card{box-shadow:var(--sdds-card-box);background-color:var(--sdds-card-background);display:block;border-radius:4px;max-width:368px;overflow:hidden;width:100%}.card.clickable:hover{box-shadow:var(--sdds-card-box-hover);cursor:pointer}.card .card-top{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-top img.card-top-image{width:36px;height:36px;border-radius:100%}.card .card-top .card-top-header{padding-left:16px;display:flex;flex-direction:column;row-gap:4px}.card .card-top .card-top-header.no-header-img{padding-left:0}.card .card-top .card-top-header.single-line-header{row-gap:0}.card .card-top.below{padding-top:16px}.card .card-header{color:var(--sdds-card-headline)}.card .card-subheader{color:var(--sdds-card-sub-headline)}.card .card-body-img{width:100%}.card .sdds-divider{margin:16px 16px 0;background-color:var(--sdds-card-divider);height:1px}.card slot[name=card-body]::slotted(*){font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls);color:var(--sdds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px}.card slot[name=card-bottom]::slotted(*){display:flex;padding:16px}button{border:none;text-align:left;padding:0}button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--sdds-card-box-pressed)}";
 
 const SddsCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"sdds-card.js","mappings":"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","names":["SddsCard"],"sources":["./src/components/card/sdds-card.scss?tag=sdds-card&encapsulation=shadow","./src/components/card/sdds-card.tsx"],"sourcesContent":[".card {\n  box-shadow: var(--sdds-card-box);\n  background-color: var(--sdds-card-background);\n  display: block;\n  border-radius: 4px;\n  max-width: 368px;\n  overflow: hidden;\n\n  &.clickable {\n    &:hover {\n      box-shadow: var(--sdds-card-box-hover);\n      cursor: pointer;\n    }\n  }\n\n  .card-top {\n    font: var(--sdds-headline-06);\n    letter-spacing: var(--sdds-headline-06-ls);\n    padding: 16px;\n    display: flex;\n    align-items: center;\n\n    img.card-top-image {\n      width: 36px;\n      height: 36px;\n      border-radius: 100%;\n    }\n\n    .card-top-header {\n      padding-left: 16px;\n      display: flex;\n      flex-direction: column;\n      row-gap: 4px;\n\n      &.no-header-img {\n        padding-left: 0;\n      }\n\n      &.single-line-header {\n        row-gap: 0;\n      }\n    }\n\n    &.below {\n      padding-top: 16px;\n    }\n  }\n\n  .card-header {\n    color: var(--sdds-card-headline);\n  }\n\n  .card-subheader {\n    color: var(--sdds-card-sub-headline);\n  }\n\n  .card-body-img {\n    width: 100%;\n  }\n\n  .sdds-divider {\n    margin: 16px 16px 0;\n    background-color: var(--sdds-card-divider);\n    height: 1px;\n  }\n\n  slot[name='card-body']::slotted(*) {\n    font: var(--sdds-detail-03);\n    letter-spacing: var(--sdds-detail-03-ls);\n    color: var(--sdds-card-body-color);\n    padding: 0 16px;\n    margin-bottom: 16px;\n    margin-top: 16px;\n  }\n\n  slot[name='card-bottom']::slotted(*) {\n    display: flex;\n    padding: 16px;\n  }\n}\n\nbutton {\n  border: none;\n  text-align: left;\n  padding: 0;\n\n  &:focus {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  &:active {\n    box-shadow: var(--sdds-card-box-pressed);\n  }\n}\n","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","mappings":";;AAAA,MAAM,WAAW,GAAG,s1CAAs1C;;MCO71CA,UAAQ;;;;;;IA2DnB,gBAAW,GAAG;MACZ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC,CAAC;KACJ,CAAC;IAEF,mBAAc,GAAG,OACf,eACG,IAAI,CAAC,eAAe,KAAK,OAAO,KAC/B,WAAK,KAAK,EAAE,YAAY,IAAI,CAAC,eAAe,EAAE,IAC3C,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC9E,EAAE,GAAG,EACN,WACE,KAAK,EAAE;;YAEP,CAAC,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,EAAE;YACtC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;WAC5D,IAEC,YAAM,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAQ,EAChD,YAAM,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAQ,CAClD,CACF,CACP,EACD,WAAK,KAAK,EAAE,WAAW,IACpB,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,GAAI,EACxF,IAAI,CAAC,eAAe,KAAK,OAAO,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,KACpF,WAAK,KAAK,EAAE,YAAY,IAAI,CAAC,eAAe,EAAE,IAC3C,IAAI,CAAC,SAAS,KACb,WAAK,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC9E,EACD,WACE,KAAK,EAAE;;cAEP,CAAC,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,EAAE;cACtC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;aAC5D,IAEC,YAAM,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAQ,EAChD,YAAM,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAQ,CAClD,CACF,CACP,EACA,IAAI,CAAC,WAAW,IAAI,WAAK,KAAK,EAAE,cAAc,GAAQ,EACvD,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAE,aAAa,IACtB,IAAI,CAAC,iBAAiB,IAAI,YAAM,IAAI,EAAE,aAAa,GAAS,CACzD,CACF,CACP,CAAC;uBA5G6C,IAAI;2BAGN,OAAO;;;;;;;uBAqBrB,KAAK;qBAGP,KAAK;kBAMT,MAAM,CAAC,UAAU,EAAE;6BAeN,KAAK;2BAEP,KAAK;;EAEzC,iBAAiB;IACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAClF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;GAC/E;EAuDD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,qBAAqB,IAAI,CAAC,WAAW,EAAE,IACrE,IAAI,CAAC,SAAS,IACb,cACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,EAC1E,OAAO,EAAE;QACP,IAAI,IAAI,CAAC,SAAS,EAAE;UAClB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;OACF,IAEA,IAAI,CAAC,cAAc,EAAE,CACf,KAET,WAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,IAC5E,IAAI,CAAC,cAAc,EAAE,CAClB,CACP,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsCard"],"sources":["./src/components/card/sdds-card.scss?tag=sdds-card&encapsulation=shadow","./src/components/card/sdds-card.tsx"],"sourcesContent":[".card {\n  box-shadow: var(--sdds-card-box);\n  background-color: var(--sdds-card-background);\n  display: block;\n  border-radius: 4px;\n  max-width: 368px;\n  overflow: hidden;\n  width: 100%;\n\n  &.clickable {\n    &:hover {\n      box-shadow: var(--sdds-card-box-hover);\n      cursor: pointer;\n    }\n  }\n\n  .card-top {\n    font: var(--sdds-headline-06);\n    letter-spacing: var(--sdds-headline-06-ls);\n    padding: 16px;\n    display: flex;\n    align-items: center;\n\n    img.card-top-image {\n      width: 36px;\n      height: 36px;\n      border-radius: 100%;\n    }\n\n    .card-top-header {\n      padding-left: 16px;\n      display: flex;\n      flex-direction: column;\n      row-gap: 4px;\n\n      &.no-header-img {\n        padding-left: 0;\n      }\n\n      &.single-line-header {\n        row-gap: 0;\n      }\n    }\n\n    &.below {\n      padding-top: 16px;\n    }\n  }\n\n  .card-header {\n    color: var(--sdds-card-headline);\n  }\n\n  .card-subheader {\n    color: var(--sdds-card-sub-headline);\n  }\n\n  .card-body-img {\n    width: 100%;\n  }\n\n  .sdds-divider {\n    margin: 16px 16px 0;\n    background-color: var(--sdds-card-divider);\n    height: 1px;\n  }\n\n  slot[name='card-body']::slotted(*) {\n    font: var(--sdds-detail-03);\n    letter-spacing: var(--sdds-detail-03-ls);\n    color: var(--sdds-card-body-color);\n    padding: 0 16px;\n    margin-bottom: 16px;\n    margin-top: 16px;\n  }\n\n  slot[name='card-bottom']::slotted(*) {\n    display: flex;\n    padding: 16px;\n  }\n}\n\nbutton {\n  border: none;\n  text-align: left;\n  padding: 0;\n\n  &:focus {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  &:active {\n    box-shadow: var(--sdds-card-box-pressed);\n  }\n}\n","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}

package/dist/components/sdds-checkbox.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const sddsCheckboxCss = ".sdds-checkbox-webcomponent.sc-sdds-checkbox{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox *.sc-sdds-checkbox{box-sizing:border-box}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox{cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled+label.sc-sdds-checkbox,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox:hover::before{display:none}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}";
+const sddsCheckboxCss = ".sdds-checkbox-webcomponent.sc-sdds-checkbox{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox *.sc-sdds-checkbox{box-sizing:border-box}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:var(--sdds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox{cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled+label.sc-sdds-checkbox,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox:hover::before{display:none}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}";
 
 const SddsCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -43,7 +43,7 @@ const SddsCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   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" }))));
   }
   get host() { return this; }
   static get style() { return sddsCheckboxCss; }

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

@@ -1 +1 @@
-{"file":"sdds-checkbox.js","mappings":";;AAAA,MAAM,eAAe,GAAG,o+HAAo+H;;MCS/+HA,cAAY;;;;;;;IA4CvB,iBAAY,GAAG;MACb,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;KACJ,CAAC;;sBA9C2B,MAAM,CAAC,UAAU,EAAE;oBAGpB,KAAK;oBAGL,KAAK;mBAGW,KAAK;;;;EASjD,MAAM,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;GACH;;EAkCD,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;;EAYD,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,4BAA4B,IACrC,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,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,QAAQ,EAAE;QACR,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB,GACD,EACF,aAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7B,eAAa,CACP,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsCheckbox"],"sources":["./src/components/checkbox/sdds-checkbox.scss?tag=sdds-checkbox&encapsulation=scoped","./src/components/checkbox/sdds-checkbox.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-checkbox-webcomponent {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-checkbox-text);\n  display: flex;\n  align-items: center;\n  margin-left: -4px;\n\n  input[type='checkbox'] {\n    appearance: none;\n    outline: none;\n    margin: 0;\n    border: 0;\n    border-radius: 2px;\n    width: 24px;\n    height: 24px;\n    position: relative;\n    cursor: pointer;\n\n    + label {\n      color: var(--sdds-checkbox-color);\n      padding-left: var(--sdds-spacing-element-4);\n      padding-top: var(--sdds-spacing-element-4);\n      padding-bottom: var(--sdds-spacing-element-4);\n      cursor: pointer;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      box-sizing: border-box;\n      border-radius: 2px;\n    }\n\n    &::before {\n      width: 24px;\n      height: 24px;\n      left: 0;\n      top: 0;\n    }\n\n    &::after {\n      border: 1px solid var(--sdds-checkbox-interaction-01);\n      background-color: var(--sdds-checkbox-interaction-02);\n      width: 16px;\n      height: 16px;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:hover {\n      &::before {\n        background-color: var(--sdds-checkbox-background-hover);\n        opacity: 0.12;\n      }\n    }\n\n    &:focus {\n      &::before {\n        background-color: var(--sdds-checkbox-background-focus);\n        opacity: 0.24;\n        transition: opacity 0.2s ease-in-out;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      cursor: not-allowed;\n\n      &::after {\n        border-color: var(--sdds-checkbox-border-color-disabled-after);\n      }\n\n      + label {\n        color: var(--sdds-grey-600);\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        &::before {\n          display: none;\n        }\n      }\n    }\n\n    &:checked {\n      &::after {\n        background-image: var(--sdds-checkbox-background-img);\n        background-color: var(--sdds-checkbox-interaction-01);\n        background-repeat: no-repeat;\n        background-position: center;\n      }\n\n      &:hover {\n        &::before {\n          background-color: var(--sdds-checkbox-background-hover);\n          opacity: 0.12;\n        }\n      }\n\n      &:disabled,\n      &.disabled {\n        &:hover::before,\n        &::before {\n          display: block;\n          width: 16px;\n          height: 16px;\n          left: 4px;\n          top: 4px;\n          border: 1px solid #b0b7c4;\n        }\n\n        &::after {\n          background-image: var(--sdds-checkbox-background-img-disabled);\n          background-color: var(--sdds-checkbox-interaction-02);\n          color: var(--sdds-checkbox-color-disabled-after);\n        }\n      }\n    }\n  }\n}\n","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","mappings":";;AAAA,MAAM,eAAe,GAAG,inIAAinI;;MCS5nIA,cAAY;;;;;;;IA4CvB,iBAAY,GAAG;MACb,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;KACJ,CAAC;;sBA9C2B,MAAM,CAAC,UAAU,EAAE;oBAGpB,KAAK;oBAGL,KAAK;mBAGW,KAAK;;;;EASjD,MAAM,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;GACH;;EAkCD,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;;EAYD,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,4BAA4B,IACrC,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,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,QAAQ,EAAE;QACR,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB,GACD,EACF,aAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsCheckbox"],"sources":["./src/components/checkbox/sdds-checkbox.scss?tag=sdds-checkbox&encapsulation=scoped","./src/components/checkbox/sdds-checkbox.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-checkbox-webcomponent {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-checkbox-text);\n  display: flex;\n  align-items: center;\n  margin-left: -4px;\n\n  input[type='checkbox'] {\n    appearance: none;\n    outline: none;\n    margin: 0;\n    border: 0;\n    border-radius: 2px;\n    width: 24px;\n    height: 24px;\n    position: relative;\n    cursor: pointer;\n\n    + label {\n      color: var(--sdds-checkbox-color);\n      padding-left: var(--sdds-spacing-element-4);\n      padding-top: var(--sdds-spacing-element-4);\n      padding-bottom: var(--sdds-spacing-element-4);\n      cursor: pointer;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      box-sizing: border-box;\n    }\n\n    &::before {\n      width: 24px;\n      height: 24px;\n      left: 0;\n      top: 0;\n      border-radius: 4px;\n    }\n\n    &::after {\n      border: 1px solid var(--sdds-checkbox-interaction-01);\n      background-color: var(--sdds-checkbox-interaction-02);\n      width: 16px;\n      height: 16px;\n      left: 4px;\n      top: 4px;\n      border-radius: 2px;\n    }\n\n    &:hover {\n      &::before {\n        background-color: var(--sdds-checkbox-background-hover);\n        opacity: var(--sdds-checkbox-background-opacity-hover);\n      }\n    }\n\n    &:focus {\n      &::before {\n        background-color: var(--sdds-checkbox-background-focus);\n        opacity: var(--sdds-checkbox-background-opacity-focus);\n        transition: opacity 0.2s ease-in-out;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      cursor: not-allowed;\n\n      &::after {\n        border-color: var(--sdds-checkbox-border-color-disabled-after);\n      }\n\n      + label {\n        color: var(--sdds-grey-600);\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        &::before {\n          display: none;\n        }\n      }\n    }\n\n    &:checked {\n      &::after {\n        background-image: var(--sdds-checkbox-background-img);\n        background-color: var(--sdds-checkbox-interaction-01);\n        background-repeat: no-repeat;\n        background-position: center;\n      }\n\n      &:hover {\n        &::before {\n          background-color: var(--sdds-checkbox-background-hover);\n          opacity: var(--sdds-checkbox-background-opacity-hover);\n        }\n      }\n\n      &:disabled,\n      &.disabled {\n        &:hover::before,\n        &::before {\n          display: block;\n          width: 16px;\n          height: 16px;\n          left: 4px;\n          top: 4px;\n          border: 1px solid #b0b7c4;\n        }\n\n        &::after {\n          background-image: var(--sdds-checkbox-background-img-disabled);\n          background-color: var(--sdds-checkbox-interaction-02);\n          color: var(--sdds-checkbox-color-disabled-after);\n        }\n      }\n    }\n  }\n}\n","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"],"version":3}

package/dist/components/sdds-datetime.js

@@ -8,7 +8,9 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.customChange = createEvent(this, "customChange", 7);
+    this.sddsChange = createEvent(this, "sddsChange", 7);
+    this.sddsBlur = createEvent(this, "sddsBlur", 6);
+    this.sddsFocus = createEvent(this, "sddsFocus", 6);
     this.getDefaultValue = () => {
       const dateTimeObj = {
         year: this.defaultValue.slice(0, 4),
@@ -32,7 +34,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.value = '';
     this.defaultValue = 'none';
     this.disabled = false;
-    this.size = '';
+    this.size = 'lg';
     this.noMinWidth = false;
     this.modeVariant = null;
     this.name = '';
@@ -58,14 +60,21 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // Data input event in value prop
   handleInput(e) {
     this.value = e.target.value;
+    this.sddsChange.emit(e);
   }
   // Change event isn't a composed:true by default in for input
   handleChange(e) {
-    this.customChange.emit(e);
+    this.sddsChange.emit(e);
   }
   /** Set the input as focus when clicking the whole datetime with suffix/prefix */
-  handleFocusClick() {
+  handleFocusClick(e) {
     this.textInput.focus();
+    this.sddsFocus.emit(e);
+  }
+  /** Set the input as focus when clicking the whole datetime with suffix/prefix */
+  handleBlur(e) {
+    this.textInput.blur();
+    this.sddsBlur.emit(e);
   }
   render() {
     let className = ' sdds-datetime-input';
@@ -86,7 +95,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ? `sdds-form-datetime-${this.state}`
         : ''}
         ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ` }, this.label && h("div", { class: "sdds-datetime-label" }, this.label), h("div", { onClick: () => this.handleFocusClick(), class: "sdds-datetime-container sdds-datetime-container" }, h("div", { class: "sdds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z", fill: "currentColor" }))), h("div", { class: "datetime-icon icon-time" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z", fill: "currentColor" })))), h("div", { class: "sdds-datetime-bar" })), h("div", { class: "sdds-datetime-helper" }, this.helper && (h("div", { class: "sdds-helper" }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper)))));
+        ` }, this.label && (h("label", { htmlFor: this.name, class: "sdds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "sdds-datetime-container sdds-datetime-container" }, h("div", { class: "sdds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z", fill: "currentColor" }))), h("div", { class: "datetime-icon icon-time" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z", fill: "currentColor" })))), h("div", { class: "sdds-datetime-bar" })), h("div", { class: "sdds-datetime-helper" }, this.helper && (h("div", { class: "sdds-helper" }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper)))));
   }
   static get style() { return datetimeCss; }
 }, [1, "sdds-datetime", {

package/dist/components/sdds-datetime.js.map

@@ -1 +1 @@
-{"file":"sdds-datetime.js","mappings":"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","names":[],"sources":["./src/components/datetime/datetime.scss?tag=sdds-datetime&encapsulation=shadow","./src/components/datetime/datetime.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@mixin datetime-base {\n  @include sdds-box-sizing;\n\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-datetime-color);\n  background-color: var(--sdds-datetime-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-datetime-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-datetime-placeholder-color-focus);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-datetime-background-disabled);\n    color: var(--sdds-datetime-color-disabled);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-datetime-placeholder-disabled);\n    }\n\n    ~ .sdds-datetime-label-inside {\n      color: var(--sdds-datetime-label-disabled);\n    }\n  }\n}\n\n// icons\n\n.sdds-datetime-input,\n.sdds-datetime-input-md,\n.sdds-datetime-input-sm {\n  &[type='datetime-local'] {\n    ~ .icon-time {\n      display: none;\n    }\n  }\n\n  &[type='date'] {\n    ~ .icon-time {\n      display: none;\n    }\n  }\n\n  &[type='time'] {\n    ~ .icon-datetime-local {\n      display: none;\n    }\n  }\n}\n\n//Sizes\n.sdds-datetime-input {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-md {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-sm {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-datetime-container {\n  border-radius: 4px 4px 0 0;\n  display: flex;\n  position: relative;\n  height: 56px;\n  box-sizing: border-box;\n  background-color: var(--sdds-datetime-background);\n  border-bottom: 1px solid var(--sdds-datetime-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  &:hover {\n    border-bottom-color: var(--sdds-datetime-border-bottom-hover);\n  }\n\n  .sdds-form-datetime-md & {\n    height: 48px;\n  }\n\n  .sdds-form-datetime-sm & {\n    height: 40px;\n  }\n}\n\n.sdds-datetime-input-container {\n  position: relative;\n  width: 100%;\n\n  .datetime-icon {\n    height: 20px;\n    width: 20px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 18px;\n    pointer-events: none;\n\n    path {\n      fill: var(--sdds-datetime-icon);\n    }\n  }\n}\n\n.sdds-datetime-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-datetime-label-color);\n}\n\n.sdds-datetime-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  position: absolute;\n  pointer-events: none;\n  color: var(--sdds-datetime-label-inside-color);\n  left: 16px;\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  &::input-placeholder {\n    color: transparent;\n  }\n\n  &:placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-datetime-placeholder-color-focus);\n  }\n}\n\n@mixin label-inside-transition {\n  transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-datetime {\n  display: block;\n  min-width: 208px;\n\n  &-nomin {\n    min-width: auto;\n  }\n}\n\n//datetime container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-datetime.sdds-datetime-container-label-inside {\n  .sdds-datetime-input {\n    padding-top: var(--sdds-spacing-element-24);\n    padding-bottom: 15px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 20px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-datetime-input-md {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-datetime-input-sm {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  &.sdds-datetime-focus,\n  &.sdds-datetime-data {\n    .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-datetime-input-md ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-datetime-input ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 12px;\n    }\n  }\n}\n\n//datetime bottom bar when in focus\n.sdds-datetime-bar {\n  position: absolute;\n  width: 100%;\n\n  &::before,\n  &::after {\n    content: '';\n    height: 2px;\n    top: 54px;\n    width: 0;\n    position: absolute;\n    background: var(--sdds-datetime-bar);\n    transition: 0.35s ease all;\n\n    .sdds-form-datetime-md & {\n      top: 46px;\n    }\n\n    .sdds-form-datetime-sm & {\n      top: 40px;\n    }\n  }\n\n  &::before {\n    left: 50%;\n  }\n\n  &::after {\n    right: 50%;\n  }\n\n  .sdds-datetime-focus &::before,\n  .sdds-datetime-focus &::after {\n    width: 50%;\n  }\n}\n\n//Helper text\n.sdds-datetime-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  flex-basis: 100%;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-datetime-helper);\n\n  .sdds-helper {\n    display: inline-flex;\n    gap: 8px;\n  }\n}\n\n//Disabled state\n.sdds-form-datetime-disabled {\n  .sdds-datetime-container {\n    border-bottom-color: transparent;\n  }\n\n  .datetime-icon {\n    svg {\n      path {\n        fill: var(--sdds-datetime-icon-disabled);\n      }\n    }\n  }\n\n  .sdds-datetime-label {\n    color: var(--sdds-datetime-label-disabled);\n    cursor: not-allowed;\n  }\n}\n\n//Success state\n.sdds-form-datetime-success {\n  .sdds-datetime-container {\n    border-bottom-color: var(--sdds-datetime-border-bottom-success);\n    color: var(--sdds-datetime-color-success);\n  }\n\n  .sdds-datetime-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-datetime-bar-sucess);\n    }\n  }\n}\n\n//Error State\n.sdds-form-datetime-error {\n  .sdds-datetime-helper {\n    color: var(--sdds-datetime-helper-error);\n  }\n\n  .sdds-datetime-container {\n    border-bottom-color: var(--sdds-datetime-border-bottom-error);\n  }\n\n  .sdds-datetime-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-datetime-bar-error);\n    }\n  }\n  .datetime-icon path {\n    fill: var(--sdds-datetime-icon-error);\n  }\n}\n\n.sdds-datetime-textcounter {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-datetime-textcounter);\n  float: right;\n\n  & .sdds-datetime-textcounter-divider {\n    // font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-datetime-textcounter-divider);\n  }\n}\n\n/* datetime picker icon remove testing */\n\ninput[type='datetime-local']::-webkit-inner-spin-button,\ninput[type='datetime-local']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n\ninput[type='date']::-webkit-inner-spin-button,\ninput[type='date']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n\ninput[type='time']::-webkit-inner-spin-button,\ninput[type='time']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n.sdds-mode-variant-primary {\n  --sdds-datetime-background: var(--sdds-datetime-background-primary);\n}\n.sdds-mode-variant-secondary {\n  --sdds-datetime-background: var(--sdds-datetime-background-secondary);\n}\n","import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-datetime',\n  styleUrl: 'datetime.scss',\n  shadow: true,\n})\nexport class Datetime {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'datetime-local' | 'date' | 'time' = 'datetime-local';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value = '';\n\n  /** Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM */\n  @Prop() defaultValue: string | 'none' = 'none';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | '' = '';\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Set the variant of the the datetime component. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: string;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Label text for the component */\n  @Prop() label: string = '';\n\n  /** Helper text for the component */\n  @Prop() helper: string = '';\n\n  /** Listen to the focus state of the input */\n  @State() focusInput: boolean;\n\n  /** Change event for the datetime */\n  @Event({\n    composed: true,\n    bubbles: true,\n    cancelable: true,\n  })\n  customChange: EventEmitter;\n\n  getDefaultValue = () => {\n    const dateTimeObj = {\n      year: this.defaultValue.slice(0, 4),\n      month: this.defaultValue.slice(5, 7),\n      day: this.defaultValue.slice(8, 10),\n      hours: this.defaultValue.slice(11, 13),\n      minutes: this.defaultValue.slice(14, 16),\n    };\n    switch (this.type) {\n      case 'datetime-local':\n        return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n      case 'date':\n        return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n      case 'time':\n        return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n      default:\n        throw new Error('Invalid type.');\n    }\n  };\n\n  componentWillLoad() {\n    if (this.defaultValue !== 'none') {\n      this.value = this.getDefaultValue();\n    }\n  }\n\n  // Listener if input enters focus state\n  @Listen('focus')\n  handleFocusIn() {\n    this.focusInput = true;\n  }\n\n  // Listener if input leaves focus state\n  @Listen('focusout')\n  handleFocusOut() {\n    this.focusInput = false;\n  }\n\n  // Data input event in value prop\n  handleInput(e): void {\n    this.value = e.target.value;\n  }\n\n  // Change event isn't a composed:true by default in for input\n  handleChange(e: Event): void {\n    this.customChange.emit(e);\n  }\n\n  /** Set the input as focus when clicking the whole datetime with suffix/prefix */\n  handleFocusClick(): void {\n    this.textInput.focus();\n  }\n\n  render() {\n    let className = ' sdds-datetime-input';\n    if (this.size === 'md') {\n      className += `${className}-md`;\n    }\n    if (this.size === 'sm') {\n      className += `${className}-sm`;\n    }\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}\n        ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n        ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n        ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n        ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n        ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n        ${\n          this.state === 'error' || this.state === 'success'\n            ? `sdds-form-datetime-${this.state}`\n            : ''\n        }\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}\n        `}\n      >\n        {this.label && <div class=\"sdds-datetime-label\">{this.label}</div>}\n        <div\n          onClick={() => this.handleFocusClick()}\n          class=\"sdds-datetime-container sdds-datetime-container\"\n        >\n          <div class=\"sdds-datetime-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={className}\n              type={this.type}\n              disabled={this.disabled}\n              value={this.value}\n              autofocus={this.autofocus}\n              name={this.name}\n              onInput={(e) => this.handleInput(e)}\n              onChange={(e) => this.handleChange(e)}\n            />\n\n            <div class=\"datetime-icon icon-datetime-local\">\n              <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"datetime-icon icon-time\">\n              <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                <path\n                  d=\"M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n          </div>\n          <div class=\"sdds-datetime-bar\"></div>\n        </div>\n\n        <div class=\"sdds-datetime-helper\">\n          {this.helper && (\n            <div class=\"sdds-helper\">\n              {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n              {this.helper}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-datetime.js","mappings":"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","names":[],"sources":["./src/components/datetime/datetime.scss?tag=sdds-datetime&encapsulation=shadow","./src/components/datetime/datetime.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@mixin datetime-base {\n  @include sdds-box-sizing;\n\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-datetime-color);\n  background-color: var(--sdds-datetime-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-datetime-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-datetime-placeholder-color-focus);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-datetime-background-disabled);\n    color: var(--sdds-datetime-color-disabled);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-datetime-placeholder-disabled);\n    }\n\n    ~ .sdds-datetime-label-inside {\n      color: var(--sdds-datetime-label-disabled);\n    }\n  }\n}\n\n// icons\n\n.sdds-datetime-input,\n.sdds-datetime-input-md,\n.sdds-datetime-input-sm {\n  &[type='datetime-local'] {\n    ~ .icon-time {\n      display: none;\n    }\n  }\n\n  &[type='date'] {\n    ~ .icon-time {\n      display: none;\n    }\n  }\n\n  &[type='time'] {\n    ~ .icon-datetime-local {\n      display: none;\n    }\n  }\n}\n\n//Sizes\n.sdds-datetime-input {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-md {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-sm {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-datetime-container {\n  border-radius: 4px 4px 0 0;\n  display: flex;\n  position: relative;\n  height: 56px;\n  box-sizing: border-box;\n  background-color: var(--sdds-datetime-background);\n  border-bottom: 1px solid var(--sdds-datetime-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  &:hover {\n    border-bottom-color: var(--sdds-datetime-border-bottom-hover);\n  }\n\n  .sdds-form-datetime-md & {\n    height: 48px;\n  }\n\n  .sdds-form-datetime-sm & {\n    height: 40px;\n  }\n}\n\n.sdds-datetime-input-container {\n  position: relative;\n  width: 100%;\n\n  .datetime-icon {\n    height: 20px;\n    width: 20px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 18px;\n    pointer-events: none;\n\n    path {\n      fill: var(--sdds-datetime-icon);\n    }\n  }\n}\n\n.sdds-datetime-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-datetime-label-color);\n}\n\n.sdds-datetime-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  position: absolute;\n  pointer-events: none;\n  color: var(--sdds-datetime-label-inside-color);\n  left: 16px;\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  &::input-placeholder {\n    color: transparent;\n  }\n\n  &:placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-datetime-placeholder-color-focus);\n  }\n}\n\n@mixin label-inside-transition {\n  transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-datetime {\n  display: block;\n  min-width: 208px;\n\n  &-nomin {\n    min-width: auto;\n  }\n}\n\n//datetime container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-datetime.sdds-datetime-container-label-inside {\n  .sdds-datetime-input {\n    padding-top: var(--sdds-spacing-element-24);\n    padding-bottom: 15px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 20px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-datetime-input-md {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-datetime-input-sm {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  &.sdds-datetime-focus,\n  &.sdds-datetime-data {\n    .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-datetime-input-md ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-datetime-input ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 12px;\n    }\n  }\n}\n\n//datetime bottom bar when in focus\n.sdds-datetime-bar {\n  position: absolute;\n  width: 100%;\n\n  &::before,\n  &::after {\n    content: '';\n    height: 2px;\n    top: 54px;\n    width: 0;\n    position: absolute;\n    background: var(--sdds-datetime-bar);\n    transition: 0.35s ease all;\n\n    .sdds-form-datetime-md & {\n      top: 46px;\n    }\n\n    .sdds-form-datetime-sm & {\n      top: 40px;\n    }\n  }\n\n  &::before {\n    left: 50%;\n  }\n\n  &::after {\n    right: 50%;\n  }\n\n  .sdds-datetime-focus &::before,\n  .sdds-datetime-focus &::after {\n    width: 50%;\n  }\n}\n\n//Helper text\n.sdds-datetime-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  flex-basis: 100%;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-datetime-helper);\n\n  .sdds-helper {\n    display: inline-flex;\n    gap: 8px;\n  }\n}\n\n//Disabled state\n.sdds-form-datetime-disabled {\n  .sdds-datetime-container {\n    border-bottom-color: transparent;\n  }\n\n  .datetime-icon {\n    svg {\n      path {\n        fill: var(--sdds-datetime-icon-disabled);\n      }\n    }\n  }\n\n  .sdds-datetime-label {\n    color: var(--sdds-datetime-label-disabled);\n    cursor: not-allowed;\n  }\n}\n\n//Success state\n.sdds-form-datetime-success {\n  .sdds-datetime-container {\n    border-bottom-color: var(--sdds-datetime-border-bottom-success);\n    color: var(--sdds-datetime-color-success);\n  }\n\n  .sdds-datetime-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-datetime-bar-sucess);\n    }\n  }\n}\n\n//Error State\n.sdds-form-datetime-error {\n  .sdds-datetime-helper {\n    color: var(--sdds-datetime-helper-error);\n  }\n\n  .sdds-datetime-container {\n    border-bottom-color: var(--sdds-datetime-border-bottom-error);\n  }\n\n  .sdds-datetime-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-datetime-bar-error);\n    }\n  }\n  .datetime-icon path {\n    fill: var(--sdds-datetime-icon-error);\n  }\n}\n\n.sdds-datetime-textcounter {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-datetime-textcounter);\n  float: right;\n\n  & .sdds-datetime-textcounter-divider {\n    // font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-datetime-textcounter-divider);\n  }\n}\n\n/* datetime picker icon remove testing */\n\ninput[type='datetime-local']::-webkit-inner-spin-button,\ninput[type='datetime-local']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n\ninput[type='date']::-webkit-inner-spin-button,\ninput[type='date']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n\ninput[type='time']::-webkit-inner-spin-button,\ninput[type='time']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n.sdds-mode-variant-primary {\n  --sdds-datetime-background: var(--sdds-datetime-background-primary);\n}\n.sdds-mode-variant-secondary {\n  --sdds-datetime-background: var(--sdds-datetime-background-secondary);\n}\n","import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-datetime',\n  styleUrl: 'datetime.scss',\n  shadow: true,\n})\nexport class Datetime {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'datetime-local' | 'date' | 'time' = 'datetime-local';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value = '';\n\n  /** Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM */\n  @Prop() defaultValue: string | 'none' = 'none';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Resets min width rule */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Set the variant of the datetime component. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: string;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Label text for the component */\n  @Prop() label: string = '';\n\n  /** Helper text for the component */\n  @Prop() helper: string = '';\n\n  /** Listen to the focus state of the input */\n  @State() focusInput: boolean;\n\n  /** Change event for the datetime */\n  @Event({\n    composed: true,\n    bubbles: true,\n    cancelable: true,\n  })\n  sddsChange: EventEmitter;\n\n  /** Blur event for the datetime */\n  @Event({\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Focus event for the datetime */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  getDefaultValue = () => {\n    const dateTimeObj = {\n      year: this.defaultValue.slice(0, 4),\n      month: this.defaultValue.slice(5, 7),\n      day: this.defaultValue.slice(8, 10),\n      hours: this.defaultValue.slice(11, 13),\n      minutes: this.defaultValue.slice(14, 16),\n    };\n    switch (this.type) {\n      case 'datetime-local':\n        return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n      case 'date':\n        return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n      case 'time':\n        return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n      default:\n        throw new Error('Invalid type.');\n    }\n  };\n\n  componentWillLoad() {\n    if (this.defaultValue !== 'none') {\n      this.value = this.getDefaultValue();\n    }\n  }\n\n  // Listener if input enters focus state\n  @Listen('focus')\n  handleFocusIn() {\n    this.focusInput = true;\n  }\n\n  // Listener if input leaves focus state\n  @Listen('focusout')\n  handleFocusOut() {\n    this.focusInput = false;\n  }\n\n  // Data input event in value prop\n  handleInput(e): void {\n    this.value = e.target.value;\n    this.sddsChange.emit(e);\n  }\n\n  // Change event isn't a composed:true by default in for input\n  handleChange(e: Event): void {\n    this.sddsChange.emit(e);\n  }\n\n  /** Set the input as focus when clicking the whole datetime with suffix/prefix */\n  handleFocusClick(e): void {\n    this.textInput.focus();\n    this.sddsFocus.emit(e);\n  }\n\n  /** Set the input as focus when clicking the whole datetime with suffix/prefix */\n  handleBlur(e): void {\n    this.textInput.blur();\n    this.sddsBlur.emit(e);\n  }\n\n  render() {\n    let className = ' sdds-datetime-input';\n    if (this.size === 'md') {\n      className += `${className}-md`;\n    }\n    if (this.size === 'sm') {\n      className += `${className}-sm`;\n    }\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}\n        ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n        ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n        ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n        ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n        ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n        ${\n          this.state === 'error' || this.state === 'success'\n            ? `sdds-form-datetime-${this.state}`\n            : ''\n        }\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        `}\n      >\n        {this.label && (\n          <label htmlFor={this.name} class=\"sdds-datetime-label\">\n            {this.label}\n          </label>\n        )}\n        <div\n          onClick={(e) => this.handleFocusClick(e)}\n          class=\"sdds-datetime-container sdds-datetime-container\"\n        >\n          <div class=\"sdds-datetime-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={className}\n              type={this.type}\n              disabled={this.disabled}\n              value={this.value}\n              autofocus={this.autofocus}\n              name={this.name}\n              onInput={(e) => this.handleInput(e)}\n              onBlur={(e) => this.handleBlur(e)}\n              onChange={(e) => this.handleChange(e)}\n            />\n\n            <div class=\"datetime-icon icon-datetime-local\">\n              <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"datetime-icon icon-time\">\n              <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                <path\n                  d=\"M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n          </div>\n          <div class=\"sdds-datetime-bar\"></div>\n        </div>\n\n        <div class=\"sdds-datetime-helper\">\n          {this.helper && (\n            <div class=\"sdds-helper\">\n              {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n              {this.helper}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{sdds-inline-tab.d.ts → sdds-divider.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface SddsInlineTab extends Components.SddsInlineTab, HTMLElement {}
-export const SddsInlineTab: {
-  prototype: SddsInlineTab;
-  new (): SddsInlineTab;
+interface SddsDivider extends Components.SddsDivider, HTMLElement {}
+export const SddsDivider: {
+  prototype: SddsDivider;
+  new (): SddsDivider;
 };
 /**
  * Used to define this component and all nested components recursively.