@uh-design-system/component-library 0.2.2-alpha.0 → 0.2.2-alpha.7

package/dist/cjs/component-library.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d03b8350.js');
+const index = require('./index-fd4f6cd2.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ds-accordion_2.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]],["ds-button_2.cjs",[[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-visually-hidden"]]],["ds-text-input.cjs",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"id":[1],"name":[1],"disabled":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]]], options);
+  return index.bootstrapLazy([["ds-accordion_2.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]],["ds-button_2.cjs",[[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-visually-hidden"]]],["ds-text-input.cjs",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"dsId":[1,"ds-id"],"name":[1],"disabled":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ds-accordion_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d03b8350.js');
+const index = require('./index-fd4f6cd2.js');
 const index$1 = require('./index-5b0b9d4c.js');
 
 const dsAccordionCss = ".ds-accordion__open-button{color:var(--ds-textColor-default, #1A1A1A);all:unset;box-sizing:border-box;display:flex;flex-direction:row;gap:8px;width:100%}.ds-accordion__open-button:hover{cursor:pointer;background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843))}.ds-accordion__open-button:hover.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__open-button:active{background:var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078))}.ds-accordion__open-button:active.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__open-button:focus{background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));box-shadow:0px 0px 0px 1px var(--ds-palette-black)}.ds-accordion__open-button:focus.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__open-button.ds-accordion--default{padding:16px;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:600;line-height:27px;letter-spacing:var(--letterSpacing-wide)}.ds-accordion__open-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:12px 16px 12px 16px;line-height:24px;font-weight:600}.ds-accordion__open-button.ds-accordion--border-aligned{padding-inline:0;padding-inline:0;margin-inline:16px}.ds-accordion__open-button[aria-expanded=false]{border-bottom:1px solid var(--ds-borderColor-light, #CCCCCC)}.ds-accordion__panel--expanded{border-bottom:1px solid var(--ds-borderColor-light, #CCCCCC)}.ds-accordion__content{color:var(--ds-textColor-default, #1A1A1A);font-family:var(--ds-fontFamily-body);padding:16px}.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-18);font-weight:400;line-height:27px;letter-spacing:var(--ds-letterSpacing-wide)}.ds-accordion__content .ds-accordion--compact{font-size:var(--fontSize-16);font-weight:400;line-height:24px;letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button{color:var(--ds-textColor-default, #1A1A1A);all:unset;border-bottom:1px solid var(--ds-borderColor-light, #CCCCCC);display:flex;flex-direction:row;gap:8px;font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:100%}.ds-accordion__close-button:hover{cursor:pointer;background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843))}.ds-accordion__close-button:hover.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__close-button:active{background:var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078))}.ds-accordion__close-button:active.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__close-button:focus{background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843));box-shadow:0px 0px 0px 1px var(--ds-palette-black)}.ds-accordion__close-button:focus.ds-accordion--border-aligned{padding-inline:16px;margin-inline:0}.ds-accordion__close-button.ds-accordion--default{padding:16px;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:600;line-height:27px;letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:12px 16px 12px 16px;line-height:24px;font-weight:600}.ds-accordion__close-button.ds-accordion--border-aligned{padding-inline:0;padding-inline:0;margin-inline:16px}";
@@ -11,38 +11,40 @@ const DsAccordionStyle0 = dsAccordionCss;
 const DsAccordion = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.variant = 'default';
-        this.borderAligned = false;
-        this.openByDefault = false;
-        this.accordionId = 'dsaccordion';
-        this.headingLevel = 2;
-        this.useCloseButton = false;
-        this.closeButtonLabel = 'Close';
-        this.isExpanded = this.openByDefault;
-        this.shouldMoveFocus = false;
-        this.handleClick = (event) => {
-            const isCloseButton = event.target.closest('.ds-accordion__close-button');
-            this.shouldMoveFocus = isCloseButton ? true : false;
-            this.isExpanded = !this.isExpanded;
-        };
-        this.handleKeyDown = (event) => {
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                    event.preventDefault();
-                    const isCloseButton = event.target.closest('.ds-accordion__close-button');
-                    this.shouldMoveFocus = isCloseButton ? true : false;
-                    this.isExpanded = !this.isExpanded;
-                    break;
-            }
-        };
     }
+    variant = 'default';
+    borderAligned = false;
+    openByDefault = false;
+    accordionId = 'dsaccordion';
+    headingLevel = 2;
+    useCloseButton = false;
+    closeButtonLabel = 'Close';
+    isExpanded = this.openByDefault;
+    get host() { return index.getElement(this); }
+    headerButtonRef;
+    shouldMoveFocus = false;
     watchHandler(isExpanded) {
         if (!isExpanded && this.shouldMoveFocus && this.headerButtonRef) {
             this.headerButtonRef.focus();
             this.shouldMoveFocus = false;
         }
     }
+    handleClick = (event) => {
+        const isCloseButton = event.target.closest('.ds-accordion__close-button');
+        this.shouldMoveFocus = isCloseButton ? true : false;
+        this.isExpanded = !this.isExpanded;
+    };
+    handleKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                const isCloseButton = event.target.closest('.ds-accordion__close-button');
+                this.shouldMoveFocus = isCloseButton ? true : false;
+                this.isExpanded = !this.isExpanded;
+                break;
+        }
+    };
     render() {
         return (index.h("div", { key: '2cc1b7c39897a2437b1c1b2a2dda3c73366f2406', class: index$1.classNames('ds-accordion', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned
@@ -55,7 +57,6 @@ const DsAccordion = class {
                     'ds-accordion--border-aligned': this.borderAligned
                 }), "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("ds-icon", { key: '295bb76f0130566900081b90e5d80033bbe9758f', hidden: true, name: "keyboard_arrow_up" }), index.h("span", { key: '90dcf29559c485707ea8517e0056249027b1e45b' }, this.closeButtonLabel))))));
     }
-    get host() { return index.getElement(this); }
     static get watchers() { return {
         "isExpanded": ["watchHandler"]
     }; }
@@ -852,12 +853,14 @@ const DsIconStyle0 = dsIconCss;
 const DsIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.size = '1.5rem';
-        this.title = 'Icon';
-        this.role = 'img';
-        this.hidden = true;
-        this.message = '';
     }
+    name;
+    colour;
+    size = '1.5rem';
+    title = 'Icon';
+    role = 'img';
+    hidden = true;
+    message = '';
     getIcon() {
         const selectedIcon = icons.find(icon => icon.name === this.name);
         if (!selectedIcon) {

package/dist/cjs/ds-button_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d03b8350.js');
+const index = require('./index-fd4f6cd2.js');
 const index$1 = require('./index-5b0b9d4c.js');
 
 const inheritAttributes = (el, attributes = []) => {
@@ -85,56 +85,61 @@ const DsButtonStyle0 = dsButtonCss;
 const DsButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.inheritedAttributes = {};
-        this.pressedKeys = new Set();
-        this.value = '';
-        this.variant = 'primary';
-        this.colour = 'blue';
-        this.size = 'medium';
-        this.fontWeight = 'normal';
-        this.icon = '';
-        this.iconPosition = 'start';
-        this.type = 'button';
-        this.disabled = false;
-        this.ariaDisabled = 'false';
-        this.handleKeyDown = (event) => {
-            if (event.repeat) {
-                return;
-            }
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                    this.pressedKeys.add(event.key);
-                    this.buttonEl.classList.add(`${this.colour}--active`);
-                    break;
-            }
-        };
-        this.handleKeyUp = (event) => {
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                    this.pressedKeys.delete(event.key);
-                    if (this.pressedKeys.size === 0) {
-                        this.buttonEl.classList.remove(`${this.colour}--active`);
-                    }
-                    break;
-            }
-        };
     }
+    inheritedAttributes = {};
+    buttonEl;
+    pressedKeys = new Set();
+    get el() { return index.getElement(this); }
+    value = '';
+    variant = 'primary';
+    colour = 'blue';
+    size = 'medium';
+    fontWeight = 'normal';
+    icon = '';
+    iconPosition = 'start';
+    type = 'button';
+    disabled = false;
+    ariaDisabled = 'false';
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el, ['aria-disabled'])), inheritAttributes(this.el, [
-            'autofocus',
-            'form',
-            'formaction',
-            'formenctype',
-            'formmethod',
-            'formnovalidate',
-            'formtarget',
-            'name',
-            'popovertarget',
-            'popovertargetaction',
-        ]));
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-disabled']),
+            ...inheritAttributes(this.el, [
+                'autofocus',
+                'form',
+                'formaction',
+                'formenctype',
+                'formmethod',
+                'formnovalidate',
+                'formtarget',
+                'name',
+                'popovertarget',
+                'popovertargetaction',
+            ]),
+        };
     }
+    handleKeyDown = (event) => {
+        if (event.repeat) {
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                this.pressedKeys.add(event.key);
+                this.buttonEl.classList.add(`${this.colour}--active`);
+                break;
+        }
+    };
+    handleKeyUp = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                this.pressedKeys.delete(event.key);
+                if (this.pressedKeys.size === 0) {
+                    this.buttonEl.classList.remove(`${this.colour}--active`);
+                }
+                break;
+        }
+    };
     render() {
         const classes = index$1.classNames(`${this.variant} ${this.colour} ${this.size}`, {
             'icon-start': this.icon && this.iconPosition === 'start' && this.value,
@@ -143,9 +148,9 @@ const DsButton = class {
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (index.h("button", Object.assign({ key: '1230108c308cc8a89f8202bef69e839e36b6912d', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false' }, this.inheritedAttributes), index.h("slot", { key: 'bb67886e636e7a5294a6fbbde4a8a013e1ace3ce', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '6e93f6095ee4482d5026b42a67b7591712206146', name: this.icon, size: iconSize })), this.value && index.h("span", { key: '833424437f89ace4253e9daef6d8cda409563a4a', class: "button-value" }, this.value), index.h("slot", { key: '162e459206000c3b1b5b4ede761f5600f88b3de1', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '2e9bff6bdc4d5023374916bcbdc11151270113b6', name: this.icon, size: iconSize }))));
+        console.log('foo');
+        return (index.h("button", { key: 'bf1cd8f28ef9701931c8c7c6f552e58b38e39290', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, index.h("slot", { key: '2c8eab3447d3a88236a7b23d95613bfc7f6c2f4e', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '3adff40a2a2841164d5fc02fa815bf2cf6904856', name: this.icon, size: iconSize })), this.value && index.h("span", { key: '3291dd24092bf5e0a4d622e6b1d487f62fc33a2f', class: "button-value" }, this.value), index.h("slot", { key: '1f9865ee665c3963746d3fa27c1313bbf02c5ff2', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '11cc53787dd9caeea4a778197064ac49bc95fac4', name: this.icon, size: iconSize }))));
     }
-    get el() { return index.getElement(this); }
 };
 DsButton.style = DsButtonStyle0;
 

package/dist/cjs/ds-text-input.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d03b8350.js');
+const index = require('./index-fd4f6cd2.js');
 const index$1 = require('./index-5b0b9d4c.js');
 
 function* idGenerator(id) {
@@ -29,29 +29,42 @@ const errorTextIdGenerator = idGenerator('error-text');
 const DsTextInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.assistiveTextId = assistiveTextIdGenerator.next().value;
-        this.visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
-        this.successTextId = successTextIdGenerator.next().value;
-        this.errorTextId = errorTextIdGenerator.next().value;
-        this.id = 'input';
-        this.icon = '';
-        this.type = 'text';
-        this.hasFocus = false;
-        this.clearButtonVisible = false;
-        this.passwordInputVisible = false;
-        this.inputActive = false;
-        this.onActionButtonClicked = (e) => {
-            e.stopPropagation();
-            switch (this.type) {
-                case 'password':
-                    return this.togglePasswordVisibility();
-                case 'search':
-                    this.clearInput();
-                default:
-                    return;
-            }
-        };
     }
+    suffixButtonElement;
+    inputElement;
+    assistiveTextId = assistiveTextIdGenerator.next().value;
+    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
+    successTextId = successTextIdGenerator.next().value;
+    errorTextId = errorTextIdGenerator.next().value;
+    label;
+    placeholder;
+    dsId = 'input';
+    name;
+    disabled;
+    required;
+    readonly;
+    value;
+    min;
+    max;
+    maxlength;
+    pattern;
+    autocomplete;
+    errorText;
+    successText;
+    assistiveText;
+    actionButtonAriaLabel;
+    hiddenAssistiveText;
+    prefixText;
+    suffixText;
+    icon = '';
+    type = 'text';
+    ariaLabel;
+    ariaLabelledBy;
+    ariaDescribedby;
+    hasFocus = false;
+    clearButtonVisible = false;
+    passwordInputVisible = false;
+    inputActive = false;
     async togglePasswordVisibility() {
         return (this.passwordInputVisible = !this.passwordInputVisible);
     }
@@ -60,6 +73,17 @@ const DsTextInput = class {
         this.inputElement.focus();
         this.clearButtonVisible = false;
     }
+    onActionButtonClicked = (e) => {
+        e.stopPropagation();
+        switch (this.type) {
+            case 'password':
+                return this.togglePasswordVisibility();
+            case 'search':
+                this.clearInput();
+            default:
+                return;
+        }
+    };
     renderValidityMessage(type) {
         const textId = type === 'success' ? this.successTextId : this.errorTextId;
         const text = type === 'success' ? this.successText : this.errorText;
@@ -78,11 +102,10 @@ const DsTextInput = class {
         return null;
     }
     renderSuffixContent() {
-        var _a, _b;
         if (this.suffixText) {
             return (index.h("slot", { name: "suffix" }, index.h("span", { class: "suffix" }, this.suffixText)));
         }
-        const actionButtonIcon = (_b = (_a = INPUT_TYPE_ACTION_BUTTON_ICON_MAP[this.type]) === null || _a === void 0 ? void 0 : _a.call(INPUT_TYPE_ACTION_BUTTON_ICON_MAP, this)) !== null && _b !== void 0 ? _b : '';
+        const actionButtonIcon = INPUT_TYPE_ACTION_BUTTON_ICON_MAP[this.type]?.(this) ?? '';
         const ariaPressed = this.type === 'password' ? this.passwordInputVisible : undefined;
         if (actionButtonIcon) {
             return (index.h("slot", { name: "suffix" }, index.h("ds-button", { ref: e => (this.suffixButtonElement = e), variant: "supplementary", colour: "black", class: "suffix", disabled: false, icon: actionButtonIcon, onClick: this.onActionButtonClicked, "aria-pressed": ariaPressed, "aria-label": this.actionButtonAriaLabel })));
@@ -96,14 +119,14 @@ const DsTextInput = class {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (index.h(index.Fragment, { key: '6d7c594001a3103009b407b8ff83d2c1280d014a' }, index.h("div", { key: '76051b2e72023d0a11fe07f10390b787e7466f02', class: "label-container" }, index.h("slot", { key: '3c6aa9d9ad95523cd241fddf19be9f3b61cc6a5e', name: "label" }, index.h("label", { key: '9adea3cfcbd36030bdf66dd9ddc64a1483910c0f', class: index$1.classNames({ required: this.required }), htmlFor: this.id }, this.label)), index.h("slot", { key: '12466889750015207ac3f56159c70795e797d433', name: "help-text" }, index.h("small", { key: '4c4ae48f06cb9633d5f306ae14da8ccc5d09699e', id: this.assistiveTextId }, this.assistiveText), index.h("ds-visually-hidden", { key: '899469a328caf988e955bc2f3e4bc15664f01de3', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), index.h("div", { key: 'b8afbafcafc45a83b9bf177a09d585745ff2d7bf', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: index$1.classNames('input-container', {
+        return (index.h(index.Fragment, { key: 'b36b842382f0f0635c5372a856b140f05f7f5cff' }, index.h("div", { key: '4cedfdd4a891b8317f8b948824c5fe18b8f2c345', class: "label-container" }, index.h("slot", { key: '5072f7cab04c4c6dcf3bc2a72f88c83f3da5c74b', name: "label" }, index.h("label", { key: '513249ab30b24df9ad204ec533eb5b0714a5b36e', class: index$1.classNames({ required: this.required }), htmlFor: this.dsId }, this.label)), index.h("slot", { key: 'c3e05ad3e51365c7e8df7a276b4fc089af4edba7', name: "help-text" }, index.h("small", { key: 'fdf1904fe96fd22b4ba650e693db0d3fcecdf33a', id: this.assistiveTextId }, this.assistiveText), index.h("ds-visually-hidden", { key: 'd9726a8a031a786169ff47a809f8309117d00eaa', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), index.h("div", { key: 'c0fb788b2f35f478015169d2fc558885fc9c205a', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: index$1.classNames('input-container', {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 valid: !!this.successText,
                 invalid: !!this.errorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), index.h("input", { key: '75b925eced73863f039c31f7c8abaf8996532f7c', ref: e => (this.inputElement = e), id: this.id, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
+            }) }, this.renderPrefixContent(), index.h("input", { key: 'adb2aa8a54d45aeeca8e209f0c0a28d2aa0141f8', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
                 index$1.classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
                     [this.successTextId]: this.successText,
                     [this.errorTextId]: this.errorText,

package/dist/cjs/{index-d03b8350.js → index-fd4f6cd2.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'component-library';
-const BUILD = /* component-library */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* component-library */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
  Stencil Client Platform v4.25.1 | MIT Licensed | https://stenciljs.com
@@ -32,11 +32,38 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// src/utils/es2022-rewire-class-members.ts
+var reWireGetterSetter = (instance, hostRef) => {
+  var _a;
+  const cmpMeta = hostRef.$cmpMeta$;
+  const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
+  members.map(([memberName, [memberFlags]]) => {
+    if ((memberFlags & 31 /* Prop */ || memberFlags & 32 /* State */)) {
+      const ogValue = instance[memberName];
+      const ogDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(instance), memberName);
+      Object.defineProperty(instance, memberName, {
+        get() {
+          return ogDescriptor.get.call(this);
+        },
+        set(newValue) {
+          ogDescriptor.set.call(this, newValue);
+        },
+        configurable: true,
+        enumerable: true
+      });
+      instance[memberName] = hostRef.$instanceValues$.has(memberName) ? hostRef.$instanceValues$.get(memberName) : ogValue;
+    }
+  });
+};
+
 // src/client/client-host-ref.ts
 var hostRefs = /* @__PURE__ */ new WeakMap();
 var getHostRef = (ref) => hostRefs.get(ref);
 var registerInstance = (lazyInstance, hostRef) => {
   hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
+  {
+    reWireGetterSetter(lazyInstance, hostRef);
+  }
 };
 var registerHost = (hostElement, cmpMeta) => {
   const hostRef = {

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d03b8350.js');
+const index = require('./index-fd4f6cd2.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ds-accordion_2.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]],["ds-button_2.cjs",[[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-visually-hidden"]]],["ds-text-input.cjs",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"id":[1],"name":[1],"disabled":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]]], options);
+  return index.bootstrapLazy([["ds-accordion_2.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"title":[1],"role":[1],"hidden":[4],"message":[32]}]]],["ds-button_2.cjs",[[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-visually-hidden"]]],["ds-text-input.cjs",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"dsId":[1,"ds-id"],"name":[1],"disabled":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1,39 +1,39 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
 export class DsAccordion {
-    constructor() {
-        this.variant = 'default';
-        this.borderAligned = false;
-        this.openByDefault = false;
-        this.accordionId = 'dsaccordion';
-        this.headingLevel = 2;
-        this.useCloseButton = false;
-        this.closeButtonLabel = 'Close';
-        this.isExpanded = this.openByDefault;
-        this.shouldMoveFocus = false;
-        this.handleClick = (event) => {
-            const isCloseButton = event.target.closest('.ds-accordion__close-button');
-            this.shouldMoveFocus = isCloseButton ? true : false;
-            this.isExpanded = !this.isExpanded;
-        };
-        this.handleKeyDown = (event) => {
-            switch (event.key) {
-                case 'Enter':
-                case ' ':
-                    event.preventDefault();
-                    const isCloseButton = event.target.closest('.ds-accordion__close-button');
-                    this.shouldMoveFocus = isCloseButton ? true : false;
-                    this.isExpanded = !this.isExpanded;
-                    break;
-            }
-        };
-    }
+    variant = 'default';
+    borderAligned = false;
+    openByDefault = false;
+    accordionId = 'dsaccordion';
+    headingLevel = 2;
+    useCloseButton = false;
+    closeButtonLabel = 'Close';
+    isExpanded = this.openByDefault;
+    host;
+    headerButtonRef;
+    shouldMoveFocus = false;
     watchHandler(isExpanded) {
         if (!isExpanded && this.shouldMoveFocus && this.headerButtonRef) {
             this.headerButtonRef.focus();
             this.shouldMoveFocus = false;
         }
     }
+    handleClick = (event) => {
+        const isCloseButton = event.target.closest('.ds-accordion__close-button');
+        this.shouldMoveFocus = isCloseButton ? true : false;
+        this.isExpanded = !this.isExpanded;
+    };
+    handleKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                const isCloseButton = event.target.closest('.ds-accordion__close-button');
+                this.shouldMoveFocus = isCloseButton ? true : false;
+                this.isExpanded = !this.isExpanded;
+                break;
+        }
+    };
     render() {
         return (h("div", { key: '2cc1b7c39897a2437b1c1b2a2dda3c73366f2406', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned

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

@@ -77,7 +77,12 @@ export const Playground = {
         },
     },
 };
-Playground.args = Object.assign(Object.assign({}, Default.args), { Header: exampleHeader, Content: exampleContent, Items: 3 });
+Playground.args = {
+    ...Default.args,
+    Header: exampleHeader,
+    Content: exampleContent,
+    Items: 3,
+};
 Playground.render = (args) => {
     const accordions = Array.from({ length: args.Items }, (_, index) => `
     <ds-accordion