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

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

@@ -2,57 +2,60 @@ 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() {
         const classes = classNames(`${this.variant} ${this.colour} ${this.size}`, {
             'icon-start': this.icon && this.iconPosition === 'start' && this.value,
@@ -61,7 +64,8 @@ export class DsButton {
         });
         const iconSize = this.size === 'small' ? '1rem' : undefined;
         const isDisabled = this.disabled || this.ariaDisabled === 'true';
-        return (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), 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 }))));
+        console.log('foo');
+        return (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 }, h("slot", { key: '2c8eab3447d3a88236a7b23d95613bfc7f6c2f4e', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '3adff40a2a2841164d5fc02fa815bf2cf6904856', name: this.icon, size: iconSize })), this.value && h("span", { key: '3291dd24092bf5e0a4d622e6b1d487f62fc33a2f', class: "button-value" }, this.value), h("slot", { key: '1f9865ee665c3963746d3fa27c1313bbf02c5ff2', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '11cc53787dd9caeea4a778197064ac49bc95fac4', name: this.icon, size: iconSize }))));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "scoped"; }

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

@@ -38,37 +38,57 @@ export const Default = {
     },
 };
 export const Playground = {
-    argTypes: Object.assign(Object.assign(Object.assign({}, Default.argTypes), { variant: {
+    argTypes: {
+        ...Default.argTypes,
+        variant: {
             options: ['primary', 'secondary', 'supplementary'],
             control: {
                 type: 'radio',
             },
-        }, colour: {
+        },
+        colour: {
             options: ['blue', 'black', 'white'],
             control: {
                 type: 'radio',
             },
-        }, size: {
+        },
+        size: {
             options: ['medium', 'small'],
             control: {
                 type: 'radio',
             },
-        }, fontWeight: {
+        },
+        fontWeight: {
             control: 'select',
             options: [400, 600, 650, 700],
-        }, icon: {
+        },
+        icon: {
             control: 'select',
             options: icons.map(icon => icon.name),
-        }, iconPosition: {
+        },
+        iconPosition: {
             options: ['start', 'end'],
             control: {
                 type: 'radio',
             },
-        }, type: {
+        },
+        type: {
             options: ['submit', 'reset', 'button'],
             control: {
                 type: 'radio',
             },
-        } }), buttonAriaAttributeArgTypes),
-    args: Object.assign(Object.assign({}, Default.args), { variant: 'primary', colour: 'blue', size: 'medium', disabled: false, ariaLabel: '', ariaLabelledby: '', icon: '', iconPosition: 'start' }),
+        },
+        ...buttonAriaAttributeArgTypes,
+    },
+    args: {
+        ...Default.args,
+        variant: 'primary',
+        colour: 'blue',
+        size: 'medium',
+        disabled: false,
+        ariaLabel: '',
+        ariaLabelledby: '',
+        icon: '',
+        iconPosition: 'start',
+    },
 };

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

@@ -1,13 +1,13 @@
 import { Fragment, h } from "@stencil/core";
 import { icons } from "../../../components/00-foundations/icons/iconList";
 export class DsIcon {
-    constructor() {
-        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/collection/components/01-base-components/ds-text-input/ds-text-input.examples.stories.js

@@ -13,7 +13,7 @@ export const CustomWidth = {
 export const UsingSlots = {
     render: () => html `
     <ds-text-input aria-label='Slotted label'>
-      <label id='label' slot='label'><b>Slotted label</b></label>
+      <label ds-id='label' slot='label'><b>Slotted label</b></label>
       <p slot='help-text'>Lorem ipsum</p>
       <ds-icon name='archive' slot='prefix'></ds-icon>
       <small slot='suffix' style='margin-right: var(--spacing-2xSmall)'>Suffix</small>

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js

@@ -13,30 +13,41 @@ const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assi
 const successTextIdGenerator = idGenerator('success-text');
 const errorTextIdGenerator = idGenerator('error-text');
 export class DsTextInput {
-    constructor() {
-        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);
     }
@@ -45,6 +56,17 @@ export class DsTextInput {
         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;
@@ -63,11 +85,10 @@ export class DsTextInput {
         return null;
     }
     renderSuffixContent() {
-        var _a, _b;
         if (this.suffixText) {
             return (h("slot", { name: "suffix" }, 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 (h("slot", { name: "suffix" }, 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 })));
@@ -81,14 +102,14 @@ export class DsTextInput {
     }
     render() {
         const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
-        return (h(Fragment, { key: '6d7c594001a3103009b407b8ff83d2c1280d014a' }, h("div", { key: '76051b2e72023d0a11fe07f10390b787e7466f02', class: "label-container" }, h("slot", { key: '3c6aa9d9ad95523cd241fddf19be9f3b61cc6a5e', name: "label" }, h("label", { key: '9adea3cfcbd36030bdf66dd9ddc64a1483910c0f', class: classNames({ required: this.required }), htmlFor: this.id }, this.label)), h("slot", { key: '12466889750015207ac3f56159c70795e797d433', name: "help-text" }, h("small", { key: '4c4ae48f06cb9633d5f306ae14da8ccc5d09699e', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '899469a328caf988e955bc2f3e4bc15664f01de3', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'b8afbafcafc45a83b9bf177a09d585745ff2d7bf', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('input-container', {
+        return (h(Fragment, { key: 'b36b842382f0f0635c5372a856b140f05f7f5cff' }, h("div", { key: '4cedfdd4a891b8317f8b948824c5fe18b8f2c345', class: "label-container" }, h("slot", { key: '5072f7cab04c4c6dcf3bc2a72f88c83f3da5c74b', name: "label" }, h("label", { key: '513249ab30b24df9ad204ec533eb5b0714a5b36e', class: classNames({ required: this.required }), htmlFor: this.dsId }, this.label)), h("slot", { key: 'c3e05ad3e51365c7e8df7a276b4fc089af4edba7', name: "help-text" }, h("small", { key: 'fdf1904fe96fd22b4ba650e693db0d3fcecdf33a', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: 'd9726a8a031a786169ff47a809f8309117d00eaa', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'c0fb788b2f35f478015169d2fc558885fc9c205a', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('input-container', {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 valid: !!this.successText,
                 invalid: !!this.errorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), 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(), 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 ||
                 classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
                     [this.successTextId]: this.successText,
                     [this.errorTextId]: this.errorText,
@@ -146,7 +167,7 @@ export class DsTextInput {
                 "attribute": "placeholder",
                 "reflect": false
             },
-            "id": {
+            "dsId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -162,7 +183,7 @@ export class DsTextInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
+                "attribute": "ds-id",
                 "reflect": false,
                 "defaultValue": "'input'"
             },
@@ -544,7 +565,7 @@ export class DsTextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""

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

@@ -17,7 +17,7 @@ export const Playground = {
     argTypes: {
         label: { control: 'text' },
         placeholder: { control: 'text' },
-        id: { control: 'text' },
+        dsId: { control: 'text' },
         name: { control: 'text' },
         disabled: { control: 'boolean' },
         required: { control: 'boolean' },
@@ -48,7 +48,7 @@ export const Playground = {
     args: {
         label: 'Label',
         placeholder: '',
-        id: 'input',
+        dsId: 'input',
         name: '',
         disabled: false,
         required: false,

package/dist/collection/utils/typography/typographyUtils.js

@@ -16,7 +16,7 @@ export const getTypographyVariables = () => {
                 const rules = [...sheet.cssRules].filter((r) => r instanceof CSSStyleRule && r.selectorText === ':root');
                 rootRules.push(...rules.map(rule => rule.cssText));
             }
-            catch (_a) {
+            catch {
                 console.warn('Issue occurred when extracting stylesheets.');
             }
         }

package/dist/component-library/component-library.css

@@ -0,0 +1 @@
+html{box-sizing:border-box}html *,html *::before,html *::after{box-sizing:inherit}:root{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-overlay-black-00:rgb(0 0 0 / 0);--ds-overlay-black-05:rgb(0 0 0 / 0.05);--ds-overlay-black-10:rgb(0 0 0 / 0.1);--ds-overlay-black-15:rgb(0 0 0 / 0.15);--ds-overlay-black-30:rgb(0 0 0 / 0.3);--ds-overlay-black-40:rgb(0 0 0 / 0.4);--ds-overlay-black-50:rgb(0 0 0 / 0.5);--ds-overlay-black-70:rgb(0 0 0 / 0.7);--ds-overlay-black-80:rgb(0 0 0 / 0.8);--ds-overlay-white-00:rgb(255 255 255 / 0);--ds-overlay-white-05:rgb(255 255 255 / 0.05);--ds-overlay-white-10:rgb(255 255 255 / 0.1);--ds-overlay-white-15:rgb(255 255 255 / 0.15);--ds-overlay-white-30:rgb(255 255 255 / 0.3);--ds-overlay-white-40:rgb(255 255 255 / 0.4);--ds-overlay-white-50:rgb(255 255 255 / 0.5);--ds-overlay-white-70:rgb(255 255 255 / 0.7);--ds-overlay-white-80:rgb(255 255 255 / 0.8);--ds-palette-black:#000000;--ds-palette-white:#ffffff;--ds-palette-black-03:#f7f7f7;--ds-palette-black-05:#f2f2f2;--ds-palette-black-10:#e6e6e6;--ds-palette-black-20:#cccccc;--ds-palette-black-30:#b3b3b3;--ds-palette-black-40:#999999;--ds-palette-black-50:#808080;--ds-palette-black-60:#666666;--ds-palette-black-70:#4d4d4d;--ds-palette-black-80:#333333;--ds-palette-black-90:#1a1a1a;--ds-palette-blue-05:#e5f8ff;--ds-palette-blue-10:#c2eeff;--ds-palette-blue-20:#8adeff;--ds-palette-blue-30:#5cd1ff;--ds-palette-blue-40:#1abeff;--ds-palette-blue-50:#009ad6;--ds-palette-blue-60:#0084b8;--ds-palette-blue-70:#005b80;--ds-palette-blue-80:#053c52;--ds-palette-blue-90:#032330;--ds-palette-green-05:#dffbe1;--ds-palette-green-10:#bef4c1;--ds-palette-green-20:#85e08a;--ds-palette-green-30:#66cc6b;--ds-palette-green-40:#43b149;--ds-palette-green-50:#279b2d;--ds-palette-green-60:#257e29;--ds-palette-green-70:#216325;--ds-palette-green-80:#183f19;--ds-palette-green-90:#0f2410;--ds-palette-mainBlue-05:#e5f5ff;--ds-palette-mainBlue-10:#cdebff;--ds-palette-mainBlue-20:#99d7ff;--ds-palette-mainBlue-30:#70c7ff;--ds-palette-mainBlue-40:#3db3ff;--ds-palette-mainBlue-50:#009bff;--ds-palette-mainBlue-60:#007fd1;--ds-palette-mainBlue-70:#005a94;--ds-palette-mainBlue-80:#003152;--ds-palette-mainBlue-90:#001929;--ds-palette-red-05:#ffeceb;--ds-palette-red-10:#ffd8d6;--ds-palette-red-20:#fdb7b4;--ds-palette-red-30:#f87c77;--ds-palette-red-40:#f0514c;--ds-palette-red-50:#d71f19;--ds-palette-red-60:#bd2828;--ds-palette-red-70:#8b2623;--ds-palette-red-80:#602220;--ds-palette-red-90:#321c1b;--ds-palette-yellow-05:#fff1db;--ds-palette-yellow-10:#ffe7c2;--ds-palette-yellow-20:#ffd799;--ds-palette-yellow-30:#fbc05f;--ds-palette-yellow-40:#eea22b;--ds-palette-yellow-50:#ce8103;--ds-palette-yellow-60:#b26d00;--ds-palette-yellow-70:#7a4b00;--ds-palette-yellow-80:#4e3104;--ds-palette-yellow-90:#282115}:root{--ds-textColor-default:var(--ds-palette-black-90);--ds-textColor-primary:var(--ds-palette-mainBlue-70);--ds-textColor-secondary:var(--ds-palette-black-70);--ds-textColor-white:var(--ds-palette-white);--ds-textColor-danger:var(--ds-palette-red-80);--ds-textColor-success:var(--ds-palette-green-80);--ds-textColor-disabled-onLight:var(--ds-palette-black-40);--ds-textColor-disabled-onDark:var(--ds-overlay-white-40);--ds-bgColor-primary:var(--ds-palette-mainBlue-70);--ds-bgColor-primary-hover:var(--ds-palette-mainBlue-80);--ds-bgColor-primary-active:var(--ds-palette-mainBlue-90);--ds-bgColor-secondary:var(--ds-palette-white);--ds-bgColor-secondary-hover:var(--ds-palette-mainBlue-05);--ds-bgColor-secondary-active:var(--ds-palette-mainBlue-10);--ds-bgColor-white:var(--ds-palette-white);--ds-bgColor-white-hover:var(--ds-palette-black-10);--ds-bgColor-white-active:var(--ds-overlay-black-20);--ds-bgColor-black:var(--ds-palette-black-90);--ds-bgColor-black-hover:var(--ds-palette-black-70);--ds-bgColor-black-active:var(--ds-palette-white-60);--ds-bgColor-danger:var(--ds-palette-red-05);--ds-bgColor-danger-hover:var(--ds-palette-red-10);--ds-bgColor-danger-active:var(--ds-palette-red-20);--ds-bgColor-success:var(--ds-palette-green-05);--ds-bgColor-success-hover:var(--ds-palette-green-10);--ds-bgColor-success-active:var(--ds-palette-green-20);--ds-bgColor-transparent-onLight:var(--ds-overlay-black-00);--ds-bgColor-transparent-onLight-hover:var(--ds-overlay-black-10);--ds-bgColor-transparent-onLight-active:var(--ds-overlay-black-15);--ds-bgColor-transparent-onDark:var(--ds-overlay-white-00);--ds-bgColor-transparent-onDark-hover:var(--ds-overlay-white-30);--ds-bgColor-transparent-onDark-active:var(--ds-overlay-white-40);--ds-bgColor-disabled-onLight:var(--ds-overlay-black-10);--ds-bgColor-disabled-onDark:var(--ds-overlay-white-10);--ds-borderColor-default:var(--ds-palette-black-50);--ds-borderColor-primary:var(--ds-palette-mainBlue-70);--ds-borderColor-black:var(--ds-palette-black);--ds-borderColor-white:var(--ds-palette-white);--ds-borderColor-danger:var(--ds-palette-red-50);--ds-borderColor-success:var(--ds-palette-green-50);--ds-borderColor-transparent:var(--ds-overlay-black-00);--ds-borderColor-disabled-onLight:var(--ds-overlay-black-15);--ds-borderColor-disabled-onDark:var(--ds-overlay-white-15);--ds-borderColor-light:var(--ds-palette-black-20)}:root{--ds-spacing-4xSmall:0.125rem;--ds-spacing-3xSmall:0.25rem;--ds-spacing-2xSmall:0.5rem;--ds-spacing-xSmall:0.75rem;--ds-spacing-small:1rem;--ds-spacing-medium:1.5rem;--ds-spacing-large:2rem;--ds-spacing-xLarge:2.5rem;--ds-spacing-2xLarge:3rem;--ds-spacing-3xLarge:3.5rem;--ds-spacing-4xLarge:4rem;--ds-spacing-5xLarge:4.5rem;--ds-spacing-layout-2xSmall:1rem;--ds-spacing-layout-xSmall:1.5rem;--ds-spacing-layout-small:2rem;--ds-spacing-layout-medium:3rem;--ds-spacing-layout-large:4rem;--ds-spacing-layout-xLarge:6rem;--ds-spacing-layout-2xLarge:8rem}html{font-size:100%}body{font-size:1rem}.heading--2xLarge,h1,.h1{font-size:2.25rem;line-height:1.166667;font-weight:700;font-variation-settings:"wdth" 90;letter-spacing:-1.2px;text-transform:uppercase}@media (min-width: 30rem){.heading--2xLarge,h1,.h1{font-size:3.5rem;line-height:1.142857;font-weight:700;font-variation-settings:"wdth" 90;letter-spacing:-1.4px;text-transform:uppercase}}.heading--xLarge,h2,.h2{font-size:1.875rem;line-height:1.2;font-weight:700;font-variation-settings:"wdth" 90;letter-spacing:-1.4px;text-transform:normal}@media (min-width: 30rem){.heading--xLarge,h2,.h2{font-size:3rem;line-height:1.083333;font-weight:700;font-variation-settings:"wdth" 90;letter-spacing:-1.4px;text-transform:normal}}.heading--large,h3,.h3{font-size:1.5rem;line-height:1.166667;font-weight:650;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:normal}@media (min-width: 30rem){.heading--large,h3,.h3{font-size:2rem;line-height:1.125;font-weight:650;font-variation-settings:"wdth" 100;letter-spacing:-1.4px;text-transform:normal}}.heading--medium,h4,.h4{font-size:1.25rem;line-height:1.333333;font-weight:650;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:normal}@media (min-width: 30rem){.heading--medium,h4,.h4{font-size:1.5rem;line-height:1.166667;font-weight:650;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:normal}}.heading--small,h5,.h5{font-size:1.125rem;line-height:1.2;font-weight:600;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:normal}@media (min-width: 30rem){.heading--small,h5,.h5{font-size:1.25rem;line-height:1.2;font-weight:600;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:normal}}.heading--xSmall,h6,.h6{font-size:1rem;line-height:1.125;font-weight:700;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:uppercase}@media (min-width: 30rem){.heading--xSmall,h6,.h6{font-size:1.125rem;line-height:1.2;font-weight:700;font-variation-settings:"wdth" 100;letter-spacing:-0.4px;text-transform:uppercase}}.bodyText{line-height:1.5}.bodyText--2xLarge{font-size:1.375rem}.bodyText--xLarge{font-size:1.25rem}.bodyText--large{font-size:1.125rem}.bodyText--medium{font-size:1rem}.bodyText--small{font-size:0.875rem}.bodyText--xSmall{font-size:0.75rem}:root{--ds-fontFamily-heading:"Open Sans", sans-serif;--ds-fontFamily-body:"Open Sans", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:-2;--ds-letterSpacing-tight:-1.4;--ds-letterSpacing-normal:-0.4;--ds-letterSpacing-wide:0;--ds-letterSpacing-xWide:0.4;--ds-lineHeight-small:1;--ds-lineHeight-medium:1.2;--ds-lineHeight-large:1.5;--ds-lineHeight-xLarge:1.75;--ds-fontWidth-normal:100;--ds-fontWidth-condense:90;--ds-number-style:proportional-figures;}@supports (font-variation-settings: normal){:root{--ds-fontFamily-heading:"Open Sans Variable", sans-serif;--ds-fontFamily-body:"Open Sans Variable", sans-serif}}.button-group{display:flex;flex-wrap:wrap;gap:var(--ds-spacing-xSmall)}

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

@@ -1 +1 @@
-import{p as e,b as i}from"./index-dfeefc7e.js";export{s as setNonce}from"./index-dfeefc7e.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((async e=>(await t(),i([["ds-accordion_2",[[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",[[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",[[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]}]]]],e))));
+import{p as e,b as i}from"./index-4200d514.js";export{s as setNonce}from"./index-4200d514.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((async e=>(await t(),i([["ds-accordion_2",[[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",[[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",[[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]}]]]],e))));