@scania/tegel 1.3.3 → 1.5.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7dc8c41f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6e6ff771.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -1792,161 +1792,161 @@ var createPopper = /*#__PURE__*/popperGenerator({
 }); // eslint-disable-next-line import/no-unused-modules
 
 const TdsPopoverCore = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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);
-      }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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;
     }
-  }
-  /* To enable initial loading of a component if user controls show prop*/
-  componentWillLoad() {
-    this.setIsShown(this.show);
-  }
-  /* To observe any change of show prop after an initial load */
-  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;
+    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);
+            }
+        }
     }
-    else {
-      this.target = this.selector ? document.querySelector(this.selector) : null;
+    /* To enable initial loading of a component if user controls show prop*/
+    componentWillLoad() {
+        this.setIsShown(this.show);
     }
-    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.`);
+    /* To observe any change of show prop after an initial load */
+    onShowChange(newValue) {
+        this.setIsShown(newValue);
     }
-    if (trigger === 'click' && this.show === null) {
-      this.target.addEventListener('click', this.onClickTarget);
+    onReferenceElChanged(newValue, oldValue) {
+        if (newValue !== oldValue)
+            this.initialize({ referenceEl: newValue, trigger: this.trigger });
     }
-    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);
-      }
+    onTriggerChanged(newValue) {
+        this.initialize({
+            referenceEl: this.referenceEl,
+            trigger: newValue,
+        });
     }
-  }
-  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();
+    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);
+            }
+        }
     }
-    this.renderedShowValue = this.isShown;
-  }
-  disconnectedCallback() {
-    this.cleanUp();
-  }
-  render() {
-    let hostStyle = {};
-    if (this.autoHide) {
-      hostStyle = { display: this.isShown ? 'block' : 'none' };
+    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();
     }
-    return (h(Host, { style: hostStyle }, h("slot", null)));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "show": ["onShowChange"],
-    "referenceEl": ["onReferenceElChanged"],
-    "trigger": ["onTriggerChanged"]
-  }; }
+    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 getElement(this); }
+    static get watchers() { return {
+        "show": ["onShowChange"],
+        "referenceEl": ["onReferenceElChanged"],
+        "trigger": ["onTriggerChanged"]
+    }; }
 };
 
 export { TdsPopoverCore as tds_popover_core };

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

@@ -1,18 +1,18 @@
-import { r as registerInstance, h, H as Host } from './index-7dc8c41f.js';
+import { r as registerInstance, h, H as Host } from './index-6e6ff771.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}:host .wrapper:hover{cursor:pointer;background-color:var(--tds-popover-menu-background-hover)}:host .wrapper.disabled{pointer-events:none;color:var(--tds-popover-menu-divider-disabled-color)}:host .wrapper.disabled ::slotted(tds-icon){color:var(--tds-popover-menu-divider-disabled-icon-color)}: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);
-    this.disabled = false;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: {
-        wrapper: true,
-        disabled: this.disabled,
-      } }, h("slot", null))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.disabled = false;
+    }
+    render() {
+        return (h(Host, { role: "listitem" }, h("div", { class: {
+                wrapper: true,
+                disabled: this.disabled,
+            } }, h("slot", null))));
+    }
 };
 TdsPopoverMenuItem.style = popoverMenuItemCss;
 

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

@@ -1,32 +1,32 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7dc8c41f.js';
-import { i as inheritAttributes } from './inheritAttributes-8bb09af0.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6e6ff771.js';
+import { i as inheritAttributes } from './inheritAttributes-d21e267b.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 TdsPopoverMenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.inheritedAttributes = [];
-    this.selector = '';
-    this.referenceEl = undefined;
-    this.show = null;
-    this.placement = 'auto';
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.fluidWidth = false;
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("tds-popover-core", { 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 }, h("div", { role: "list" }, h("slot", null)))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inheritedAttributes = [];
+        this.selector = '';
+        this.referenceEl = undefined;
+        this.show = null;
+        this.placement = 'auto';
+        this.offsetSkidding = 0;
+        this.offsetDistance = 8;
+        this.fluidWidth = false;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
+    }
+    render() {
+        var _a;
+        return (h(Host, null, h("tds-popover-core", { 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 }, h("div", { role: "list" }, h("slot", null)))));
+    }
+    get host() { return getElement(this); }
 };
 TdsPopoverMenu.style = popoverMenuCss;
 

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

@@ -1,29 +1,29 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7dc8c41f.js';
-import { g as generateUniqueId } from './generateUniqueId-c96c8ee6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6e6ff771.js';
+import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 
 const radioButtonCss = ".sc-tds-radio-button:root,.tds-mode-light.sc-tds-radio-button{--tds-radio-button-color:var(--tds-grey-958);--tds-radio-button-interaction-01:var(--tds-blue-800);--tds-radio-button-interaction-02:var(--tds-white);--tds-radio-button-background-hover:var(--tds-blue-800);--tds-radio-button-background-focus:var(--tds-blue-800);--tds-radio-button-disabled:var(--tds-grey-600);--tds-radio-button-border-color-disabled-after:var(--tds-grey-500);--tds-radio-button-color-disabled-after:var(--tds-grey-700);--tds-radio-button-color-disabled-before:var(--tds-grey-700)}.tds-mode-dark.sc-tds-radio-button{--tds-radio-button-color:var(--tds-white);--tds-radio-button-interaction-01:var(--tds-white);--tds-radio-button-interaction-02:var(--tds-grey-958);--tds-radio-button-background-hover:var(--tds-white);--tds-radio-button-background-focus:var(--tds-white);--tds-radio-button-disabled:var(--tds-grey-600);--tds-radio-button-border-color-disabled-after:var(--tds-grey-700);--tds-radio-button-color-disabled-after:var(--tds-grey-700)}.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:24px;height:24px;left:0;top:0}.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);opacity:0.12}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus::before{background-color:var(--tds-radio-button-background-focus);opacity:0.24;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: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);opacity:0.24}}";
 
 const TdsRadioButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tdsChange = createEvent(this, "tdsChange", 6);
-    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;
-  }
-  render() {
-    return (h("div", { class: "tds-radio-button" }, h("input", { class: "tds-form-input", type: "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() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tdsChange = createEvent(this, "tdsChange", 6);
+        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;
+    }
+    render() {
+        return (h("div", { class: "tds-radio-button" }, h("input", { class: "tds-form-input", type: "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() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
+    }
+    get host() { return getElement(this); }
 };
 TdsRadioButton.style = radioButtonCss;
 

package/dist/esm/tds-side-menu-close-button.entry.js

@@ -1,18 +1,18 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7dc8c41f.js';
-import { i as inheritAriaAttributes } from './inheritAriaAttributes-d4dfca6b.js';
-import './inheritAttributes-8bb09af0.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6e6ff771.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
+import './inheritAttributes-d21e267b.js';
 
 const sideMenuCloseButtonCss = ":host button{height:64px;width:100%;text-align:left;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);display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--tds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}";
 
 const TdsSideMenuCloseButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
-    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("tds-icon", { name: "cross", size: "20px" }))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
+        return (h(Host, null, h("button", Object.assign({}, buttonProps), h("tds-icon", { name: "cross", size: "20px" }))));
+    }
+    get host() { return getElement(this); }
 };
 TdsSideMenuCloseButton.style = sideMenuCloseButtonCss;
 

package/dist/esm/tds-side-menu-collapse-button.entry.js

@@ -1,46 +1,46 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7dc8c41f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6e6ff771.js';
 
 const sideMenuCollapseButtonCss = ":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .icon{transform:rotateZ(90deg);transition:all 0.2s ease-in-out;width:20px;height:20px}:host .state-collapsed .icon{transform:translateX(-50%) rotateZ(90deg) rotateX(180deg);color:var(--tds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";
 
 const TdsSideMenuCollapseButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tdsCollapse = createEvent(this, "tdsCollapse", 3);
-    this.internalTdsCollapse = createEvent(this, "internalTdsCollapse", 6);
-    this.handleClick = () => {
-      /** Emit a public event that the user can prevent. */
-      const tdsCollapseEvent = this.tdsCollapse.emit({
-        collapsed: !this.collapsed,
-      });
-      /** If the public event was not prevented. */
-      if (!tdsCollapseEvent.defaultPrevented) {
-        /** Emit internal event that is listened to by other side-menu components */
-        this.collapsed = !this.collapsed;
-        this.internalTdsCollapse.emit({
-          collapsed: this.collapsed,
-        });
-      }
-    };
-    this.collapsed = false;
-  }
-  collapseSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  connectedCallback() {
-    this.sideMenuEl = this.host.closest('tds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
-  }
-  render() {
-    return (h(Host, { role: "button", tabindex: "0", onClick: () => {
-        this.handleClick();
-      } }, h("div", { class: {
-        'wrapper': true,
-        'state-collapsed': this.collapsed,
-      } }, h("tds-side-menu-item", { class: {
-        button: true,
-      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", null))))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tdsCollapse = createEvent(this, "tdsCollapse", 3);
+        this.internalTdsCollapse = createEvent(this, "internalTdsCollapse", 6);
+        this.handleClick = () => {
+            /** Emit a public event that the user can prevent. */
+            const tdsCollapseEvent = this.tdsCollapse.emit({
+                collapsed: !this.collapsed,
+            });
+            /** If the public event was not prevented. */
+            if (!tdsCollapseEvent.defaultPrevented) {
+                /** Emit internal event that is listened to by other side-menu components */
+                this.collapsed = !this.collapsed;
+                this.internalTdsCollapse.emit({
+                    collapsed: this.collapsed,
+                });
+            }
+        };
+        this.collapsed = false;
+    }
+    collapseSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    connectedCallback() {
+        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.collapsed = this.sideMenuEl.collapsed;
+    }
+    render() {
+        return (h(Host, { role: "button", tabindex: "0", onClick: () => {
+                this.handleClick();
+            } }, h("div", { class: {
+                'wrapper': true,
+                'state-collapsed': this.collapsed,
+            } }, h("tds-side-menu-item", { class: {
+                button: true,
+            } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", null))))));
+    }
+    get host() { return getElement(this); }
 };
 TdsSideMenuCollapseButton.style = sideMenuCollapseButtonCss;