@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/components/icon.js

@@ -4,55 +4,55 @@ const iconsCollection = '[{"name":"arrow_diagonal","definition":"M24.444 22.143a
 
 const iconCss = ":host{display:inline-block;vertical-align:middle;line-height:0}:host,:host *,:host *::before,:host *::after{box-sizing:border-box}:host svg{height:1em;width:1em;fill:currentcolor}";
 
-const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.setIcons = () => this.arrayOfIcons.map(element => {
-      if (element.name === this.name) {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
-      }
-    });
-    this.name = 'arrow_diagonal';
-    this.size = '16px';
-    this.icons_object = iconsCollection;
-    this.arrayOfIcons = [];
-  }
-  componentWillLoad() {
-    this.arrayDataWatcher(this.icons_object);
-  }
-  arrayDataWatcher(newValue) {
-    if (typeof newValue === 'string') {
-      this.arrayOfIcons = JSON.parse(newValue);
-    }
-    else {
-      this.arrayOfIcons = newValue;
-    }
-    this.arrayOfIcons = [...this.arrayOfIcons];
-  }
-  render() {
-    return h(Host, null, this.setIcons());
-  }
-  static get style() { return iconCss; }
-}, [1, "sdds-icon", {
-    "name": [513],
-    "size": [513],
-    "icons_object": [32],
-    "arrayOfIcons": [32]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Icon);
-      }
-      break;
-  } });
+const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.setIcons = () => this.arrayOfIcons.map(element => {
+      if (element.name === this.name) {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
+      }
+    });
+    this.name = 'arrow_diagonal';
+    this.size = '16px';
+    this.icons_object = iconsCollection;
+    this.arrayOfIcons = [];
+  }
+  componentWillLoad() {
+    this.arrayDataWatcher(this.icons_object);
+  }
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this.arrayOfIcons = JSON.parse(newValue);
+    }
+    else {
+      this.arrayOfIcons = newValue;
+    }
+    this.arrayOfIcons = [...this.arrayOfIcons];
+  }
+  render() {
+    return h(Host, null, this.setIcons());
+  }
+  static get style() { return iconCss; }
+}, [1, "sdds-icon", {
+    "name": [513],
+    "size": [513],
+    "icons_object": [32],
+    "arrayOfIcons": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Icon);
+      }
+      break;
+  } });
 }
 
 export { Icon as I, defineCustomElement as d };

package/dist/components/index.d.ts

@@ -2,20 +2,30 @@
 export { Accordion as SddsAccordion } from '../types/components/accordion/accordion';
 export { AccordionItem as SddsAccordionItem } from '../types/components/accordion/accordion-item/accordion-item';
 export { SddsBadges as SddsBadges } from '../types/components/badge/badges';
+export { SddsBanner as SddsBanner } from '../types/components/banner/sdds-banner';
+export { SddsBlock as SddsBlock } from '../types/components/block/sdds-block';
 export { TableBodyCell as SddsBodyCell } from '../types/components/data-table/table-body-cell/table-body-cell';
+export { SddsBreadcrumb as SddsBreadcrumb } from '../types/components/breadcrumb/breadcrumb';
+export { SddsBreadcrumbItem as SddsBreadcrumbItem } from '../types/components/breadcrumb/breadcrumb-item/breadcrumb-item';
 export { SddsButton as SddsButton } from '../types/components/button/button-component';
+export { SddsCard as SddsCard } from '../types/components/card/sdds-card';
+export { SddsCheckbox as SddsCheckbox } from '../types/components/checkbox/sdds-checkbox';
 export { Datetime as SddsDatetime } from '../types/components/datetime/datetime';
 export { Dropdown as SddsDropdown } from '../types/components/dropdown/dropdown';
 export { DropdownFilter as SddsDropdownFilter } from '../types/components/dropdown/dropdown-filter/dropdown-filter';
 export { DropdownOption as SddsDropdownOption } from '../types/components/dropdown/dropdown-option/dropdown-option';
 export { TableHeaderCell as SddsHeaderCell } from '../types/components/data-table/table-header-cell/table-header-cell';
 export { Icon as SddsIcon } from '../types/components/icon/icon';
+export { InlineTabsChild as SddsInlineTab } from '../types/components/tabs/inline-tabs-default/inline-tab/inline-tab';
 export { InlineTabs as SddsInlineTabs } from '../types/components/tabs/inline-tabs-default/inline-tabs';
 export { InlineTabsFullbleed as SddsInlineTabsFullbleed } from '../types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed';
+export { SddsLink as SddsLink } from '../types/components/link/sdds-link';
+export { SddsMessage as SddsMessage } from '../types/components/message/sdds-message';
 export { Modal as SddsModal } from '../types/components/modal/modal';
 export { NavigationTabs as SddsNavigationTabs } from '../types/components/tabs/navigation-tabs/navigation-tabs';
 export { PopoverCanvas as SddsPopoverCanvas } from '../types/components/popover-canvas/popover-canvas';
 export { PopoverMenu as SddsPopoverMenu } from '../types/components/popover-menu/popover-menu';
+export { RadioButton as SddsRadioButton } from '../types/components/radio-button/radio-button';
 export { Slider as SddsSlider } from '../types/components/slider/slider';
 export { Spinner as SddsSpinner } from '../types/components/spinner/spinner';
 export { Table as SddsTable } from '../types/components/data-table/table/table';
@@ -27,6 +37,8 @@ export { TableHeaderRow as SddsTableHeader } from '../types/components/data-tabl
 export { TableToolbar as SddsTableToolbar } from '../types/components/data-table/table-toolbar/table-toolbar';
 export { Textarea as SddsTextarea } from '../types/components/textarea/textarea';
 export { Textfield as SddsTextfield } from '../types/components/textfield/textfield';
+export { SddsToast as SddsToast } from '../types/components/toast/sdds-toast';
+export { SddsToggle as SddsToggle } from '../types/components/toggle/sdds-toggle';
 export { Tooltip as SddsTooltip } from '../types/components/tooltip/tooltip';
 
 /**

package/dist/components/index.js

@@ -2,20 +2,30 @@ export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client'
 export { SddsAccordion, defineCustomElement as defineCustomElementSddsAccordion } from './sdds-accordion.js';
 export { SddsAccordionItem, defineCustomElement as defineCustomElementSddsAccordionItem } from './sdds-accordion-item.js';
 export { SddsBadges, defineCustomElement as defineCustomElementSddsBadges } from './sdds-badges.js';
+export { SddsBanner, defineCustomElement as defineCustomElementSddsBanner } from './sdds-banner.js';
+export { SddsBlock, defineCustomElement as defineCustomElementSddsBlock } from './sdds-block.js';
 export { SddsBodyCell, defineCustomElement as defineCustomElementSddsBodyCell } from './sdds-body-cell.js';
+export { SddsBreadcrumb, defineCustomElement as defineCustomElementSddsBreadcrumb } from './sdds-breadcrumb.js';
+export { SddsBreadcrumbItem, defineCustomElement as defineCustomElementSddsBreadcrumbItem } from './sdds-breadcrumb-item.js';
 export { SddsButton, defineCustomElement as defineCustomElementSddsButton } from './sdds-button.js';
+export { SddsCard, defineCustomElement as defineCustomElementSddsCard } from './sdds-card.js';
+export { SddsCheckbox, defineCustomElement as defineCustomElementSddsCheckbox } from './sdds-checkbox.js';
 export { SddsDatetime, defineCustomElement as defineCustomElementSddsDatetime } from './sdds-datetime.js';
 export { SddsDropdown, defineCustomElement as defineCustomElementSddsDropdown } from './sdds-dropdown.js';
 export { SddsDropdownFilter, defineCustomElement as defineCustomElementSddsDropdownFilter } from './sdds-dropdown-filter.js';
 export { SddsDropdownOption, defineCustomElement as defineCustomElementSddsDropdownOption } from './sdds-dropdown-option.js';
 export { SddsHeaderCell, defineCustomElement as defineCustomElementSddsHeaderCell } from './sdds-header-cell.js';
 export { SddsIcon, defineCustomElement as defineCustomElementSddsIcon } from './sdds-icon.js';
+export { SddsInlineTab, defineCustomElement as defineCustomElementSddsInlineTab } from './sdds-inline-tab.js';
 export { SddsInlineTabs, defineCustomElement as defineCustomElementSddsInlineTabs } from './sdds-inline-tabs.js';
 export { SddsInlineTabsFullbleed, defineCustomElement as defineCustomElementSddsInlineTabsFullbleed } from './sdds-inline-tabs-fullbleed.js';
+export { SddsLink, defineCustomElement as defineCustomElementSddsLink } from './sdds-link.js';
+export { SddsMessage, defineCustomElement as defineCustomElementSddsMessage } from './sdds-message.js';
 export { SddsModal, defineCustomElement as defineCustomElementSddsModal } from './sdds-modal.js';
 export { SddsNavigationTabs, defineCustomElement as defineCustomElementSddsNavigationTabs } from './sdds-navigation-tabs.js';
 export { SddsPopoverCanvas, defineCustomElement as defineCustomElementSddsPopoverCanvas } from './sdds-popover-canvas.js';
 export { SddsPopoverMenu, defineCustomElement as defineCustomElementSddsPopoverMenu } from './sdds-popover-menu.js';
+export { SddsRadioButton, defineCustomElement as defineCustomElementSddsRadioButton } from './sdds-radio-button.js';
 export { SddsSlider, defineCustomElement as defineCustomElementSddsSlider } from './sdds-slider.js';
 export { SddsSpinner, defineCustomElement as defineCustomElementSddsSpinner } from './sdds-spinner.js';
 export { SddsTable, defineCustomElement as defineCustomElementSddsTable } from './sdds-table.js';
@@ -27,4 +37,6 @@ export { SddsTableHeader, defineCustomElement as defineCustomElementSddsTableHea
 export { SddsTableToolbar, defineCustomElement as defineCustomElementSddsTableToolbar } from './sdds-table-toolbar.js';
 export { SddsTextarea, defineCustomElement as defineCustomElementSddsTextarea } from './sdds-textarea.js';
 export { SddsTextfield, defineCustomElement as defineCustomElementSddsTextfield } from './sdds-textfield.js';
+export { SddsToast, defineCustomElement as defineCustomElementSddsToast } from './sdds-toast.js';
+export { SddsToggle, defineCustomElement as defineCustomElementSddsToggle } from './sdds-toggle.js';
 export { SddsTooltip, defineCustomElement as defineCustomElementSddsTooltip } from './sdds-tooltip.js';

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

@@ -1,57 +1,57 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const accordionItemCss = ".sdds-accordion-item{box-sizing:border-box;list-style:none;color:var(--sdds-accordion-colour);border-top:1px solid var(--sdds-accordion-border)}.sdds-accordion-item *{box-sizing:border-box}.sdds-accordion-item .sdds-accordion-header-icon-start,.sdds-accordion-item .sdds-accordion-header-icon-end{cursor:pointer;display:flex;align-items:center;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);padding:var(--sdds-spacing-element-16);background-color:var(--sdds-accordion-bg)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--sdds-accordion-colour)}.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{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-colour-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-colour-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-bg-focus);outline:none}:host(:hover) .sdds-accordion-header-icon-start,:host(:hover) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg-hover)}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg-active);outline:none}";
+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.accordionItemToggle = createEvent(this, "accordionItemToggle", 7);
-    this.header = '';
-    this.expandIconPosition = 'end';
-    this.disabled = false;
-    this.expanded = false;
-    this.paddingReset = false;
-  }
-  openAccordion() {
-    this.expanded = !this.expanded;
-    this.accordionItemToggle.emit(this.expanded);
-  }
-  render() {
+const AccordionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.accordionItemToggle = createEvent(this, "accordionItemToggle", 7);
+    this.header = '';
+    this.expandIconPosition = 'end';
+    this.disabled = false;
+    this.expanded = false;
+    this.paddingReset = false;
+  }
+  openAccordion() {
+    this.expanded = !this.expanded;
+    this.accordionItemToggle.emit(this.expanded);
+  }
+  render() {
     return (h(Host, null, h("div", { class: `sdds-accordion-item 
         ${this.disabled ? 'disabled' : ''} 
         ${this.expanded ? 'expanded' : ''}
-        ` }, h("div", { class: `sdds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.openAccordion() }, 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 
+        ` }, 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;
+  } });
 }
 
 const SddsAccordionItem = AccordionItem;

package/dist/components/sdds-accordion.js

@@ -1,35 +1,35 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-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 .sdds-accordion-header-icon-start::after,:host .sdds-accordion-header-icon-end::after{content:\"\";position:absolute;width:100%;height:0;left:0;z-index:2}:host .sdds-accordion-header-icon-start::after,:host .sdds-accordion-header-icon-end::after{bottom:-1px;border-bottom:1px solid transparent}: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-bg-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-bg-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 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 = 'primary';
-  }
-  render() {
-    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${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.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 SddsAccordion = Accordion;

package/dist/components/sdds-badges.js

@@ -1,73 +1,72 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const badgesCss = ":host{--sdds-badges-bg-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-bg-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 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.isVisible = true;
-    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.isVisible ? '' : 'sdds-badges-hidden'}` }, h("div", { class: "sdds-badges-text" }, this.text)));
-  }
-  static get watchers() { return {
-    "value": ["watchProps"],
-    "isVisible": ["watchProps"],
-    "isSmall": ["watchProps"],
-    "size": ["watchProps"]
-  }; }
-  static get style() { return badgesCss; }
-}, [1, "sdds-badges", {
-    "value": [1],
-    "isVisible": [4, "is-visible"],
-    "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;
+  } });
 }
 
 const SddsBadges = SddsBadges$1;

package/dist/components/sdds-banner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsBanner extends Components.SddsBanner, HTMLElement {}
+export const SddsBanner: {
+  prototype: SddsBanner;
+  new (): SddsBanner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;