@scania/tegel 0.0.1-beta.9 → 0.0.2

package/dist/components/sdds-accordion-item.d.ts

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

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

@@ -0,0 +1,60 @@
+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-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() {
+    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;
+  } });
+}
+
+const SddsAccordionItem = AccordionItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsAccordionItem, defineCustomElement };

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

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

package/dist/components/sdds-accordion.js

@@ -0,0 +1,38 @@
+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(: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 SddsAccordion = Accordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsAccordion, defineCustomElement };

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

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

package/dist/components/sdds-badges.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+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 = SddsBadges$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsBadges, defineCustomElement };

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;

package/dist/components/sdds-banner.js

@@ -0,0 +1,119 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+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 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 = SddsBanner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsBanner, defineCustomElement };

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

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

package/dist/components/sdds-block.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sddsBlockCss = ".sdds-block-webcomponent{box-sizing:border-box;color:var(--sdds-block-color);border-radius:4px;padding:16px;font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);background-color:var(--sdds-block-background)}.sdds-block-webcomponent *{box-sizing:border-box}.sdds-mode-variant-primary{--sdds-block-background:var(--sdds-block-background-primary);--sdds-block-background-nested:var(--sdds-block-background-nested-primary)}.sdds-mode-variant-secondary{--sdds-block-background:var(--sdds-block-background-secondary);--sdds-block-background-nested:var(--sdds-block-background-nested-secondary)}";
+
+const SddsBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.modeVariant = null;
+  }
+  connectedCallback() {
+    this.children = Array.from(this.host.children).filter((item) => item.tagName === 'SDDS-BLOCK');
+    this.children.forEach((item) => {
+      if (!this.modeVariant) {
+        item.setAttribute('mode-variant', 'secondary');
+      }
+      else {
+        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');
+      }
+    });
+  }
+  render() {
+    return (h("div", { class: `sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  get host() { return this; }
+  static get style() { return sddsBlockCss; }
+}, [1, "sdds-block", {
+    "modeVariant": [1, "mode-variant"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-block"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-block":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsBlock$1);
+      }
+      break;
+  } });
+}
+
+const SddsBlock = SddsBlock$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsBlock, defineCustomElement };

package/dist/components/sdds-body-cell.d.ts

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

package/dist/components/sdds-body-cell.js

@@ -0,0 +1,6 @@
+import { T as TableBodyCell, d as defineCustomElement$1 } from './table-body-cell.js';
+
+const SddsBodyCell = TableBodyCell;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsBodyCell, defineCustomElement };

package/dist/components/sdds-breadcrumb-item.d.ts

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

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

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const breadcrumbItemCss = "@charset \"UTF-8\";li{display:flex;align-items:center;color:var(--sdds-breadcrumb-color)}li a{color:var(--sdds-breadcrumb-color);text-decoration:none}li:hover{cursor:pointer}li:hover a{color:var(--sdds-breadcrumb-color-hover);text-decoration:underline}li.sdds-breadcrumb-item-disabled a,li.sdds-breadcrumb-item-current a,li [aria-current=page] a{cursor:default;color:var(--sdds-breadcrumb-color-disabled)}li.sdds-breadcrumb-item-disabled:hover a,li.sdds-breadcrumb-item-current:hover a,li [aria-current=page]:hover a{color:var(--sdds-breadcrumb-color-disabled);text-decoration:none}li a::after{content:\"›\";color:var(--sdds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}li:last-child{color:red}:host(.sdds-breadcrumb-item-last) a::after{display:none}";
+
+const SddsBreadcrumbItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.current = false;
+    this.href = undefined;
+    this.disabled = false;
+  }
+  render() {
+    return (h("li", { class: `${this.current ? 'sdds-breadcrumb-item-current' : ''} 
+        ${this.disabled ? 'sdds-breadcrumb-item-disabled' : ''}` }, h("a", { "aria-current": this.current && 'page',
+      // eslint-disable-next-line no-script-url
+      href: this.disabled ? 'javascript:void(0)' : this.href }, h("slot", null))));
+  }
+  static get style() { return breadcrumbItemCss; }
+}, [1, "sdds-breadcrumb-item", {
+    "current": [4],
+    "href": [1],
+    "disabled": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-breadcrumb-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-breadcrumb-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsBreadcrumbItem$1);
+      }
+      break;
+  } });
+}
+
+const SddsBreadcrumbItem = SddsBreadcrumbItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsBreadcrumbItem, defineCustomElement };

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

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

package/dist/components/sdds-breadcrumb.js

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

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

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