@telesign/boreal-web-components 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/cjs/bds-radio-group.cjs.entry.js

@@ -0,0 +1,285 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
+var orientation = require('./orientation-DQAIleEJ.js');
+var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+var Keys = require('./Keys-rKl2za5q.js');
+
+const RADIO_GROUP_TYPES = {
+    RADIO: 'radio'};
+
+const bdsRadioGroupCss = () => `@charset "UTF-8";.bds-radio-group{--bds-divider-gap:var(--boreal-spacing-3xs);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--boreal-spacing-2xs)}.bds-radio-group__options{display:grid;grid-template-columns:1fr;gap:var(--boreal-spacing-xs)}.bds-radio-group[orientation=horizontal] .bds-radio-group__options{grid-template-columns:repeat(var(--layout-count, 1), auto);-ms-flex-pack:start;justify-content:start}.bds-radio-group[type=radiobutton] .bds-radio-group__options{display:-ms-inline-flexbox;display:inline-flex;gap:0;padding:var(--boreal-spacing-3xs);border:1px solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);border-radius:var(--boreal-radius-xs);overflow:hidden}.bds-radio-group[type=radiobutton][orientation=vertical] .bds-radio-group__options{-ms-flex-direction:column;flex-direction:column}.bds-radio-group[type=radiobutton].bds-radio-group--error .bds-radio-group__options{border-color:var(--boreal-stroke-danger-base)}.bds-radio-group[type=radiobutton].bds-radio-group--error bds-radio-button.bds-radio-button--error{color:var(--boreal-stroke-danger-base)}.bds-radio-group[type=radiobutton].bds-radio-group--error bds-divider[data-injected]{--bds-divider-color:var(--boreal-stroke-danger-base)}`;
+
+const LEAF_TAGS = ['BDS-RADIO', 'BDS-RADIO-BUTTON', 'BDS-RADIO-CARD'];
+const BdsRadioGroup = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.bdsChange = index.createEvent(this, "bdsChange");
+        this.valueChange = index.createEvent(this, "valueChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this._id = BaseAttributes.createId('bds-radio-group');
+        /** Internal mirror of the `disabled` prop, kept in sync via `@Watch` and `formDisabledCallback`. */
+        this.isDisabled = false;
+        /** Set to true when native form validation fires the `invalid` event; cleared on reset or when value becomes valid. */
+        this.isInvalid = false;
+        /** Disables all child radios and prevents selection. Also mirrored to isDisabled @State for form-level disable support. */
+        this.disabled = false;
+        /** Shows error styling on the group helper text. Propagated to all child radios. */
+        this.error = false;
+        /** Error message rendered below the radio options when error is true. Replaces helperText. */
+        this.errorMessage = '';
+        /** Helper text rendered below the radio options. Shown in default state; replaced by errorMessage in error state. */
+        this.helperText = '';
+        /** Tooltip text shown on the group label info icon. */
+        this.info = '';
+        /** Group label rendered above the radio options. */
+        this.label = '';
+        /** Layout direction of the radio options. */
+        this.orientation = orientation.ORIENTATIONS.VERTICAL;
+        /** Marks the group as required for form submission. Triggers validity error when no radio is selected. */
+        this.required = false;
+        /** Identifies this group variant. 'radio' renders circular bds-radio children; 'radiobutton' renders bds-radio-button segmented control; 'radiocard' renders bds-radio-card element. */
+        this.type = RADIO_GROUP_TYPES.RADIO;
+        /** Currently selected radio value. Synced to children on change. */
+        this.value = '';
+        this.handleKeyDown = (event) => {
+            const target = event.target;
+            if (!LEAF_TAGS.includes(target.tagName))
+                return;
+            switch (event.key) {
+                case Keys.KEYBOARD.ArrowDown:
+                case Keys.KEYBOARD.ArrowRight:
+                    this.navigateTo(target, true);
+                    event.preventDefault();
+                    break;
+                case Keys.KEYBOARD.ArrowUp:
+                case Keys.KEYBOARD.ArrowLeft:
+                    this.navigateTo(target, false);
+                    event.preventDefault();
+                    break;
+            }
+        };
+        this.handleSlotChange = () => {
+            this.updateLayoutCount();
+        };
+        this._buttonCount = 0;
+    }
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(orientation.ORIENTATIONS), orientation.ORIENTATIONS.VERTICAL, this.el, 'orientation');
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+        this.radioElements.forEach(el => (el.disabled = next));
+    }
+    onErrorChange(val) {
+        this.radioElements.forEach(el => (el.error = val));
+    }
+    onValueChange(val) {
+        this.radioElements.forEach(el => {
+            el.checked = el.value === val;
+            el.setAttribute('aria-checked', String(el.value === val));
+        });
+        const checked = this.radioElements.find(el => el.checked);
+        this.updateTabIndexes(checked ?? null);
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+        this.isDisabled = this.disabled;
+        if (this.value === '') {
+            const lastChecked = Array.from(this.el.querySelectorAll('bds-radio[checked], bds-radio-button[checked], bds-radio-card[checked]')).at(-1);
+            if (lastChecked !== undefined) {
+                this.value = lastChecked.getAttribute('value') ?? '';
+            }
+        }
+    }
+    componentDidLoad() {
+        const checkedChildren = this.radioElements.filter(el => el.checked);
+        if (checkedChildren.length > 1) {
+            checkedChildren.slice(0, -1).forEach(el => (el.checked = false));
+        }
+        this.onValueChange(this.value);
+        if (this.error)
+            this.radioElements.forEach(el => (el.error = true));
+        this.updateLayoutCount();
+        this.updateTabIndexes(this.radioElements.find(el => el.checked) ?? this.radioElements.find(el => !el.disabled) ?? null);
+        this.updateFormValidity();
+    }
+    formAssociatedCallback() {
+        this.syncFormValue();
+    }
+    formResetCallback() {
+        this.value = '';
+        this.isInvalid = false;
+        this.radioElements.forEach(radio => {
+            radio.checked = false;
+            radio.setAttribute('aria-checked', 'false');
+            if (!this.error)
+                radio.error = false;
+        });
+        this.internals.setFormValue(null);
+        this.updateFormValidity();
+        const first = this.radioElements.find(el => !el.disabled);
+        this.updateTabIndexes(first ?? null);
+    }
+    formStateRestoreCallback(state, _mode) {
+        const val = typeof state === 'string' ? state : '';
+        this.value = val;
+        this.internals.setFormValue(val !== '' ? val : null);
+    }
+    formDisabledCallback(disabled) {
+        this.isDisabled = disabled;
+        this.radioElements.forEach(el => (el.disabled = disabled));
+    }
+    handleRadioChange(event) {
+        const target = event.target;
+        if (!LEAF_TAGS.includes(target.tagName))
+            return;
+        this.radioElements
+            .filter(el => el !== target)
+            .forEach(el => {
+            el.checked = false;
+            el.setAttribute('aria-checked', 'false');
+        });
+        this.value = event.detail.value;
+        this.internals.setFormValue(this.value);
+        this.updateTabIndexes(target);
+        this.updateFormValidity();
+        this.bdsChange.emit({ value: this.value });
+        this.valueChange.emit(this.value);
+    }
+    handleInvalid(event) {
+        if (this.errorMessage !== '') {
+            event.preventDefault();
+            this.isInvalid = true;
+            this.radioElements.forEach(el => (el.error = true));
+        }
+    }
+    /** Returns whether the group's current value satisfies the browser's built-in constraint validation. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** Reports the group's validity state to the user, showing native validation UI if invalid. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    navigateTo(current, forward) {
+        const elements = this.radioElements.filter(el => !el.disabled);
+        if (elements.length === 0)
+            return;
+        const idx = elements.indexOf(current);
+        const newIndex = (elements.length + idx + (forward ? 1 : -1)) % elements.length;
+        const next = elements[newIndex];
+        next.checked = true;
+        next.setAttribute('aria-checked', 'true');
+        this.radioElements
+            .filter(el => el !== next)
+            .forEach(el => {
+            el.checked = false;
+            el.setAttribute('aria-checked', 'false');
+        });
+        this.value = next.value;
+        this.internals.setFormValue(this.value);
+        this.updateTabIndexes(next);
+        this.updateFormValidity();
+        this.bdsChange.emit({ value: this.value });
+        this.valueChange.emit(this.value);
+        next.focus();
+    }
+    insertDividers() {
+        this.el.querySelectorAll('bds-divider[data-injected]').forEach(d => d.remove());
+        if (this.type !== 'radiobutton')
+            return;
+        const dividerOrientation = this.orientation === orientation.ORIENTATIONS.HORIZONTAL ? orientation.ORIENTATIONS.VERTICAL : orientation.ORIENTATIONS.HORIZONTAL;
+        const buttons = this.radioElements.filter((el) => el.tagName === 'BDS-RADIO-BUTTON');
+        buttons.forEach((btn, i) => {
+            if (i === 0)
+                return;
+            const divider = document.createElement('bds-divider');
+            divider.setAttribute('orientation', dividerOrientation);
+            divider.setAttribute('data-injected', '');
+            btn.parentNode?.insertBefore(divider, btn);
+        });
+    }
+    get radioElements() {
+        return Array.from(this.el.querySelectorAll('bds-radio, bds-radio-button, bds-radio-card'));
+    }
+    syncFormValue() {
+        this.internals.setFormValue(this.value !== '' ? this.value : null);
+        this.updateFormValidity();
+    }
+    updateFormValidity() {
+        if (this.required && this.value === '') {
+            const anchor = this.radioElements.find(el => !el.disabled);
+            this.internals.setValidity({ valueMissing: true }, this.errorMessage !== '' ? this.errorMessage : 'Please select an option.', anchor);
+        }
+        else {
+            this.internals.setValidity({});
+            if (this.isInvalid) {
+                this.isInvalid = false;
+                if (!this.error)
+                    this.radioElements.forEach(el => (el.error = false));
+            }
+        }
+    }
+    updateLayoutCount() {
+        const count = this.radioElements.length;
+        this.el.style.setProperty('--layout-count', `${count}`);
+        if (count !== this._buttonCount) {
+            this._buttonCount = count;
+            this.insertDividers();
+        }
+    }
+    updateTabIndexes(active) {
+        this.radioElements.forEach(el => el.setAttribute('tabindex', '-1'));
+        if (active !== null)
+            active.setAttribute('tabindex', '0');
+    }
+    get isError() {
+        const error = this.error && !this.disabled;
+        return error || this.isInvalid;
+    }
+    get classMap() {
+        return {
+            'bds-radio-group': true,
+            'bds-radio-group--disabled': this.isDisabled,
+            'bds-radio-group--error': this.isError,
+            'bds-radio-group--required': this.required,
+        };
+    }
+    render() {
+        const labelId = `${this._id}-label`;
+        const helperId = `${this._id}-helper`;
+        const showError = this.isError;
+        const typographyState = this.isDisabled ? 'disabled' : showError ? 'error' : 'default';
+        const helperContent = showError && this.errorMessage !== '' ? this.errorMessage : this.helperText;
+        return (index.h(index.Host, { key: 'ab755f253ab7096e8ed0efa7196cedd96cdc7ca8', class: this.classMap, role: "radiogroup", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": helperContent !== '' ? helperId : undefined, "aria-invalid": showError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onKeyDown: this.handleKeyDown }, this.label && (index.h("bds-typography", { key: '85bc7d114efabd92930c6c934c19e4ba887a3663', id: labelId, variant: "label", state: typographyState, required: this.required, tooltipText: this.info !== '' ? this.info : undefined }, this.label)), index.h("div", { key: '3f1670875353369c608c9cf064ccb1b7beede19a', class: "bds-radio-group__options" }, index.h("slot", { key: 'b0d52880c82dec9557c10bcf7ef8930299bdf7a6', onSlotchange: this.handleSlotChange })), helperContent && (index.h("bds-typography", { key: 'f0a17de329944c3fe63cf7cb586ec85016693208', id: helperId, variant: "helper", state: typographyState }, helperContent))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "orientation": [{
+                "checkPropValues": 0
+            }],
+        "disabled": [{
+                "onDisabledChange": 0
+            }],
+        "error": [{
+                "onErrorChange": 0
+            }],
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+BdsRadioGroup.style = bdsRadioGroupCss();
+
+exports.bds_radio_group = BdsRadioGroup;

package/dist/cjs/bds-radio.cjs.entry.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+
+const bdsRadioCss = () => `@charset "UTF-8";.bds-radio__content,.bds-radio__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bds-radio__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-radio{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs);cursor:pointer;outline:none}.bds-radio input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-radio__content{gap:var(--boreal-spacing-3xs)}.bds-radio__icon{-ms-flex-negative:0;flex-shrink:0;line-height:1}.bds-radio__label{font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default)}.bds-radio__button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:18px;height:18px;border-radius:var(--boreal-radius-full);border:1px solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio__dot{width:10px;height:10px;border-radius:var(--boreal-radius-full);background-color:transparent;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio__info-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--boreal-typography-font-size-sm);line-height:1;color:var(--boreal-icon-default-ink)}.bds-radio:hover:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__button{border-color:var(--boreal-stroke-default-light);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-radio:hover:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__dot{background-color:var(--boreal-ui-base-light)}.bds-radio:is(:focus-visible,:focus) .bds-radio__button{-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-radio:active:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__button{-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-radio--checked .bds-radio__button{border-color:var(--boreal-stroke-primary-base)}.bds-radio--checked .bds-radio__dot{background-color:var(--boreal-ui-primary-base)}.bds-radio--error .bds-radio__button{border-color:var(--boreal-stroke-danger-base)}.bds-radio--disabled{cursor:not-allowed;pointer-events:none}.bds-radio--disabled .bds-radio__button{border-color:var(--boreal-stroke-default-light);background-color:var(--boreal-ui-disabled)}.bds-radio--disabled .bds-radio__label{color:var(--boreal-text-disabled)}.bds-radio--disabled.bds-radio--checked .bds-radio__button{border-color:var(--boreal-ui-primary-light)}.bds-radio--disabled.bds-radio--checked .bds-radio__dot{background-color:var(--boreal-ui-primary-light)}`;
+
+const BdsRadio = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bdsChange = index.createEvent(this, "bdsChange");
+        /** Whether this radio is selected. Managed by bds-radio-group; can be set directly when used standalone. */
+        this.checked = false;
+        /** Disables the radio, preventing interaction and selection. */
+        this.disabled = false;
+        /** Value submitted with the form when this radio is selected. */
+        this.value = 'on';
+        /** Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone. */
+        this.name = '';
+        /** Label text displayed next to the radio indicator. Falls back to the default slot when empty. */
+        this.label = '';
+        /** Shows error styling on the radio indicator. Propagated by bds-radio-group. */
+        this.error = false;
+        /** Tooltip text shown on an info icon next to the label. */
+        this.info = '';
+        this.handleClick = () => this.select();
+        this.handleKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.select();
+            }
+        };
+    }
+    componentDidLoad() {
+        this.el.setAttribute('role', 'radio');
+        this.el.setAttribute('aria-checked', String(this.checked));
+        this.el.setAttribute('tabindex', '-1');
+    }
+    select() {
+        if (this.disabled || this.checked)
+            return;
+        this.checked = true;
+        this.el.setAttribute('aria-checked', 'true');
+        this.bdsChange.emit({ checked: true, value: this.value });
+    }
+    get classMap() {
+        return {
+            'bds-radio': true,
+            'bds-radio--checked': this.checked,
+            'bds-radio--error': this.error,
+            'bds-radio--disabled': this.disabled,
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '1d68465b5124471bda9fb1e4f3dc022d4f22be6d', class: this.classMap, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("input", { key: '8c820cf327a9978f6f098794e26a4ec0394e99c3', type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), index.h("span", { key: '6de9fcb7657842b81b4bf803e3e60b6891fef27e', class: "bds-radio__button" }, index.h("span", { key: '660c57e990abc4f6f1288f93c198e9bb60be6c29', class: "bds-radio__dot" })), index.h("span", { key: 'ec3879d0edb42cdbc7b4257d563d9c298fd3b89d', class: "bds-radio__content" }, index.h("span", { key: '430b04fd6f836cf2881fecf9df56bee70486da85', class: "bds-radio__icon" }, index.h("slot", { key: '30dcf8837cd50a9e48a6c061576f7b9d53eeabd9', name: "icon" })), index.h("span", { key: 'dbb139d87c4689a64e2860b365d7c261c56b638b', class: "bds-radio__label" }, this.label || index.h("slot", { key: 'a7d985fa9773a8f285c36f3deaeb7112adf20f95' })), this.info && (index.h("span", { key: '36958330fd1ed9fa6f64bcf757c9be113fae5daf', class: "bds-radio__info" }, index.h("span", { key: 'ea5a415943c9f67f027a4b241d024ea61321a8a1', class: "bds-radio__info-icon bds-icon-info-circle", "aria-hidden": "true" }), index.h("bds-tooltip", { key: '875105c226c6d1fb90d62fe275ed544f043a1c19' }, this.info))))));
+    }
+    get el() { return index.getElement(this); }
+};
+BdsRadio.style = bdsRadioCss();
+
+exports.bds_radio = BdsRadio;

package/dist/cjs/bds-spinner.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BcSjvXJk.js');
-var validateProps = require('./validateProps-BNOBk1Xs.js');
+var index = require('./index-CwYIVC9N.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
 
 const SPINNER_SIZES = {
     SMALL: 'sm',
@@ -9,7 +9,7 @@ const SPINNER_SIZES = {
     LARGE: 'lg',
 };
 
-const bdsSpinnerCss = () => `@charset "UTF-8";:host{display:block}.bds-spinner{display:inline-block;position:relative;width:1em;height:1em}.bds-spinner::before,.bds-spinner::after{content:"";position:absolute;border-color:transparent transparent var(--boreal-primary-base) transparent;border-radius:50%;border-width:3px;border-style:solid;top:0;left:0;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.bds-spinner::before{opacity:0.2;border-style:dashed;-webkit-animation:spin 0.8s linear infinite;animation:spin 0.8s linear infinite}.bds-spinner::after{-webkit-animation:draw-arc 0.8s linear infinite;animation:draw-arc 0.8s linear infinite}.bds-spinner--small{width:var(--boreal-layout-m);height:var(--boreal-layout-m)}.bds-spinner--medium{width:var(--boreal-layout-ml);height:var(--boreal-layout-ml)}.bds-spinner--large{width:var(--boreal-layout-xl);height:var(--boreal-layout-xl)}.bds-spinner__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0, 0, 0, 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;border:0}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes draw-arc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}60%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}65%{-webkit-transform:rotate(335deg);transform:rotate(335deg)}90%{-webkit-transform:rotate(350deg);transform:rotate(350deg)}95%{-webkit-transform:rotate(355deg);transform:rotate(355deg)}98%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes draw-arc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}60%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}65%{-webkit-transform:rotate(335deg);transform:rotate(335deg)}90%{-webkit-transform:rotate(350deg);transform:rotate(350deg)}95%{-webkit-transform:rotate(355deg);transform:rotate(355deg)}98%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
+const bdsSpinnerCss = () => `@charset "UTF-8";bds-spinner{display:inline-block;position:relative;width:1em;height:1em}bds-spinner::before,bds-spinner::after{content:"";position:absolute;border-color:transparent transparent var(--boreal-primary-base) transparent;border-radius:50%;border-width:3px;border-style:solid;top:0;left:0;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}bds-spinner::before{opacity:0.2;border-style:dashed;-webkit-animation:spin 0.8s linear infinite;animation:spin 0.8s linear infinite}bds-spinner::after{-webkit-animation:draw-arc 0.8s linear infinite;animation:draw-arc 0.8s linear infinite}.bds-spinner--small{width:var(--boreal-layout-m);height:var(--boreal-layout-m)}.bds-spinner--medium{width:var(--boreal-layout-ml);height:var(--boreal-layout-ml)}.bds-spinner--large{width:var(--boreal-layout-xl);height:var(--boreal-layout-xl)}.bds-spinner__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0, 0, 0, 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;border:0}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes draw-arc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}60%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}65%{-webkit-transform:rotate(335deg);transform:rotate(335deg)}90%{-webkit-transform:rotate(350deg);transform:rotate(350deg)}95%{-webkit-transform:rotate(355deg);transform:rotate(355deg)}98%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes draw-arc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}60%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}65%{-webkit-transform:rotate(335deg);transform:rotate(335deg)}90%{-webkit-transform:rotate(350deg);transform:rotate(350deg)}95%{-webkit-transform:rotate(355deg);transform:rotate(355deg)}98%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
 
 const BdsSpinner = class {
     constructor(hostRef) {
@@ -40,7 +40,7 @@ const BdsSpinner = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'b38497732140f7e9dd155199c49f8365f00b004b', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, index.h("span", { key: '47befa4469a3cf297493c54bcb8acc5bca76fbd3', class: "bds-spinner__sr-only" }, this.label)));
+        return (index.h(index.Host, { key: '7e7846adadb6224abfcaaf2478768b72ec712659', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, index.h("span", { key: '1c6aad446ed35a3adcb4e4f28fd4a3e7b9b7cb3a', class: "bds-spinner__sr-only" }, this.label)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-status.cjs.entry.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var states = require('./states-BweP5Vpu.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const INDICATOR_TYPES = {
+    NONE: 'none',
+    DOT: 'dot',
+    ICON: 'icon',
+};
+
+const bdsStatusCss = () => `@charset "UTF-8";.bds-status{color:var(--boreal-text-default-ink);text-align:center;font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-xs);font-style:normal;font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-xs);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:var(--boreal-spacing-3xs);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);min-height:var(--boreal-spacing-ml);border-radius:var(--boreal-radius-xs)}.bds-status>[slot=icon]{display:none}.bds-status--icon>[slot=icon]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--boreal-layout-s);height:var(--boreal-layout-s)}.bds-status__dot{background-color:var(--boreal-icon-default-light);width:var(--boreal-spacing-xs);height:var(--boreal-spacing-xs);border-radius:var(--boreal-radius-full)}.bds-status--neutral{color:var(--boreal-text-default-ink);background-color:var(--boreal-ui-default-lighter)}.bds-status--neutral>.bds-status__dot{background-color:var(--boreal-icon-default-lighter)}.bds-status--neutral>[slot=icon]{color:var(--boreal-icon-default-lighter)}.bds-status--neutral>.bds-status__dot{background-color:var(--boreal-icon-default-light)}.bds-status--pending{color:var(--boreal-text-warning-dark);background-color:var(--boreal-ui-warning-lighter)}.bds-status--pending>.bds-status__dot{background-color:var(--boreal-icon-warning-base)}.bds-status--pending>[slot=icon]{color:var(--boreal-icon-warning-base)}.bds-status--in-progress{color:var(--boreal-text-information-dark);background-color:var(--boreal-ui-info-lighter)}.bds-status--in-progress>.bds-status__dot{background-color:var(--boreal-icon-info-base)}.bds-status--in-progress>[slot=icon]{color:var(--boreal-icon-info-base)}.bds-status--complete{color:var(--boreal-text-success-dark);background-color:var(--boreal-ui-success-lighter)}.bds-status--complete>.bds-status__dot{background-color:var(--boreal-icon-success-base)}.bds-status--complete>[slot=icon]{color:var(--boreal-icon-success-base)}.bds-status--cancel{color:var(--boreal-text-danger-dark);background-color:var(--boreal-ui-danger-lighter)}.bds-status--cancel>.bds-status__dot{background-color:var(--boreal-icon-danger-base)}.bds-status--cancel>[slot=icon]{color:var(--boreal-icon-danger-base)}`;
+
+const BdsStatus = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** state is a string attribute. Controls the visual state variant of the status badge.
+         * Determines the background, accent, and text colors applied to the element.
+         * An invalid value falls back to `"neutral"` and a warning is set on the host element. */
+        this.state = states.PROCESS_STATUS.NEUTRAL;
+        /** indicator is a string attribute. Controls the type of indicator rendered before the slotted label.
+         * An invalid value falls back to `"none"` and a warning is set on the host element. */
+        this.indicator = INDICATOR_TYPES.NONE;
+    }
+    /** Validates the `state` prop against the set of allowed values.
+     * Falls back to `"neutral"` when an invalid value is detected. */
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(states.PROCESS_STATUS), states.PROCESS_STATUS.NEUTRAL, this.el, 'state');
+        validateProps.validatePropValue(Object.values(INDICATOR_TYPES), INDICATOR_TYPES.NONE, this.el, 'indicator');
+    }
+    /** Before component rendered */
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    /* Method to get the class map based on the status prop */
+    get classMap() {
+        return {
+            'bds-status': true,
+            [`bds-status--${this.state}`]: true,
+            [`bds-status--${this.indicator}`]: true,
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '9a952b22de8565fcca464d045f71ea86c92c8632', class: this.classMap, role: "status" }, this.indicator === INDICATOR_TYPES.DOT ? index.h("div", { class: "bds-status__dot", "aria-hidden": "true" }) : '', index.h("slot", { key: '47e03b139fcb4da8b15fe115518856c54d02a320', name: "icon" }), index.h("slot", { key: 'e512e975c2df8fa3e3380f27808eec96be5ad455' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "state": [{
+                "checkPropValues": 0
+            }],
+        "indicator": [{
+                "checkPropValues": 0
+            }]
+    }; }
+};
+BdsStatus.style = bdsStatusCss();
+
+exports.bds_status = BdsStatus;

package/dist/cjs/bds-tag.cjs.entry.js

@@ -0,0 +1,140 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const TAG_COLORS = {
+    GRAY: 'gray',
+    CYAN: 'cyan',
+    TEAL: 'teal',
+    LIME: 'lime',
+    ORANGE: 'orange',
+    COBALT: 'cobalt',
+    ROSE: 'rose',
+    PURPLE: 'purple',
+};
+
+const bdsTagCss = () => `@charset "UTF-8";.bds-tag{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;vertical-align:middle;gap:var(--boreal-spacing-3xs);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-3xs) var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);border-radius:var(--boreal-radius-m);cursor:default;max-width:100%;min-width:0;font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-xs)}.bds-tag:hover:not(.bds-tag--selected):not(.bds-tag--disabled){-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-tag:focus:not(.bds-tag--selected){outline:none;-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-tag--selected{outline:none;-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-tag__icon{font-size:var(--boreal-typography-font-size-md);max-height:var(--boreal-spacing-m)}.bds-tag__icon:empty{display:none}.bds-tag__text{margin-right:var(--boreal-spacing-2xs);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bds-tag__close-button{display:-ms-flexbox;display:flex;padding:var(--boreal-spacing-3xs);width:var(--boreal-spacing-s);height:var(--boreal-spacing-s);-webkit-box-sizing:content-box;box-sizing:content-box;border-radius:var(--boreal-radius-full);border:0px solid transparent;background-color:transparent;opacity:0.5;cursor:pointer}.bds-tag__close-button:hover{-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);background-color:var(--boreal-ui-inverse);opacity:0.5}.bds-tag__close-button:focus{background-color:var(--boreal-ui-inverse);opacity:0.5;outline:none;-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-tag__close-button:active{background-color:var(--boreal-ui-inverse);opacity:0.5;-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset, 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset, 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset}.bds-tag--disabled{cursor:not-allowed}.bds-tag--disabled .bds-tag__close-button{pointer-events:none}.bds-tag--gray{background-color:var(--boreal-extended-onyx-light);color:var(--boreal-extended-onyx-dark)}.bds-tag--gray .bds-tag__close-button{color:var(--boreal-extended-onyx-dark)}.bds-tag--gray.bds-tag--disabled{color:var(--boreal-extended-onyx-base);background-color:var(--boreal-extended-onyx-lighter)}.bds-tag--gray.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-onyx-base)}.bds-tag--purple{background-color:var(--boreal-extended-purple-light);color:var(--boreal-extended-purple-dark)}.bds-tag--purple .bds-tag__close-button{color:var(--boreal-extended-purple-dark)}.bds-tag--purple.bds-tag--disabled{color:var(--boreal-extended-purple-light);background-color:var(--boreal-extended-purple-lighter)}.bds-tag--purple.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-purple-light)}.bds-tag--rose{background-color:var(--boreal-extended-rose-light);color:var(--boreal-extended-rose-dark)}.bds-tag--rose .bds-tag__close-button{color:var(--boreal-extended-rose-dark)}.bds-tag--rose.bds-tag--disabled{color:var(--boreal-extended-rose-light);background-color:var(--boreal-extended-rose-lighter)}.bds-tag--rose.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-rose-light)}.bds-tag--lime{background-color:var(--boreal-extended-lime-light);color:var(--boreal-extended-lime-dark)}.bds-tag--lime .bds-tag__close-button{color:var(--boreal-extended-lime-dark)}.bds-tag--lime.bds-tag--disabled{color:var(--boreal-extended-lime-light);background-color:var(--boreal-extended-lime-lighter)}.bds-tag--lime.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-lime-light)}.bds-tag--cobalt{background-color:var(--boreal-extended-cobalt-light);color:var(--boreal-extended-cobalt-dark)}.bds-tag--cobalt .bds-tag__close-button{color:var(--boreal-extended-cobalt-dark)}.bds-tag--cobalt.bds-tag--disabled{color:var(--boreal-extended-cobalt-light);background-color:var(--boreal-extended-cobalt-lighter)}.bds-tag--cobalt.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-cobalt-light)}.bds-tag--orange{background-color:var(--boreal-extended-orange-light);color:var(--boreal-extended-orange-dark)}.bds-tag--orange .bds-tag__close-button{color:var(--boreal-extended-orange-dark)}.bds-tag--orange.bds-tag--disabled{color:var(--boreal-extended-orange-light);background-color:var(--boreal-extended-orange-lighter)}.bds-tag--orange.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-orange-light)}.bds-tag--teal{background-color:var(--boreal-extended-teal-light);color:var(--boreal-extended-teal-dark)}.bds-tag--teal .bds-tag__close-button{color:var(--boreal-extended-teal-dark)}.bds-tag--teal.bds-tag--disabled{color:var(--boreal-extended-teal-light);background-color:var(--boreal-extended-teal-lighter)}.bds-tag--teal.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-teal-light)}.bds-tag--cyan{background-color:var(--boreal-extended-cyan-light);color:var(--boreal-extended-cyan-dark)}.bds-tag--cyan .bds-tag__close-button{color:var(--boreal-extended-cyan-dark)}.bds-tag--cyan.bds-tag--disabled{color:var(--boreal-extended-cyan-light);background-color:var(--boreal-extended-cyan-lighter)}.bds-tag--cyan.bds-tag--disabled .bds-tag__close-button{color:var(--boreal-extended-cyan-light)}`;
+
+const BdsTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bdsClose = index.createEvent(this, "bdsClose");
+        this.bdsSelect = index.createEvent(this, "bdsSelect");
+        this._id = BaseAttributes.createId('bds-tag');
+        this.internalSelected = false;
+        /**
+         * Whether the tag is selectable or not.
+         * @default false
+         */
+        this.multiselect = false;
+        /**
+         * Whether the tag is selected or not.
+         * @default false
+         */
+        this.selected = false;
+        /**
+         * Aria label for the close button when visible.
+         */
+        this.closeButtonLabel = 'Close tag';
+        /**
+         * Visual color variant: 'gray', 'cyan', 'cobalt', 'teal', 'lime', 'orange', 'rose', or 'purple'.
+         * @default "gray"
+         */
+        this.color = TAG_COLORS.GRAY;
+        /**
+         * Hides the close button that allows users to dismiss the tag.
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Disables interaction with the tag. Reduces opacity and prevents interactions.
+         * @default false
+         */
+        this.disabled = false;
+        this.handleClose = (e) => {
+            if (this.disabled)
+                return;
+            if (e !== undefined) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            this.bdsClose.emit({ id: this._id, selected: this.internalSelected, el: this.el });
+        };
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            const selectionKeys = [' ', 'Enter'];
+            const closeKeys = ['Delete', 'Backspace'];
+            if (!this.readonly && closeKeys.includes(e.key)) {
+                this.handleClose(e);
+                return;
+            }
+            if (selectionKeys.includes(e.key) && e.target === this.el) {
+                e.preventDefault();
+                this.handleSelection();
+            }
+        };
+        this.handleSelection = () => {
+            if (this.disabled)
+                return;
+            if (this.multiselect) {
+                this.internalSelected = !this.internalSelected;
+                this.bdsSelect.emit({ id: this._id, selected: this.internalSelected, el: this.el });
+            }
+        };
+    }
+    componentWillLoad() {
+        this.syncSelectedFromProp(this.selected);
+        this.checkPropValues();
+        this.validateMultiselectRole();
+    }
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(TAG_COLORS), TAG_COLORS.GRAY, this.el, 'color');
+    }
+    syncSelectedFromProp(newValue) {
+        this.internalSelected = newValue;
+    }
+    validateMultiselectRole() {
+        if (!this.multiselect)
+            return;
+        const VALID_TAG_PARENTS = '[role="listbox"], [role="group"], bds-tag-group';
+        const el = this.el;
+        if (el.closest(VALID_TAG_PARENTS) === null) {
+            console.warn('[BorealDS Tag] Missing required ARIA parent. Expected role="listbox", role="group", or <bds-tag-group> when multiselect=true.');
+        }
+    }
+    getClasses() {
+        return {
+            'bds-tag': true,
+            [`bds-tag--${this.color}`]: true,
+            'bds-tag--disabled': this.disabled,
+            'bds-tag--selected': this.internalSelected,
+        };
+    }
+    renderTag() {
+        return (index.h(index.Fragment, null, index.h("span", { "aria-hidden": "true", class: "bds-tag__icon" }, index.h("slot", { name: "icon" })), index.h("span", { class: "bds-tag__text" }, index.h("slot", null))));
+    }
+    renderCloseIcon() {
+        return (index.h("button", { class: "bds-tag__close-button", "aria-label": this.closeButtonLabel, onClick: e => this.handleClose(e), disabled: this.disabled, type: "button" }, index.h("em", { class: "bds-icon-close", "aria-hidden": "true" })));
+    }
+    render() {
+        const classes = this.getClasses();
+        const hasCloseButton = !this.readonly;
+        const isSelectable = this.multiselect;
+        return (index.h(index.Host, { key: 'bd62a05fccbfa4aed3b7f72b9edf800c3ab05362', class: classes, role: isSelectable ? 'option' : undefined, tabIndex: isSelectable && !this.disabled ? 0 : -1, "aria-disabled": this.disabled ? 'true' : undefined, "aria-selected": isSelectable ? `${this.internalSelected}` : undefined, onKeyDown: !this.disabled ? (e) => this.handleKeyDown(e) : undefined, onClick: !this.disabled ? this.handleSelection : undefined, id: this._id }, this.renderTag(), hasCloseButton && this.renderCloseIcon()));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "color": [{
+                "checkPropValues": 0
+            }],
+        "selected": [{
+                "syncSelectedFromProp": 0
+            }]
+    }; }
+};
+BdsTag.style = bdsTagCss();
+
+exports.bds_tag = BdsTag;