@duetds/components 8.1.4 → 8.2.0

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

@@ -140,6 +140,8 @@ export class DuetChip {
         this.name = undefined;
         this.checked = false;
         this.disabled = false;
+        this.accessibleExpanded = undefined;
+        this.accessiblePopup = "false";
     }
     clearOtherRadioButtons() {
         if (this.variation === "radio" && this.checked) {
@@ -164,6 +166,23 @@ export class DuetChip {
     disconnectedCallback() {
         unsubscribeTabbingChange(this);
     }
+    getAccessibleExpanded() {
+        if (this.accessibleExpanded != null) {
+            return (!!this.accessibleExpanded).toString();
+        }
+        if (this.popupElement) {
+            return this.popupOpen ? "true" : "false";
+        }
+        return undefined;
+    }
+    getAccessiblePopup() {
+        if (this.popupElement) {
+            return "true";
+        }
+        else {
+            return this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined;
+        }
+    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -190,7 +209,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.popupElement && "menu", "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.popupElement ? (this.popupOpen ? "true" : "false") : undefined, "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popupElement && (h("div", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("div", { class: classes }, h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
+        return (h(Host, null, this.variation === "button" && (h("span", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("span", { class: classes }, h("button", Object.assign({ id: identifier, class: "duet-chip-input-button", "aria-label": this.accessibleLabel }, focusHandlers), h("span", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { class: classes }, h("input", Object.assign({ "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { htmlFor: identifier }, h("span", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null), this.popupElement && (h("span", { class: "duet-chip-popup-disclosure" }, h("duet-icon", { name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { class: classes }, h("input", Object.assign({ "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "radio", name: this.name, value: this.value, checked: this.checked, onChange: this.onRadioChange, onClick: this.disabled ? evt => evt.preventDefault() : undefined }, focusHandlers)), h("label", { htmlFor: identifier }, h("span", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" })), h("slot", null))))));
     }
     static get is() { return "duet-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -398,6 +417,41 @@ export class DuetChip {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "accessibleExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the component expands or collapses adjacent content, then use this property\nto add the aria-expanded attribute to the opening element. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
+                },
+                "attribute": "accessible-expanded",
+                "reflect": true
+            },
+            "accessiblePopup": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property to add an aria-haspopup attribute."
+                },
+                "attribute": "accessible-popup",
+                "reflect": true,
+                "defaultValue": "\"false\""
             }
         };
     }

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

@@ -6,6 +6,7 @@ import { h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { slotElementCheck } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
  * @part duet-hero - piercing selector for styling the hero container
@@ -13,9 +14,9 @@ import { parsePossibleJSON } from "../../utils/string-utils";
  * @slot default - This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
  * @slot badge - This is a slot for a status badge that sits next to pre-heading inside the hero component.
  * @slot bottom - This is a slot for content under the main hero content.
- * @slot pre-heading - This is a slot for pre-heading content inside the hero component.
- * @slot heading - This is a slot for heading content inside the hero component.
- * @slot subheading - This is a slot for heading content inside the hero component. Only usable with campaign, section variations.
+ * @slot pre-heading - This is a slot for pre-heading content inside the hero component. Only usable with gray variation. Only span should be used in this slot.
+ * @slot heading - This is a slot for heading content inside the hero component. Only span should be used in this slot.
+ * @slot subheading - This is a slot for heading content inside the hero component. Only usable with campaign, section variations. Only span should be used in this slot.
  */
 export class DuetHero {
     constructor() {
@@ -178,7 +179,7 @@ export class DuetHero {
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("div", null, h("slot", { name: "pre-heading" }))))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("div", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("div", null, h("slot", { name: "subheading" })))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("span", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("span", null, h("slot", { name: "heading", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", null, h("slot", { name: "subheading", onSlotchange: ev => slotElementCheck(ev, this, "span") })))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("span", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&

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

@@ -52,6 +52,7 @@
 .duet-icon {
   -webkit-user-select: none;
   user-select: none;
+  display: block;
   width: 100%;
   height: 100%;
   transform-origin: top center;

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

@@ -78,7 +78,7 @@ export class DuetIcon {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("div", { "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

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

@@ -170,6 +170,8 @@ export class DuetInput {
         this.type = "text";
         this.variation = "default";
         this.label = "Label";
+        this.labelColor = undefined;
+        this.labelWeight = undefined;
         this.error = "";
         this.labelHidden = false;
         this.numericKeyboard = false;
@@ -313,7 +315,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", 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))), 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",
@@ -792,6 +794,46 @@ export class DuetInput {
                 "reflect": false,
                 "defaultValue": "\"Label\""
             },
+            "labelColor": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the label."
+                },
+                "attribute": "label-color",
+                "reflect": false
+            },
+            "labelWeight": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTextFontWeight",
+                    "resolved": "\"normal\" | \"semi-bold\"",
+                    "references": {
+                        "DuetTextFontWeight": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTextFontWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Font weight of the label."
+                },
+                "attribute": "label-weight",
+                "reflect": false
+            },
             "error": {
                 "type": "string",
                 "mutable": false,

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

@@ -77,6 +77,13 @@ label span {
   font-size: 0.875rem;
 }
 
+:host(.duet-weight-normal) label {
+  font-weight: 400 !important;
+}
+:host(.duet-weight-normal) label span {
+  font-weight: 400 !important;
+}
+
 :host(.duet-theme-turva) label {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);

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

@@ -10,6 +10,7 @@ export class DuetLabel {
         this.for = undefined;
         this.margin = "auto";
         this.size = "medium";
+        this.weight = "semi-bold";
         this.color = "";
     }
     /**
@@ -33,6 +34,7 @@ export class DuetLabel {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-small-margin": this.margin === "small",
                 "duet-m-0": this.margin === "none",
+                [`duet-weight-${this.weight}`]: true,
             } }, h("label", { htmlFor: this.for, style: { color } }, h("span", null, h("slot", null)))));
     }
     static get is() { return "duet-label"; }
@@ -138,6 +140,30 @@ export class DuetLabel {
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetTextFontWeight",
+                    "resolved": "\"normal\" | \"semi-bold\"",
+                    "references": {
+                        "DuetTextFontWeight": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTextFontWeight"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the weight of the label."
+                },
+                "attribute": "weight",
+                "reflect": false,
+                "defaultValue": "\"semi-bold\""
+            },
             "color": {
                 "type": "string",
                 "mutable": false,

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

@@ -49,6 +49,9 @@
 .duet-modal-overlay.duet-disable-transitions {
   transition: none;
 }
+.duet-modal-overlay.duet-modal-slide-up {
+  overflow: hidden;
+}
 
 ::slotted(img) {
   width: 100%;
@@ -66,11 +69,47 @@
     padding: 48px 16px;
   }
 }
+.duet-modal-inner.duet-modal-slide-up {
+  align-items: stretch;
+  justify-content: center;
+  height: 100%;
+  padding-top: 48px;
+  padding-bottom: 0;
+  overflow: hidden;
+}
+.duet-modal-inner.duet-modal-slide-up::after {
+  position: absolute;
+  bottom: 0;
+  z-index: 300;
+  display: block;
+  width: 100%;
+  max-width: 686px;
+  height: 48px;
+  margin: auto;
+  pointer-events: none;
+  content: "";
+  background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
+}
+.duet-modal-inner.duet-modal-slide-up::after.small {
+  max-width: 545px;
+}
+.duet-modal-inner.duet-modal-slide-up::after.large {
+  max-width: 100%;
+}
+@media (min-width: 36em) {
+  .duet-modal-inner.duet-modal-slide-up::after.large {
+    max-width: 1110px;
+  }
+}
 @media (max-width: 35.9375em) {
-  .duet-modal-inner.duet-modal-large {
+  .duet-modal-inner.large {
     padding-right: 0;
     padding-left: 0;
   }
+  .duet-modal-inner.duet-modal-slide-up {
+    padding: 0;
+    padding-top: 28px;
+  }
 }
 
 .duet-modal {
@@ -100,6 +139,10 @@
   transition-delay: 200ms;
   transform: none;
 }
+.duet-modal-active .duet-modal.slide-up {
+  top: 0;
+  transition: top 600ms ease;
+}
 .duet-disable-transitions .duet-modal {
   transition: none;
 }
@@ -114,63 +157,94 @@
     max-width: 1110px;
   }
 }
+.duet-modal.slide-up {
+  top: 100vh;
+  margin: 0;
+  border-radius: 4px 4px 0 0;
+  opacity: 1;
+  transition: top 600ms ease;
+}
+@media (max-width: 35.9375em) {
+  .duet-modal.slide-up {
+    border-radius: 16px 16px 0 0;
+  }
+}
+.duet-modal.duet-modal-has-sticky-header {
+  height: 100%;
+  overflow: auto;
+}
 .duet-modal:focus {
   outline: 0;
 }
 
-.duet-modal-body {
+.duet-modal-body,
+.duet-modal-sticky-header {
   width: 100%;
   padding: 36px 28px;
 }
-.duet-modal-body.duet-modal-gutter-none {
+.duet-modal-body.duet-modal-gutter-none,
+.duet-modal-sticky-header.duet-modal-gutter-none {
   padding: 0 !important;
 }
-.duet-modal-body.duet-modal-gutter-small {
+.duet-modal-body.duet-modal-gutter-small,
+.duet-modal-sticky-header.duet-modal-gutter-small {
   padding: 36px 20px;
 }
-.duet-modal-body.duet-modal-gutter-large {
+.duet-modal-body.duet-modal-gutter-large,
+.duet-modal-sticky-header.duet-modal-gutter-large {
   padding: 48px 36px;
 }
 @media (max-width: 22.5em) {
-  .duet-modal-body {
+  .duet-modal-body,
+  .duet-modal-sticky-header {
     padding: 36px 20px;
   }
-  .duet-modal-body.duet-modal-gutter-large {
+  .duet-modal-body.duet-modal-gutter-large,
+  .duet-modal-sticky-header.duet-modal-gutter-large {
     padding: 48px 28px;
   }
 }
 @media (max-width: 35.9375em) {
-  .duet-modal-body {
+  .duet-modal-body,
+  .duet-modal-sticky-header {
     padding: 36px 20px;
   }
-  .duet-modal-body.duet-modal-gutter-large {
+  .duet-modal-body.duet-modal-gutter-large,
+  .duet-modal-sticky-header.duet-modal-gutter-large {
     padding: 48px 36px;
   }
 }
 @media (min-width: 36em) {
-  .duet-modal-body {
+  .duet-modal-body,
+  .duet-modal-sticky-header {
     padding: 36px;
   }
-  .duet-modal-body.duet-modal-gutter-large {
+  .duet-modal-body.duet-modal-gutter-large,
+  .duet-modal-sticky-header.duet-modal-gutter-large {
     padding: 28px 72px;
   }
 }
 @media (min-width: 48em) {
-  .duet-modal-body {
+  .duet-modal-body,
+  .duet-modal-sticky-header {
     padding: 36px 72px;
   }
-  .duet-modal-body.duet-modal-gutter-large {
+  .duet-modal-body.duet-modal-gutter-large,
+  .duet-modal-sticky-header.duet-modal-gutter-large {
     padding: 36px 72px;
   }
 }
 @media (min-width: 76.25em) {
-  .duet-modal-body {
+  .duet-modal-body,
+  .duet-modal-sticky-header {
     padding: 36px 48px 48px;
   }
-  .duet-modal-body.duet-modal-gutter-large {
+  .duet-modal-body.duet-modal-gutter-large,
+  .duet-modal-sticky-header.duet-modal-gutter-large {
     padding: 48px 94px;
   }
-  .small .duet-modal-body {
+  .small .duet-modal-body,
+  .small .duet-modal-sticky-header {
     padding: 36px 48px;
   }
 }
@@ -179,6 +253,21 @@
   text-align: center;
 }
 
+.duet-modal-sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  display: block;
+  padding-bottom: 12px;
+  text-align: left;
+  background: rgb(243, 249, 252);
+  border-bottom: 1px solid rgb(225, 227, 230);
+}
+.duet-theme-turva .duet-modal-sticky-header {
+  background: rgb(245, 245, 247);
+  border-bottom: 1px solid rgb(228, 228, 230);
+}
+
 .duet-modal-close {
   position: absolute;
   top: 12px;

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

@@ -3,7 +3,7 @@
  */
 import { h } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
-import { inheritGlobalTheme } from "../../common";
+import { hasSlot, inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
@@ -14,6 +14,7 @@ import { Teleport } from "../../utils/teleport";
 // This issue is similar to what we’ve seen in Duet Date Picker + iOS VoiceOver.
 const TRANSITION_MS = 600;
 /**
+ * @slot sticky-header - Content will be fixed to the top of the modal when scrolling, typically used with slide-up variation for e.g. a search input
  * @slot top - This is a slot that takes any content and will be displayed as the first thing in the hero area (typically an image)
  */
 export class DuetModal {
@@ -24,6 +25,7 @@ export class DuetModal {
          */
         this.modalId = createID("DuetModal");
         this.slotDefaultId = createID("DuetModal-default-slot");
+        this.hasStickyHeader = false;
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
         this.handleAndroidResizeEvents = () => {
@@ -54,6 +56,7 @@ export class DuetModal {
         this.accessibleLabel = undefined;
         this.accessibleDetails = undefined;
         this.accessibleDescription = undefined;
+        this.variation = "default";
         this.gutterSize = "medium";
         this.theme = "";
         this.heading = "";
@@ -105,6 +108,7 @@ export class DuetModal {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        this.hasStickyHeader = hasSlot(this.element, "sticky-header");
         inheritGlobalTheme(this);
     }
     componentDidLoad() {
@@ -172,6 +176,7 @@ export class DuetModal {
         var _a;
         let iconColor = "primary";
         let closeColor = "secondary";
+        const closingButton = (h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })));
         if (this.theme === "turva") {
             iconColor = "primary-turva";
             closeColor = "secondary-turva";
@@ -180,9 +185,12 @@ export class DuetModal {
                 "duet-modal-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
+                "duet-modal-slide-up": this.variation === "slide-up",
+                "duet-modal-has-sticky-header": this.hasStickyHeader,
             } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
-                "duet-modal-large": this.size === "large",
+                [this.size]: true,
+                "duet-modal-slide-up": this.variation === "slide-up",
             }, onClick: e => {
                 if (this.closeOnBlur) {
                     const source = e.target || e.srcElement;
@@ -190,7 +198,12 @@ export class DuetModal {
                         this.closeModal(e);
                     }
                 }
-            } }, h("div", { class: { "duet-modal": true, [this.size]: true } }, this.gutterSize !== "none" && h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h("div", { class: {
+            } }, h("div", { class: {
+                "duet-modal": true,
+                "duet-modal-has-sticky-header": this.hasStickyHeader,
+                [this.size]: true,
+                [this.variation]: true,
+            } }, this.gutterSize !== "none" && !this.hasStickyHeader && h("duet-spacer", null), this.hasStickyHeader ? (h("div", { class: "duet-modal-sticky-header" }, closingButton, h("slot", { name: "sticky-header" }))) : (closingButton), h("div", { class: {
                 "duet-modal-body": true,
                 "duet-modal-gutter-none": this.gutterSize === "none",
                 "duet-modal-gutter-small": this.gutterSize === "small",
@@ -401,6 +414,30 @@ export class DuetModal {
                 "reflect": false,
                 "defaultValue": "undefined"
             },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetModalVariation",
+                    "resolved": "\"default\" | \"slide-up\"",
+                    "references": {
+                        "DuetModalVariation": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx",
+                            "id": "src/components/duet-modal/duet-modal.tsx::DuetModalVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variation of the modal window."
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
             "gutterSize": {
                 "type": "string",
                 "mutable": false,