@scania/tegel 1.40.0 → 1.41.0-angular-patch-types-beta.0

package/dist/components/{p-63552d0e.js → p-B569z5eW.js}

@@ -1,27 +1,37 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { i as inheritAttributes } from './p-3fe9cbbf.js';
-import { d as defineCustomElement$1 } from './p-3308d5fa.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { i as inheritAttributes } from './p-CF8bH08v.js';
+import { d as defineCustomElement$1 } from './p-X1sPx4t5.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 TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
-        this.inheritedAttributes = [];
-        this.selector = undefined;
-        this.referenceEl = undefined;
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** 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() {
@@ -43,8 +53,8 @@ const TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas
             }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '3c1fde8225ca64b259798f763b8d2264346c246e' }, h("slot", { key: 'e133b76f8088a4b572c8bb69792bc3fa6d652da9' })))));
     }
     get host() { return this; }
-    static get style() { return TdsPopoverCanvasStyle0; }
-}, [6, "tds-popover-canvas", {
+    static get style() { return popoverCanvasCss; }
+}, [262, "tds-popover-canvas", {
         "selector": [1],
         "referenceEl": [16],
         "defaultShow": [4, "default-show"],

package/dist/components/{p-7c3348eb.js → p-BHBgkUfr.js}

@@ -1,16 +1,20 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as dfs } from './p-52bf0fdf.js';
-import { d as defineCustomElement$1 } from './p-e1622f4a.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as dfs } from './p-CLF3diNe.js';
+import { d as defineCustomElement$1 } from './p-BhLq7lgx.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);box-shadow:inset 0 -2px 0 0 var(--tds-header-item-border-hover)}:host ::slotted(button:active),:host ::slotted(a:active){background-color:var(--tds-header-item-active);box-shadow:inset 0 -2px 0 0 var(--tds-header-item-border-active)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){border:none;margin-right:1px;outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);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){box-shadow:inset 0 -4px 0 0 var(--tds-header-item-border-hover)}:host .component-selected:not(.component-active) ::slotted(button:focus-visible),:host .component-selected:not(.component-active) ::slotted(a:focus-visible){box-shadow:inset 0 0 0 3px var(--tds-white)}";
-const TdsHeaderItemStyle0 = headerItemCss;
 
 const TdsHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderItem extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** If the button should appear active. Can be used when the button is
+         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
+        /** If the button should appear selected. */
         this.selected = false;
     }
     updateSlotted(searchPredicate, mutationCallback) {
@@ -85,8 +89,8 @@ const TdsHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderItem exten
             } }, h("slot", { key: '35753d03b2ca354b0054172079ac20cd87524538' }))));
     }
     get host() { return this; }
-    static get style() { return TdsHeaderItemStyle0; }
-}, [1, "tds-header-item", {
+    static get style() { return headerItemCss; }
+}, [257, "tds-header-item", {
         "active": [4],
         "selected": [4]
     }]);

package/dist/components/{p-e1622f4a.js → p-BhLq7lgx.js}

@@ -1,19 +1,20 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 
 const coreHeaderItemCss = ":host{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--tds-header-height);height:var(--tds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
-const TdsCoreHeaderItemStyle0 = coreHeaderItemCss;
 
 const TdsCoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsCoreHeaderItem extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     render() {
         return (h(Host, { key: 'cdc1e1712659f82b9bbefd67977de93963dbc68e' }, h("div", { key: '1c39a69aa967c64941be3507d7e88f92cea58623', class: "item" }, h("slot", { key: '62576106bdb13d983e5a415421522bbcddd348bf' }))));
     }
-    static get style() { return TdsCoreHeaderItemStyle0; }
-}, [1, "tds-core-header-item"]);
+    static get style() { return coreHeaderItemCss; }
+}, [257, "tds-core-header-item"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/{p-2a2d66fe.js → p-BhQM9_yR.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { c as convertToString, a as convertArrayToStrings } from './p-a1181b1f.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { d as defineCustomElement$1 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { c as convertToString, a as convertArrayToStrings } from './p-CBZ6wC3m.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
+import { d as defineCustomElement$1 } from './p-CPDv0bBc.js';
 
 /**
  * Find the next focusable element index in a list of focusable elements.
@@ -51,9 +51,6 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
     if (!element.querySelector('input')) {
         input = element.ownerDocument.createElement('input');
         input.type = 'hidden';
-        if (additionalAttributes) {
-            additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
-        }
         element.appendChild(input);
     }
     input.disabled = disabled;
@@ -61,8 +58,7 @@ const appendHiddenInput = (element, name, value, disabled, additionalAttributes)
     input.value = value || '';
 };
 
-const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom:0}:host button.error{border-bottom:1px solid var(--tds-dropdown-error)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .dropdown-select:focus-within{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter.disabled .value-wrapper input{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--tds-dropdown-filter-input-color)}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom:0}:host .filter.focus:hover{border-bottom:0}:host .filter.error{border-bottom:1px solid var(--tds-dropdown-error)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0}:host .dropdown-select button{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:hover{border-bottom-color:var(--tds-dropdown-border-bottom-hover)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-dropdown-error)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-dropdown-error)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;width:100%;transform-origin:top;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-radius:var(--tds-dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;border-radius:var(--tds-dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
-const TdsDropdownStyle0 = dropdownCss;
+const dropdownCss = "@charset \"UTF-8\";:host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:var(--tds-dropdown-border-radius)}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom:0}:host button.error{border-bottom:1px solid var(--tds-dropdown-error)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host button .menu-icon{margin-right:0}:host .dropdown-select:focus-within{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter.disabled .value-wrapper input{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .value-wrapper input{color:var(--tds-dropdown-filter-input-color)}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3;color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom:0}:host .filter.focus:hover{border-bottom:0}:host .filter.error{border-bottom:1px solid var(--tds-dropdown-error)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-error)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{cursor:pointer}:host .filter .menu-icon{margin-right:16px}:host .filter .clear-icon{margin:0 8px;color:var(--tds-dropdown-clear-icon-color);padding-right:8px;border-right:1px solid var(--tds-dropdown-clear-icon-color)}:host .filter .clear-icon:hover{color:var(--tds-dropdown-clear-icon-hover-color)}:host .filter .clear-icon.hide{display:none;visibility:hidden}:host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select button:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0}:host .dropdown-select button{transition:border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-select button:hover{border-bottom-color:var(--tds-dropdown-border-bottom-hover)}:host .dropdown-select button{border-bottom-color:var(--tds-dropdown-border-bottom)}:host .dropdown-select button.error{border-bottom-color:var(--tds-dropdown-error)}:host .dropdown-select button.error:focus{border-bottom-color:transparent}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper,:host .dropdown-select.disabled .menu-icon{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select.disabled button{border:none}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside.xs{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:var(--tds-placeholder-margin);}:host .dropdown-select .placeholder.xs{line-height:1}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .dropdown-select.xs{height:29px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-dropdown-error)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;width:100%;transform-origin:top;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-radius:var(--tds-dropdown-list-border-radius-down);overflow-y:auto;transform:scaleY(0);pointer-events:none;background-color:var(--tds-dropdown-bg)}:host .dropdown-list:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .dropdown-list::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .dropdown-list::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .dropdown-list::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .dropdown-list{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.xs{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;border-radius:var(--tds-dropdown-list-border-radius-up)}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);pointer-events:none}:host .dropdown-list.open{transform:scaleY(1);visibility:visible;opacity:1;pointer-events:auto}:host .dropdown-list.animation-enter-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter)}:host .dropdown-list.animation-exit-slide{transition:transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host .dropdown-list .no-result.xs{height:40px}:host .menu-icon{color:var(--tds-dropdown-menu-icon-color)}:host tds-icon{transition:transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host tds-icon.open{transform:rotateZ(180deg)}";
 
 function hasValueChanged(newValue, currentValue) {
     if (newValue.length !== currentValue.length)
@@ -70,14 +66,42 @@ function hasValueChanged(newValue, currentValue) {
     return newValue.some((val) => !currentValue.includes(val));
 }
 const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsChange = createEvent(this, "tdsChange", 6);
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
+        this.tdsClear = createEvent(this, "tdsClear", 6);
+        /** Sets the Dropdown in a disabled state */
+        this.disabled = false;
+        /** Mode variant of the component, based on current mode. */
+        this.modeVariant = null;
+        /** The direction the Dropdown should open, auto if not specified. */
+        this.openDirection = 'auto';
+        /** The size of the Dropdown. */
+        this.size = 'lg';
+        this.animation = 'slide';
+        /** Sets the Dropdown in an error state */
+        this.error = false;
+        /** Enables multiselect in the Dropdown. */
+        this.multiselect = false;
+        /** Enables filtration in the Dropdown. */
+        this.filter = false;
+        /** Normalizes input text for fuzzier search */
+        this.normalizeText = true;
+        /** Text that is displayed if filter is used and there are no options that matches the search.
+         * Setting it to an empty string disables message from showing up. */
+        this.noResultText = 'No result';
+        /** Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number. */
+        this.value = null;
+        this.open = false;
+        this.selectedOptions = [];
+        this.filterQuery = '';
         this.hasFocus = false;
         this.setDefaultOption = () => {
             if (this.internalDefaultValue) {
@@ -187,6 +211,8 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             }
         };
         this.handleFilterReset = () => {
+            // Store the current filter query before clearing
+            const clearedValue = this.filterQuery;
             // only reset selected values when filterquery is blank
             if (!this.filterQuery.length) {
                 this.reset();
@@ -196,6 +222,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             this.inputElement.focus();
             // Add this line to ensure internal value is cleared
             this.internalValue = '';
+            this.tdsClear.emit({ clearedValue });
         };
         this.handleFocus = () => {
             this.open = true;
@@ -221,31 +248,6 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 this.reset();
             }
         };
-        this.name = undefined;
-        this.disabled = false;
-        this.helper = undefined;
-        this.label = undefined;
-        this.labelPosition = undefined;
-        this.modeVariant = null;
-        this.openDirection = 'auto';
-        this.placeholder = undefined;
-        this.size = 'lg';
-        this.animation = 'slide';
-        this.error = false;
-        this.multiselect = false;
-        this.filter = false;
-        this.normalizeText = true;
-        this.noResultText = 'No result';
-        this.defaultValue = undefined;
-        this.value = null;
-        this.tdsAriaLabel = undefined;
-        this.open = false;
-        this.internalValue = undefined;
-        this.filterResult = undefined;
-        this.filterFocus = undefined;
-        this.internalDefaultValue = undefined;
-        this.selectedOptions = [];
-        this.filterQuery = '';
     }
     handleValueChange(newValue) {
         // Normalize to array
@@ -407,6 +409,10 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             // 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) {
+                // Emit clear event if there's a filter query when clicking outside
+                if (this.filter && this.filterQuery) {
+                    this.tdsClear.emit({ clearedValue: this.filterQuery });
+                }
                 this.open = false;
             }
         }
@@ -549,9 +555,9 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         // Generate unique IDs for associating labels and helpers with the input/button
         const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
         const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
-        return (h(Host, { key: '8145c7b222a850157de5f328974f5c70b126b9e4', class: {
+        return (h(Host, { key: 'ebb4008f7e27e9f9de603b1dfeb5100f45f0e600', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'af3ad647c3c5bbb86f12033821020a4ed484d9e1', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '099777e28368c78c9eb05945328899334c674865', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '77f30a6ec80264fe89422b8f129e763d2fe2a64c', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3d3d3ca87cae2df4f043feb1f6bdbf4482cc4223', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -595,7 +601,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'f5427c41c1abe1c84164a030e69800fd48911c73', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '48e96d8ecac8918e11c6e2c0e1321802b61dbf7d', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -606,11 +612,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '2e83898eec11f669c3477d5600dce1178b5c4f36', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '0ff59cf47dbe302998ce72758b182e7565ddd210', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '3a60427fe8ca05d6bf4ba42f95bd0bc753f04ebd', id: helperId, class: {
+            } }, h("slot", { key: 'd49f3a638a9f6b1b08e3489dffad27151c0c554f', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'b38d308604e30fdb130d72295d2d3f7bf2fb9bd6', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1f8160ac1f0ecdc0d4f29faa31c469a0bd04b0d6', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: 'bab7ba6449cb7cd62a149340f6de1fe13cfd49de', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '487fb6deb5bd27347b2cd4f607e5488543185894', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -618,8 +624,8 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         "open": ["handleOpenState"],
         "defaultValue": ["handleDefaultValueChange"]
     }; }
-    static get style() { return TdsDropdownStyle0; }
-}, [1, "tds-dropdown", {
+    static get style() { return dropdownCss; }
+}, [257, "tds-dropdown", {
         "name": [1],
         "disabled": [4],
         "helper": [1],

package/dist/components/{p-1dafdc8c.js → p-BxmFjTxG.js}

@@ -1,15 +1,19 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as dfs } from './p-52bf0fdf.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as dfs } from './p-CLF3diNe.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:10px;padding:0 22px;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 ::slotted(tds-side-menu-user),:host .component-has-user ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:16px;padding:0 22px 0 16px;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-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px;z-index:1}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button),:host .component:hover ::slotted(tds-side-menu-user){background-color:var(--tds-sidebar-item-state-hover);position:relative}:host .component:hover ::slotted(a)::before,:host .component:hover ::slotted(button)::before,:host .component:hover ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-side-menu-item-hover-indicator)}:host .component:hover ::slotted(a:focus-visible),:host .component:hover ::slotted(button:focus-visible),:host .component:hover ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidebar-item-state-hover);position:relative}:host .component:hover ::slotted(a:focus-visible)::before,:host .component:hover ::slotted(button:focus-visible)::before,:host .component:hover ::slotted(tds-side-menu-user:focus-visible)::before{content:\"\";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-side-menu-item-hover-indicator)}:host .component:active ::slotted(a),:host .component:active ::slotted(button),:host .component:active ::slotted(tds-side-menu-user){background-color:var(--tds-sidemenu-item-state-active);position:relative}:host .component:active ::slotted(a)::before,:host .component:active ::slotted(button)::before,:host .component:active ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-side-menu-item-pressed-indicator)}:host .component:active ::slotted(a:focus-visible),:host .component:active ::slotted(button:focus-visible),:host .component:active ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidemenu-item-state-active);position:relative}:host .component:active ::slotted(a:focus-visible)::before,:host .component:active ::slotted(button:focus-visible)::before,:host .component:active ::slotted(tds-side-menu-user:focus-visible)::before{content:\"\";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-side-menu-item-pressed-indicator)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button),:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user){background-color:var(--tds-sidebar-item-state-selected);position:relative}:host .component-selected:not(:host .component-active) ::slotted(a)::before,:host .component-selected:not(:host .component-active) ::slotted(button)::before,:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible),:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible),:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidebar-item-state-selected);position:relative}:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible)::before,:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible)::before,:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible)::before{content:\"\";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
-const TdsSideMenuItemStyle0 = sideMenuItemCss;
 
 const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** If the item should appear selected. */
         this.selected = false;
+        /** If the item should appear active. Can be used when the item is
+         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
         this.collapsed = false;
         this.hasUserComponent = false;
@@ -82,8 +86,8 @@ const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem e
             } }, h("slot", { key: '5c92976a5aa367142e2af23fdacb6d67c3d2b36c' }))));
     }
     get host() { return this; }
-    static get style() { return TdsSideMenuItemStyle0; }
-}, [1, "tds-side-menu-item", {
+    static get style() { return sideMenuItemCss; }
+}, [257, "tds-side-menu-item", {
         "selected": [4],
         "active": [4],
         "collapsed": [32],

package/dist/components/{p-3f2187a4.js → p-CMsPXG7a.js}

@@ -1,21 +1,20 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 
 const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
-const TdsSideMenuUserLabelStyle0 = sideMenuUserLabelCss;
 
 const TdsSideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUserLabel extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
-        this.heading = undefined;
-        this.subheading = undefined;
     }
     render() {
         return (h(Host, { key: '5b045eb527ee378f50f6a1bec3a383b9c0f352ef' }, this.heading, this.subheading && h("div", { key: '3e106d0bdbe62438e8d2edbf73f43324cb78ffdd', class: "subheading" }, this.subheading)));
     }
-    static get style() { return TdsSideMenuUserLabelStyle0; }
-}, [1, "tds-side-menu-user-label", {
+    static get style() { return sideMenuUserLabelCss; }
+}, [257, "tds-side-menu-user-label", {
         "heading": [1],
         "subheading": [1]
     }]);