@scania/tegel 0.0.2 → 0.0.4

package/dist/components/sdds-badges.js

@@ -2,74 +2,76 @@ 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;
+  } });
 }
 
 const SddsBadges = SddsBadges$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsBadges, defineCustomElement };
+
+//# sourceMappingURL=sdds-badges.js.map

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

@@ -0,0 +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}

package/dist/components/sdds-banner.js

@@ -4,116 +4,118 @@ 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$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 };
+
+//# sourceMappingURL=sdds-banner.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-banner.js","mappings":"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","names":["SddsBanner"],"sources":["./src/components/banner/sdds-banner.scss?tag=sdds-banner&encapsulation=shadow","./src/components/banner/sdds-banner.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import '../../mixins/box-sizing';\n@import '../link/link-vars.scss';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host(.error) {\n  background-color: var(--sdds-banner-background-error);\n}\n\n:host(.information) {\n  background-color: var(--sdds-banner-background-info);\n}\n\n:host {\n  display: flex;\n  background-color: var(--sdds-banner-background-default);\n  z-index: z(banner);\n\n  .banner-icon {\n    padding-left: 20px;\n    padding-top: 14px;\n    padding-right: 12px;\n    color: var(--sdds-banner-prefix-default-color);\n\n    &.error {\n      color: var(--sdds-banner-prefix-error-color);\n    }\n\n    &.information {\n      color: var(--sdds-banner-prefix-info-color);\n    }\n  }\n\n  .banner-content {\n    color: var(--sdds-banner-text-color);\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding: 16px 0;\n\n    &.no-icon {\n      padding-left: 16px;\n    }\n\n    .banner-header {\n      font: var(--sdds-headline-06);\n      letter-spacing: var(--sdds-headline-06-ls);\n    }\n\n    .banner-subheader {\n      margin-top: 4px;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n    }\n\n    sdds-link {\n      width: fit-content;\n      margin-top: 16px;\n    }\n  }\n\n  .banner-close {\n    color: var(--sdds-banner-x-color);\n\n    button {\n      padding-right: 16px;\n      padding-top: 14px;\n      background-color: transparent;\n      border: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        outline: none;\n\n        sdds-icon {\n          outline: 2px solid var(--sdds-link-focus);\n        }\n      }\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-banner',\n  styleUrl: 'sdds-banner.scss',\n  shadow: true,\n})\nexport class SddsBanner {\n  /** Name of the icon for the component. For error and information type the icon is predefined. */\n  @Prop() icon: string;\n\n  /** Header text. */\n  @Prop() header: string;\n\n  /** Subheader text. */\n  @Prop() subheader: string;\n\n  /** Link text. */\n  @Prop() linkText: string;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() linkTarget: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() linkRel: string = 'noopener';\n\n  /** Type of banner */\n  @Prop() type: 'error' | 'information' | 'none' = 'none';\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n   */\n  @Prop() bannerId: string = crypto.randomUUID();\n\n  /** Removes the close button on the banner. */\n  @Prop() persistent: boolean = false;\n\n  /** Hides the banner */\n  @Prop() hidden = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    bannerId: string;\n    hidden: boolean;\n  }>;\n\n  /** Hides the banner. */\n  @Method()\n  async hideBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: true,\n    };\n  }\n\n  /** Shows the banner */\n  @Method()\n  async showBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: false,\n    };\n  }\n\n  connectedCallback() {\n    if (this.type === 'error') {\n      this.icon = 'error';\n    } else if (this.type === 'information') {\n      this.icon = 'info';\n    }\n  }\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"banner\"\n        aria-hidden={`${this.hidden}`}\n        aria-live={\n          this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n        }\n        aria-atomic={this.host.getAttribute('aria-atomic')}\n        class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n      >\n        {this.icon && (\n          <div class={`banner-icon ${this.type}`}>\n            <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n          </div>\n        )}\n        <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n          {this.header && <span class={`banner-header`}>{this.header}</span>}\n          {this.subheader && <span class={`banner-subheader`}>{this.subheader}</span>}\n          {this.linkText && this.href && (\n            <sdds-link link-href={this.href} rel={this.linkRel} link-target={this.linkTarget}>\n              {this.linkText}\n            </sdds-link>\n          )}\n        </div>\n        {!this.persistent && (\n          <div class={`banner-close`}>\n            <button\n              onClick={() => {\n                this.handleClose();\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-block.js

@@ -2,47 +2,49 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 
 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$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 };
+
+//# sourceMappingURL=sdds-block.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-block.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wlBAAwlB;;MCQhmBA,WAAS;;;;;uBAE2B,IAAI;;EAMnD,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CACnD,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,KAAK,YAAY,CACd,CAAC;IAC5B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI;MACzB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;OAChD;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,CAAC;OAC7F;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,WACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAE3G,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBlock"],"sources":["./src/components/block/sdds-block.scss?tag=sdds-block&encapsulation=shadow","./src/components/block/sdds-block.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-block-webcomponent {\n  @include sdds-box-sizing;\n\n  color: var(--sdds-block-color);\n  border-radius: 4px;\n  padding: 16px;\n  font: var(--sdds-body-01);\n  letter-spacing: var(--sdds-body-01-ls);\n  background-color: var(--sdds-block-background);\n\n}\n.sdds-mode-variant-primary {\n  --sdds-block-background: var(--sdds-block-background-primary);\n  --sdds-block-background-nested: var(--sdds-block-background-nested-primary);\n}\n.sdds-mode-variant-secondary {\n  --sdds-block-background: var(--sdds-block-background-secondary);\n  --sdds-block-background-nested: var(--sdds-block-background-nested-secondary);\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-block',\n  styleUrl: 'sdds-block.scss',\n  shadow: true,\n})\nexport class SddsBlock {\n  /** Mode variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HostElement;\n\n  children: Array<HTMLSddsBlockElement>;\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children).filter(\n      (item) => item.tagName === 'SDDS-BLOCK',\n    ) as HTMLSddsBlockElement[];\n    this.children.forEach((item) => {\n      if (!this.modeVariant) {\n        item.setAttribute('mode-variant', 'secondary');\n      } else {\n        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <div\n        class={`sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -4,3 +4,5 @@ const SddsBodyCell = TableBodyCell;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsBodyCell, defineCustomElement };
+
+//# sourceMappingURL=sdds-body-cell.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-body-cell.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1,43 +1,47 @@
 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 sddsBreadcrumbItemCss = "@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.disabled{pointer-events:none}li.disabled a,li.current a,li [aria-current=page] a{cursor:default;color:var(--sdds-breadcrumb-color-disabled)}li.disabled:hover a,li.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}:host(.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.current = false;
+    this.href = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
+    this.disabled = false;
+  }
+  render() {
+    return (h("li", { class: `${this.current ? 'current' : ''} 
+        ${this.disabled ? 'disabled' : ''}` }, h("a", { href: !this.disabled ? this.href : null, target: this.target, rel: this.rel }, h("slot", null))));
+  }
+  static get style() { return sddsBreadcrumbItemCss; }
+}, [1, "sdds-breadcrumb-item", {
+    "current": [4],
+    "href": [1],
+    "target": [1],
+    "rel": [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 };
+
+//# sourceMappingURL=sdds-breadcrumb-item.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-breadcrumb-item.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,ysBAAysB;;MCO1tBA,oBAAkB;;;;;mBAEF,KAAK;;kBAM0B,OAAO;eAG3C,UAAU;oBAGJ,KAAK;;EAEjC,MAAM;IACJ,QACE,UACE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE;UACrC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAEnC,SAAG,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAC5E,eAAa,CACX,CACD,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsBreadcrumbItem"],"sources":["./src/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.scss?tag=sdds-breadcrumb-item&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n\nli {\n  display: flex;\n  align-items: center;\n  color: var(--sdds-breadcrumb-color);\n\n  a {\n    color: var(--sdds-breadcrumb-color);\n    text-decoration: none;\n  }\n\n  &:hover {\n    a {\n      color: var(--sdds-breadcrumb-color-hover);\n      text-decoration: underline;\n    }\n\n    cursor: pointer;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  &.disabled,\n  &.current,\n  [aria-current='page'] {\n    a {\n      cursor: default;\n      color: var(--sdds-breadcrumb-color-disabled);\n    }\n\n    &:hover {\n      a {\n        color: var(--sdds-breadcrumb-color-disabled);\n        text-decoration: none;\n      }\n    }\n  }\n\n  a::after {\n    content: '\\203A';\n    color: var(--sdds-breadcrumb-separator-color);\n    margin-right: 4px;\n    margin-left: 4px;\n    display: inline-block;\n    width: 4px;\n    height: 8px;\n  }\n}\n\n:host(.last) {\n  a::after {\n    display: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-item',\n  styleUrl: 'sdds-breadcrumb-item.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbItem {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <li\n        class={`${this.current ? 'current' : ''} \n        ${this.disabled ? 'disabled' : ''}`}\n      >\n        <a href={!this.disabled ? this.href : null} target={this.target} rel={this.rel}>\n          <slot></slot>\n        </a>\n      </li>\n    );\n  }\n}\n"],"version":3}