@duetds/components 6.10.2 → 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,
@@ -870,7 +901,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }
@@ -890,7 +921,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }
@@ -910,7 +941,7 @@ export class DuetChoice {
           "references": {
             "DuetChoiceEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }

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

@@ -225,7 +225,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleWeight": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         },
@@ -248,7 +248,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleHeadingFontSize": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         },
@@ -345,7 +345,7 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleToggleEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         }

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

@@ -498,7 +498,7 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           }
         },
@@ -618,7 +618,7 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           }
         }
@@ -642,7 +642,7 @@ export class DuetCombobox {
             },
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
             }
           },
           "return": "Promise<string>"

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -99,7 +99,7 @@ export class DuetCookieConsent {
           "references": {
             "DuetCookieConsentEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx"
             }
           }
         }