@uh-design-system/component-library 1.7.0 → 1.7.1-rc.1

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css

@@ -1,23 +1,23 @@
-.ds-accordion__pA2cRq {
+.ds-accordion__0apwgA {
   box-sizing: border-box;
   position: relative;
 }
-.ds-accordion__pA2cRq__title {
+.ds-accordion__0apwgA__title {
   position: relative;
   display: flex;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-right: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__pA2cRq__title:not(.ds-accordion__pA2cRq__title--hide-top-border) .ds-accordion__pA2cRq__open-button {
+.ds-accordion__0apwgA__title:not(.ds-accordion__0apwgA__title--hide-top-border) .ds-accordion__0apwgA__open-button {
   border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__pA2cRq__title--hide-right-border {
+.ds-accordion__0apwgA__title--hide-right-border {
   border-right: 0;
 }
-.ds-accordion__pA2cRq__title--hide-left-border {
+.ds-accordion__0apwgA__title--hide-left-border {
   border-left: 0;
 }
-.ds-accordion__pA2cRq__title--border-aligned.ds-accordion__pA2cRq__title--with-background::before {
+.ds-accordion__0apwgA__title--border-aligned.ds-accordion__0apwgA__title--with-background::before {
   content: "";
   position: absolute;
   display: block;
@@ -26,7 +26,7 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pA2cRq__title--border-aligned.ds-accordion__pA2cRq__title--with-background::after {
+.ds-accordion__0apwgA__title--border-aligned.ds-accordion__0apwgA__title--with-background::after {
   content: "";
   position: absolute;
   display: block;
@@ -35,43 +35,43 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pA2cRq__title--with-background .ds-accordion__pA2cRq__open-button:not(.ds-accordion__pA2cRq__open-button--icon-button) {
+.ds-accordion__0apwgA__title--with-background .ds-accordion__0apwgA__open-button:not(.ds-accordion__0apwgA__open-button--icon-button) {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__pA2cRq__title--with-background:has(.ds-accordion__pA2cRq__open-button.ds-accordion__pA2cRq__open-button--icon-button) {
+.ds-accordion__0apwgA__title--with-background:has(.ds-accordion__0apwgA__open-button.ds-accordion__0apwgA__open-button--icon-button) {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__pA2cRq__title:has(.ds-accordion__pA2cRq__open-button:hover:not(.ds-accordion__pA2cRq__open-button--icon-button)) .ds-accordion__pA2cRq__open-button-container::after {
+.ds-accordion__0apwgA__title:has(.ds-accordion__0apwgA__open-button:hover:not(.ds-accordion__0apwgA__open-button--icon-button)) .ds-accordion__0apwgA__open-button-container::after {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-accordion__pA2cRq__title:has(.ds-accordion__pA2cRq__open-button:active:not(.ds-accordion__pA2cRq__open-button--icon-button)) .ds-accordion__pA2cRq__open-button-container::after {
+.ds-accordion__0apwgA__title:has(.ds-accordion__0apwgA__open-button:active:not(.ds-accordion__0apwgA__open-button--icon-button)) .ds-accordion__0apwgA__open-button-container::after {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-accordion__pA2cRq__header-slot {
+.ds-accordion__0apwgA__header-slot {
   order: 2;
   position: relative;
   display: block;
   width: 100%;
 }
-.ds-accordion__pA2cRq__header-slot--icon-button {
+.ds-accordion__0apwgA__header-slot--icon-button {
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__pA2cRq__header-slot--hide-top-border {
+.ds-accordion__0apwgA__header-slot--hide-top-border {
   border-top: 0;
 }
-.ds-accordion__pA2cRq__header-slot--hide-bottom-border {
+.ds-accordion__0apwgA__header-slot--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__pA2cRq__open-button-container {
+.ds-accordion__0apwgA__open-button-container {
   position: relative;
   width: auto;
 }
-.ds-accordion__pA2cRq__open-button-container:has(.ds-accordion__pA2cRq__open-button:not(.ds-accordion__pA2cRq__open-button--icon-button)) {
+.ds-accordion__0apwgA__open-button-container:has(.ds-accordion__0apwgA__open-button:not(.ds-accordion__0apwgA__open-button--icon-button)) {
   width: 100%;
 }
-.ds-accordion__pA2cRq__open-button-container::after {
+.ds-accordion__0apwgA__open-button-container::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -79,10 +79,10 @@
   pointer-events: none;
   z-index: 1;
 }
-.ds-accordion__pA2cRq__open-button-container:has(.ds-accordion__pA2cRq__open-button--border-aligned:not(.ds-accordion__pA2cRq__open-button--icon-button))::after {
+.ds-accordion__0apwgA__open-button-container:has(.ds-accordion__0apwgA__open-button--border-aligned:not(.ds-accordion__0apwgA__open-button--icon-button))::after {
   inset-inline: calc(-1 * var(--ds-spacing-small));
 }
-.ds-accordion__pA2cRq__open-button {
+.ds-accordion__0apwgA__open-button {
   all: unset;
   position: relative;
   box-sizing: border-box;
@@ -101,37 +101,37 @@
   line-height: var(--ds-lineHeight-large);
   padding: calc(var(--ds-spacing-xSmall) - var(--ds-borderWidth-hairline)) var(--ds-spacing-xSmall);
 }
-.ds-accordion__pA2cRq__open-button:focus-visible {
+.ds-accordion__0apwgA__open-button:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 0);
 }
-.ds-accordion__pA2cRq__open-button:hover {
+.ds-accordion__0apwgA__open-button:hover {
   cursor: pointer;
 }
-.ds-accordion__pA2cRq__open-button:focus-visible {
+.ds-accordion__0apwgA__open-button:focus-visible {
   z-index: 1;
 }
-.ds-accordion__pA2cRq__open-button--default {
+.ds-accordion__0apwgA__open-button--default {
   font-size: var(--ds-fontSize-16);
 }
 @media (min-width: 60rem) {
-  .ds-accordion__pA2cRq__open-button--default {
+  .ds-accordion__0apwgA__open-button--default {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-accordion__pA2cRq__open-button--compact {
+.ds-accordion__0apwgA__open-button--compact {
   font-size: var(--ds-fontSize-14);
 }
 @media (min-width: 60rem) {
-  .ds-accordion__pA2cRq__open-button--compact {
+  .ds-accordion__0apwgA__open-button--compact {
     font-size: var(--ds-fontSize-16);
   }
 }
-.ds-accordion__pA2cRq__open-button--border-aligned:not(.ds-accordion__pA2cRq__open-button--icon-button) {
+.ds-accordion__0apwgA__open-button--border-aligned:not(.ds-accordion__0apwgA__open-button--icon-button) {
   padding-inline: 0;
 }
-.ds-accordion__pA2cRq__open-button--border-aligned:not(.ds-accordion__pA2cRq__open-button--icon-button)::before {
+.ds-accordion__0apwgA__open-button--border-aligned:not(.ds-accordion__0apwgA__open-button--icon-button)::before {
   content: "";
   position: absolute;
   display: block;
@@ -140,7 +140,7 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pA2cRq__open-button--border-aligned:not(.ds-accordion__pA2cRq__open-button--icon-button)::after {
+.ds-accordion__0apwgA__open-button--border-aligned:not(.ds-accordion__0apwgA__open-button--icon-button)::after {
   content: "";
   position: absolute;
   display: block;
@@ -149,82 +149,85 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pA2cRq__title--with-background .ds-accordion__pA2cRq__open-button--border-aligned:not(.ds-accordion__pA2cRq__open-button--icon-button)::before, .ds-accordion__pA2cRq__title--with-background .ds-accordion__pA2cRq__open-button--border-aligned:not(.ds-accordion__pA2cRq__open-button--icon-button)::after {
+.ds-accordion__0apwgA__title--with-background .ds-accordion__0apwgA__open-button--border-aligned:not(.ds-accordion__0apwgA__open-button--icon-button)::before, .ds-accordion__0apwgA__title--with-background .ds-accordion__0apwgA__open-button--border-aligned:not(.ds-accordion__0apwgA__open-button--icon-button)::after {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__pA2cRq__open-button--hide-bottom-border {
+.ds-accordion__0apwgA__open-button--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__pA2cRq__open-button--icon-button {
+.ds-accordion__0apwgA__open-button--icon-button {
   display: inline-flex;
   width: auto;
   height: 100%;
   order: 1;
 }
-.ds-accordion__pA2cRq__open-button--icon-button:hover {
+.ds-accordion__0apwgA__open-button--icon-button:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-accordion__pA2cRq__open-button--icon-button:active {
+.ds-accordion__0apwgA__open-button--icon-button:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-accordion__pA2cRq__open-button__icon--default {
+.ds-accordion__0apwgA__open-button__icon--default {
   padding-block: var(--ds-spacing-3xSmall);
 }
-.ds-accordion__pA2cRq__open-button__header-slot {
+.ds-accordion__0apwgA__open-button__icon--expanded {
+  transform: rotate(180deg);
+}
+.ds-accordion__0apwgA__open-button__header-slot {
   display: inline-block;
   width: 100%;
 }
-.ds-accordion__pA2cRq__open-button__header-slot--default {
+.ds-accordion__0apwgA__open-button__header-slot--default {
   padding-block: var(--ds-spacing-3xSmall);
 }
 @media (min-width: 60rem) {
-  .ds-accordion__pA2cRq__open-button__header-slot--default {
+  .ds-accordion__0apwgA__open-button__header-slot--default {
     padding-block: var(--ds-spacing-4xSmall);
   }
 }
-.ds-accordion__pA2cRq__open-button__header-slot--compact {
+.ds-accordion__0apwgA__open-button__header-slot--compact {
   padding-block: 0.0625rem; /* 1px */
 }
 @media (min-width: 60rem) {
-  .ds-accordion__pA2cRq__open-button__header-slot--compact {
+  .ds-accordion__0apwgA__open-button__header-slot--compact {
     padding-block: 0;
   }
 }
-.ds-accordion__pA2cRq__panel {
+.ds-accordion__0apwgA__panel {
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   border-right: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__pA2cRq__panel--hide-right-border {
+.ds-accordion__0apwgA__panel--hide-right-border {
   border-right: 0;
 }
-.ds-accordion__pA2cRq__panel--hide-left-border {
+.ds-accordion__0apwgA__panel--hide-left-border {
   border-left: 0;
 }
-.ds-accordion__pA2cRq__panel--expanded {
+.ds-accordion__0apwgA__panel--expanded {
   display: block;
 }
-.ds-accordion__pA2cRq__panel--with-background {
+.ds-accordion__0apwgA__panel--with-background {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__pA2cRq ::slotted([slot=header]) {
+.ds-accordion__0apwgA ::slotted([slot=header]) {
   color: var(--ds-textColor-default);
 }
-.ds-accordion__pA2cRq__content {
+.ds-accordion__0apwgA__content {
   position: relative;
   color: var(--ds-textColor-default);
   padding: var(--ds-accordion-content-padding, var(--ds-spacing-2xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall));
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
-.ds-accordion__pA2cRq__content--hide-bottom-border {
+.ds-accordion__0apwgA__content--hide-bottom-border {
   border-bottom: 0;
 }
-.ds-accordion__pA2cRq__content--has-close-button {
+.ds-accordion__0apwgA__content--has-close-button {
   padding-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-accordion__pA2cRq__content--border-aligned {
+.ds-accordion__0apwgA__content--border-aligned {
   padding-inline: 0;
 }
-.ds-accordion__pA2cRq__content--border-aligned::before {
+.ds-accordion__0apwgA__content--border-aligned::before {
   content: "";
   position: absolute;
   display: block;
@@ -233,7 +236,7 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pA2cRq__content--border-aligned::after {
+.ds-accordion__0apwgA__content--border-aligned::after {
   content: "";
   position: absolute;
   display: block;
@@ -242,10 +245,10 @@
   bottom: 0;
   width: var(--ds-spacing-small);
 }
-.ds-accordion__pA2cRq__content--with-background::before, .ds-accordion__pA2cRq__content--with-background::after {
+.ds-accordion__0apwgA__content--with-background::before, .ds-accordion__0apwgA__content--with-background::after {
   background-color: var(--ds-bgColor-neutralLight);
 }
-.ds-accordion__pA2cRq__close-button {
+.ds-accordion__0apwgA__close-button {
   display: flex;
   flex-direction: row;
   padding-block-start: var(--ds-spacing-2xSmall);
@@ -253,16 +256,16 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   width: max-content;
 }
-.ds-accordion__pA2cRq {
+.ds-accordion__0apwgA {
   /*
     Utility styles
   */
 }
-.ds-accordion__pA2cRq ::slotted(div[slot=header][class*=toc]) {
+.ds-accordion__0apwgA ::slotted(div[slot=header][class*=toc]) {
   display: flex;
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-accordion__pA2cRq ::slotted(ul[slot=content][class*=toc]) {
+.ds-accordion__0apwgA ::slotted(ul[slot=content][class*=toc]) {
   display: flex;
   flex-direction: column;
   gap: var(--ds-spacing-small);

package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js

@@ -14,6 +14,7 @@ export class DsAccordion extends Mixin(componentFactory('ds-accordion', { stopRo
     dsVariant = 'default';
     dsBorderAligned = false;
     dsOpenByDefault = false;
+    dsOpen;
     dsId = this.getUniqueId();
     dsHeadingLevel = 2;
     dsUseCloseButton = false;
@@ -55,7 +56,10 @@ export class DsAccordion extends Mixin(componentFactory('ds-accordion', { stopRo
         }
     }
     componentWillLoad() {
-        if (this.dsOpenByDefault) {
+        if (this.dsOpen !== undefined) {
+            this.isExpanded = this.dsOpen;
+        }
+        else if (this.dsOpenByDefault) {
             this.isExpanded = true;
         }
         this.inheritedAttributes = {
@@ -66,6 +70,9 @@ export class DsAccordion extends Mixin(componentFactory('ds-accordion', { stopRo
     componentDidLoad() {
         this.componentMounted();
     }
+    dsOpenObserver(newValue) {
+        this.isExpanded = newValue;
+    }
     watchHandler(isExpanded) {
         if (!isExpanded && this.shouldMoveFocus && this.headerButtonRef) {
             this.headerButtonRef.focus();
@@ -115,25 +122,27 @@ export class DsAccordion extends Mixin(componentFactory('ds-accordion', { stopRo
             }) }, h("slot", { name: "header" }))), h("div", { class: classNames(`${baseClass}__open-button-container`) }, h("button", { class: classNames(`${baseClass}__open-button`, `${baseClass}__open-button--${this.dsVariant}`, `${baseClass}__open-button--${this.dsHeadingVariant}`, {
                 [`${baseClass}__open-button--border-aligned`]: this.dsBorderAligned,
                 [`${baseClass}__open-button--hide-bottom-border`]: getOpenButtonHideBottomBorder(),
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.dsId}-panel`, "aria-describedby": this.dsAriaDescribedBy, "aria-labelledby": this.ariaLabelledBy, id: this.dsId, ref: el => (this.headerButtonRef = el), type: "button" }, h("span", { class: classNames(`${baseClass}__open-button__icon`, `${baseClass}__open-button__icon--${this.dsVariant}`), "aria-hidden": "true" }, h(this.DsIcon, { dsSize: "1.5rem", dsName: this.isExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.dsHeadingVariant === 'button' && (h("span", { class: classNames(`${baseClass}__open-button__header-slot`, `${baseClass}__open-button__header-slot--${this.dsVariant}`) }, h("slot", { name: "header" })))))));
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.dsId}-panel`, "aria-describedby": this.dsAriaDescribedBy, "aria-labelledby": this.ariaLabelledBy, id: this.dsId, ref: el => (this.headerButtonRef = el), type: "button" }, h("span", { class: classNames(`${baseClass}__open-button__icon`, `${baseClass}__open-button__icon--${this.dsVariant}`, {
+                [`${baseClass}__open-button__icon--expanded`]: this.isExpanded,
+            }), "aria-hidden": "true" }, h(this.DsIcon, { dsSize: "1.5rem", dsName: "keyboard_arrow_down" })), this.dsHeadingVariant === 'button' && (h("span", { class: classNames(`${baseClass}__open-button__header-slot`, `${baseClass}__open-button__header-slot--${this.dsVariant}`) }, h("slot", { name: "header" })))))));
     }
     render() {
         const baseClass = cx('ds-accordion');
-        return (h("div", { key: 'b4bf9b3c93b32b3e897b86fe1a11393ce2935422', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
+        return (h("div", { key: 'ba30f85cb9586737adcc1cdcba107968cefa5f4f', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`, {
                 [`${baseClass}--expanded`]: this.isExpanded,
-            }), ...this.inheritedAttributes }, h("div", { key: '8a6c1b4fee1a31e99a3263a39a6d9033415220ff', class: `${baseClass}__item` }, this.renderHeading(baseClass), h("div", { key: 'c3e5be58e92e67905de1360e1be6a0513c61e8a6', id: `${this.dsId}-panel`, role: "region", "aria-labelledby": this.dsId, class: classNames(`${baseClass}__panel`, `${baseClass}__panel--${this.dsVariant}`, {
+            }), ...this.inheritedAttributes }, h("div", { key: '68cb035a5c09c32ce81457c34a39da18d54be7e3', class: `${baseClass}__item` }, this.renderHeading(baseClass), h("div", { key: '7c83e1ad4887068d52317821202f4d1859d96ab6', id: `${this.dsId}-panel`, role: "region", "aria-labelledby": this.dsId, class: classNames(`${baseClass}__panel`, `${baseClass}__panel--${this.dsVariant}`, {
                 [`${baseClass}__panel--expanded`]: this.isExpanded,
                 [`${baseClass}__panel--with-background`]: this.dsContentHasBackground,
                 [`${baseClass}__panel--hide-right-border`]: this.dsHideRightBorder || this.dsHideContentBorders,
                 [`${baseClass}__panel--hide-left-border`]: this.dsHideLeftBorder || this.dsHideContentBorders,
-            }), hidden: !this.isExpanded }, h("div", { key: '52968968a33d30bf247616a7a52ac71b41fb92c5', class: classNames(`${baseClass}__content`, {
+            }), hidden: !this.isExpanded }, h("div", { key: '72ecb153504477c122b63d5c7d5ba2835268155c', class: classNames(`${baseClass}__content`, {
                 'ds-bodytext-lg': this.dsVariant === 'default',
                 'ds-bodytext-md': this.dsVariant === 'compact',
                 [`${baseClass}__content--border-aligned`]: this.dsBorderAligned,
                 [`${baseClass}__content--with-background`]: this.dsContentHasBackground,
                 [`${baseClass}__content--hide-bottom-border`]: this.dsHideBottomBorder || this.dsHideContentBorders,
                 [`${baseClass}__content--has-close-button`]: this.dsUseCloseButton,
-            }) }, h("slot", { key: '5b21aec4e5ddbd947270edf88c158b0a25845473', name: "content" }), this.dsUseCloseButton && (h(this.DsButton, { key: 'b5dcddc2f1d7cbcf7fc8c1508f05f2b480a8f475', id: `${this.dsId}-close-button`, class: `${baseClass}__close-button`, dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsText: this.dsCloseButtonLabel || this.close, dsSize: "small", dsType: "button" })))))));
+            }) }, h("slot", { key: 'cfd55b9a209a601413efaaf4f3f63f78d09ef676', name: "content" }), this.dsUseCloseButton && (h(this.DsButton, { key: '56f7ae4b113fab7b9c2d06718b5359b1adb246d9', id: `${this.dsId}-close-button`, class: `${baseClass}__close-button`, dsVariant: "supplementary", dsColour: "black", dsIcon: "keyboard_arrow_up", dsIconPosition: "start", onClick: this.handleClick, onKeyDown: this.handleKeyDown, dsText: this.dsCloseButtonLabel || this.close, dsSize: "small", dsType: "button" })))))));
     }
     static get is() { return "ds-accordion"; }
     static get encapsulation() { return "scoped"; }
@@ -209,6 +218,25 @@ export class DsAccordion extends Mixin(componentFactory('ds-accordion', { stopRo
                 "attribute": "ds-open-by-default",
                 "defaultValue": "false"
             },
+            "dsOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Programmatically open or close the accordion. Takes precedence over `dsOpenByDefault` when set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-open"
+            },
             "dsId": {
                 "type": "string",
                 "mutable": false,
@@ -548,6 +576,9 @@ export class DsAccordion extends Mixin(componentFactory('ds-accordion', { stopRo
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "dsOpen",
+                "methodName": "dsOpenObserver"
+            }, {
                 "propName": "isExpanded",
                 "methodName": "watchHandler"
             }];

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list/ds-action-list.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-action-list__pA2cRq {
+.ds-action-list__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list/ds-action-list.js

@@ -203,7 +203,7 @@ export class DsActionList extends Mixin(componentFactory('ds-action-list')) {
     }
     render() {
         const baseClass = cx('ds-action-list');
-        return (h(Host, { key: 'ad2a401bd2892f234e8a0600f62bb07053ddc97f', id: this.listId, class: baseClass, role: this.dsRole, ...ifDefined('aria-label', this.ariaLabel), ...ifDefined('aria-labelledby', this.ariaLabelledby) }, h("slot", { key: 'e4b11172e27e84fffeda6b1112a4f6209b044ba0' })));
+        return (h(Host, { key: '63b9281969827bf97f58963ab3e6ca5fcca037eb', id: this.listId, class: baseClass, role: this.dsRole, ...ifDefined('aria-label', this.ariaLabel), ...ifDefined('aria-labelledby', this.ariaLabelledby) }, h("slot", { key: 'aae50614a86d5187bcdb51fded661dc77d44f99d' })));
     }
     static get is() { return "ds-action-list"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list-divider/ds-action-list-divider.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { declareComponentDependencies } from "../../../../utils/utils";
 export class DsActionListDivider {
     render() {
-        return h("ds-divider", { key: 'd91af7c43417818ee62e539baf392e05d557ae38', dsVariant: "accessible", dsOrientation: "horizontal" });
+        return h("ds-divider", { key: '63f4cf4f6807ac074f5502a2e07d5c33efa91aa3', dsVariant: "accessible", dsOrientation: "horizontal" });
     }
     static get is() { return "ds-action-list-divider"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list-group-title/ds-action-list-group-title.css

@@ -8,7 +8,7 @@
   display: block;
 }
 
-.ds-action-list-group-title__pA2cRq {
+.ds-action-list-group-title__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list-group-title/ds-action-list-group-title.js

@@ -9,7 +9,7 @@ export class DsActionListGroupTitle extends Mixin(componentFactory('ds-action-li
     dsId = this.getUniqueId();
     render() {
         const baseClass = cx('ds-action-list-group-title');
-        return (h(Host, { key: 'b6d3598160986833cd9db74d03bba1d89e834301', id: this.dsId, class: baseClass }, this.dsTitle));
+        return (h(Host, { key: '640f21fa122df6835ea71b54ccd0c03f3e493a5e', id: this.dsId, class: baseClass }, this.dsTitle));
     }
     static get is() { return "ds-action-list-group-title"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list-item/ds-action-list-item.css

@@ -8,7 +8,7 @@
   display: contents;
 }
 
-.ds-action-list-item__pA2cRq {
+.ds-action-list-item__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -32,72 +32,72 @@
   min-height: 2.75rem;
   text-decoration: none;
 }
-.ds-action-list-item__pA2cRq:hover:not(:disabled):not(.ds-action-list-item__pA2cRq--unavailable) {
+.ds-action-list-item__0apwgA:hover:not(:disabled):not(.ds-action-list-item__0apwgA--unavailable) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-action-list-item__pA2cRq:active:not(:disabled):not(.ds-action-list-item__pA2cRq--unavailable) {
+.ds-action-list-item__0apwgA:active:not(:disabled):not(.ds-action-list-item__0apwgA--unavailable) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-action-list-item__pA2cRq:focus-visible:not(:disabled) {
+.ds-action-list-item__0apwgA:focus-visible:not(:disabled) {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1);
 }
-.ds-action-list-item__pA2cRq:disabled, .ds-action-list-item__pA2cRq.ds-action-list-item__pA2cRq--disabled {
+.ds-action-list-item__0apwgA:disabled, .ds-action-list-item__0apwgA.ds-action-list-item__0apwgA--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-action-list-item__pA2cRq.ds-action-list-item__pA2cRq--unavailable {
+.ds-action-list-item__0apwgA.ds-action-list-item__0apwgA--unavailable {
   color: var(--ds-textColor-secondary);
 }
-.ds-action-list-item__pA2cRq.ds-action-list-item__pA2cRq--unavailable .ds-action-list-item__pA2cRq__checkbox--checked {
+.ds-action-list-item__0apwgA.ds-action-list-item__0apwgA--unavailable .ds-action-list-item__0apwgA__checkbox--checked {
   color: var(--ds-textColor-secondary);
 }
-.ds-action-list-item__pA2cRq.ds-action-list-item__pA2cRq--unavailable .ds-action-list-item__pA2cRq__description {
+.ds-action-list-item__0apwgA.ds-action-list-item__0apwgA--unavailable .ds-action-list-item__0apwgA__description {
   color: var(--ds-textColor-attention);
 }
-.ds-action-list-item__pA2cRq.ds-action-list-item__pA2cRq--action-danger {
+.ds-action-list-item__0apwgA.ds-action-list-item__0apwgA--action-danger {
   color: var(--ds-textColor-danger);
 }
-.ds-action-list-item__pA2cRq.ds-action-list-item__pA2cRq--action-danger:hover:not(:disabled):not(.ds-action-list-item__pA2cRq--unavailable) {
+.ds-action-list-item__0apwgA.ds-action-list-item__0apwgA--action-danger:hover:not(:disabled):not(.ds-action-list-item__0apwgA--unavailable) {
   background-color: var(--ds-bgColor-danger);
 }
-.ds-action-list-item__pA2cRq.ds-action-list-item__pA2cRq--action-danger:active:not(:disabled):not(.ds-action-list-item__pA2cRq--unavailable) {
+.ds-action-list-item__0apwgA.ds-action-list-item__0apwgA--action-danger:active:not(:disabled):not(.ds-action-list-item__0apwgA--unavailable) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-action-list-item__pA2cRq.ds-action-list-item__pA2cRq--action-danger:disabled, .ds-action-list-item__pA2cRq.ds-action-list-item__pA2cRq--action-danger.ds-action-list-item__pA2cRq--disabled {
+.ds-action-list-item__0apwgA.ds-action-list-item__0apwgA--action-danger:disabled, .ds-action-list-item__0apwgA.ds-action-list-item__0apwgA--action-danger.ds-action-list-item__0apwgA--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
 
-.ds-action-list-item__pA2cRq__icon {
+.ds-action-list-item__0apwgA__icon {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.ds-action-list-item__pA2cRq__indent {
+.ds-action-list-item__0apwgA__indent {
   flex-shrink: 0;
   width: 1.25rem;
 }
 
-.ds-action-list-item__pA2cRq__content {
+.ds-action-list-item__0apwgA__content {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
 }
 
-.ds-action-list-item__pA2cRq__label {
+.ds-action-list-item__0apwgA__label {
   display: block;
 }
 
-.ds-action-list-item__pA2cRq__description {
+.ds-action-list-item__0apwgA__description {
   display: block;
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
 
-.ds-action-list-item__pA2cRq__selector {
+.ds-action-list-item__0apwgA__selector {
   flex-shrink: 0;
   width: 1.25rem;
   display: flex;
@@ -105,25 +105,25 @@
   justify-content: center;
   visibility: hidden;
 }
-.ds-action-list-item__pA2cRq__selector.ds-action-list-item__pA2cRq__selector--visible {
+.ds-action-list-item__0apwgA__selector.ds-action-list-item__0apwgA__selector--visible {
   visibility: visible;
 }
 
-.ds-action-list-item__pA2cRq__checkbox {
+.ds-action-list-item__0apwgA__checkbox {
   flex-shrink: 0;
   color: var(--ds-iconColor-neutral);
 }
 
-.ds-action-list-item__pA2cRq__checkbox--checked {
+.ds-action-list-item__0apwgA__checkbox--checked {
   color: var(--ds-iconColor-primary);
 }
 
-:host([disabled]) .ds-action-list-item__pA2cRq__selector--visible,
-button:disabled .ds-action-list-item__pA2cRq__selector--visible {
+:host([disabled]) .ds-action-list-item__0apwgA__selector--visible,
+button:disabled .ds-action-list-item__0apwgA__selector--visible {
   color: var(--ds-textColor-disabled-onLight);
 }
 
-button:disabled .ds-action-list-item__pA2cRq__checkbox,
-button:disabled .ds-action-list-item__pA2cRq__checkbox--checked {
+button:disabled .ds-action-list-item__0apwgA__checkbox,
+button:disabled .ds-action-list-item__0apwgA__checkbox--checked {
   color: var(--ds-textColor-disabled-onLight);
 }

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list-item/ds-action-list-item.js

@@ -1,4 +1,4 @@
-import { h, Mixin } from "@stencil/core";
+import { h, Host, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { declareComponentDependencies, transformTagName } from "../../../../utils/utils";
 import { cx } from "../../../../utils/cx";
@@ -22,6 +22,25 @@ export class DsActionListItem extends Mixin(componentFactory('ds-action-list-ite
     dsIndented = false;
     dsSelect;
     tabIndex = -1;
+    menuIsOpen = undefined;
+    unsubscribeMenuState;
+    componentWillLoad() {
+        if (consumeActionMenuContext(this.el)) {
+            this.menuIsOpen = false;
+        }
+    }
+    componentDidLoad() {
+        this.componentMounted();
+        const ctx = consumeActionMenuContext(this.el);
+        if (ctx) {
+            this.unsubscribeMenuState = ctx.subscribe(isOpen => {
+                this.menuIsOpen = isOpen;
+            });
+        }
+    }
+    disconnectedCallback() {
+        this.unsubscribeMenuState?.();
+    }
     async setFocus() {
         this.buttonEl?.focus();
     }
@@ -85,7 +104,7 @@ export class DsActionListItem extends Mixin(componentFactory('ds-action-list-ite
             [`${baseClass}--unavailable`]: this.dsUnavailable,
             [`${baseClass}--indented`]: showIndent,
         });
-        return (h("button", { key: 'b44aab1ecd6f0ffeba7d7302c6055032decc184e', ref: el => (this.buttonEl = el), class: classes, role: role, "aria-checked": role === 'menuitemcheckbox' || role === 'menuitemradio' ? String(this.dsSelected) : undefined, "aria-disabled": this.dsDisabled || this.dsUnavailable ? 'true' : undefined, disabled: this.dsDisabled, tabIndex: this.tabIndex, onClick: () => this.handleSelect() }, this.renderSelector(baseClass), showIndent && h("span", { key: '1a6c5647dc6c3389a6cb86286545acd44e48f251', class: `${baseClass}__indent`, "aria-hidden": "true" }), this.renderIcon(baseClass), h("span", { key: '96519a6456f4c91ee2a6fa01d83006f8897d653f', class: `${baseClass}__content` }, h("span", { key: '47dbadf120d5a4e9eca1897e693234045eea9d32', class: `${baseClass}__label` }, this.dsLabel), this.dsDescription && h("span", { key: '933ba826149bef728bbddffeaf1c8aeea3ae5e0a', class: `${baseClass}__description` }, this.dsDescription))));
+        return (h(Host, { key: '490c34d258c4376bfafad81b9127705ca72c630d', "aria-hidden": this.menuIsOpen === false ? 'true' : undefined }, h("button", { key: 'f1f1acd72c26f36ccc69c9f12516257a18095ab5', ref: el => (this.buttonEl = el), class: classes, role: role, "aria-checked": role === 'menuitemcheckbox' || role === 'menuitemradio' ? String(this.dsSelected) : undefined, "aria-disabled": this.dsDisabled || this.dsUnavailable ? 'true' : undefined, disabled: this.dsDisabled, tabIndex: this.tabIndex, onClick: () => this.handleSelect() }, this.renderSelector(baseClass), showIndent && h("span", { key: 'a9449c5c90fe20ee68b6444e2fba248f061e9923', class: `${baseClass}__indent`, "aria-hidden": "true" }), this.renderIcon(baseClass), h("span", { key: 'd4cb1465255733acedf7966ad1091696c72ff6ef', class: `${baseClass}__content` }, h("span", { key: 'e284fd11241b95f43fb22bfb7869d221662549f2', class: `${baseClass}__label` }, this.dsLabel), this.dsDescription && h("span", { key: '8aee890a93bdb080b74f98044da24d83063ddaed', class: `${baseClass}__description` }, this.dsDescription)))));
     }
     static get is() { return "ds-action-list-item"; }
     static get encapsulation() { return "scoped"; }
@@ -308,7 +327,8 @@ export class DsActionListItem extends Mixin(componentFactory('ds-action-list-ite
     }
     static get states() {
         return {
-            "tabIndex": {}
+            "tabIndex": {},
+            "menuIsOpen": {}
         };
     }
     static get events() {