@uh-design-system/component-library 0.5.2 → 0.6.0

package/dist/components/ds-radio-button.js

@@ -0,0 +1,198 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index2.js';
+import { i as inheritAttributes } from './attributes.js';
+import { g as getRequiredText } from './controlUtils.js';
+import { i as idGenerator, d as defineCustomElement$4 } from './ds-icon2.js';
+import { c as classNames } from './index3.js';
+import { i as isValidation } from './index.js';
+import { d as defineCustomElement$3 } from './ds-input-validity2.js';
+import { d as defineCustomElement$2 } from './ds-visually-hidden2.js';
+
+const dsRadioButtonCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-palette-black-95)}.ds-radio-button--disabled{color:var(--ds-palette-black-40)}.ds-radio-button__validity{margin-left:10px}.ds-radio-button:has(input:focus-visible) .ds-radio-button__icon{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 5)}.ds-radio-button__icon{border-radius:50%;height:44px;width:44px}.ds-radio-button__text{margin-top:11px}.ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-white)}.ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-70);fill:var(--ds-palette-white)}.ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-10)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-palette-white)}.ds-radio-button:hover:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-80)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-black-50);fill:var(--ds-palette-black-20)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-palette-white)}.ds-radio-button:active:not(.ds-radio-button--disabled) .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-90)}.ds-radio-button--disabled .ds-radio-button__icon__outer-circle{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-overlay-black-15);fill:var(--ds-overlay-black-10)}.ds-radio-button--disabled .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-overlay-black-15)}.ds-radio-button--invalid .ds-radio-button__icon__outer-circle{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid .ds-radio-button__icon__outer-circle--checked{stroke:var(--ds-palette-red-50);fill:var(--ds-palette-white)}.ds-radio-button--invalid .ds-radio-button__icon__inner-circle{stroke:unset;fill:var(--ds-palette-mainBlue-70)}.ds-radio-button-fieldset{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button-fieldset__legend{padding-inline:0;color:var(--ds-palette-black-95);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}";
+
+const radioButtonIdGenerator = idGenerator('ds-radio-button');
+const DsRadioButton$1 = proxyCustomElement(class DsRadioButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsChange = createEvent(this, "dsChange");
+        this.dsRadioButtonChecked = createEvent(this, "dsRadioButtonChecked");
+        this.internals = this.attachInternals();
+    }
+    radioGroup = null;
+    inputElem;
+    dsChange;
+    dsRadioButtonChecked;
+    get el() { return this; }
+    internals;
+    dsId = radioButtonIdGenerator.next().value;
+    dsErrorsDisabled = false;
+    dsValue = this.dsId;
+    dsLegend;
+    dsAssistiveText;
+    dsText;
+    dsRequired = false;
+    dsDisabled = false;
+    dsChecked = false;
+    dsErrorText = '';
+    focusable = true;
+    invalid = !!this.dsErrorText;
+    initialChecked = this.dsChecked;
+    validationMessage;
+    errorTextId = `${this.dsId}-error`;
+    assistiveTextId = `${this.dsId}-assistive-text`;
+    async dsFocus() {
+        this.inputElem.focus();
+    }
+    async setFocusable(flag) {
+        this.focusable = flag;
+    }
+    async setChecked() {
+        this.dsChecked = true;
+        this.internals?.setFormValue('true');
+        this.dsRadioButtonChecked.emit();
+        if (isValidation('client') && this.validationMessage) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    }
+    dsCheckedObserver(isChecked) {
+        this.dsChange.emit(isChecked);
+    }
+    inheritedAttributes = {};
+    getValidationMessage = () => (!this.dsErrorsDisabled ? this.dsErrorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+        };
+    }
+    formResetCallback() {
+        this.dsChecked = this.initialChecked;
+        this.internals.setValidity({});
+        this.internals.setFormValue(this.dsChecked.toString());
+    }
+    connectedCallback() {
+        this.radioGroup = this.el.closest('ds-radio-button-group');
+        if (this.radioGroup) {
+            this.updateCheckedState();
+            this.invalid = !!this.radioGroup.dsErrorText;
+            this.radioGroup.addEventListener('dsRadioGroupValueChange', this.updateCheckedState);
+            this.radioGroup.addEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.radioGroup) {
+            this.radioGroup.removeEventListener('dsRadioGroupValueChange', this.updateCheckedState);
+            this.radioGroup.removeEventListener('dsRadioGroupInvalidStateChange', this.updateInvalidState);
+        }
+        this.radioGroup = null;
+    }
+    updateCheckedState = async () => {
+        this.dsChecked = this.dsValue === (await this.radioGroup.getValue());
+    };
+    updateInvalidState = (e) => {
+        this.invalid = e.detail;
+    };
+    handleInput = () => {
+        this.setChecked();
+    };
+    handleBlur = () => {
+        if (isValidation('client')) {
+            this.validationMessage = this.getValidationMessage();
+        }
+    };
+    getLegendText = () => {
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLegend);
+        }
+        return this.dsLegend;
+    };
+    renderRadioIcon() {
+        const iconClass = 'ds-radio-button__icon';
+        const outerCircleClasses = classNames(`${iconClass}__outer-circle`, {
+            [`${iconClass}__outer-circle--checked`]: this.dsChecked,
+        });
+        const innerCircleClasses = classNames(`${iconClass}__inner-circle`);
+        return (h("slot", { name: "icon" }, h("div", { class: iconClass, "aria-hidden": "true" }, h("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { x: "10", y: "10", width: "24", height: "24", rx: "12", fill: "white" }), h("circle", { class: outerCircleClasses, cx: "22", cy: "22", r: "10", fill: "white", stroke: "#005A94", "stroke-width": "2" }), this.dsChecked && h("circle", { class: innerCircleClasses, cx: "22", cy: "22", r: "6", fill: "#005A94" })))));
+    }
+    renderRadioButton() {
+        const classes = classNames('ds-radio-button', {
+            'ds-radio-button--disabled': this.dsDisabled,
+            'ds-radio-button--invalid': !!this.dsErrorText || this.invalid,
+        });
+        const inputClasses = classNames('ds-radio-button__input');
+        const textClasses = classNames('ds-radio-button__text');
+        const tabindex = this.focusable ? 0 : -1;
+        return (h(Fragment, null, h("div", null, h("label", { class: classes }, h("ds-visually-hidden", null, h("input", { ref: ref => (this.inputElem = ref), type: "radio", class: inputClasses, value: this.dsValue, disabled: this.dsDisabled, onInput: this.handleInput, onBlur: this.handleBlur, checked: this.dsChecked, tabindex: tabindex, ...this.inheritedAttributes })), this.renderRadioIcon(), h("slot", null, h("span", { class: textClasses }, this.dsText)))), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: "ds-radio-button__validity" }, h("ds-input-validity", { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
+    }
+    renderFieldset() {
+        const fieldsetClasses = classNames('ds-radio-button-fieldset');
+        const legendClasses = classNames('ds-radio-button-fieldset__legend');
+        const assistiveTextClasses = classNames('ds-radio-button-fieldset__assistive-text');
+        const ariaDescribedBy = [!!this.dsErrorText && this.errorTextId, !!this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
+        return (h("fieldset", { class: fieldsetClasses, "aria-describedby": ariaDescribedBy }, h("legend", { class: legendClasses }, h("slot", { name: "legend" }, this.getLegendText())), h("slot", { name: "assistiveText" }, this.dsAssistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText))), this.renderRadioButton()));
+    }
+    render() {
+        if (this.dsLegend) {
+            return this.renderFieldset();
+        }
+        return this.renderRadioButton();
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "dsChecked": ["dsCheckedObserver"]
+    }; }
+    static get style() { return dsRadioButtonCss; }
+}, [65, "ds-radio-button", {
+        "dsId": [1, "ds-id"],
+        "dsErrorsDisabled": [4, "ds-errors-disabled"],
+        "dsValue": [1, "ds-value"],
+        "dsLegend": [1, "ds-legend"],
+        "dsAssistiveText": [1, "ds-assistive-text"],
+        "dsText": [1, "ds-text"],
+        "dsRequired": [4, "ds-required"],
+        "dsDisabled": [4, "ds-disabled"],
+        "dsChecked": [4, "ds-checked"],
+        "dsErrorText": [1, "ds-error-text"],
+        "focusable": [32],
+        "invalid": [32],
+        "initialChecked": [32],
+        "validationMessage": [32],
+        "dsFocus": [64],
+        "setFocusable": [64],
+        "setChecked": [64]
+    }, undefined, {
+        "dsChecked": ["dsCheckedObserver"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-radio-button", "ds-icon", "ds-input-validity", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-radio-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsRadioButton$1);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ds-input-validity":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsRadioButton = DsRadioButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsRadioButton, defineCustomElement };

package/dist/components/ds-spinner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsSpinner extends Components.DsSpinner, HTMLElement {}
+export const DsSpinner: {
+    prototype: DsSpinner;
+    new (): DsSpinner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-spinner.js

@@ -0,0 +1,6 @@
+import { D as DsSpinner$1, d as defineCustomElement$1 } from './ds-spinner2.js';
+
+const DsSpinner = DsSpinner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsSpinner, defineCustomElement };

package/dist/components/ds-spinner2.js

@@ -0,0 +1,89 @@
+import { p as proxyCustomElement, H, h } from './index2.js';
+import { a as inheritAriaAttributes } from './attributes.js';
+import { c as classNames } from './index3.js';
+import { d as defineCustomElement$1 } from './ds-visually-hidden2.js';
+
+const dsSpinnerCss = "html{font-size:100%}body{font-size:1rem}.ds-font{}.ds-font--heading{font-family:var(--ds-fontFamily-heading)}.ds-font--body{font-family:var(--ds-fontFamily-body)}.ds-font--regular{font-weight:var(--ds-fontWeight-regular)}.ds-font--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-font--semibold-plus{font-weight:var(--ds-fontWeight-semiboldPlus)}.ds-font--bold{font-weight:var(--ds-fontWeight-bold)}.ds-tracking--xtight{letter-spacing:var(--ds-letterSpacing-xTight)}.ds-tracking--tight{letter-spacing:var(--ds-letterSpacing-tight)}.ds-tracking--normal{letter-spacing:var(--ds-letterSpacing-normal)}.ds-tracking--wide{letter-spacing:var(--ds-letterSpacing-wide)}.ds-tracking--xwide{letter-spacing:var(--ds-letterSpacing-xWide)}.ds-leading--small{line-height:var(--ds-lineHeight-small)}.ds-leading--medium{line-height:var(--ds-lineHeight-medium)}.ds-leading--large{line-height:var(--ds-lineHeight-large)}.ds-leading--xlarge{line-height:var(--ds-lineHeight-xLarge)}.ds-width--normal{font-stretch:var(--ds-fontWidth-normal)}.ds-width--condense{font-stretch:var(--ds-fontWidth-condense)}.ds-number--proportional{font-variant-numeric:var(--ds-number-style)}.ds-paragraph--16{margin-bottom:var(--ds-fontSize-16)}.ds-paragraph--20{margin-bottom:var(--ds-fontSize-20)}.ds-list--spacing{gap:4px}.ds-text-color--default{color:var(--ds-palette-black-95)}.ds-text{}.ds-text--2xl-regular{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-regular)}.ds-text--xl-regular{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular)}.ds-text--lg-regular{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular)}.ds-text--md-regular{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular)}.ds-text--sm-regular{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-text--xs-regular{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular)}.ds-text--2xl-semibold{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-semibold)}.ds-text--xl-semibold{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-semibold)}.ds-text--lg-semibold{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold)}.ds-text--md-semibold{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold)}.ds-text--sm-semibold{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.ds-text--xs-semibold{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-semibold)}.ds-text--2xl-bold{font-size:var(--ds-fontSize-22);font-weight:var(--ds-fontWeight-bold)}.ds-text--xl-bold{font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-bold)}.ds-text--lg-bold{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-bold)}.ds-text--md-bold{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-bold)}.ds-text--sm-bold{font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-bold)}.ds-text--xs-bold{font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-bold)}.ds-spinner{display:flex;align-items:center;justify-content:center;}.ds-spinner--small{padding:1.5px}.ds-spinner--small:has(.ds-spinner__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner--medium{padding:3px}.ds-spinner--medium:has(.ds-spinner__text){gap:var(--ds-spacing-2xSmall)}.ds-spinner--large{padding:3px}.ds-spinner--large:has(.ds-spinner__text){gap:var(--ds-spacing-xSmall)}.ds-spinner--xLarge{padding:5.5px}.ds-spinner--xLarge:has(.ds-spinner__text){gap:10px}.ds-spinner--2xLarge{padding:5.5px}.ds-spinner--2xLarge:has(.ds-spinner__text){gap:var(--ds-spacing-small)}.ds-spinner--below{flex-direction:column;align-items:center}.ds-spinner--right{flex-direction:row;align-items:center}.ds-spinner__spinner{width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border-radius:50%;border:calc(var(--spinner-size, 24px) / 6) solid var(--ds-overlay-black-15);position:relative;display:flex;align-items:center;justify-content:center}.ds-spinner__text{font-family:var(--ds-fontFamily-body);color:var(--ds-palette-black-95)}.ds-spinner__text--white{color:var(--ds-palette-white)}.ds-spinner__segment{display:block;position:absolute;width:var(--spinner-size, 24px);height:var(--spinner-size, 24px);border:calc(var(--spinner-size, 24px) / 6) solid var(--spinner-color, #005a94);border-radius:50%;animation:ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;border-color:var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color)}.ds-spinner__segment--1{animation-delay:-0.3s}.ds-spinner__segment--2{animation-delay:-0.2s}.ds-spinner__segment--3{animation-delay:-0.1s}@keyframes ds-spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ds-spinner__segment{animation-duration:2.2s;animation-timing-function:linear;}.ds-spinner__segment--1{animation-delay:-0.6s}.ds-spinner__segment--2{animation-delay:-0.4s}.ds-spinner__segment--3{animation-delay:-0.2s}}";
+
+const SPINNER_SIZES = {
+    'small': 10,
+    'medium': 14,
+    'large': 20,
+    'xLarge': 28,
+    '2xLarge': 40,
+};
+const SPINNER_TEXT_SIZES = {
+    'small': 'ds-text--xs-regular',
+    'medium': 'ds-text--sm-regular',
+    'large': 'ds-text--md-regular',
+    'xLarge': 'ds-text--lg-regular',
+    '2xLarge': 'ds-text--xl-regular',
+};
+const SPINNER_COLORS = {
+    blue: 'var(--ds-palette-mainBlue-70)',
+    black: 'var(--ds-palette-black-95)',
+    white: 'var(--ds-palette-white)',
+};
+const DsSpinner = proxyCustomElement(class DsSpinner extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    inheritedAttributes = {};
+    get el() { return this; }
+    dsText;
+    dsSize = 'medium';
+    dsSpinnerTextPosition = 'below';
+    dsSpinnerColor = 'blue';
+    dsUseRoleAlert = false;
+    dsUseAriaLive = false;
+    dsHiddenAssistiveText;
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    render() {
+        const sizeInPixels = SPINNER_SIZES[this.dsSize];
+        const textSizeClass = SPINNER_TEXT_SIZES[this.dsSize];
+        const spinnerColorVariable = SPINNER_COLORS[this.dsSpinnerColor];
+        const classes = classNames('ds-spinner', `ds-spinner--${this.dsSize}`, {
+            [`ds-spinner--${this.dsSpinnerTextPosition}`]: !!this.dsText,
+        });
+        const textClasses = classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
+        const segmentClasses = index => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
+        return (h("div", { key: '3d312dd8883b903bb59c8ceface626444ac0df44', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+                '--spinner-size': `${sizeInPixels}px`,
+                '--spinner-color': `${spinnerColorVariable}`,
+                '--spinner-border-color': this.dsSpinnerColor == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
+            }, ...this.inheritedAttributes }, h("div", { key: '81d04de4de327d4b8be4a03a4b0f97d56214547e', class: "ds-spinner__spinner" }, h("div", { key: 'f7136c4637d17bc796d2e69df8aae51244d1d97e', class: segmentClasses(1) }), h("div", { key: 'd839ca7f1aae71616062b82af2d5b7610299bf25', class: segmentClasses(2) }), h("div", { key: 'bcbd84559e7fd2204320f4788837df61aed6208a', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h("ds-visually-hidden", { key: '8b3f758381d1623f84e0c237ec17b97a81a85983' }, h("span", { key: '52930b05b2b868c38f785b09d6bb86dddfde828b' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '91677c1f685820bc32f6c8557df98c1c37cdbf8e', class: textClasses }, this.dsText)));
+    }
+    static get style() { return dsSpinnerCss; }
+}, [1, "ds-spinner", {
+        "dsText": [1, "ds-text"],
+        "dsSize": [1, "ds-size"],
+        "dsSpinnerTextPosition": [1, "ds-spinner-text-position"],
+        "dsSpinnerColor": [1, "ds-spinner-color"],
+        "dsUseRoleAlert": [4, "ds-use-role-alert"],
+        "dsUseAriaLive": [4, "ds-use-aria-live"],
+        "dsHiddenAssistiveText": [1, "ds-hidden-assistive-text"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-spinner", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-spinner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsSpinner);
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { DsSpinner as D, defineCustomElement as d };