@duetds/components 8.2.2 → 8.3.1

package/lib/collection/components/duet-nav/duet-nav.js

@@ -23,7 +23,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("div", null, h("slot", null), h("slot", { name: "mobile" }), h("slot", { name: "desktop" }))));
+        return (h(Host, null, h("div", { class: "container" }, h("slot", null), h("slot", { name: "mobile" }), h("slot", { name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -285,7 +285,7 @@ export class DuetNotificationDrawer {
                     "references": {
                         "DuetNotificationDrawerDirection": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
                             "id": "src/components/duet-notification-drawer/duet-notification-drawer.tsx::DuetNotificationDrawerDirection"
                         }
                     }

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -9,7 +9,7 @@ import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocale, getLocaleString, } from "../../utils/language-utils";
 import { clamp, roundTo, SafeParseFloat } from "../../utils/math.utils";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 /**
  * @slot tooltip - Use to place a tooltip alongside the label.
  */
@@ -237,6 +237,7 @@ export class DuetNumberInput {
         if (this.value) {
             this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
         }
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
     }
     connectedCallback() {
         connectLanguageChangeObserver(this, [
@@ -291,7 +292,7 @@ export class DuetNumberInput {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { name: "tooltip", onSlotchange: ev => slotElementCheck(ev, this, "duet-tooltip") }), h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), h("duet-icon", { icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), h("duet-icon", { icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, h("div", { class: "duet-number-container" }, h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { name: "tooltip" }), h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), h("duet-icon", { icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), h("duet-icon", { icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "scoped"; }
@@ -1031,7 +1032,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1052,7 +1053,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1073,7 +1074,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1094,7 +1095,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }

package/lib/collection/components/duet-pagination/duet-pagination.js

@@ -409,7 +409,7 @@ export class DuetPagination {
                     "references": {
                         "DuetPaginationVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
                             "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationVariation"
                         }
                     }
@@ -698,7 +698,7 @@ export class DuetPagination {
                     "references": {
                         "DuetPaginationPageEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
                             "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationPageEvent"
                         }
                     }

package/lib/collection/components/duet-paragraph/duet-paragraph.js

@@ -109,7 +109,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphSize"
                         }
                     }
@@ -133,7 +133,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphWeight": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphWeight"
                         }
                     }
@@ -157,7 +157,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphVariation"
                         }
                     }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -360,7 +360,7 @@ export class DuetPopupMenu {
                     "references": {
                         "DuetPopupMenuEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
                             "id": "src/components/duet-popup-menu/duet-popup-menu.tsx::DuetPopupMenuEvent"
                         }
                     }

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -322,7 +322,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }
@@ -343,7 +343,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }

package/lib/collection/components/duet-promo-card/duet-promo-card.css

@@ -99,4 +99,14 @@
 }
 .duet-promo-card.duet-theme-turva .content-wrapper:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+
+.duet-promo-card-link {
+  transition: box-shadow 300ms ease;
+}
+.duet-promo-card-link:hover {
+  box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1);
+}
+.duet-promo-card-link:hover.duet-theme-turva {
+  box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15);
 }

package/lib/collection/components/duet-promo-card/duet-promo-card.js

@@ -3,7 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
 import { getColorByName } from "../../utils/token-utils";
 /**
  * @slot pre-heading - Slot for pre-heading content.
@@ -26,13 +26,17 @@ export class DuetPromoCard {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.hasPreHeadingSlot = !!this.element.querySelector('[slot="pre-heading"]');
-        this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
-        this.hasDescriptionSlot = !!this.element.querySelector('[slot="description"]');
-        this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
+        this.hasPreHeadingSlot = hasSlot(this.element, "pre-heading");
+        this.hasHeadingSlot = hasSlot(this.element, "heading");
+        this.hasDescriptionSlot = hasSlot(this.element, "description");
+        this.hasActionSlot = hasSlot(this.element, "action");
+        checkNamedSlotElement(this.element, "heading", "span");
+        checkNamedSlotElement(this.element, "description", "span");
     }
     /**
-     * Sets focus on underlying a element when url attribute is used.
+     * Sets focus on underlying a element.
+     * Available only when url attribute is used.
+     * Use this method instead of the native `focus()`.
      */
     async setFocus(options) {
         if (this.url && this.aOrDivElement) {
@@ -53,7 +57,8 @@ export class DuetPromoCard {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
-            }, style: bannerStyles }, h(TagName, { href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { class: "content" }, this.hasPreHeadingSlot && (h("div", { class: "pre-heading" }, h("slot", { name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "description", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" }))))))));
+                "duet-promo-card-link": !!this.url,
+            }, style: bannerStyles }, h(TagName, { href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { class: "content" }, this.hasPreHeadingSlot && (h("div", { class: "pre-heading" }, h("slot", { name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "description" }))))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -249,7 +254,7 @@ export class DuetPromoCard {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on underlying a element when url attribute is used.",
+                    "text": "Sets focus on underlying a element.\nAvailable only when url attribute is used.\nUse this method instead of the native `focus()`.",
                     "tags": []
                 }
             }

package/lib/collection/components/duet-radio/duet-radio.js

@@ -546,7 +546,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -567,7 +567,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -588,7 +588,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }

package/lib/collection/components/duet-radio-group/duet-radio-group.js

@@ -3,7 +3,7 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 /**
  * @slot tooltip - Use to place a tooltip alongside the label.
@@ -72,6 +72,7 @@ export class DuetRadioGroup {
     }
     componentWillLoad() {
         inheritGlobalTheme(this);
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
     }
     /**
      * Local methods.
@@ -115,7 +116,7 @@ export class DuetRadioGroup {
         if (Build.isServer) {
             return;
         }
-        return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { name: "tooltip", onSlotchange: ev => slotElementCheck(ev, this, "duet-tooltip") }), h("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+        return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { name: "tooltip" }), h("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
     }
     static get is() { return "duet-radio-group"; }
     static get encapsulation() { return "scoped"; }

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -567,7 +567,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }
@@ -588,7 +588,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -349,7 +349,7 @@ export class DuetRangeStepper {
                     "references": {
                         "DuetRangeStepperUpdateEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
                             "id": "src/components/duet-range-stepper/duet-range-stepper.tsx::DuetRangeStepperUpdateEvent"
                         }
                     }

package/lib/collection/components/duet-select/duet-select.js

@@ -4,7 +4,7 @@
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function isOptionGroup(item) {
     return "options" in item;
@@ -113,6 +113,7 @@ export class DuetSelect {
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.isCaptionVisible = !!this.caption;
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         this.refresh();
     }
     /**
@@ -163,7 +164,7 @@ export class DuetSelect {
                 [`duet-select-variation-${this.variation}`]: true,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { name: "tooltip", onSlotchange: ev => slotElementCheck(ev, this, "duet-tooltip") }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { name: "tooltip" }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
             return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
         }))), h("div", { class: {
                 "duet-select": true,
@@ -193,7 +194,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectVariation"
                         }
                     }
@@ -509,7 +510,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectItems": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectItems"
                         }
                     }
@@ -700,7 +701,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
                         }
                     }
@@ -721,7 +722,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
                         }
                     }
@@ -742,7 +743,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
                         }
                     }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -439,7 +439,7 @@ export class DuetShowMore {
                     "references": {
                         "DuetShowMoreToggleEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-show-more/duet-show-more.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-show-more/duet-show-more.tsx",
                             "id": "src/components/duet-show-more/duet-show-more.tsx::DuetShowMoreToggleEvent"
                         }
                     }

package/lib/collection/components/duet-slideout/duet-slideout.css

@@ -31,7 +31,7 @@
   opacity: 0;
 }
 
-:host([open]) ::slotted(*) {
+:host([open]:not([open=false])) ::slotted(*) {
   visibility: visible;
   opacity: 1;
 }

package/lib/collection/components/duet-slideout/duet-slideout.js

@@ -3,11 +3,11 @@
  */
 import { Build, h, Host, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
-import { hasSlot } from "../../common";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { hasSlot } from "../../utils/slot-utils";
 import { Teleport } from "../../utils/teleport";
 import { getColorByName } from "../../utils/token-utils";
 /**
@@ -39,6 +39,13 @@ export class DuetSlideout {
             }
             catch (_e) { }
         };
+        this.setStickHeaderStyleMutations = (clean = false) => {
+            const stickyHeaderTabGroups = this.element.querySelectorAll('[slot="sticky-header"] duet-tab-group');
+            stickyHeaderTabGroups.forEach(tabGroup => {
+                tabGroup.style.position = clean ? null : "relative";
+                tabGroup.style.top = clean ? null : "1px";
+            });
+        };
         this.openButtonEventListener = (e) => {
             e.stopPropagation();
             e.preventDefault();
@@ -91,6 +98,7 @@ export class DuetSlideout {
                 this.openButton.addEventListener("click", this.openButtonEventListener);
             }
         }
+        this.setStickHeaderStyleMutations();
         this.mutationObserver = new MutationObserver(() => {
             this.openPanel = !!this.getOpenPanel();
         });
@@ -105,6 +113,7 @@ export class DuetSlideout {
         if (this.openButton) {
             this.openButton.removeEventListener("click", this.openButtonEventListener);
         }
+        this.setStickHeaderStyleMutations(true);
     }
     handleOpenChange(newValue, oldValue) {
         if (!!newValue === !!oldValue) {
@@ -351,7 +360,7 @@ export class DuetSlideout {
                     "references": {
                         "DuetSlideoutEventDetails": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-slideout/duet-slideout.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx",
                             "id": "src/components/duet-slideout/duet-slideout.tsx::DuetSlideoutEventDetails"
                         }
                     }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.css

@@ -116,6 +116,18 @@
 .duet-slideout-panel .dialog.hidden .top span {
   opacity: 0;
 }
+.duet-slideout-panel .top-container.has-sticky-header-slot {
+  position: sticky;
+  top: 0;
+  z-index: 200;
+}
+.duet-slideout-panel .top-container.has-sticky-header-slot .top {
+  background: rgb(243, 249, 252);
+}
+.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header {
+  display: block;
+  padding: 0 16px;
+}
 .duet-slideout-panel .top {
   display: flex;
   align-items: center;
@@ -143,6 +155,14 @@
   opacity: 1;
   transition: top 0.3s ease-in, opacity 0.3s ease-in;
 }
+.duet-slideout-panel .sticky-header {
+  display: none;
+  width: 100%;
+  padding: 0 1.5rem;
+  margin-bottom: 20px;
+  background: rgb(243, 249, 252);
+  border-bottom: 1px solid rgb(225, 227, 230);
+}
 .duet-slideout-panel .items {
   display: flex;
   flex-direction: column;
@@ -162,6 +182,13 @@
 .duet-slideout-panel.duet-theme-turva .link.active .label-text::after {
   background: rgb(198, 12, 48);
 }
+.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top {
+  background: rgb(245, 245, 247);
+}
+.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header {
+  background: rgb(245, 245, 247);
+  border-bottom: 1px solid rgb(228, 228, 230);
+}
 .duet-slideout-panel.duet-theme-turva .top .back:focus,
 .duet-slideout-panel.duet-theme-turva .top .close:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -5,7 +5,11 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { hasSlot } from "../../utils/slot-utils";
 import { getColorByName } from "../../utils/token-utils";
+/**
+ * @slot sticky-header - Content will be fixed to the top of the modal when scrolling.
+ */
 export class DuetSlideoutPanel {
     constructor() {
         this.exitLangObject = {
@@ -18,6 +22,7 @@ export class DuetSlideoutPanel {
             fi: "Takaisin päävalikkoon",
             sv: "Tillbaka till huvudmenyn",
         };
+        this.hasStickyHeaderSlot = false;
         this.updateLabel = () => {
             const labelSlotElement = this.element.querySelector("[slot='label']");
             this.label = labelSlotElement;
@@ -69,6 +74,7 @@ export class DuetSlideoutPanel {
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.updateLabel();
+        this.hasStickyHeaderSlot = hasSlot(this.element, "sticky-header");
     }
     connectedCallback() {
         connectLanguageChangeObserver(this);
@@ -113,12 +119,12 @@ export class DuetSlideoutPanel {
             } }, h("button", { ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onToggleClick, inert: this.open }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("div", { class: "label" }, h("span", { class: { "label-text": true, [this.labelSize]: true } }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { class: {
+            }, onClick: this.onToggleClick, inert: this.open }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { class: "label" }, h("span", { class: { "label-text": true, [this.labelSize]: true } }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onToggleClick }, h("duet-icon", { class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", null, this.label.innerHTML), h("button", { class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onToggleClick }, h("duet-icon", { class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", null, this.label.innerHTML), h("button", { class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { class: "sticky-header" }, h("slot", { name: "sticky-header" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
             } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
     }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -46,7 +46,7 @@ export class DuetSlideoutPanelDropdown {
                 active: this.open,
             } }, h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
             } }, h("slot", null)))));

package/lib/collection/components/duet-spacer/duet-spacer.js

@@ -49,7 +49,7 @@ export class DuetSpacer {
                     "references": {
                         "DuetSpacerSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
                             "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerSize"
                         }
                     }
@@ -97,7 +97,7 @@ export class DuetSpacer {
                     "references": {
                         "DuetSpacerBreakpoint": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
                             "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerBreakpoint"
                         }
                     }