@scania/tegel 0.0.33 → 0.0.51

package/dist/components/sdds-accordion-item.js

@@ -3,57 +3,56 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const accordionItemCss = ".sdds-accordion-item{box-sizing:border-box;list-style:none;color:var(--sdds-accordion-color);position:relative;border-top:1px solid var(--sdds-accordion-border)}.sdds-accordion-item *{box-sizing:border-box}.sdds-accordion-item button.sdds-accordion-header-icon-start,.sdds-accordion-item button.sdds-accordion-header-icon-end{all:unset}.sdds-accordion-item .sdds-accordion-header-icon-start,.sdds-accordion-item .sdds-accordion-header-icon-end,.sdds-accordion-item button.sdds-accordion-header-icon-start,.sdds-accordion-item button.sdds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);padding:var(--sdds-spacing-element-16);background-color:var(--sdds-accordion-background)}.sdds-accordion-item .sdds-accordion-header-icon-start *,.sdds-accordion-item .sdds-accordion-header-icon-end *,.sdds-accordion-item button.sdds-accordion-header-icon-start *,.sdds-accordion-item button.sdds-accordion-header-icon-end *{box-sizing:border-box}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--sdds-accordion-color)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon,.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon{display:block}.sdds-accordion-item .sdds-accordion-title{flex-grow:2}.sdds-accordion-item .sdds-accordion-panel{cursor:default;padding:var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64) var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);display:none;font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls)}.sdds-accordion-item .sdds-accordion-panel p{margin:0;padding:0}.sdds-accordion-item .sdds-accordion-panel--padding-reset{padding-right:var(--sdds-spacing-element-16)}.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon{margin:0 0 0 var(--sdds-spacing-element-32)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-title{order:1}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon{order:0;margin:0 var(--sdds-spacing-element-16) 0 0}.sdds-accordion-item.disabled,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled .sdds-accordion-panel{color:var(--sdds-accordion-color-disabled);cursor:not-allowed}.sdds-accordion-item.disabled .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-panel .sdds-accordion-icon{color:var(--sdds-accordion-color-disabled)}.sdds-accordion-item.disabled:hover,.sdds-accordion-item.disabled:hover *,.sdds-accordion-item.disabled:focus,.sdds-accordion-item.disabled:focus *,.sdds-accordion-item.disabled:active,.sdds-accordion-item.disabled:active *,.sdds-accordion-item.disabled.active,.sdds-accordion-item.disabled.active *{cursor:not-allowed}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end::after{border-color:transparent}.sdds-accordion-item.expanded .sdds-accordion-panel{display:block;padding-bottom:31px}.sdds-accordion-item.expanded .sdds-accordion-icon{transform:rotate(180deg)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-end .sdds-accordion-icon{margin-right:0;margin-left:var(--sdds-spacing-element-32)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-start .sdds-accordion-icon{margin-left:0;margin-right:var(--sdds-spacing-element-16)}.sdds-accordion-item:focus{border-top:1px solid var(--sdds-accordion-border-focus)}.sdds-accordion-item[disabled=true]:focus{border-color:var(--sdds-accordion-border)}:host(:focus) .sdds-accordion-item{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-focus);outline:none}:host(:hover) .sdds-accordion-header-icon-start,:host(:hover) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-hover)}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-active);outline:none}";
 
-const AccordionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sddsToggle = createEvent(this, "sddsToggle", 7);
-    this.header = '';
-    this.expandIconPosition = 'end';
-    this.disabled = false;
-    this.expanded = false;
-    this.paddingReset = false;
-  }
-  openAccordion() {
-    this.expanded = !this.expanded;
-    this.sddsToggle.emit(this.expanded);
-  }
-  render() {
+const AccordionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sddsToggle = createEvent(this, "sddsToggle", 7);
+    this.header = '';
+    this.expandIconPosition = 'end';
+    this.disabled = false;
+    this.expanded = false;
+    this.paddingReset = false;
+  }
+  openAccordion() {
+    this.expanded = !this.expanded;
+    this.sddsToggle.emit(this.expanded);
+  }
+  render() {
     return (h(Host, null, h("div", { class: `sdds-accordion-item
         ${this.disabled ? 'disabled' : ''}
         ${this.expanded ? 'expanded' : ''}
         ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `sdds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.openAccordion(), disabled: this.disabled }, h("div", { class: "sdds-accordion-title" }, this.header), h("div", { class: "sdds-accordion-icon" }, h("sdds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `sdds-accordion-panel
             ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}
-            ` }, h("slot", null)))));
-  }
-  static get style() { return accordionItemCss; }
-}, [1, "sdds-accordion-item", {
-    "header": [1],
-    "expandIconPosition": [1, "expand-icon-position"],
-    "disabled": [4],
-    "expanded": [4],
-    "paddingReset": [4, "padding-reset"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-accordion-item", "sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-accordion-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, AccordionItem);
-      }
-      break;
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+            ` }, h("slot", null)))));
+  }
+  static get style() { return accordionItemCss; }
+}, [1, "sdds-accordion-item", {
+    "header": [1],
+    "expandIconPosition": [1, "expand-icon-position"],
+    "disabled": [4],
+    "expanded": [4],
+    "paddingReset": [4, "padding-reset"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-accordion-item", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-accordion-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AccordionItem);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
-defineCustomElement$1();
 
 const SddsAccordionItem = AccordionItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-accordion-item.js.map

@@ -1 +1 @@
-{"file":"sdds-accordion-item.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,g8LAAg8L;;MCO58L,aAAa;;;;;;kBAEC,EAAE;8BAGmB,KAAK;oBAGvB,KAAK;oBAGL,KAAK;wBAGD,KAAK;;EAWrC,aAAa;IACX,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACrC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,IAEC,cACE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,8BAA8B,IAAI,CAAC,kBAAkB,EAAE,EAC9D,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,MAAM,CAAO,EACrD,WAAK,KAAK,EAAC,qBAAqB,IAC9B,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACnD,CACC,EACT,WACE,KAAK,EAAE;cACL,IAAI,CAAC,YAAY,GAAG,sCAAsC,GAAG,EAAE;aAChE,IAED,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion-item/accordion-item.scss?tag=sdds-accordion-item&encapsulation=shadow","./src/components/accordion/accordion-item/accordion-item.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/disabled-style';\n@import '../../../mixins/box-sizing';\n\n.sdds-accordion-item {\n  @include sdds-box-sizing;\n\n  list-style: none;\n  color: var(--sdds-accordion-color);\n  position: relative;\n\n  button.sdds-accordion-header-icon-start,\n  button.sdds-accordion-header-icon-end {\n    all: unset;\n  }\n\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end,\n  button.sdds-accordion-header-icon-start,\n  button.sdds-accordion-header-icon-end {\n    @include sdds-box-sizing;\n\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    // fixme: wrong line-height compared to production\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    padding: var(--sdds-spacing-element-16);\n    background-color: var(--sdds-accordion-background);\n\n    .sdds-accordion-icon {\n      transform-origin: center;\n      transition: transform 0.15s ease-in-out;\n      color: var(--sdds-accordion-color);\n\n      & > sdds-icon {\n        display: block;\n      }\n    }\n  }\n\n  .sdds-accordion-title {\n    flex-grow: 2;\n  }\n\n  .sdds-accordion-panel {\n    cursor: default;\n    padding: var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64)\n      var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);\n    display: none;\n    font: var(--sdds-detail-03);\n    letter-spacing: var(--sdds-detail-03-ls);\n\n    p {\n      margin: 0;\n      padding: 0;\n    }\n\n    &--padding-reset {\n      padding-right: var(--sdds-spacing-element-16);\n    }\n  }\n\n  .sdds-accordion-header-icon-end {\n    .sdds-accordion-icon {\n      margin: 0 0 0 var(--sdds-spacing-element-32);\n    }\n  }\n\n  .sdds-accordion-header-icon-start {\n    .sdds-accordion-title {\n      order: 1;\n    }\n\n    .sdds-accordion-icon {\n      order: 0;\n      margin: 0 var(--sdds-spacing-element-16) 0 0;\n    }\n  }\n\n  &.disabled {\n    &,\n    .sdds-accordion-header-icon-end,\n    .sdds-accordion-header-icon-start,\n    .sdds-accordion-panel {\n      color: var(--sdds-accordion-color-disabled);\n      cursor: not-allowed;\n\n      .sdds-accordion-icon {\n        color: var(--sdds-accordion-color-disabled);\n      }\n    }\n\n    &:hover,\n    &:focus,\n    &:active,\n    &.active {\n      @include disabledStyle;\n    }\n  }\n\n  &.expanded {\n    .sdds-accordion-panel {\n      display: block;\n      padding-bottom: 31px;\n    }\n\n    .sdds-accordion-icon {\n      transform: rotate(180deg);\n    }\n\n    .sdds-accordion-header-icon-end {\n      .sdds-accordion-icon {\n        margin-right: 0;\n        margin-left: var(--sdds-spacing-element-32);\n      }\n    }\n\n    .sdds-accordion-header-icon-start {\n      .sdds-accordion-icon {\n        margin-left: 0;\n        margin-right: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  border-top: 1px solid var(--sdds-accordion-border);\n\n  &:focus {\n    border-top: 1px solid var(--sdds-accordion-border-focus);\n  }\n\n  &[disabled='true']:focus {\n    border-color: var(--sdds-accordion-border);\n  }\n}\n\n:host(:focus) {\n  .sdds-accordion-item {\n    @include sdds-focus-state;\n\n    .sdds-accordion-header-icon-start,\n    .sdds-accordion-header-icon-end {\n      background-color: var(--sdds-accordion-background-focus);\n      outline: none;\n    }\n  }\n}\n\n:host(:hover) {\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    background-color: var(--sdds-accordion-background-hover);\n  }\n}\n\n:host(:active) {\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    background-color: var(--sdds-accordion-background-active);\n    outline: none;\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion-item',\n  styleUrl: 'accordion-item.scss',\n  shadow: true,\n})\nexport class AccordionItem {\n  /** The header gives users the context about the additional information available inside the panel */\n  @Prop() header: string = '';\n\n  /** Changes where the expand icon is placed. */\n  @Prop() expandIconPosition: 'start' | 'end' = 'end';\n\n  /** Disabled option in `boolean`. */\n  @Prop() disabled: boolean = false;\n\n  /** Set to true to expand panel open */\n  @Prop() expanded: boolean = false;\n\n  /** When true 16px on right padding instead of 64px */\n  @Prop() paddingReset: boolean = false;\n\n  /** Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<boolean>;\n\n  openAccordion() {\n    this.expanded = !this.expanded;\n    this.sddsToggle.emit(this.expanded);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`sdds-accordion-item\n        ${this.disabled ? 'disabled' : ''}\n        ${this.expanded ? 'expanded' : ''}\n        `}\n        >\n          <button\n            type=\"button\"\n            aria-expanded={this.expanded}\n            class={`sdds-accordion-header-icon-${this.expandIconPosition}`}\n            onClick={() => this.openAccordion()}\n            disabled={this.disabled}\n          >\n            <div class=\"sdds-accordion-title\">{this.header}</div>\n            <div class=\"sdds-accordion-icon\">\n              <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n            </div>\n          </button>\n          <div\n            class={`sdds-accordion-panel\n            ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}\n            `}\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-accordion-item.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,g8LAAg8L;;MCO58L,aAAa;;;;;;kBAEC,EAAE;8BAGmB,KAAK;oBAGvB,KAAK;oBAGL,KAAK;wBAGD,KAAK;;EAWrC,aAAa;IACX,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACrC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,IAEC,cACE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,8BAA8B,IAAI,CAAC,kBAAkB,EAAE,EAC9D,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,MAAM,CAAO,EACrD,WAAK,KAAK,EAAC,qBAAqB,IAC9B,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACnD,CACC,EACT,WACE,KAAK,EAAE;cACL,IAAI,CAAC,YAAY,GAAG,sCAAsC,GAAG,EAAE;aAChE,IAED,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion-item/accordion-item.scss?tag=sdds-accordion-item&encapsulation=shadow","./src/components/accordion/accordion-item/accordion-item.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/disabled-style';\n@import '../../../mixins/box-sizing';\n\n.sdds-accordion-item {\n  @include sdds-box-sizing;\n\n  list-style: none;\n  color: var(--sdds-accordion-color);\n  position: relative;\n\n  button.sdds-accordion-header-icon-start,\n  button.sdds-accordion-header-icon-end {\n    all: unset;\n  }\n\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end,\n  button.sdds-accordion-header-icon-start,\n  button.sdds-accordion-header-icon-end {\n    @include sdds-box-sizing;\n\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    // fixme: wrong line-height compared to production\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    padding: var(--sdds-spacing-element-16);\n    background-color: var(--sdds-accordion-background);\n\n    .sdds-accordion-icon {\n      transform-origin: center;\n      transition: transform 0.15s ease-in-out;\n      color: var(--sdds-accordion-color);\n\n      & > sdds-icon {\n        display: block;\n      }\n    }\n  }\n\n  .sdds-accordion-title {\n    flex-grow: 2;\n  }\n\n  .sdds-accordion-panel {\n    cursor: default;\n    padding: var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64)\n      var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);\n    display: none;\n    font: var(--sdds-detail-03);\n    letter-spacing: var(--sdds-detail-03-ls);\n\n    p {\n      margin: 0;\n      padding: 0;\n    }\n\n    &--padding-reset {\n      padding-right: var(--sdds-spacing-element-16);\n    }\n  }\n\n  .sdds-accordion-header-icon-end {\n    .sdds-accordion-icon {\n      margin: 0 0 0 var(--sdds-spacing-element-32);\n    }\n  }\n\n  .sdds-accordion-header-icon-start {\n    .sdds-accordion-title {\n      order: 1;\n    }\n\n    .sdds-accordion-icon {\n      order: 0;\n      margin: 0 var(--sdds-spacing-element-16) 0 0;\n    }\n  }\n\n  &.disabled {\n    &,\n    .sdds-accordion-header-icon-end,\n    .sdds-accordion-header-icon-start,\n    .sdds-accordion-panel {\n      color: var(--sdds-accordion-color-disabled);\n      cursor: not-allowed;\n\n      .sdds-accordion-icon {\n        color: var(--sdds-accordion-color-disabled);\n      }\n    }\n\n    &:hover,\n    &:focus,\n    &:active,\n    &.active {\n      @include disabledStyle;\n    }\n  }\n\n  &.expanded {\n    .sdds-accordion-panel {\n      display: block;\n      padding-bottom: 31px;\n    }\n\n    .sdds-accordion-icon {\n      transform: rotate(180deg);\n    }\n\n    .sdds-accordion-header-icon-end {\n      .sdds-accordion-icon {\n        margin-right: 0;\n        margin-left: var(--sdds-spacing-element-32);\n      }\n    }\n\n    .sdds-accordion-header-icon-start {\n      .sdds-accordion-icon {\n        margin-left: 0;\n        margin-right: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  border-top: 1px solid var(--sdds-accordion-border);\n\n  &:focus {\n    border-top: 1px solid var(--sdds-accordion-border-focus);\n  }\n\n  &[disabled='true']:focus {\n    border-color: var(--sdds-accordion-border);\n  }\n}\n\n:host(:focus) {\n  .sdds-accordion-item {\n    @include sdds-focus-state;\n\n    .sdds-accordion-header-icon-start,\n    .sdds-accordion-header-icon-end {\n      background-color: var(--sdds-accordion-background-focus);\n      outline: none;\n    }\n  }\n}\n\n:host(:hover) {\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    background-color: var(--sdds-accordion-background-hover);\n  }\n}\n\n:host(:active) {\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    background-color: var(--sdds-accordion-background-active);\n    outline: none;\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion-item',\n  styleUrl: 'accordion-item.scss',\n  shadow: true,\n})\nexport class AccordionItem {\n  /** The header gives users the context about the additional information available inside the panel */\n  @Prop() header: string = '';\n\n  /** Changes where the expand icon is placed. */\n  @Prop() expandIconPosition: 'start' | 'end' = 'end';\n\n  /** Disabled option in `boolean`. */\n  @Prop() disabled: boolean = false;\n\n  /** Set to true to expand panel open */\n  @Prop() expanded: boolean = false;\n\n  /** When true 16px on right padding instead of 64px */\n  @Prop() paddingReset: boolean = false;\n\n  /** Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<boolean>;\n\n  openAccordion() {\n    this.expanded = !this.expanded;\n    this.sddsToggle.emit(this.expanded);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`sdds-accordion-item\n        ${this.disabled ? 'disabled' : ''}\n        ${this.expanded ? 'expanded' : ''}\n        `}\n        >\n          <button\n            type=\"button\"\n            aria-expanded={this.expanded}\n            class={`sdds-accordion-header-icon-${this.expandIconPosition}`}\n            onClick={() => this.openAccordion()}\n            disabled={this.disabled}\n          >\n            <div class=\"sdds-accordion-title\">{this.header}</div>\n            <div class=\"sdds-accordion-icon\">\n              <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n            </div>\n          </button>\n          <div\n            class={`sdds-accordion-panel\n            ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}\n            `}\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-accordion.js

@@ -2,36 +2,33 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const accordionCss = ":host{display:block;box-sizing:border-box}:host *{box-sizing:border-box}:host .sdds-accordion-header-icon-start,:host .sdds-accordion-header-icon-end{position:relative}:host(:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-focus);outline:none}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start::after,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end::after{border-color:var(--sdds-accordion-border-focus)}:host(:focus) .disabled,:host(:focus) .disabled *{cursor:not-allowed}:host(:focus) .disabled .sdds-accordion-header-icon-start,:host(:focus) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:focus) .disabled .sdds-accordion-header-icon-start::after,:host(:focus) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-active);outline:none}:host(:active) .disabled,:host(:active) .disabled *{cursor:not-allowed}:host(:active) .disabled .sdds-accordion-header-icon-start,:host(:active) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:active) .disabled .sdds-accordion-header-icon-start::after,:host(:active) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:last-child){border-bottom:1px solid var(--sdds-accordion-border)}";
 
-const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.divider = true;
-    this.modeVariant = null;
-  }
-  render() {
-    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
-  }
-  static get style() { return accordionCss; }
-}, [1, "sdds-accordion", {
-    "divider": [4],
-    "modeVariant": [1, "mode-variant"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-accordion"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-accordion":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Accordion);
-      }
-      break;
-  } });
+const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.modeVariant = null;
+  }
+  render() {
+    return (h(Host, { class: `sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  static get style() { return accordionCss; }
+}, [1, "sdds-accordion", {
+    "modeVariant": [1, "mode-variant"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+  } });
 }
-defineCustomElement$1();
 
 const SddsAccordion = Accordion;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"sdds-accordion.js","mappings":";;AAAA,MAAM,YAAY,GAAG,grDAAgrD;;MCOxrD,SAAS;;;;;mBAEO,IAAI;uBAGgB,IAAI;;EAEnD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,OAAO,GAAG,wBAAwB,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAElJ,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion.scss?tag=sdds-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/disabled-style';\n@import '../../mixins/box-sizing';\n\n:host {\n  display: block;\n  @include sdds-box-sizing;\n\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    position: relative;\n  }\n}\n\n:host(:focus) {\n  @include sdds-focus-state;\n\n  .sdds-accordion-item {\n    .sdds-accordion-header-icon-start,\n    .sdds-accordion-header-icon-end {\n      background-color: var(--sdds-accordion-background-focus);\n      outline: none;\n\n      &::after {\n        border-color: var(--sdds-accordion-border-focus);\n      }\n    }\n  }\n\n  .disabled {\n    @include disabledStyle;\n  }\n}\n\n:host(:active) {\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    background-color: var(--sdds-accordion-background-active);\n    outline: none;\n  }\n\n  .disabled {\n    @include disabledStyle;\n  }\n}\n\n:host(:last-child) {\n  border-bottom: 1px solid var(--sdds-accordion-border);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  /** Enable or disable divider lines between items */\n  @Prop() divider: boolean = true;\n\n  /** Set the variant of the the accordion. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  render() {\n    return (\n      <Host\n        class={`sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-accordion.js","mappings":";;AAAA,MAAM,YAAY,GAAG,grDAAgrD;;MCOxrD,SAAS;;;;;uBAE2B,IAAI;;EAEnD,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAElG,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/accordion/accordion.scss?tag=sdds-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/disabled-style';\n@import '../../mixins/box-sizing';\n\n:host {\n  display: block;\n  @include sdds-box-sizing;\n\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    position: relative;\n  }\n}\n\n:host(:focus) {\n  @include sdds-focus-state;\n\n  .sdds-accordion-item {\n    .sdds-accordion-header-icon-start,\n    .sdds-accordion-header-icon-end {\n      background-color: var(--sdds-accordion-background-focus);\n      outline: none;\n\n      &::after {\n        border-color: var(--sdds-accordion-border-focus);\n      }\n    }\n  }\n\n  .disabled {\n    @include disabledStyle;\n  }\n}\n\n:host(:active) {\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    background-color: var(--sdds-accordion-background-active);\n    outline: none;\n  }\n\n  .disabled {\n    @include disabledStyle;\n  }\n}\n\n:host(:last-child) {\n  border-bottom: 1px solid var(--sdds-accordion-border);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  /** Set the variant of the the accordion. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  render() {\n    return (\n      <Host\n        class={`sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-badges.js

@@ -2,73 +2,72 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 
 const badgesCss = ":host{--sdds-badges-background-color:var(--sdds-negative);--sdds-badges-color-text:var(--sdds-white);box-sizing:border-box;display:block}:host *{box-sizing:border-box}.sdds-badges{display:block;border-radius:12px;background-color:var(--sdds-badges-background-color);text-align:center}.sdds-badges.sdds-badges-sm{height:8px;width:8px;line-height:8px}.sdds-badges.sdds-badges-lg{height:20px;line-height:20px;width:20px}.sdds-badges.sdds-badges-pill{display:inline-block;width:unset;padding-left:8px;padding-right:8px}.sdds-badges.sdds-badges-hidden{display:none}.sdds-badges-text{font-family:var(--sdds-font-family-semi-condensed-bold);font-size:12px;color:var(--sdds-badges-color-text);font-weight:bold}";
 
-const SddsBadges$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.value = '';
-    this.hidden = false;
-    this.isSmall = false;
-    this.size = 'lg';
-    this.shape = '';
-    this.text = '';
-  }
-  watchProps() {
-    this.checkProps();
-  }
-  componentWillLoad() {
-    this.checkProps();
-    if (this.isSmall) {
-      this.size = 'sm';
-      console.warn('Prop isSmall is deprecated. Use size"small" instead');
-    }
-  }
-  checkProps() {
-    const valueAsNumber = parseInt(this.value);
-    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
-      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
-      this.size = 'lg';
-      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
-    }
-    else {
-      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-      this.value !== '' && this.size !== 'sm'
-        ? console.warn('The provided value is either empty or string, please provide value as number.')
-        : '';
-    }
-  }
-  render() {
-    return (h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.hidden ? 'sdds-badges-hidden' : ''}` }, h("div", { class: "sdds-badges-text" }, this.text)));
-  }
-  static get watchers() { return {
-    "value": ["watchProps"],
-    "isSmall": ["watchProps"],
-    "size": ["watchProps"]
-  }; }
-  static get style() { return badgesCss; }
-}, [1, "sdds-badges", {
-    "value": [1],
-    "hidden": [4],
-    "isSmall": [4, "is-small"],
-    "size": [1],
-    "shape": [32],
-    "text": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-badges"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-badges":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsBadges$1);
-      }
-      break;
-  } });
+const SddsBadges$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.value = '';
+    this.hidden = false;
+    this.isSmall = false;
+    this.size = 'lg';
+    this.shape = '';
+    this.text = '';
+  }
+  watchProps() {
+    this.checkProps();
+  }
+  componentWillLoad() {
+    this.checkProps();
+    if (this.isSmall) {
+      this.size = 'sm';
+      console.warn('Prop isSmall is deprecated. Use size"small" instead');
+    }
+  }
+  checkProps() {
+    const valueAsNumber = parseInt(this.value);
+    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
+      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
+      this.size = 'lg';
+      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
+    }
+    else {
+      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+      this.value !== '' && this.size !== 'sm'
+        ? console.warn('The provided value is either empty or string, please provide value as number.')
+        : '';
+    }
+  }
+  render() {
+    return (h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.hidden ? 'sdds-badges-hidden' : ''}` }, h("div", { class: "sdds-badges-text" }, this.text)));
+  }
+  static get watchers() { return {
+    "value": ["watchProps"],
+    "isSmall": ["watchProps"],
+    "size": ["watchProps"]
+  }; }
+  static get style() { return badgesCss; }
+}, [1, "sdds-badges", {
+    "value": [1],
+    "hidden": [4],
+    "isSmall": [4, "is-small"],
+    "size": [1],
+    "shape": [32],
+    "text": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-badges"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-badges":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsBadges$1);
+      }
+      break;
+  } });
 }
-defineCustomElement$1();
 
 const SddsBadges = SddsBadges$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"sdds-badges.js","mappings":";;AAAA,MAAM,SAAS,GAAG,gsBAAgsB;;MCOrsBA,YAAU;;;;;iBAEG,EAAE;kBAIA,KAAK;mBAGJ,KAAK;gBAGJ,IAAI;iBAEP,EAAE;gBAEH,EAAE;;EAK1B,UAAU;IACR,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO,CAAC,IAAI,CAAC,qDAAqD,CAAC,CAAC;KACrE;GACF;EAED,UAAU;IACR,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;MACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,MAAM,GAAG,EAAE,CAAC;MAC7D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC;KACrF;SAAM;;MAEL,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;UACnC,OAAO,CAAC,IAAI,CACV,+EAA+E,CAChF;UACD,EAAE,CAAC;KACR;GACF;EAED,MAAM;IACJ,QACE,YACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,kBAAkB,GAAG,EAC/C,IAAI,IAAI,CAAC,MAAM,GAAG,oBAAoB,GAAG,EAAE,EAAE,IAE7C,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC1C,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBadges"],"sources":["./src/components/badge/badges.scss?tag=sdds-badges&encapsulation=shadow","./src/components/badge/badges.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n// This component does not have dark version so all css is in this file\n\n:host {\n  // Variables\n  --sdds-badges-background-color: var(--sdds-negative);\n  --sdds-badges-color-text: var(--sdds-white);\n\n  // Styling\n  @include sdds-box-sizing;\n\n  display: block;\n}\n\n.sdds-badges {\n  display: block;\n  border-radius: 12px;\n  background-color: var(--sdds-badges-background-color);\n  text-align: center;\n\n  &.sdds-badges-sm {\n    height: 8px;\n    width: 8px;\n    line-height: 8px;\n  }\n\n  &.sdds-badges-lg {\n    height: 20px;\n    line-height: 20px;\n    width: 20px;\n  }\n\n  &.sdds-badges-pill {\n    display: inline-block;\n    width: unset;\n    padding-left: 8px;\n    padding-right: 8px;\n  }\n\n  &.sdds-badges-hidden {\n    display: none;\n  }\n}\n\n.sdds-badges-text {\n  font-family: var(--sdds-font-family-semi-condensed-bold);\n  font-size: 12px;\n  color: var(--sdds-badges-color-text);\n  font-weight: bold;\n}\n","import { Component, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-badges',\n  styleUrl: 'badges.scss',\n  shadow: true,\n})\nexport class SddsBadges {\n  /** Value shown in badge */\n  @Prop() value: string = '';\n  // TODO: Make upper prop accepts numbers too ?\n\n  /** Changes visibility of badge */\n  @Prop() hidden: boolean = false;\n\n  /** @deprecated Use size prop instead. Changes badge from large to small size */\n  @Prop() isSmall: boolean = false;\n\n  /** Sets component size. */\n  @Prop() size: 'lg' | 'sm' = 'lg';\n\n  @State() shape: string = '';\n\n  @State() text: string = '';\n\n  @Watch('value')\n  @Watch('isSmall')\n  @Watch('size')\n  watchProps() {\n    this.checkProps();\n  }\n\n  componentWillLoad() {\n    this.checkProps();\n    if (this.isSmall) {\n      this.size = 'sm';\n      console.warn('Prop isSmall is deprecated. Use size\"small\" instead');\n    }\n  }\n\n  checkProps() {\n    const valueAsNumber = parseInt(this.value);\n    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {\n      this.shape = this.value.toString().length >= 2 ? 'pill' : '';\n      this.size = 'lg';\n      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();\n    } else {\n      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions\n      this.value !== '' && this.size !== 'sm'\n        ? console.warn(\n            'The provided value is either empty or string, please provide value as number.',\n          )\n        : '';\n    }\n  }\n\n  render() {\n    return (\n      <host\n        class={`sdds-badges sdds-badges-${this.size} ${\n          this.shape === 'pill' ? 'sdds-badges-pill' : ''\n        } ${this.hidden ? 'sdds-badges-hidden' : ''}`}\n      >\n        <div class=\"sdds-badges-text\">{this.text}</div>\n      </host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-badges.js","mappings":";;AAAA,MAAM,SAAS,GAAG,gsBAAgsB;;MCOrsBA,YAAU;;;;;iBAEG,EAAE;kBAIA,KAAK;mBAGJ,KAAK;gBAGJ,IAAI;iBAEP,EAAE;gBAEH,EAAE;;EAK1B,UAAU;IACR,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO,CAAC,IAAI,CAAC,qDAAqD,CAAC,CAAC;KACrE;GACF;EAED,UAAU;IACR,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;MACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,MAAM,GAAG,EAAE,CAAC;MAC7D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC;KACrF;SAAM;;MAEL,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;UACnC,OAAO,CAAC,IAAI,CACV,+EAA+E,CAChF;UACD,EAAE,CAAC;KACR;GACF;EAED,MAAM;IACJ,QACE,YACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,kBAAkB,GAAG,EAC/C,IAAI,IAAI,CAAC,MAAM,GAAG,oBAAoB,GAAG,EAAE,EAAE,IAE7C,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC1C,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBadges"],"sources":["./src/components/badge/badges.scss?tag=sdds-badges&encapsulation=shadow","./src/components/badge/badges.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n// This component does not have dark version so all css is in this file\n\n:host {\n  // Variables\n  --sdds-badges-background-color: var(--sdds-negative);\n  --sdds-badges-color-text: var(--sdds-white);\n\n  // Styling\n  @include sdds-box-sizing;\n\n  display: block;\n}\n\n.sdds-badges {\n  display: block;\n  border-radius: 12px;\n  background-color: var(--sdds-badges-background-color);\n  text-align: center;\n\n  &.sdds-badges-sm {\n    height: 8px;\n    width: 8px;\n    line-height: 8px;\n  }\n\n  &.sdds-badges-lg {\n    height: 20px;\n    line-height: 20px;\n    width: 20px;\n  }\n\n  &.sdds-badges-pill {\n    display: inline-block;\n    width: unset;\n    padding-left: 8px;\n    padding-right: 8px;\n  }\n\n  &.sdds-badges-hidden {\n    display: none;\n  }\n}\n\n.sdds-badges-text {\n  font-family: var(--sdds-font-family-semi-condensed-bold);\n  font-size: 12px;\n  color: var(--sdds-badges-color-text);\n  font-weight: bold;\n}\n","import { Component, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-badges',\n  styleUrl: 'badges.scss',\n  shadow: true,\n})\nexport class SddsBadges {\n  /** Value shown in badge */\n  @Prop() value: string = '';\n  // TODO: Make upper prop accepts numbers too ?\n\n  /** Changes visibility of badge */\n  @Prop() hidden: boolean = false;\n\n  /** @deprecated Use size prop instead. Changes badge from large to small size */\n  @Prop() isSmall: boolean = false;\n\n  /** Sets component size. */\n  @Prop() size: 'lg' | 'sm' = 'lg';\n\n  @State() shape: string = '';\n\n  @State() text: string = '';\n\n  @Watch('value')\n  @Watch('isSmall')\n  @Watch('size')\n  watchProps() {\n    this.checkProps();\n  }\n\n  componentWillLoad() {\n    this.checkProps();\n    if (this.isSmall) {\n      this.size = 'sm';\n      console.warn('Prop isSmall is deprecated. Use size\"small\" instead');\n    }\n  }\n\n  checkProps() {\n    const valueAsNumber = parseInt(this.value);\n    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {\n      this.shape = this.value.toString().length >= 2 ? 'pill' : '';\n      this.size = 'lg';\n      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();\n    } else {\n      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions\n      this.value !== '' && this.size !== 'sm'\n        ? console.warn(\n            'The provided value is either empty or string, please provide value as number.',\n          )\n        : '';\n    }\n  }\n\n  render() {\n    return (\n      <host\n        class={`sdds-badges sdds-badges-${this.size} ${\n          this.shape === 'pill' ? 'sdds-badges-pill' : ''\n        } ${this.hidden ? 'sdds-badges-hidden' : ''}`}\n      >\n        <div class=\"sdds-badges-text\">{this.text}</div>\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-banner.js

@@ -2,117 +2,116 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './sdds-link2.js';
 
-const sddsBannerCss = ":root,.sdds-mode-light{--sdds-link:var(--sdds-blue-500);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-grey-900);--sdds-link-disabled:var(--sdds-grey-400)}.sdds-mode-dark{--sdds-link:var(--sdds-blue-300);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-blue-400);--sdds-link-disabled:var(--sdds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--sdds-banner-background-error)}:host(.information){background-color:var(--sdds-banner-background-info)}:host{display:flex;background-color:var(--sdds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--sdds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--sdds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--sdds-banner-prefix-info-color)}:host .banner-content{color:var(--sdds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .banner-content.no-icon{padding-left:16px}:host .banner-content .banner-header{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls)}:host .banner-content .banner-subheader{margin-top:4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .banner-content sdds-link{width:fit-content;margin-top:16px}:host .banner-close{color:var(--sdds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus{outline:none}:host .banner-close button:focus sdds-icon{outline:2px solid var(--sdds-link-focus)}";
+const sddsBannerCss = ":root,.sdds-mode-light{--sdds-link:var(--sdds-blue-500);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-grey-900);--sdds-link-disabled:var(--sdds-grey-400)}.sdds-mode-dark{--sdds-link:var(--sdds-blue-300);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-blue-400);--sdds-link-disabled:var(--sdds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--sdds-banner-background-error)}:host(.information){background-color:var(--sdds-banner-background-info)}:host{display:flex;background-color:var(--sdds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--sdds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--sdds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--sdds-banner-prefix-info-color)}:host .banner-content{color:var(--sdds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .banner-content.no-icon{padding-left:16px}:host .banner-content .banner-header{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls)}:host .banner-content .banner-subheader{margin-top:4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .banner-content sdds-link{width:fit-content;margin-top:16px}:host .banner-close{color:var(--sdds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--sdds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus{outline:none}:host .banner-close button:focus sdds-icon{outline:2px solid var(--sdds-link-focus)}";
 
-const SddsBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sddsClose = createEvent(this, "sddsClose", 7);
-    this.handleClose = () => {
-      const sddsCloseEvent = this.sddsClose.emit({
-        bannerId: this.bannerId,
-        hidden: this.hidden,
-      });
-      if (!sddsCloseEvent.defaultPrevented) {
-        this.hidden = true;
-      }
-    };
-    this.icon = undefined;
-    this.header = undefined;
-    this.subheader = undefined;
-    this.linkText = undefined;
-    this.href = undefined;
-    this.linkTarget = '_self';
-    this.linkRel = 'noopener';
-    this.type = 'none';
-    this.bannerId = crypto.randomUUID();
-    this.persistent = false;
-    this.hidden = false;
-  }
-  /** Hides the banner. */
-  async hideBanner() {
-    const sddsCloseEvent = this.sddsClose.emit({
-      bannerId: this.bannerId,
-      hidden: this.hidden,
-    });
-    if (!sddsCloseEvent.defaultPrevented) {
-      this.hidden = true;
-    }
-    return {
-      bannerId: this.bannerId,
-      hidden: true,
-    };
-  }
-  /** Shows the banner */
-  async showBanner() {
-    const sddsCloseEvent = this.sddsClose.emit({
-      bannerId: this.bannerId,
-      hidden: this.hidden,
-    });
-    if (!sddsCloseEvent.defaultPrevented) {
-      this.hidden = false;
-    }
-    return {
-      bannerId: this.bannerId,
-      hidden: false,
-    };
-  }
-  connectedCallback() {
-    if (this.type === 'error') {
-      this.icon = 'error';
-    }
-    else if (this.type === 'information') {
-      this.icon = 'info';
-    }
-  }
-  render() {
-    return (h(Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.type} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.type}` }, h("sdds-icon", { name: this.icon, size: "20px" }))), h("div", { class: `banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}` }, this.header && h("span", { class: `banner-header` }, this.header), this.subheader && h("span", { class: `banner-subheader` }, this.subheader), this.linkText && this.href && (h("sdds-link", { "link-href": this.href, rel: this.linkRel, "link-target": this.linkTarget }, this.linkText))), !this.persistent && (h("div", { class: `banner-close` }, h("button", { onClick: () => {
-        this.handleClose();
-      } }, h("sdds-icon", { name: "cross", size: "20px" }))))));
-  }
-  get host() { return this; }
-  static get style() { return sddsBannerCss; }
-}, [1, "sdds-banner", {
-    "icon": [1],
-    "header": [1],
-    "subheader": [1],
-    "linkText": [1, "link-text"],
-    "href": [1],
-    "linkTarget": [1, "link-target"],
-    "linkRel": [1, "link-rel"],
-    "type": [1],
-    "bannerId": [1, "banner-id"],
-    "persistent": [4],
-    "hidden": [4],
-    "hideBanner": [64],
-    "showBanner": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-banner", "sdds-icon", "sdds-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-banner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsBanner$1);
-      }
-      break;
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "sdds-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const SddsBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sddsClose = createEvent(this, "sddsClose", 7);
+    this.handleClose = () => {
+      const sddsCloseEvent = this.sddsClose.emit({
+        bannerId: this.bannerId,
+        hidden: this.hidden,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.icon = undefined;
+    this.header = undefined;
+    this.subheader = undefined;
+    this.linkText = undefined;
+    this.href = undefined;
+    this.linkTarget = '_self';
+    this.linkRel = 'noopener';
+    this.type = 'none';
+    this.bannerId = crypto.randomUUID();
+    this.persistent = false;
+    this.hidden = false;
+  }
+  /** Hides the banner. */
+  async hideBanner() {
+    const sddsCloseEvent = this.sddsClose.emit({
+      bannerId: this.bannerId,
+      hidden: this.hidden,
+    });
+    if (!sddsCloseEvent.defaultPrevented) {
+      this.hidden = true;
+    }
+    return {
+      bannerId: this.bannerId,
+      hidden: true,
+    };
+  }
+  /** Shows the banner */
+  async showBanner() {
+    const sddsCloseEvent = this.sddsClose.emit({
+      bannerId: this.bannerId,
+      hidden: this.hidden,
+    });
+    if (!sddsCloseEvent.defaultPrevented) {
+      this.hidden = false;
+    }
+    return {
+      bannerId: this.bannerId,
+      hidden: false,
+    };
+  }
+  connectedCallback() {
+    if (this.type === 'error') {
+      this.icon = 'error';
+    }
+    else if (this.type === 'information') {
+      this.icon = 'info';
+    }
+  }
+  render() {
+    return (h(Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.type} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.type}` }, h("sdds-icon", { name: this.icon, size: "20px" }))), h("div", { class: `banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}` }, this.header && h("span", { class: `banner-header` }, this.header), this.subheader && h("span", { class: `banner-subheader` }, this.subheader), this.linkText && this.href && (h("sdds-link", { "link-href": this.href, rel: this.linkRel, "link-target": this.linkTarget }, this.linkText))), !this.persistent && (h("div", { class: `banner-close` }, h("button", { onClick: () => {
+        this.handleClose();
+      } }, h("sdds-icon", { name: "cross", size: "20px" }))))));
+  }
+  get host() { return this; }
+  static get style() { return sddsBannerCss; }
+}, [1, "sdds-banner", {
+    "icon": [1],
+    "header": [1],
+    "subheader": [1],
+    "linkText": [1, "link-text"],
+    "href": [1],
+    "linkTarget": [1, "link-target"],
+    "linkRel": [1, "link-rel"],
+    "type": [1],
+    "bannerId": [1, "banner-id"],
+    "persistent": [4],
+    "hidden": [4],
+    "hideBanner": [64],
+    "showBanner": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-banner", "sdds-icon", "sdds-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-banner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsBanner$1);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "sdds-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
-defineCustomElement$1();
 
 const SddsBanner = SddsBanner$1;
 const defineCustomElement = defineCustomElement$1;