@uh-design-system/component-library 0.2.1 → 0.2.2-alpha.2

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');
 
 /*

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,58 +85,62 @@ 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() {
-        console.log('render');
         const classes = index$1.classNames(`${this.variant} ${this.colour} ${this.size}`, {
             'icon-start': this.icon && this.iconPosition === 'start' && this.value,
             'icon-end': this.icon && this.iconPosition === 'end' && this.value,
@@ -144,9 +148,8 @@ const DsButton = class {
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (index.h("button", Object.assign({ key: 'd85ee424afafcb437fa873e69b7554e315e4cad5', 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: 'c21dc9317ae1970d8e5fcead12b4041a8dc13af0', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: 'cc993dd0b2a12b3243bc8863d754a0efa3b6f1f4', name: this.icon, size: iconSize })), this.value && index.h("span", { key: 'b8a7bcac21782fd898192d98c605c0eacbfff882', class: "button-value" }, this.value), index.h("slot", { key: 'e4766fc18983798416533173ceddcbe3c80779ba', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: 'f308fb96c0b0b06036975df25fc5fba59dffe301', name: this.icon, size: iconSize }))));
+        return (index.h("button", { 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 }))));
     }
-    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;
+    id = '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 })));

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,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');
 
 const defineCustomElements = async (win, options) => {

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

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

@@ -2,59 +2,61 @@ import { h } from "@stencil/core";
 import classNames from "classnames";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes";
 export class DsButton {
-    constructor() {
-        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();
+    el;
+    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() {
-        console.log('render');
         const classes = classNames(`${this.variant} ${this.colour} ${this.size}`, {
             'icon-start': this.icon && this.iconPosition === 'start' && this.value,
             'icon-end': this.icon && this.iconPosition === 'end' && this.value,
@@ -62,7 +64,7 @@ export class DsButton {
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (h("button", Object.assign({ key: 'd85ee424afafcb437fa873e69b7554e315e4cad5', 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), h("slot", { key: 'c21dc9317ae1970d8e5fcead12b4041a8dc13af0', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: 'cc993dd0b2a12b3243bc8863d754a0efa3b6f1f4', name: this.icon, size: iconSize })), this.value && h("span", { key: 'b8a7bcac21782fd898192d98c605c0eacbfff882', class: "button-value" }, this.value), h("slot", { key: 'e4766fc18983798416533173ceddcbe3c80779ba', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'f308fb96c0b0b06036975df25fc5fba59dffe301', name: this.icon, size: iconSize }))));
+        return (h("button", { 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 }, h("slot", { key: 'bb67886e636e7a5294a6fbbde4a8a013e1ace3ce', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '6e93f6095ee4482d5026b42a67b7591712206146', name: this.icon, size: iconSize })), this.value && h("span", { key: '833424437f89ace4253e9daef6d8cda409563a4a', class: "button-value" }, this.value), h("slot", { key: '162e459206000c3b1b5b4ede761f5600f88b3de1', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '2e9bff6bdc4d5023374916bcbdc11151270113b6', name: this.icon, size: iconSize }))));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "scoped"; }