@scania/tegel 1.47.2 → 1.48.0-beta.0-tabbing-test

package/dist/esm/tds-navigation-tabs.entry.js

@@ -1,17 +1,28 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
 
-const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:\"\";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
-const TdsNavigationTabsStyle0 = navigationTabsCss;
+const navigationTabsCss = () => `:host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:" ";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:"";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}`;
 
 const TdsNavigationTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.tdsChange = createEvent(this, "tdsChange", 7);
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = 'primary';
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Custom left padding value for the wrapper element. */
+        this.leftPadding = 32;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
-        this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-        this.children = [];
+        this.scrollableWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.tabElements = [];
         this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
@@ -26,7 +37,7 @@ const TdsNavigationTabs = class {
                     });
                     this.componentWidth = componentWidth;
                     this.buttonsWidth = buttonsWidth;
-                    this.scrollWidth = buttonsWidth - componentWidth;
+                    this.scrollableWidth = buttonsWidth - componentWidth;
                     this.updateScrollButtons();
                 });
             });
@@ -34,15 +45,15 @@ const TdsNavigationTabs = class {
                 resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
-            this.children = Array.from(this.host.children);
-            this.children.map((item, index) => {
+            this.tabElements = Array.from(this.host.children);
+            this.tabElements.map((item, index) => {
                 const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
-                            selectedTabIndex: this.children.indexOf(item),
+                            selectedTabIndex: this.tabElements.indexOf(item),
                         });
                         if (!tdsChangeEvent.defaultPrevented) {
-                            this.children.forEach((element) => element.setSelected(false));
+                            this.tabElements.forEach((element) => element.setSelected(false));
                             item.setSelected(true);
                             this.selectedIndex = index;
                         }
@@ -54,7 +65,7 @@ const TdsNavigationTabs = class {
             });
         };
         this.removeEventListenerFromTabs = () => {
-            this.children.forEach((item) => {
+            this.tabElements.forEach((item) => {
                 const clickHandler = this.clickHandlers.get(item);
                 if (clickHandler) {
                     item.removeEventListener('click', clickHandler);
@@ -62,20 +73,12 @@ const TdsNavigationTabs = class {
                 }
             });
         };
-        this.modeVariant = 'primary';
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.leftPadding = 32;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
-        if (!this.children[tabIndex].disabled) {
-            this.children.forEach((element) => element.setSelected(false));
-            this.children = this.children.map((element, index) => {
+        if (!this.tabElements[tabIndex].disabled) {
+            this.tabElements.forEach((element) => element.setSelected(false));
+            this.tabElements = this.tabElements.map((element, index) => {
                 if (index === tabIndex) {
                     element.setSelected(true);
                     this.selectedIndex = tabIndex;
@@ -92,12 +95,12 @@ const TdsNavigationTabs = class {
         this.handleSlotChange();
     }
     handleSelectedIndexUpdate() {
-        this.children = Array.from(this.host.children).map((tabElement) => {
+        this.tabElements = Array.from(this.host.children).map((tabElement) => {
             tabElement.setSelected(false);
             return tabElement;
         });
         if (this.selectedIndex) {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
     }
     scrollRight() {
@@ -118,29 +121,29 @@ const TdsNavigationTabs = class {
         if (!this.navWrapperElement)
             return;
         const scroll = this.navWrapperElement.scrollLeft;
-        this.showRightScroll = scroll <= this.scrollWidth;
+        this.showRightScroll = scroll <= this.scrollableWidth;
         this.showLeftScroll = scroll > 0;
     }
     initializeTabs() {
-        this.children = Array.from(this.host.children);
+        this.tabElements = Array.from(this.host.children);
         // remove first and last class from other tabs in case of initialization
-        this.children.forEach((child) => {
+        this.tabElements.forEach((child) => {
             child.classList.remove('last');
             child.classList.remove('first');
         });
-        if (this.children.length > 0) {
-            this.children[0].classList.add('first');
-            this.children[this.children.length - 1].classList.add('last');
+        if (this.tabElements.length > 0) {
+            this.tabElements[0].classList.add('first');
+            this.tabElements[this.tabElements.length - 1].classList.add('last');
         }
     }
     initializeSelectedTab() {
         if (this.selectedIndex === undefined) {
             this.addEventListenerToTabs();
-            this.children[this.defaultSelectedIndex].setSelected(true);
+            this.tabElements[this.defaultSelectedIndex].setSelected(true);
             this.selectedIndex = this.defaultSelectedIndex;
         }
         else {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
         this.tdsChange.emit({
             selectedTabIndex: this.selectedIndex,
@@ -182,21 +185,23 @@ const TdsNavigationTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'c7888b2f78e9aeb8fb6ca1041787785fe7d7c840', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '177a79f69514e597d2795b4d60f335b485195eb0', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'e3316e0e255d099ade1d3c096aec574460a091ce', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'de4f1f02e1301dc8dd55e9e7bd00f5e263f2f178', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '7455ad87dc61ba3c4fa28aa4e9462e9fe91dbcca', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '4b869b3219e71d592fc3e9a105c156a4d2a50fe5', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'f4b9a3b4d0eeed6c6b9035a9a33f9868fbb93bab', name: "chevron_left", size: "20px" })), h("slot", { key: '9757ef20e30a223f4dec3bf5a41da912821a46de', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '215c0a386b22f44bb891c4685c4f5b3b991982c8', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '049b1955d802b0a205458ddaf4f60a8c28b06505', name: "chevron_left", size: "20px" })), h("slot", { key: 'b7d2dae87716e20be521efa3b8039e7aa42ee38e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '0a1e9b4a10573767805dfc3eb6b6dedfcda147b5', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '21782c8e407746676988fb00324e10ba94379b78', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '8c5e57193b2170bb7d14f39772e74a52e6bab616', name: "chevron_right", size: "20px" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "selectedIndex": ["handleSelectedIndexUpdate"]
+        "selectedIndex": [{
+                "handleSelectedIndexUpdate": 0
+            }]
     }; }
 };
-TdsNavigationTabs.style = TdsNavigationTabsStyle0;
+TdsNavigationTabs.style = navigationTabsCss();
 
 export { TdsNavigationTabs as tds_navigation_tabs };

package/dist/esm/tds-popover-canvas.entry.js

@@ -1,25 +1,33 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { i as inheritAttributes } from './inheritAttributes-d21e267b.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { i as inheritAttributes } from './inheritAttributes-CF8bH08v.js';
 
-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:var(--tds-popover-canvas-box-shadow);border-radius:4px;z-index:900}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
-const TdsPopoverCanvasStyle0 = popoverCanvasCss;
+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:var(--tds-popover-canvas-box-shadow);border-radius:4px;z-index:900}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}`;
 
 const TdsPopoverCanvas = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inheritedAttributes = {};
-        this.selector = undefined;
-        this.referenceEl = undefined;
+        /** Decides if the component should be visible from the start. */
         this.defaultShow = false;
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
         this.show = null;
+        /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */
         this.placement = 'auto';
+        /** Sets the offset skidding */
         this.offsetSkidding = 0;
+        /** Whether the popover should animate when being opened/closed or not */
         this.animation = 'none';
+        /** Sets the offset distance */
         this.offsetDistance = 8;
+        /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
         this.modifiers = [];
+        /** Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
         this.tdsAlertDialog = 'dialog';
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
-        this.childRef = undefined;
+        this.inheritedAttributes = {};
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -31,17 +39,17 @@ const TdsPopoverCanvas = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '3a0b77989875719936176b458b661398e587f818', class: {
+        return (h(Host, { key: 'bfb257ceb06542d098e99b0dfc9731cd1344e16a', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", Object.assign({ key: '13299274cbac5380a1e30da56c4e60ec4054c7ae', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
+            } }, h("tds-popover-core", Object.assign({ key: 'bf161b638a686164add64c0bd070dabf757fed71', role: this.tdsAlertDialog }, 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', ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '6bfb89642f8d1c2b567623e31b65645e9f3010a1' }, h("slot", { key: 'ec3fd10e79ff3707253bcf931415e212445752a5' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: 'f17d2dec71560e238b2acad5f4c6a92465b11bf1' }, h("slot", { key: 'c0765112fc2c1641da274f00ee70cea25bc19c80' })))));
     }
     get host() { return getElement(this); }
 };
-TdsPopoverCanvas.style = TdsPopoverCanvasStyle0;
+TdsPopoverCanvas.style = popoverCanvasCss();
 
 export { TdsPopoverCanvas as tds_popover_canvas };

package/dist/esm/tds-popover-core.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -144,7 +144,7 @@ function effect$2(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const applyStyles$1 = {
+var applyStyles$1 = {
   name: 'applyStyles',
   enabled: true,
   phase: 'write',
@@ -459,7 +459,7 @@ function effect$1(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const arrow$1 = {
+var arrow$1 = {
   name: 'arrow',
   enabled: true,
   phase: 'main',
@@ -626,7 +626,7 @@ function computeStyles(_ref5) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const computeStyles$1 = {
+var computeStyles$1 = {
   name: 'computeStyles',
   enabled: true,
   phase: 'beforeWrite',
@@ -673,7 +673,7 @@ function effect(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const eventListeners = {
+var eventListeners = {
   name: 'eventListeners',
   enabled: true,
   phase: 'write',
@@ -983,7 +983,6 @@ function detectOverflow(state, options) {
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
     element: popperRect,
-    strategy: 'absolute',
     placement: placement
   });
   var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
@@ -1179,7 +1178,7 @@ function flip(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const flip$1 = {
+var flip$1 = {
   name: 'flip',
   enabled: true,
   phase: 'main',
@@ -1241,7 +1240,7 @@ function hide(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const hide$1 = {
+var hide$1 = {
   name: 'hide',
   enabled: true,
   phase: 'main',
@@ -1293,7 +1292,7 @@ function offset(_ref2) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const offset$1 = {
+var offset$1 = {
   name: 'offset',
   enabled: true,
   phase: 'main',
@@ -1311,13 +1310,12 @@ function popperOffsets(_ref) {
   state.modifiersData[name] = computeOffsets({
     reference: state.rects.reference,
     element: state.rects.popper,
-    strategy: 'absolute',
     placement: state.placement
   });
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const popperOffsets$1 = {
+var popperOffsets$1 = {
   name: 'popperOffsets',
   enabled: true,
   phase: 'read',
@@ -1452,7 +1450,7 @@ function preventOverflow(_ref) {
 } // eslint-disable-next-line import/no-unused-modules
 
 
-const preventOverflow$1 = {
+var preventOverflow$1 = {
   name: 'preventOverflow',
   enabled: true,
   phase: 'main',
@@ -1815,14 +1813,41 @@ const generateClassList = (classes) => {
         .join(' ');
 };
 
-const tdsPopoverCoreCss = ".sc-tds-popover-core-h{pointer-events:none;display:block}.tds-animation-enter-fade.sc-tds-popover-core-h{animation:tds-fade-in var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter) forwards}.tds-animation-exit-fade.sc-tds-popover-core-h{animation:tds-fade-out var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit) forwards}.is-shown.sc-tds-popover-core-h{opacity:1;pointer-events:auto;visibility:visible}.is-hidden.sc-tds-popover-core-h{opacity:0;pointer-events:none;visibility:hidden}.initially-hidden.sc-tds-popover-core-h{opacity:0;pointer-events:none;visibility:hidden}";
-const TdsPopoverCoreStyle0 = tdsPopoverCoreCss;
+const tdsPopoverCoreCss = () => `.sc-tds-popover-core-h{pointer-events:none;display:block}.tds-animation-enter-fade.sc-tds-popover-core-h{animation:tds-fade-in var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter) forwards}.tds-animation-exit-fade.sc-tds-popover-core-h{animation:tds-fade-out var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit) forwards}.is-shown.sc-tds-popover-core-h{opacity:1;pointer-events:auto;visibility:visible}.is-hidden.sc-tds-popover-core-h{opacity:0;pointer-events:none;visibility:hidden}.initially-hidden.sc-tds-popover-core-h{opacity:0;pointer-events:none;visibility:hidden}`;
 
 const TdsPopoverCore = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.internalTdsShow = createEvent(this, "internalTdsShow", 4);
         this.internalTdsClose = createEvent(this, "internalTdsClose", 0);
+        /** Decides if the component should be visible from the start. */
+        this.defaultShow = false;
+        /** Whether the popover should animate when being opened/closed or not */
+        this.animation = 'none';
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
+        this.show = null;
+        /** Decides the placement of the Popover Menu */
+        this.placement = 'auto';
+        /** Sets the offset skidding */
+        this.offsetSkidding = 0;
+        /** Sets the offset distance */
+        this.offsetDistance = 8;
+        /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
+        this.modifiers = [];
+        /** What triggers the popover to show */
+        this.trigger = 'click';
+        /** Decides if the popover should hide automatically.
+         * Alternatevly it can be hidden externally based on emitted events. */
+        this.autoHide = true;
+        this.renderedShowValue = false;
+        this.popperInstance = null;
+        this.isShown = false;
+        this.disableLogic = false;
+        this.hasShownAtLeastOnce = false;
+        this.openedByKeyboard = false;
         this.uuid = generateUniqueId();
         this.setIsShown = (isShown) => {
             if (typeof isShown === 'function') {
@@ -1859,24 +1884,6 @@ const TdsPopoverCore = class {
             event.stopPropagation();
             this.setIsShown(false);
         };
-        this.selector = undefined;
-        this.referenceEl = undefined;
-        this.defaultShow = false;
-        this.animation = 'none';
-        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 = null;
-        this.target = undefined;
-        this.isShown = false;
-        this.disableLogic = false;
-        this.hasShownAtLeastOnce = false;
-        this.openedByKeyboard = false;
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -2045,16 +2052,24 @@ const TdsPopoverCore = class {
             'tds-animation-exit-fade': !this.isShown && this.animation === 'fade',
         };
         const classList = generateClassList(classes);
-        return (h(Host, { key: 'b00f6068cba1931082dc1b11397902b17bbbc598', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '397a6cb4a557f79528f4387b141f8883dbc1c24c' })));
+        return (h(Host, { key: '4601352e7842d3078f0d05eaaffa8522433d3e49', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '1bf22ce9f90ef01350c2ffd7c39d94355afdbdf7' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "show": ["onShowChange"],
-        "referenceEl": ["onReferenceElChanged"],
-        "trigger": ["onTriggerChanged"],
-        "isShown": ["onIsShownChange"]
+        "show": [{
+                "onShowChange": 0
+            }],
+        "referenceEl": [{
+                "onReferenceElChanged": 0
+            }],
+        "trigger": [{
+                "onTriggerChanged": 0
+            }],
+        "isShown": [{
+                "onIsShownChange": 0
+            }]
     }; }
 };
-TdsPopoverCore.style = TdsPopoverCoreStyle0;
+TdsPopoverCore.style = tdsPopoverCoreCss();
 
 export { TdsPopoverCore as tds_popover_core };

package/dist/esm/tds-popover-menu-item.entry.js

@@ -1,20 +1,20 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host } from './index-9xxNGlso.js';
 
-const popoverMenuItemCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host .wrapper{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-popover-menu-color);position:relative;width:100%;display:flex;align-items:center;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy)}:host .wrapper:hover{cursor:pointer;background-color:var(--tds-popover-menu-background-hover)}:host .wrapper.disabled{cursor:not-allowed;color:var(--tds-popover-menu-divider-disabled-color)}:host .wrapper.disabled:hover{background-color:inherit}:host .wrapper.disabled ::slotted(tds-icon){color:var(--tds-popover-menu-divider-disabled-icon-color)}:host .wrapper.disabled ::slotted(*){pointer-events:none}:host ::slotted(*:not(tds-icon)){all:unset;width:100%;display:inline-flex;display:flex;align-items:center;gap:10px;padding:10px 16px}:host ::slotted(*:focus-visible)::before{z-index:-1;content:\"\";display:block;position:absolute;width:calc(100% - 4px);height:100%;top:0;left:2px;outline:1px solid var(--tds-blue-400);outline-offset:1px}";
-const TdsPopoverMenuItemStyle0 = popoverMenuItemCss;
+const popoverMenuItemCss = () => `:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host .wrapper{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-popover-menu-color);position:relative;width:100%;display:flex;align-items:center;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy)}:host .wrapper:hover{cursor:pointer;background-color:var(--tds-popover-menu-background-hover)}:host .wrapper.disabled{cursor:not-allowed;color:var(--tds-popover-menu-divider-disabled-color)}:host .wrapper.disabled:hover{background-color:inherit}:host .wrapper.disabled ::slotted(tds-icon){color:var(--tds-popover-menu-divider-disabled-icon-color)}:host .wrapper.disabled ::slotted(*){pointer-events:none}:host ::slotted(*:not(tds-icon)){all:unset;width:100%;display:inline-flex;display:flex;align-items:center;gap:10px;padding:10px 16px}:host ::slotted(*:focus-visible)::before{z-index:-1;content:"";display:block;position:absolute;width:calc(100% - 4px);height:100%;top:0;left:2px;outline:1px solid var(--tds-blue-400);outline-offset:1px}`;
 
 const TdsPopoverMenuItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** Disables the Popover Menu Item */
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '189497fe898065e585b2bf342611716b7b44778b', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '5904e5da7c9f4cfe1a35df1b5b1549a8a4c501a9', class: {
+        return (h(Host, { key: '56aa3bb56a96cf1c9aee16e46dd70cc098b58645', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'c5eb4a125b0b9f52850369b821a3994824ccae48', class: {
                 wrapper: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: 'ddacc7938ca455a8151b2e46449414146073b045' }))));
+            } }, h("slot", { key: '2b76880fcd4ad145f4ae9df40fea79da3b2a7b92' }))));
     }
 };
-TdsPopoverMenuItem.style = TdsPopoverMenuItemStyle0;
+TdsPopoverMenuItem.style = popoverMenuItemCss();
 
 export { TdsPopoverMenuItem as tds_popover_menu_item };

package/dist/esm/tds-popover-menu.entry.js

@@ -1,24 +1,31 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { i as inheritAttributes } from './inheritAttributes-d21e267b.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { i as inheritAttributes } from './inheritAttributes-CF8bH08v.js';
 
-const popoverMenuCss = ".tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px 6px;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:900}.tds-popover-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}tds-popover-core.sc-tds-popover-menu{padding:6px 0 !important}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}";
-const TdsPopoverMenuStyle0 = popoverMenuCss;
+const popoverMenuCss = () => `.tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px 6px;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:900}.tds-popover-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}tds-popover-core.sc-tds-popover-menu{padding:6px 0 !important}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}`;
 
 const TdsPopoverMenu = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inheritedAttributes = {};
-        this.selector = undefined;
-        this.referenceEl = undefined;
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
         this.show = null;
+        /** Decides if the component should be visible from the start. */
         this.defaultShow = false;
+        /** Decides the placement of the Popover Menu */
         this.placement = 'auto';
+        /** Whether the popover should animate when being opened/closed or not */
         this.animation = 'none';
+        /** Sets the offset skidding */
         this.offsetSkidding = 0;
+        /** Sets the offset distance */
         this.offsetDistance = 8;
+        /** If true this unsets the width (160px) of the Popover Menu */
         this.fluidWidth = false;
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
-        this.childRef = undefined;
+        this.inheritedAttributes = {};
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -30,18 +37,18 @@ const TdsPopoverMenu = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9475e802c247f2be782246ed4060d1df78cb9ca6', class: {
+        return (h(Host, { key: '71739ba366e850b1039f68955c47f09c699e3bf3', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", { key: 'f124ad67796e05654a4b1af634877e372a0b69e7', class: {
+            } }, h("tds-popover-core", { key: 'aeb5f41697c2652d0ce4cb3c01b894f4f33fb0fc', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'f97c6bd562a011be0595fa0189dd1209e6f80bca', role: "menu" }, h("slot", { key: '8d7ddcf67d2adc1d928384779a01eed8adf61e41' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '921f8b9216610f770d0cc06db9af160db5e0e60e', role: "menu" }, h("slot", { key: 'c90403fed03325fde646c822b1a29de321035899' })))));
     }
     get host() { return getElement(this); }
 };
-TdsPopoverMenu.style = TdsPopoverMenuStyle0;
+TdsPopoverMenu.style = popoverMenuCss();
 
 export { TdsPopoverMenu as tds_popover_menu };

package/dist/esm/tds-radio-button.entry.js

@@ -1,27 +1,26 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-9xxNGlso.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
 
-const radioButtonCss = ".tds-radio-button.sc-tds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-radio-button-color)}.tds-radio-button.sc-tds-radio-button *.sc-tds-radio-button{box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button+label.sc-tds-radio-button{padding:var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);cursor:pointer}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{content:\"\";position:absolute;border-radius:50%;box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before{width:22px;height:22px;left:1px;top:1px}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{border:1px solid var(--tds-radio-button-interaction-01);background-color:var(--tds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:hover::before{background-color:var(--tds-radio-button-background-hover)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus-visible::before{background-color:var(--tds-radio-button-background-focus);animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus-visible::after{outline:1px solid var(--tds-radio-button-interaction-outline)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button{cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button::after{border-color:var(--tds-radio-button-border-color-disabled-after);background-color:var(--tds-radio-button-interaction-02)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled+label.sc-tds-radio-button,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button+label.sc-tds-radio-button{color:var(--tds-radio-button-disabled);cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button:hover::before{display:none;opacity:1}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked::after{border:4px solid var(--tds-radio-button-interaction-01)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--tds-radio-button-color-disabled-before);box-sizing:content-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::after{border:4px solid var(--tds-radio-button-interaction-02);background-color:var(--tds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1)}}";
-const TdsRadioButtonStyle0 = radioButtonCss;
+const radioButtonCss = () => `.tds-radio-button.sc-tds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-radio-button-color)}.tds-radio-button.sc-tds-radio-button *.sc-tds-radio-button{box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button{appearance:none;outline:none;margin:0;border:0;width:20px;height:24px;border-radius:50%;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button+label.sc-tds-radio-button{padding:var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) 6px;cursor:pointer}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{content:"";position:absolute;border-radius:50%;box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before{width:20px;height:20px;top:2px}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{border:1px solid var(--tds-radio-button-interaction-01);background-color:var(--tds-radio-button-interaction-02);width:16px;height:16px;left:50%;top:50%;transform:translate(-50%, -50%)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:hover::before{background-color:var(--tds-radio-button-background-hover)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus-visible::before{background-color:var(--tds-radio-button-background-focus);box-shadow:0 0 0 1px var(--tds-radio-button-background-focus);animation:rb-focus var(--tds-motion-duration-moderate-02) var(--tds-motion-easing-enter) forwards}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus-visible::after{outline:1px solid var(--tds-radio-button-interaction-outline)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button{cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button::after{border-color:var(--tds-radio-button-border-color-disabled-after);background-color:var(--tds-radio-button-interaction-02)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled+label.sc-tds-radio-button,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button+label.sc-tds-radio-button{color:var(--tds-radio-button-disabled);cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button:hover::before{display:none;opacity:1}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked::after{border:4px solid var(--tds-radio-button-interaction-01)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::before{display:block;background-color:transparent;width:16px;height:16px;left:2px;top:4px;box-shadow:inset 0 0 0 1px var(--tds-radio-button-border-color-disabled-after)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::after{border:4px solid var(--tds-radio-button-interaction-02);background-color:var(--tds-radio-button-color-disabled-after);clip-path:inset(1px 1px round 50%)}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1)}}`;
 
 const TdsRadioButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.tdsChange = createEvent(this, "tdsChange", 6);
+        /** Unique Radio Button identifier. */
+        this.radioId = generateUniqueId();
+        /** Decides if the Radio Button is checked or not. */
+        this.checked = false;
+        /** Decides if the Radio Button is required or not. */
+        this.required = false;
+        /** Decides if the Radio Button is disabled or not. */
+        this.disabled = false;
         this.handleChange = () => {
             this.tdsChange.emit({
                 radioId: this.radioId,
                 value: this.value,
             });
         };
-        this.name = undefined;
-        this.value = undefined;
-        this.radioId = generateUniqueId();
-        this.checked = false;
-        this.required = false;
-        this.disabled = false;
-        this.tdsAriaLabel = undefined;
-        this.tdsTabIndex = undefined;
     }
     /** Method to programmatically focus the radio button element */
     async focusElement() {
@@ -30,13 +29,13 @@ const TdsRadioButton = class {
         }
     }
     render() {
-        return (h("div", { key: '6a4ff569b492e4d5bbdccb0f9bd6b82a8186673e', class: "tds-radio-button" }, h("input", { key: '0681a3f58da48700d7134a5b4db923445fcc57cf', ref: (inputEl) => {
+        return (h("div", { key: 'fb96d651d7161e4e0d4a0ffaab031b0b762ceb90', class: "tds-radio-button" }, h("input", { key: '822234a89727d84cbb00822bb53fdba1b9fec8d4', ref: (inputEl) => {
                 if (inputEl)
                     this.inputElement = inputEl;
-            }, "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '0b5ca6d7a54706ed0c7878b51380683da34301f7', htmlFor: this.radioId }, h("slot", { key: '68d0582c534588d209f1223191a9cc8781117a15', name: "label" }))));
+            }, "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: 'c08a19a007fbf87fd0b585341c4c914b72a91671', htmlFor: this.radioId }, h("slot", { key: '3e977aab78c651769ba51f458a2e785aeb638508', name: "label" }))));
     }
     get host() { return getElement(this); }
 };
-TdsRadioButton.style = TdsRadioButtonStyle0;
+TdsRadioButton.style = radioButtonCss();
 
 export { TdsRadioButton as tds_radio_button };