@scania/tegel 0.0.9 → 0.0.11

package/dist/components/checkbox.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './utils.js';
 
 const checkboxCss = ".tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
 
@@ -18,7 +19,7 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
       });
     };
     this.name = undefined;
-    this.checkboxId = crypto.randomUUID();
+    this.checkboxId = generateUniqueId();
     this.disabled = false;
     this.required = false;
     this.checked = false;

package/dist/components/header-dropdown-list-item.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([type=lg]){height:var(--tds-header-height)}:host([type=lg]) ::slotted(a),:host([type=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
+const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
 
 const TdsHeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownListItem extends HTMLElement {
   constructor() {
@@ -8,7 +8,7 @@ const TdsHeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class TdsHead
     this.__registerHost();
     this.__attachShadow();
     this.selected = false;
-    this.type = 'md';
+    this.size = 'md';
   }
   render() {
     return (h(Host, null, h("div", { class: {
@@ -20,7 +20,7 @@ const TdsHeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class TdsHead
   static get style() { return headerDropdownListItemCss; }
 }, [1, "tds-header-dropdown-list-item", {
     "selected": [4],
-    "type": [513]
+    "size": [513]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/header-dropdown-list.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getPreviousNestedChildOfSiblingsMatching, h as isHeadingElement } from './utils.js';
+import { j as getPreviousNestedChildOfSiblingsMatching, k as isHeadingElement } from './utils.js';
 
-const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([type=lg]){width:320px}";
+const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:unset;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([size=lg]){width:320px}";
 
 const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownList extends HTMLElement {
   constructor() {
@@ -10,16 +10,16 @@ const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDr
     this.__attachShadow();
     // A Map to store the slots and their associated slotchange listeners.
     this.slotListeners = new Map();
-    this.type = 'md';
+    this.size = 'md';
     this.headingElement = undefined;
   }
   componentWillLoad() {
     const { children } = this.host;
-    // Set the type prop for each child, if they have such a property
+    // Set the size prop for each child, if they have such a property
     for (let i = 0; i < children.length; i++) {
       const child = children[i];
-      if ('type' in child) {
-        child.type = this.type;
+      if ('size' in child) {
+        child.size = this.size;
       }
     }
     let listRoot = this.host;
@@ -79,7 +79,7 @@ const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDr
   get host() { return this; }
   static get style() { return headerDropdownListCss; }
 }, [1, "tds-header-dropdown-list", {
-    "type": [513],
+    "size": [513],
     "headingElement": [32]
   }]);
 function defineCustomElement() {

package/dist/components/header-item.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { e as dfs } from './utils.js';
+import { d as dfs } from './utils.js';
 import { d as defineCustomElement$1 } from './core-header-item.js';
 
 const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";

package/dist/components/popover-canvas.js

@@ -1,33 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createPopper } from './popper.js';
+import { e as inheritAttributes } from './utils.js';
+import { d as defineCustomElement$1 } from './popover-core.js';
 
-const popoverCanvasCss = ":host{box-sizing:border-box;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.tds-popover-canvas-show){display:block}";
+const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
 
 const TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
-    this.initialize = (referenceEl) => {
-      this.popperInstance = createPopper(referenceEl, this.host, {
-        placement: this.placement,
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [this.offsetSkidding, this.offsetDistance],
-            },
-          },
-          ...this.modifiers,
-        ],
-      });
-      if (this.show === null) {
-        referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
-          this.isShown = !this.isShown;
-        });
-      }
-    };
+    this.inheritedAttributes = [];
     this.selector = '';
     this.referenceEl = undefined;
     this.show = null;
@@ -35,94 +16,44 @@ const TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
     this.modifiers = [];
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
-    this.isShown = false;
-  }
-  onShowChange(newValue) {
-    this.isShown = newValue;
-  }
-  onReferenceElChange(newValue, oldValue) {
-    var _a;
-    if (newValue !== oldValue) {
-      (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-      if (newValue) {
-        this.initialize(newValue);
-      }
-    }
-  }
-  onAnyClick(event) {
-    if (this.isShown && this.show === null) {
-      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
-      const isClickOutside = !event.composedPath().includes(this.host);
-      if (isClickOutside) {
-        this.isShown = false;
-      }
-    }
-  }
-  connectedCallback() {
-    if (this.show !== null) {
-      this.isShown = this.show;
-    }
-  }
-  componentDidLoad() {
-    var _a;
-    if (this.selector || this.referenceEl) {
-      const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-      if (referenceEl) {
-        this.initialize(referenceEl);
-      }
-      else {
-        console.error(`Could not initialize popover-canvas: element with selector '${this.selector}' not found.`);
-      }
-    }
   }
-  componentDidRender() {
-    if (this.isShown && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
-    }
-    this.renderedShowValue = this.isShown;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
   }
   render() {
-    return (h(Host, { class: `tds-popover-canvas ${this.isShown ? 'tds-popover-canvas-show' : ''}` }, h("slot", null)));
+    var _a;
+    return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+        'tds-popover-canvas': true,
+        [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+      }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click' }), h("div", null, h("slot", null)))));
   }
   get host() { return this; }
-  static get watchers() { return {
-    "show": ["onShowChange"],
-    "referenceEl": ["onReferenceElChange"]
-  }; }
   static get style() { return popoverCanvasCss; }
-}, [1, "tds-popover-canvas", {
+}, [6, "tds-popover-canvas", {
     "selector": [1],
     "referenceEl": [16],
     "show": [4],
     "placement": [1],
     "offsetSkidding": [2, "offset-skidding"],
     "offsetDistance": [2, "offset-distance"],
-    "modifiers": [16],
-    "renderedShowValue": [32],
-    "popperInstance": [32],
-    "target": [32],
-    "isShown": [32]
-  }, [[8, "click", "onAnyClick"]]]);
+    "modifiers": [16]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tds-popover-canvas"];
+  const components = ["tds-popover-canvas", "tds-popover-core"];
   components.forEach(tagName => { switch (tagName) {
     case "tds-popover-canvas":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TdsPopoverCanvas);
       }
       break;
+    case "tds-popover-core":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
   } });
 }
 

package/dist/{esm/popper-bfa25c7f.js → components/popover-core.js}

@@ -1,3 +1,5 @@
+import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
+
 var top = 'top';
 var bottom = 'bottom';
 var right = 'right';
@@ -449,7 +451,6 @@ function effect$1(_ref2) {
   }
 
   if (!contains(state.elements.popper, arrowElement)) {
-
     return;
   }
 
@@ -591,7 +592,6 @@ function computeStyles(_ref5) {
       adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
       _options$roundOffsets = options.roundOffsets,
       roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
   var commonStyles = {
     placement: getBasePlacement(state.placement),
     variation: getVariation(state.placement),
@@ -1659,8 +1659,7 @@ function popperGenerator(generatorOptions) {
 
         state.orderedModifiers = orderedModifiers.filter(function (m) {
           return m.enabled;
-        }); // Validate the provided modifiers so that the consumer will get warned
-
+        });
         runModifierEffects();
         return instance.update();
       },
@@ -1680,7 +1679,6 @@ function popperGenerator(generatorOptions) {
         // anymore
 
         if (!areValidElements(reference, popper)) {
-
           return;
         } // Store the reference and popper rects to be read by modifiers
 
@@ -1705,7 +1703,6 @@ function popperGenerator(generatorOptions) {
         });
 
         for (var index = 0; index < state.orderedModifiers.length; index++) {
-
           if (state.reset === true) {
             state.reset = false;
             index = -1;
@@ -1743,7 +1740,6 @@ function popperGenerator(generatorOptions) {
     };
 
     if (!areValidElements(reference, popper)) {
-
       return instance;
     }
 
@@ -1758,11 +1754,11 @@ function popperGenerator(generatorOptions) {
     // one.
 
     function runModifierEffects() {
-      state.orderedModifiers.forEach(function (_ref3) {
-        var name = _ref3.name,
-            _ref3$options = _ref3.options,
-            options = _ref3$options === void 0 ? {} : _ref3$options,
-            effect = _ref3.effect;
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
 
         if (typeof effect === 'function') {
           var cleanupFn = effect({
@@ -1795,4 +1791,185 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-export { createPopper as c };
+const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tdsShow = createEvent(this, "internalTdsShow", 0);
+    this.tdsClose = createEvent(this, "internalTdsClose", 0);
+    this.setIsShown = function setIsShown(isShown) {
+      if (typeof isShown === 'function') {
+        this.isShown = isShown(this.isShown);
+      }
+      else {
+        this.isShown = isShown;
+      }
+      if (this.isShown) {
+        this.tdsShow.emit();
+      }
+      else {
+        this.tdsClose.emit();
+      }
+    }.bind(this);
+    this.onClickTarget = function onClickTarget(event) {
+      event.stopPropagation();
+      this.setIsShown((isShown) => !isShown);
+    }.bind(this);
+    this.handleShow = function handleShow(event) {
+      event.stopPropagation();
+      this.setIsShown(true);
+    }.bind(this);
+    this.handleHide = function handleShow(event) {
+      event.stopPropagation();
+      this.setIsShown(false);
+    }.bind(this);
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = null;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.modifiers = [];
+    this.trigger = 'click';
+    this.autoHide = true;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+    this.isShown = false;
+  }
+  onAnyClick(event) {
+    if (this.trigger === 'click' && this.isShown && this.show === null) {
+      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+      const isClickOutside = !event.composedPath().includes(this.host);
+      if (isClickOutside) {
+        this.setIsShown(false);
+      }
+    }
+  }
+  onShowChange(newValue) {
+    this.setIsShown(newValue);
+  }
+  onReferenceElChanged(newValue, oldValue) {
+    if (newValue !== oldValue)
+      this.initialize({ referenceEl: newValue, trigger: this.trigger });
+  }
+  onTriggerChanged(newValue) {
+    this.initialize({
+      referenceEl: this.referenceEl,
+      trigger: newValue,
+    });
+  }
+  initialize({ referenceEl, trigger, }) {
+    this.cleanUp();
+    if (typeof referenceEl !== 'undefined') {
+      this.target = referenceEl;
+    }
+    else {
+      this.target = this.selector ? document.querySelector(this.selector) : null;
+    }
+    this.popperInstance = this.target
+      ? createPopper(this.target, this.host, {
+        strategy: 'fixed',
+        placement: this.placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [this.offsetSkidding, this.offsetDistance],
+            },
+          },
+          ...this.modifiers,
+        ],
+      })
+      : null;
+    if (!this.popperInstance) {
+      console.error(`Could not initialize: reference element not found.`);
+    }
+    if (trigger === 'click' && this.show === null) {
+      this.target.addEventListener('click', this.onClickTarget);
+    }
+    if (trigger === 'hover' || trigger === 'hover-popover') {
+      // For tabbing over element
+      this.target.addEventListener('focusin', this.handleShow);
+      this.target.addEventListener('focusout', this.handleHide);
+      // For hovering over element with selector
+      this.target.addEventListener('mouseenter', this.handleShow);
+      this.target.addEventListener('mouseleave', this.handleHide);
+      // For hovering over Popover itself
+      if (trigger === 'hover-popover') {
+        this.host.addEventListener('mouseenter', this.handleShow);
+        this.host.addEventListener('mouseleave', this.handleHide);
+      }
+    }
+  }
+  cleanUp() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.onClickTarget);
+    (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusin', this.handleShow);
+    (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusout', this.handleHide);
+    (_d = this.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.handleShow);
+    (_e = this.target) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.handleHide);
+    (_f = this.host) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseenter', this.handleShow);
+    (_g = this.host) === null || _g === void 0 ? void 0 : _g.removeEventListener('mouseleave', this.handleHide);
+    (_h = this.popperInstance) === null || _h === void 0 ? void 0 : _h.destroy();
+  }
+  componentDidLoad() {
+    this.initialize({
+      referenceEl: this.referenceEl,
+      trigger: this.trigger,
+    });
+  }
+  componentDidRender() {
+    if (this.isShown && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.isShown;
+  }
+  disconnectedCallback() {
+    this.cleanUp();
+  }
+  render() {
+    let hostStyle = {};
+    if (this.autoHide) {
+      hostStyle = { display: this.isShown ? 'block' : 'none' };
+    }
+    return (h(Host, { style: hostStyle }, h("slot", null)));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "show": ["onShowChange"],
+    "referenceEl": ["onReferenceElChanged"],
+    "trigger": ["onTriggerChanged"]
+  }; }
+}, [6, "tds-popover-core", {
+    "selector": [1],
+    "referenceEl": [16],
+    "show": [4],
+    "placement": [1],
+    "offsetSkidding": [2, "offset-skidding"],
+    "offsetDistance": [2, "offset-distance"],
+    "modifiers": [16],
+    "trigger": [1],
+    "autoHide": [4, "auto-hide"],
+    "renderedShowValue": [32],
+    "popperInstance": [32],
+    "target": [32],
+    "isShown": [32]
+  }, [[8, "click", "onAnyClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-popover-core"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-popover-core":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsPopoverCore);
+      }
+      break;
+  } });
+}
+
+export { TdsPopoverCore as T, defineCustomElement as d };

package/dist/components/side-menu-item.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { e as dfs } from './utils.js';
+import { d as dfs } from './utils.js';
 
 const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
 

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

@@ -29,7 +29,7 @@ const TdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordionIt
     return (h(Host, null, h("div", { class: `tds-accordion-item
         ${this.disabled ? 'disabled' : ''}
         ${this.expanded ? 'expanded' : ''}
-        ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { class: "tds-accordion-title" }, this.header, h("slot", { name: "accordion-item-header" })), h("div", { class: "tds-accordion-icon" }, h("tds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `tds-accordion-panel
+        ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { class: "tds-accordion-title" }, this.header, h("slot", { name: "header" })), h("div", { class: "tds-accordion-icon" }, h("tds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `tds-accordion-panel
             ${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
             ` }, h("slot", null)))));
   }

package/dist/components/tds-badge.js

@@ -28,9 +28,9 @@ const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends HTMLE
     }
     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.')
-        : '';
+      if (this.value !== '' && this.size !== 'sm') {
+        console.warn('The provided value is either empty or string, please provide value as number.');
+      }
     }
   }
   render() {
@@ -43,7 +43,7 @@ const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends HTMLE
   static get style() { return badgeCss; }
 }, [1, "tds-badge", {
     "value": [1],
-    "hidden": [4],
+    "hidden": [516],
     "size": [1],
     "shape": [32],
     "text": [32]

package/dist/components/tds-banner.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as generateUniqueId, h as hasSlot } from './utils.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const bannerCss = ":root,.tds-mode-light{--tds-link:var(--tds-blue-500);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-grey-900);--tds-link-disabled:var(--tds-grey-400)}.tds-mode-dark{--tds-link:var(--tds-blue-300);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-blue-100);--tds-link-disabled:var(--tds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .banner-content{color:var(--tds-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(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .banner-content slot[name=banner-subheader]{display:block;margin-top:4px;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .banner-content .banner-link slot[name=banner-link]{display:block;width:fit-content;margin-top:16px}:host .banner-content .banner-link.no-subheader slot[name=banner-link]{margin-top:4px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
+const bannerCss = ":root,.tds-mode-light{--tds-link:var(--tds-blue-500);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-grey-900);--tds-link-disabled:var(--tds-grey-400)}.tds-mode-dark{--tds-link:var(--tds-blue-300);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-blue-100);--tds-link-disabled:var(--tds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=bottom]::slotted(*){display:block;width:fit-content;margin-top:16px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
 
 const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends HTMLElement {
   constructor() {
@@ -28,34 +29,33 @@ const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends HTM
     };
     this.icon = undefined;
     this.header = undefined;
-    this.type = 'none';
-    this.bannerId = crypto.randomUUID();
+    this.subheader = undefined;
+    this.variant = 'none';
+    this.bannerId = generateUniqueId();
     this.persistent = false;
     this.hidden = false;
-    this.hasSubheader = undefined;
-    this.hasLink = undefined;
   }
   /** Hides the Banner. */
   async hideBanner() {
-    this.handleClose();
+    this.hidden = true;
   }
   /** Shows the Banner */
   async showBanner() {
-    this.handleShow();
+    this.hidden = false;
   }
   connectedCallback() {
-    if (this.type === 'error') {
+    if (this.variant === 'error') {
       this.icon = 'error';
     }
-    else if (this.type === 'information') {
+    else if (this.variant === 'information') {
       this.icon = 'info';
     }
-    const children = Array.from(this.host.children);
-    this.hasSubheader = children.some((childElement) => childElement.slot === 'banner-subheader');
-    this.hasLink = children.some((childElement) => childElement.slot === 'banner-link');
   }
   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("tds-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.hasSubheader && h("slot", { name: "banner-subheader" }), this.hasLink && (h("div", { class: `banner-link ${!this.hasSubheader ? 'no-subheader' : ''}` }, h("slot", { name: "banner-link" })))), !this.persistent && (h("div", { class: `banner-close` }, h("button", { onClick: () => {
+    const usesHeaderSlot = hasSlot('subheader', this.host);
+    const usesSubheaderSlot = hasSlot('subheader', this.host);
+    const usesBottomSlot = hasSlot('bottom', this.host);
+    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.variant} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.variant}` }, h("tds-icon", { name: this.icon, size: "20px" }))), h("div", { class: "content" }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesBottomSlot && h("slot", { name: "bottom" })), !this.persistent && (h("div", { class: `banner-close` }, h("button", { onClick: () => {
         this.handleClose();
       } }, h("tds-icon", { name: "cross", size: "20px" }))))));
   }
@@ -64,12 +64,11 @@ const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends HTM
 }, [1, "tds-banner", {
     "icon": [1],
     "header": [1],
-    "type": [1],
+    "subheader": [1],
+    "variant": [1],
     "bannerId": [1, "banner-id"],
     "persistent": [4],
-    "hidden": [4],
-    "hasSubheader": [32],
-    "hasLink": [32],
+    "hidden": [516],
     "hideBanner": [64],
     "showBanner": [64]
   }]);