@duetds/components 8.2.1 → 8.3.0

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

@@ -9,10 +9,14 @@ import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
+import { slotElementCheck } from "../../utils/slot-utils";
 const icons = {
     search: searchIcon,
     email: emailIcon,
 };
+/**
+ * @slot tooltip - Use to place a tooltip alongside the label.
+ */
 export class DuetInput {
     constructor() {
         /**
@@ -315,7 +319,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip))), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, 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-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",

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

@@ -43,13 +43,15 @@
   margin: 0 !important;
 }
 
-.duet-multiselect-tooltip {
+.duet-multiselect-tooltip,
+::slotted(duet-tooltip) {
   position: absolute;
   top: 12px;
   right: 0;
 }
 @media (min-width: 48em) {
-  .duet-multiselect-tooltip {
+  .duet-multiselect-tooltip,
+  ::slotted(duet-tooltip) {
     position: relative;
     top: 4px;
     right: auto;

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

@@ -6,10 +6,14 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
+import { slotElementCheck } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function toggleInArray(arr, item) {
     return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
 }
+/**
+ * @slot tooltip - Use to place a tooltip alongside the label.
+ */
 export class DuetMultiselect {
     constructor() {
         /**
@@ -203,7 +207,7 @@ export class DuetMultiselect {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, 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: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", null, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, 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: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-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-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", null, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
             }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems && this.allControls && (h("div", { class: "duet-multiselect-all-control-buttons" }, h("button", { class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&

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

@@ -23,6 +23,11 @@
   width: 100%;
 }
 
+.container {
+  position: relative;
+  z-index: 400;
+}
+
 slot[name=mobile] {
   display: inherit;
 }

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-number-input/duet-number-input.js

@@ -9,6 +9,10 @@ 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";
+/**
+ * @slot tooltip - Use to place a tooltip alongside the label.
+ */
 export class DuetNumberInput {
     constructor() {
         this.inputId = createID("DuetInput");
@@ -287,7 +291,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("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", 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())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -3,7 +3,11 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { slotElementCheck } from "../../utils/slot-utils";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
+/**
+ * @slot tooltip - Use to place a tooltip alongside the label.
+ */
 export class DuetRadioGroup {
     constructor() {
         /**
@@ -111,7 +115,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("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", onSlotchange: ev => slotElementCheck(ev, this, "duet-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-select/duet-select.css

@@ -53,13 +53,15 @@
   margin: 0 !important;
 }
 
-duet-tooltip {
+duet-tooltip,
+::slotted(duet-tooltip) {
   position: absolute;
   top: 12px;
   right: 0;
 }
 @media (min-width: 48em) {
-  duet-tooltip {
+  duet-tooltip,
+  ::slotted(duet-tooltip) {
     position: relative;
     top: 4px;
     right: auto;

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

@@ -4,6 +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 { parsePossibleJSON } from "../../utils/string-utils";
 function isOptionGroup(item) {
     return "options" in item;
@@ -19,6 +20,9 @@ function findOptionByValue(items, value) {
         }
     }
 }
+/**
+ * @slot tooltip - Use to place a tooltip alongside the label.
+ */
 export class DuetSelect {
     constructor() {
         /**
@@ -159,7 +163,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)), 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", 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 => {
             return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
         }))), h("div", { class: {
                 "duet-select": true,

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

@@ -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,12 +113,16 @@ export class DuetSlideout {
         if (this.openButton) {
             this.openButton.removeEventListener("click", this.openButtonEventListener);
         }
+        this.setStickHeaderStyleMutations(true);
     }
-    handleOpenChange() {
-        if (this.openButton) {
-            this.openButton.accessibleExpanded = this.open;
+    handleOpenChange(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
         }
-        if (this.open) {
+        if (this.open && !oldValue) {
+            if (this.openButton) {
+                this.openButton.accessibleExpanded = true;
+            }
             const openPanel = this.getOpenPanel();
             this.teleport.go(true);
             disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
@@ -123,7 +135,10 @@ export class DuetSlideout {
                 }, 200);
             }
         }
-        else {
+        else if (!this.open && oldValue) {
+            if (this.openButton) {
+                this.openButton.accessibleExpanded = false;
+            }
             setTimeout(() => {
                 focusElement(this.openButton);
                 enableBodyScroll(this.dialog);

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

@@ -2,10 +2,14 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { hasSlot } from "../../common";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-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-tab/duet-tab.css

@@ -25,4 +25,14 @@
 }
 .duet-tab.selected {
   display: block;
+}
+.duet-tab.has-content-id, .duet-tab.has-content-id.selected {
+  display: none;
+}
+:host(.user-is-tabbing) .duet-tab:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+:host(.user-is-tabbing) .duet-tab.duet-theme-turva:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }

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

@@ -2,9 +2,48 @@
  * Built with Duet Design System
  */
 import { Build, h } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
+import { getShadowByName } from "../../utils/token-utils";
 export class DuetTab {
     constructor() {
+        this.setupContentElement = () => {
+            if (this.contentId) {
+                this.tabpanelElement = document.getElementById(this.contentId);
+                if (this.tabpanelElement) {
+                    this.tabpanelElement.setAttribute("role", "tabpanel");
+                    this.tabpanelElement.setAttribute("tabindex", "-1");
+                    this.tabpanelElement.removeEventListener("focus", this.tabpanelElementFocusListener);
+                    this.tabpanelElement.removeEventListener("blur", this.tabpanelElementBlurListener);
+                    this.tabpanelElement.addEventListener("focus", this.tabpanelElementFocusListener);
+                    this.tabpanelElement.addEventListener("blur", this.tabpanelElementBlurListener);
+                    if (this.accessibleDescription) {
+                        this.tabpanelElement.setAttribute("aria-description", this.accessibleDescription);
+                    }
+                    if (this.accessibleLabelledBy) {
+                        this.tabpanelElement.setAttribute("aria-labelledby", this.accessibleLabelledBy);
+                    }
+                    if (this.selected) {
+                        this.tabpanelElement.toggleAttribute("hidden", false);
+                    }
+                    else {
+                        this.tabpanelElement.toggleAttribute("hidden", true);
+                    }
+                }
+            }
+        };
+        this.tabpanelElementFocusListener = () => {
+            if (this.element.classList.contains("user-is-tabbing")) {
+                this.tabpanelElement.style.outline = "0";
+                this.tabpanelElement.style.boxShadow = getShadowByName(this.theme === "turva" ? "focus-turva" : "focus");
+            }
+        };
+        this.tabpanelElementBlurListener = () => {
+            this.tabpanelElement.style.outline = null;
+            this.tabpanelElement.style.boxShadow = null;
+        };
+        this.theme = "";
         this.label = undefined;
         this.caption = undefined;
         this.selected = undefined;
@@ -14,15 +53,44 @@ export class DuetTab {
             ? getLocaleString(this.accessibleDescriptionDefault)
             : null;
         this.accessibleLabelledBy = undefined;
+        this.contentId = undefined;
+    }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
     }
     /**
      * Component lifecycle events.
      */
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
+        subscribeTabbingChange(this);
+        this.setupContentElement();
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
+        if (this.tabpanelElement) {
+            this.tabpanelElement.removeAttribute("role");
+            this.tabpanelElement.removeAttribute("tabindex");
+            this.tabpanelElement.removeAttribute("aria-description");
+            this.tabpanelElement.removeAttribute("aria-labelledby");
+            this.tabpanelElement.removeAttribute("hidden");
+            this.tabpanelElement.removeEventListener("focus", this.tabpanelElementFocusListener.bind(this));
+            this.tabpanelElement.removeEventListener("blur", this.tabpanelElementBlurListener.bind(this));
+            this.tabpanelElement = undefined;
+        }
+    }
+    setupSelected(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
+        }
+        this.setupContentElement();
+    }
+    /**
+     * Sets focus on the tab panel.
+     */
+    async setFocus(options) {
+        this.tabpanelElement.focus(options);
     }
     /**
      * render() function
@@ -32,7 +100,16 @@ export class DuetTab {
         if (Build.isServer) {
             return;
         }
-        return (h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy }, h("slot", null)));
+        return (h("div", { ref: element => {
+                if (!this.contentId) {
+                    this.tabpanelElement = element;
+                }
+            }, role: "tabpanel", class: {
+                "duet-theme-turva": this.theme === "turva",
+                "duet-tab": true,
+                selected: this.selected,
+                "has-content-id": !!this.contentId,
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", null)));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "scoped"; }
@@ -48,6 +125,30 @@ export class DuetTab {
     }
     static get properties() {
         return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -164,8 +265,61 @@ export class DuetTab {
                 "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
+            },
+            "contentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML id of element that is to be used when opening this tab.\nThis enables decoupling the content from the tab buttons."
+                },
+                "attribute": "content-id",
+                "reflect": false,
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the tab panel.",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "setupSelected"
+            }];
+    }
 }