@duetds/components 6.10.1 → 6.10.3

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

@@ -0,0 +1,320 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+import { createID } from "../../utils/create-id";
+export class DuetChip {
+  constructor() {
+    /**
+     * Own Properties.
+     */
+    this.chipId = createID("DuetChip");
+    /**
+     * Component event handling.
+     */
+    this.onFocus = (ev) => {
+      this.focus = true;
+      this.duetFocus.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-chip",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.focus = false;
+      this.duetBlur.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-chip",
+      });
+    };
+    this.toggleChecked = (ev) => {
+      this.checked = !this.checked;
+      this.duetChange.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-chip",
+      });
+    };
+    this.remove = (ev) => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      this.element.remove();
+    };
+    this.focus = false;
+    this.accessibleLabel = undefined;
+    this.variation = "button";
+    this.icon = "";
+    this.theme = "";
+    this.identifier = undefined;
+    this.value = undefined;
+    this.name = undefined;
+    this.checked = false;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  render() {
+    const identifier = this.identifier || this.chipId;
+    const classes = {
+      "duet-chip-container": true,
+      [`duet-chip-${this.variation}`]: true,
+      "duet-chip-focus": this.focus,
+      "duet-chip-has-icon": !!this.icon,
+      "duet-theme-turva": this.theme === "turva",
+      "duet-chip-filter-checked": this.variation === "filter" && this.checked,
+    };
+    const focusHandlers = {
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+    };
+    return (h(Host, null, this.variation === "button" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "xx-small", margin: "none", color: "currentColor" }))), h("slot", null)))), this.variation === "input" && (h("div", { class: classes }, h("button", Object.assign({ id: identifier, "aria-label": this.accessibleLabel }, focusHandlers), h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "xx-small", margin: "none", color: "currentColor" }))), h("slot", null)), h("button", { class: "duet-chip-remove-button", onClick: this.remove }, h("duet-icon", { name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("div", { class: classes }, h("input", Object.assign({ id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onChange: this.toggleChecked }, focusHandlers)), h("label", { htmlFor: identifier }, h("div", { class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { name: this.icon, size: "xx-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"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-chip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-chip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the chip that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetChipVariation",
+          "resolved": "\"button\" | \"filter\" | \"input\"",
+          "references": {
+            "DuetChipVariation": {
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variation of the chip.\nButton should be used to present a list of actions or suggestions. It behaves like a button and must be used\ntogether with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be\nused with a value. Input represents items input by the user, and the chip can be removed with a click.\nWARNING: Input variation is still work-in-progress and subject to change."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"button\""
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display to the left of the chip content."
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the button."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds a unique identifier for the chip."
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the html input when used as filter, or the button's value."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name attribute of the html input (filter) or button."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Checked state of the filter chip."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focus": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetChange",
+        "name": "duetChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the checked property has changed (applicable only for the filter variation)."
+        },
+        "complexType": {
+          "original": "DuetChipEvent",
+          "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-chip\"; }",
+          "references": {
+            "DuetChipEvent": {
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "duetFocus",
+        "name": "duetFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the chip receives focus."
+        },
+        "complexType": {
+          "original": "DuetChipEvent",
+          "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-chip\"; }",
+          "references": {
+            "DuetChipEvent": {
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+            }
+          }
+        }
+      }, {
+        "method": "duetBlur",
+        "name": "duetBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the chip loses focus."
+        },
+        "complexType": {
+          "original": "DuetChipEvent",
+          "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-chip\"; }",
+          "references": {
+            "DuetChipEvent": {
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-chip/duet-chip.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -151,21 +151,6 @@
 .duet-theme-turva .info .duet-choice-label {
   border-color: rgb(228, 228, 230);
 }
-.duet-choice-label:not(.no-hover):hover {
-  border-color: rgb(144, 149, 153);
-}
-.duet-choice-label:not(.no-hover):hover .duet-checkmark-container {
-  border-color: rgb(144, 149, 153);
-}
-.duet-theme-turva .duet-choice-label:not(.no-hover):hover {
-  border-color: rgb(116, 116, 117);
-}
-.duet-theme-turva .duet-choice-label:not(.no-hover):hover .duet-checkmark-container {
-  border-color: rgb(116, 116, 117);
-}
-.duet-theme-turva .info .duet-choice-label:not(.no-hover):hover {
-  border-color: rgb(116, 116, 117);
-}
 .duet-choice-label:active {
   opacity: 0.75;
   transition: none !important;
@@ -186,12 +171,29 @@
 .duet-theme-turva .checked .duet-choice-label .duet-checkmark-container {
   border-color: rgb(198, 12, 48);
 }
-.checked.collapsible .duet-choice-label {
+.checked.collapsible .duet-choice-label, .collapsible-force-expanded.collapsible .duet-choice-label {
+  padding-bottom: calc(1rem + 2px);
   border-bottom: 0 !important;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
+:host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) {
+  border-color: rgb(144, 149, 153);
+}
+:host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) .duet-checkmark-container {
+  border-color: rgb(144, 149, 153);
+}
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) {
+  border-color: rgb(116, 116, 117);
+}
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) .duet-checkmark-container {
+  border-color: rgb(116, 116, 117);
+}
+.duet-theme-turva .info :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) {
+  border-color: rgb(116, 116, 117);
+}
+
 input:focus {
   outline: 0;
 }
@@ -341,7 +343,6 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 .duet-choice-card-info, .duet-choice-card-collapsible {
   padding: 20px !important;
   position: relative;
-  z-index: 200;
   width: 100%;
   font-weight: 400;
   color: rgb(0, 41, 77);
@@ -366,21 +367,33 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 }
 .duet-choice-card-collapsible {
   background: rgb(255, 255, 255);
-  border: 2px solid rgb(0, 119, 179);
+  border: 2px solid rgb(225, 227, 230);
   border-top: 0;
 }
 .duet-choice-card-collapsible.duet-theme-turva {
   background: rgb(255, 255, 255);
+  border-color: rgb(228, 228, 230);
+}
+.duet-choice-card-collapsible.checked {
+  border-color: rgb(0, 119, 179);
+}
+.duet-choice-card-collapsible.checked.duet-theme-turva {
   border-color: rgb(23, 28, 58);
 }
 .duet-choice-card-collapsible-disabled {
   background: rgb(245, 248, 250);
   border-color: rgb(225, 227, 230);
 }
+.duet-choice-card-collapsible-disabled.checked {
+  border-color: rgb(225, 227, 230);
+}
 .duet-choice-card-collapsible-disabled.duet-theme-turva {
   background: rgb(245, 245, 247);
   border-color: rgb(228, 228, 230);
 }
+.duet-choice-card-collapsible-disabled.duet-theme-turva.checked {
+  border-color: rgb(228, 228, 230);
+}
 .duet-choice-card-info {
   font-size: 0.875rem;
   line-height: 1.5;
@@ -392,6 +405,13 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(228, 228, 230);
 }
 
+:host(:not(.no-hover):not(.disabled):hover) .duet-choice-card-collapsible:not(.checked) {
+  border-color: rgb(144, 149, 153);
+}
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-card-collapsible:not(.checked) {
+  border-color: rgb(116, 116, 117);
+}
+
 .duet-choice-info-toggle {
   display: flex;
   flex-shrink: 0;
@@ -413,6 +433,9 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-bottom-color: transparent;
   border-bottom-right-radius: 0;
 }
+.duet-theme-turva .duet-choice-info-toggle[aria-expanded=true] {
+  background: rgb(245, 245, 247);
+}
 .duet-choice-info-toggle[disabled] {
   pointer-events: none;
   background: rgb(245, 248, 250) !important;
@@ -434,9 +457,6 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 :host(.user-is-tabbing) .duet-choice-info-toggle:focus {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
-.duet-choice-label:not(.no-hover):hover .duet-choice-info-toggle {
-  border-left-color: rgb(144, 149, 153);
-}
 .checked .duet-choice-info-toggle {
   border-left-color: rgb(0, 119, 179) !important;
 }
@@ -450,6 +470,13 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   color: rgb(198, 12, 48);
 }
 
+:host(:not(.no-hover):not(.disabled):hover) .duet-choice-label .duet-choice-info-toggle {
+  border-left-color: rgb(144, 149, 153);
+}
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label .duet-choice-info-toggle {
+  border-left-color: rgb(116, 116, 117);
+}
+
 .duet-choice-input {
   position: absolute !important;
   width: 100%;

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

@@ -71,7 +71,7 @@ export class DuetChoice {
     this.toggleChecked = ev => {
       ev.preventDefault();
       ev.stopPropagation();
-      if (this.disabled || this.groupDisabled) {
+      if (this.getDisabled()) {
         return;
       }
       this.isInfoOpen = false;
@@ -112,6 +112,7 @@ export class DuetChoice {
     this.name = undefined;
     this.checked = false;
     this.collapsible = false;
+    this.collapsibleForceExpanded = false;
     this.margin = "auto";
     this.icon = "";
     this.expand = false;
@@ -209,9 +210,16 @@ export class DuetChoice {
     }
     return null;
   }
+  getDisabled() {
+    return this.disabled || this.groupDisabled;
+  }
+  getExpanded() {
+    return this.checked || this.collapsibleForceExpanded;
+  }
   getClassNames() {
     if (this.hasInfo && !this.collapsible) {
       return {
+        checked: this.checked,
         "duet-choice-card-info": true,
         "duet-choice-card-info-expanded": this.isInfoOpen,
         "duet-choice-card-collapsed": !this.isInfoOpen,
@@ -220,14 +228,16 @@ export class DuetChoice {
     }
     if (!this.hasInfo && this.collapsible) {
       return {
+        checked: this.checked,
         "duet-choice-card-collapsible": true,
-        "duet-choice-card-collapsible-expanded": this.checked,
-        "duet-choice-card-collapsed": !this.checked,
-        "duet-choice-card-collapsible-disabled": this.disabled || this.groupDisabled ? true : false,
+        "duet-choice-card-collapsible-expanded": this.getExpanded(),
+        "duet-choice-card-collapsed": !this.getExpanded(),
+        "duet-choice-card-collapsible-disabled": this.getDisabled(),
         "duet-theme-turva": this.theme === "turva",
       };
     }
     return {
+      checked: this.checked,
       "duet-choice-default-slot": true,
     };
   }
@@ -245,6 +255,8 @@ export class DuetChoice {
         "duet-m-0": this.margin === "none",
         "duet-expand": this.expand,
         "duet-theme-turva": this.theme === "turva",
+        "no-hover": this.isHovering,
+        disabled: this.getDisabled(),
       } }, h("div", { class: {
         "duet-choice-card-flextainer": true,
         "duet-theme-turva": this.theme === "turva",
@@ -255,13 +267,14 @@ export class DuetChoice {
         checked: this.checked,
         info: this.isInfoOpen,
         collapsible: this.collapsible,
+        "collapsible-force-expanded": this.collapsibleForceExpanded,
         "duet-p-0": this.padding === "none",
-      } }, h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, choiceGroupLabel && h("duet-visually-hidden", null, choiceGroupLabel, ", "), h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("slot", { name: "additional" })))), h("div", null, h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+      } }, h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.getDisabled(), required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, choiceGroupLabel && h("duet-visually-hidden", null, choiceGroupLabel, ", "), h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("slot", { name: "additional" })))), h("div", null, h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
         "duet-choice-info-toggle": true,
         "duet-theme-turva": this.theme === "turva",
-      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.disabled || this.groupDisabled, "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
-        "duet-choice-section-visible": this.collapsible ? this.checked : this.isInfoOpen,
-        "duet-choice-section-hidden": this.collapsible ? !this.checked : !this.isInfoOpen,
+      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
+        "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
+        "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
       } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", null, h("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, h("slot", { name: "info" })), h("slot", null))) : (h("span", null, h("slot", null)))), this.isInfoOpen && h(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
   }
   static get is() { return "duet-choice"; }
@@ -596,6 +609,24 @@ export class DuetChoice {
         "reflect": false,
         "defaultValue": "false"
       },
+      "collapsibleForceExpanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This attribute works only when the 'collapsible' attribute is set to true.\nIt maintains the visibility of the additional content section, regardless of whether the input is checked or not."
+        },
+        "attribute": "collapsible-force-expanded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "margin": {
         "type": "string",
         "mutable": false,

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

@@ -11,6 +11,10 @@
   appearance: none;
 }
 
+::slotted([slot=after-heading]) {
+  display: inline-block;
+}
+
 :host {
   box-sizing: border-box;
   padding: 0;
@@ -78,6 +82,9 @@
   cursor: pointer;
   border-radius: 4px;
 }
+.duet-collapsible-heading.full-width {
+  width: 100%;
+}
 .duet-collapsible-heading.duet-collapsible-heading-centered {
   margin: auto;
 }
@@ -89,13 +96,14 @@
   color: rgb(23, 28, 58);
 }
 .duet-collapsible-heading .duet-collapsible-heading-content {
-  flex: 0 auto;
   min-width: 0;
 }
 .duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content + div {
-  flex: 1 0 auto;
   margin-left: 16px;
 }
+.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content + div.float-right {
+  margin-left: auto;
+}
 .duet-collapsible-heading:focus {
   outline: 0;
 }

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

@@ -10,6 +10,7 @@ import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { sanitizeString } from "../../utils/string-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
+ * @part duet-collapsible-after-heading - piercing selector for styling the after heading
  * @part duet-collapsible-content - piercing selector for styling the content
  * @slot after-heading - Content after the heading can be for example badges.
  */
@@ -65,6 +66,7 @@ export class DuetCollapsible {
     this.theme = "";
     this.accessibleLabel = undefined;
     this.heading = "";
+    this.headingFullWidth = false;
     this.centerHeading = false;
     this.headingWeight = "semibold";
     this.headingSize = undefined;
@@ -103,7 +105,8 @@ export class DuetCollapsible {
         "duet-theme-turva": this.theme === "turva",
         "duet-collapsible-normal-weight": this.headingWeight === "normal",
         "has-after-heading": this.hasAfterHeading,
-      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", null, h("slot", { name: "after-heading" }))))), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", null))));
+        "full-width": this.headingFullWidth,
+      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.accessibleLabel, "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { part: "duet-collapsible-after-heading" }, h("slot", { name: "after-heading" }))))), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", null))));
   }
   static get is() { return "duet-collapsible"; }
   static get encapsulation() { return "shadow"; }
@@ -177,6 +180,24 @@ export class DuetCollapsible {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "headingFullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes collapsible heading full width"
+        },
+        "attribute": "heading-full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "centerHeading": {
         "type": "boolean",
         "mutable": false,