@riverty/web-components 6.2.0 → 6.3.0

package/dist/esm/r-button.entry.js

@@ -1,147 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
-
-const buttonCss = ":host{display:inline-flex;vertical-align:top;opacity:1;outline:none}:host(:focus-within:not(:active)){--r-button--box-shadow:0 0 0 1px var(--r-border-focused-outlined, #fff),\n    0 0 0 3px var(--r-border-focused),\n    0 0 0 4px var(--r-border-focused-outlined, #fff);--r-button--outline:2px solid var(--r-border-focused);--r-button--outline-offset:2px}:host(:hover:not(:active):not([disabled]:not([disabled=false]))){--r-button--border-color:var(--r-border-soft, #686868);--r-button--color:var(--r-text-regular, #282828);--r-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([disabled]:not([disabled=false])){--r-button--opacity:0.4;--r-button--cursor:not-allowed;--r-button--box-shadow:none}:host([size=small]){--r-button--font-size:var(--r-font-size-300, 0.875rem);--r-button--padding:0.642em 0.857em;--r-button--height:2.75rem}:host([icon-position=end]){--r-button--slot--flex-direction:row-reverse}:host([data-icon-only=start]){--r-button--padding:0.875em}:host([variant=secondary]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:var(--r-border-regular, #282828);--r-button--background-color:rgba(0,0,0,0)}:host([variant=secondary]:not([disabled]:not([disabled=false])):hover){--r-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04));--r-button--border-color:var(--r-border-soft, #686868)}:host([variant=secondary] .r-button:not([aria-disabled=true]):active){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:var(--r-border-soft, #686868);--r-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=text]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:rgba(0,0,0,0);--r-button--background-color:rgba(0,0,0,0);--r-button--slot--position:relative;--r-button--slot--text-decoration:underline}:host([variant=text]:hover:not([disabled]:not([disabled=false]))){--r-button--border-color:var(--r-border-soft, #686868);--r-button--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=text] .r-button:not([aria-disabled=true]):active){--r-button--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12));--r-button--border-color:var(--r-border-soft, #686868)}:host([variant=text][text-position=left]){--r-button--padding:0.875em var(--spacing-175, 1.75rem) 0.875em 0}:host([variant=text][text-position=right]){--r-button--padding:0.875em 0 0.875em var(--spacing-175, 1.75rem)}:host([variant=text-inline]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:transparent;--r-button--background-color:transparent;--r-button--padding:0 0 0.5rem 0;--r-button--height:auto;--r-button--slot--text-decoration:underline}:host([variant=text-inline]:hover:not([disabled]:not([disabled=false]))){--r-button--slot--text-decoration:none;--r-button--border-color:transparent;--r-button--background-color:transparent}:host([variant=text-inline]:active:not([disabled]:not([disabled=false]))){--r-button--border-color:transparent;--r-button--background-color:transparent}:host([variant=blank]){--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:rgba(0,0,0,0);--r-button--background-color:rgba(0,0,0,0);--r-button--border-width:0;--r-button--padding:0}:host([variant=blank]) .r-button:active{--r-button--border-width:0;--r-button--background-color:rgba(0,0,0,0)}:host([variant=blank]:hover:not([disabled]:not([disabled=false]))){--r-button--color:var(--r-text-regular, #282828)}:host([expanded]),:host([full-width]:not([full-width=false])){display:block;--r-button--display:flex;--r-button--width:100%}.r-button{display:var(--r-button--display, inline-flex);align-items:var(--r-button--align-items, center);justify-content:var(--r-button--justify-content, center);width:var(--r-button--width, auto);height:var(--r-button--height, 3rem);position:var(--r-button--position, static);top:var(--r-button--top, auto);left:var(--r-button--left, auto);box-sizing:var(--r-button--box-sizing, border-box);outline:var(--r-button--outline, none);outline-offset:var(--r-button--outline-offset, 0);cursor:var(--r-button--cursor, pointer);font-family:var(--r-button--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-button--font-weight, 400);text-align:var(--r-button--text-align, center);text-transform:var(--r-button--text-transform, uppercase);text-decoration:var(--r-button--text-decoration, none);background-color:var(--r-button--background-color, var(--r-background-interactive-regular, #282828));border-width:var(--r-button--border-width, 1px);border-style:var(--r-button--border-style, solid);border-color:var(--r-button--border-color, var(--r-border-strong, #000));color:var(--r-button--color, var(--r-text-inverse, #fff));font-size:var(--r-button--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-button--line-height, 1);letter-spacing:var(--r-button--letter-spacing, 0.04em);padding:var(--r-button--padding, 0.875em var(--r-spacing-175, 1.75rem));box-shadow:var(--r-button--box-shadow, none);pointer-events:var(--r-button--pointer-events, auto);z-index:var(--r-button--z-index, initial);vertical-align:var(--r-button--vertical-align, top);opacity:var(--r-button--opacity, 1)}.r-button:not([aria-disabled=true]):active{--r-button--color:var(--r-button--color--active, var(--r-text-regular, #282828));--r-button--background-color:var(--r-button--background-color--active, var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12)));--r-button--border-color:var(--r-button--border-color--active, var(--r-border-soft, #686868))}.r-button--slot{position:var(--r-button--slot--position, relative);display:var(--r-button--slot--display, flex);flex:var(--r-button--slot--flex, 1);flex-direction:var(--r-button--slot--flex-direction, row);align-items:var(--r-button--slot--align-items, center);justify-content:var(--r-button--slot--justify-content, center);gap:var(--r-button--gap, 0.5em);font-weight:var(--r-button--slot--font-weight, var(--r-font-weight-regular, 400));text-decoration:var(--r-button--slot--text-decoration, none);text-decoration-color:var(--r-button--slot--text-decoration-color, var(--r-button-color, inherit));text-underline-offset:var(--r-button--slot--text-underline-offset, 0.5rem)}";
-
-const Button = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.rClick = createEvent(this, "rClick");
-        /**
-         * Button behavior, corresponding to
-         * [native `type` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
-         */
-        this.type = 'button';
-        /** Visual size */
-        this.size = 'large';
-        /** Presentational style */
-        this.variant = 'primary';
-        /** Position of an icon within button.
-         * Only use it when 'icon' is specified.
-         * */
-        this.iconPosition = 'start';
-        this._activateTmpButton = (formEl) => {
-            if (!formEl) {
-                return;
-            }
-            const { type } = this;
-            switch (type) {
-                case 'submit':
-                case 'reset': {
-                    /* Create temporary button inside the <form>
-                       and either submit or reset it based on button type */
-                    const tmpButton = document.createElement('button');
-                    tmpButton.type = type;
-                    tmpButton.style.display = 'none';
-                    formEl.appendChild(tmpButton);
-                    tmpButton.click();
-                    tmpButton.remove();
-                    break;
-                }
-            }
-        };
-        /**
-         * Handles button action based on its type attribute
-         * @param {Event} event event<Event> from onClick on the component
-         */
-        this.handleClick = (event) => {
-            if (this.disabled)
-                return;
-            if (!this.hasShadowDom)
-                return;
-            if (!this.isLink && this.isResetOrSubmit) {
-                event.preventDefault();
-                this._activateTmpButton(this.formEl);
-            }
-            this.rClick.emit();
-        };
-        this.handleSlotChange = () => {
-            this.host.setAttribute('data-icon-only', `${this.isIconOnly}`);
-        };
-    }
-    handleIconChange() {
-        this.host.setAttribute('data-icon-only', `${this.isIconOnly}`);
-    }
-    /** Simulate a button click */
-    async triggerClick() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.click();
-    }
-    /** Set focus on the button */
-    async setFocus() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /** Remove focus from the button */
-    async setBlur() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    get hasText() {
-        return this.host.textContent.trim().length > 0;
-    }
-    get hasIcon() {
-        const isIconInSlot = this.host.querySelector('r-icon') !== null;
-        const isIconInShadow = this.host.shadowRoot.querySelector('r-icon') !== null;
-        return isIconInSlot || isIconInShadow;
-    }
-    get isIconOnly() {
-        return this.hasIcon && !this.hasText;
-    }
-    get isLink() {
-        return typeof this.href === 'string';
-    }
-    get hasShadowDom() {
-        const { host } = this;
-        return !!host.shadowRoot && !!host.attachShadow;
-    }
-    get formEl() {
-        const { form, host } = this;
-        /** If form attr contains form id */
-        if (typeof form === 'string') {
-            const formEl = document.getElementById(form);
-            if (formEl instanceof HTMLFormElement) {
-                return formEl;
-            }
-        }
-        /** If form attr is not defined checking for form as parent */
-        if (typeof form === 'undefined') {
-            const formEl = host.closest('form');
-            if (formEl instanceof HTMLFormElement) {
-                return formEl;
-            }
-        }
-        return null;
-    }
-    get isResetOrSubmit() {
-        return this.type === 'submit' || this.type === 'reset';
-    }
-    get hasIconSlot() {
-        return !!this.host.querySelector('[slot="icon"]');
-    }
-    get ariaCurrentValue() {
-        const { rAriaCurrent } = this;
-        return !rAriaCurrent || rAriaCurrent === "false" ? null : rAriaCurrent;
-    }
-    componentDidLoad() {
-        this.host.dataset.iconOnly = `${this.isIconOnly}`;
-    }
-    render() {
-        const { type, disabled, form, href, target, isLink, icon, iconPosition, rAriaLabel } = this;
-        const linkAttr = disabled ? { 'aria-disabled': 'true', role: 'link' } : { href, target };
-        const btnAttr = { 'aria-disabled': `${disabled || false}`, disabled, type, form };
-        const attrs = isLink ? Object.assign({}, linkAttr) : Object.assign({}, btnAttr);
-        const iconAttrs = {
-            name: icon,
-            position: iconPosition
-        };
-        const TagName = isLink ? 'a' : 'button';
-        return (h(Host, { key: '031466e55efe7e99791d10758a20f4b37e907b00' }, h(TagName, Object.assign({ key: 'a3ae13e71992fd688a97ce7dda45d981cbc5dd6c', class: "r-button" }, attrs, { "aria-label": rAriaLabel || null, "aria-current": this.ariaCurrentValue, ref: (el) => (this.nativeElement = el), onClick: this.handleClick }), h("span", { key: 'da45d9ce4699302833b83c49b0767347fc4157e4', class: "r-button--slot" }, icon && h("r-icon", Object.assign({ key: 'dc20d6e8d16b4c179f2568467acda503eb0e89e2', name: icon }, iconAttrs, { size: "s" })), this.hasIconSlot && h("slot", { key: '43fbd25fd7d938ee2a7d872194ff72bc2d7695f3', name: "icon" }), h("div", { key: '26f26cf15e77c7e4b72992dee1a08851848fc0bd', style: { display: 'contents' } }, h("slot", { key: 'ce694ed33656d76e6e094a5655dc598ca6df4a5b', onSlotchange: this.handleSlotChange }))))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "icon": ["handleIconChange"]
-    }; }
-};
-Button.style = buttonCss;
-
-export { Button as r_button };

package/dist/esm/r-checkbox-group.entry.js

@@ -1,230 +0,0 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-CTxpqopm.js';
-
-const checkboxGroupCss = ":host([show-select-all]:not([show-select-all=false])){--r-checkbox-group--content--margin-left:calc(1.5rem + 1rem);--r-checkbox-group--content--padding-left:var(--r-spacing-100, 1rem);--r-checkbox-group--label--hint--margin-bottom:0}:host([invalid]:not([invalid=false])) ::slotted(r-checkbox){--r-checkbox--box--border-color:var(--r-status-error-regular, #b00c15);--r-checkbox--box--background-color:var(--r-status-error-soft, #fef6f6);--r-checkbox--marker--color:var(--r-status-error-regular, #b00c15)}.r-checkbox-group{display:var(--r-checkbox-group--display, flex);flex-direction:var(--r-checkbox-group--flex-direction, column);border:var(--r-checkbox-group--border, none);margin:var(--r-checkbox-group--margin, 0);padding:var(--r-checkbox-group--padding, 0);width:var(--r-checkbox-group--width, 100%)}.r-checkbox-group--label{padding:var(--r-checkbox-group--label--padding, 0);display:var(--r-checkbox-group--label--display, block);width:var(--r-checkbox-group--label--width, 100%);margin:var(--r-checkbox-group--label--margin, 0);padding:var(--r-checkbox-group--label--padding, 0)}.r-checkbox-group--label r-hint{--r-hint--margin-bottom:var(--r-checkbox-group--label--hint--margin-bottom, var(--r-spacing-100, 1rem))}.r-checkbox-group--content{margin-left:var(--r-checkbox-group--content--margin-left, 0);display:var(--r-checkbox-group--content--display, flex);flex-direction:var(--r-checkbox-group--content--flex-direction, column);gap:var(--r-checkbox-group--content--gap, var(--r-spacing-050, 0.5rem));padding-left:var(--r-checkbox-group--content--padding-left, 0)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
-
-const CheckboxGroup = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.rValidate = createEvent(this, "rValidate");
-        /**
-         * Specifies `value` property of the 'select-all', representing the group as a whole.
-         * */
-        this.value = '';
-        /**
-         * Specifies whether the `value` is required.
-         */
-        this.required = false;
-        this.indeterminate = false;
-        this.allChecked = false;
-        this.noChecked = false;
-        this.validityState = '';
-        this.validityMessage = '';
-        this.uniqueId = `r-checkbox-group-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        this.initial = {};
-        this.renderMessage = () => {
-            const variant = this.valid ? 'success' : 'error';
-            return (h("r-hint", { variant: variant, role: "alert", "aria-live": "polite", id: `${this.uniqueId}-message`, class: this.message ? null : 'visually-hidden' }, this.message));
-        };
-        this.getValidityStateData = () => {
-            let validityState = '';
-            let validityMessage = '';
-            const isValid = this.checkboxes.some(checkbox => checkbox.checked);
-            if (this.required && !isValid) {
-                validityState = 'valueMissing';
-                validityMessage = this.valueMissingMessage || 'Please select at least one option.';
-            }
-            else {
-                validityState = 'valid';
-                validityMessage = null;
-            }
-            return { validityState, validityMessage };
-        };
-        this.validateGroup = () => {
-            if (this.isNoValidate || !this.required)
-                return;
-            const { validityState, validityMessage } = this.getValidityStateData();
-            this.validityState = validityState;
-            this.validityMessage = validityMessage;
-            const isValid = this.validityState === 'valid';
-            this.valid = isValid;
-            this.invalid = !isValid;
-            this.noChecked = !isValid;
-            this.rValidate.emit({
-                state: this.validityState,
-                message: this.validityMessage
-            });
-        };
-        this.onSubmitForm = (event) => {
-            if (this.isNoValidate)
-                return;
-            this.validateGroup();
-            if (this.invalid) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.onResetForm = () => {
-            this.resetValidity();
-            this.resetToInitial();
-        };
-    }
-    /**
-     * Validates the checkbox group without triggering UI and returns a boolean indicating its validity.
-     * @returns A boolean indicating whether the checkbox is valid.
-     */
-    async checkValidity() {
-        const { validityState } = this.getValidityStateData();
-        return validityState === 'valid';
-    }
-    /**
-     * Resets the validity state and message of the radio group.
-     * This method clears the validity message and state, and sets the invalid
-     * property to its initial value.
-     */
-    async resetValidity() {
-        this.validityMessage = null;
-        this.validityState = null;
-        this.invalid = this.initial['invalid'];
-        this.valid = !this.invalid;
-    }
-    /**
-     * @returns {HTMLRCheckboxElement[]} - Returns all checkboxes in the slot.
-     */
-    get checkboxes() {
-        return Array.from(this.host.querySelectorAll('r-checkbox'));
-    }
-    get hasMessage() {
-        return this.message !== null;
-    }
-    /**
-     * Checks all checkboxes in the slot.
-     */
-    async checkAll() {
-        this.checkboxes.forEach(checkbox => {
-            checkbox.check();
-        });
-        this.allChecked = true;
-        this.noChecked = false;
-        this.indeterminate = false;
-        return this;
-    }
-    /**
-     * Unchecks all checkboxes in the slot.
-     */
-    async uncheckAll() {
-        this.checkboxes.forEach(checkbox => {
-            var _a;
-            (_a = checkbox === null || checkbox === void 0 ? void 0 : checkbox.uncheck) === null || _a === void 0 ? void 0 : _a.call(checkbox);
-        });
-        this.allChecked = false;
-        this.noChecked = true;
-        this.indeterminate = false;
-        return this;
-    }
-    handleCheckboxChange(event) {
-        if (!event.target)
-            return;
-        const isSelectAllElement = event.detail.element.id === `${this.uniqueId}-select-all`;
-        if (isSelectAllElement) {
-            this.updateCheckAllState(event.detail.checked);
-            setTimeout(this.validateGroup, 0);
-            return;
-        }
-        this.updateCheckboxesState(event);
-        if (this.required) {
-            this.validateGroup();
-        }
-    }
-    updateCheckAllState(checked) {
-        checked ? this.checkAll() : this.uncheckAll();
-    }
-    updateCheckboxesState(event) {
-        const { checkboxes } = this;
-        const checkedCheckboxes = checkboxes.filter(checkbox => checkbox.checked);
-        const isCheckbox = event.target.tagName.toLowerCase() === 'r-checkbox';
-        const isInGroup = checkboxes.includes(event.target);
-        if (!isCheckbox)
-            return;
-        if (!isInGroup)
-            return;
-        this.allChecked = checkedCheckboxes.length === checkboxes.length;
-        this.indeterminate = checkedCheckboxes.length > 0 && checkedCheckboxes.length < checkboxes.length;
-        this.noChecked = checkedCheckboxes.length === 0;
-    }
-    get message() {
-        const { validityMessage, invalid, error, customErrorMessage } = this;
-        let message = null;
-        if (invalid) {
-            message = error || customErrorMessage || validityMessage || null;
-        }
-        return message;
-    }
-    get parentFormEl() {
-        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
-    }
-    get isNoValidate() {
-        var _a;
-        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
-            this.novalidate ||
-            false);
-    }
-    resetToInitial() {
-        this.invalid = this.initial['invalid'];
-        this.checked = this.initial['checked'];
-        this.indeterminate = this.initial['indeterminate'];
-        this.updateCheckAllState(this.initial['checked']);
-    }
-    connectedCallback() {
-        var _a, _b;
-        this.initial['invalid'] = this.invalid;
-        this.initial['checked'] = this.checked;
-        this.initial['indeterminate'] = this.indeterminate;
-        this.updateCheckAllState(this.initial['checked']);
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', this.onSubmitForm, { capture: true });
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('reset', this.onResetForm);
-    }
-    disconnectedCallback() {
-        var _a, _b;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('submit', this.onSubmitForm);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('reset', this.onResetForm);
-    }
-    get groupDescribedby() {
-        const { uniqueId, hint, hasMessage } = this;
-        if (hasMessage && hint)
-            return `${uniqueId}-message ${uniqueId}-hint`;
-        if (hasMessage)
-            return `${uniqueId}-message`;
-        if (hint)
-            return `${uniqueId}-hint`;
-        return null;
-    }
-    render() {
-        const { label, fieldIndicator, help, helpIcon, helpIconColor, hint, uniqueId, form, name, value } = this;
-        const renderLabel = () => {
-            const labelAttrs = {
-                fieldIndicator,
-                help,
-                helpIcon,
-                helpIconColor,
-            };
-            return (label ?
-                h("r-label", Object.assign({ id: `${uniqueId}-label`, class: "r-radio-group--label" }, labelAttrs), label)
-                :
-                    null);
-        };
-        const renderHint = () => hint ? (h("r-hint", { id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note", "aria-hidden": "true" }, hint)) : null;
-        const checkAllAttrs = {
-            form,
-            name,
-            value
-        };
-        return (h(Host, null, h("div", { class: "r-checkbox-group", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-invalid": `${this.invalid || false}`, "aria-describedby": this.groupDescribedby }, h("div", { class: "r-checkbox-group--label", id: `${uniqueId}-group-label` }, this.showSelectAll ?
-            h("r-checkbox", Object.assign({ id: `${uniqueId}-select-all` }, checkAllAttrs, { checked: this.allChecked, indeterminate: this.indeterminate }), renderLabel(), renderHint())
-            :
-                h(Fragment, null, h("r-checkbox", Object.assign({}, checkAllAttrs, { checked: this.allChecked, indeterminate: this.indeterminate, class: "visually-hidden" }), this.label), renderLabel(), renderHint())), h("div", { class: "r-checkbox-group--content" }, h("span", { style: { display: 'contents' } }, h("slot", null)), this.renderMessage()))));
-    }
-    get host() { return getElement(this); }
-};
-CheckboxGroup.style = checkboxGroupCss;
-
-export { CheckboxGroup as r_checkbox_group };

package/dist/esm/r-checkbox.entry.js

@@ -1,267 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
-import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
-
-const checkboxCss = ":host{display:block;user-select:none;box-sizing:border-box;font-family:var(--r-font-family-text);font-size:var(--r-font-size-400);text-align:left;color:var(--r-text-regular);cursor:pointer}:host ::slotted(a),:host ::slotted(a:visited),:host ::slotted(a:hover),:host ::slotted(a:focus),:host ::slotted(a:active){color:var(--r-text-regular)}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false]))){--r-checkbox--box--background-color:var(--r-background-interactive-hovered)}:host(:focus-within:not(:active)){box-shadow:0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px;--r-checkbox--box--box-shadow:0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);--r-checkbox--box--outline:2px solid var(--r-border-focused, #0071e3);--r-checkbox--box--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false]))){--r-checkbox--box--background-color:var(--r-background-interactive-pressed)}:host([invalid]:not([invalid=false])){--r-checkbox--box--border-color:var(--r-status-error-regular);--r-checkbox--box--background-color:var(--r-status-error-soft);--r-checkbox--marker--color:var(--r-status-error-regular)}:host([disabled]:not([disabled=false])){--r-checkbox--box--opacity:0.4;--r-checkbox--cursor:not-allowed;--r-checkbox--label-container--cursor:not-allowed;--r-checkbox--label--cursor:not-allowed;cursor:not-allowed}.r-checkbox{position:var(--r-checkbox--position, relative);display:var(--r-checkbox--display, flex);gap:var(--r-checkbox--gap, var(--r-spacing-100, 1rem));cursor:var(--r-checkbox--cursor, pointer);padding:var(--r-checkbox--padding, var(--r-spacing-100, 1rem));min-height:var(--r-checkbox--min-height, var(--r-spacing-150, 1.5rem))}.r-checkbox--input{position:var(--r-checkbox--input--position, absolute);top:var(--r-checkbox--input--top, var(--r-checkbox--padding));left:var(--r-checkbox--input--left, var(--r-checkbox--padding));opacity:var(--r-checkbox--input--opacity, 0);width:var(--r-checkbox--input--width, 1.5rem);height:var(--r-checkbox--input--height, 1.5rem);box-sizing:var(--r-checkbox--input--box-sizing, border-box);padding:var(--r-checkbox--input--padding, 0);margin:var(--r-checkbox--input--margin, 0)}.r-checkbox--box{position:var(--r-checkbox--box--position, relative);display:var(--r-checkbox--box--display, flex);align-items:var(--r-checkbox--box--align-items, center);justify-content:var(--r-checkbox--box--justify-content, center);left:var(--r-checkbox--box--left, 0);top:var(--r-checkbox--box--top, 0);height:var(--r-checkbox--box--height, 1.5rem);width:var(--r-checkbox--box--width, 1.5rem);min-width:var(--r-checkbox--box--min-width, 1.5rem);background-color:var(--r-checkbox--box--background-color, var(--r-background-interactive-softest, #fff));border-width:var(--r-checkbox--box--border-width, 0.0625rem);border-style:var(--r-checkbox--box--border-style, solid);border-color:var(--r-checkbox--box--border-color, var(--r-border-soft, #686868));outline:var(--r-checkbox--box--outline, none);outline-offset:var(--r-checkbox--box--outline-offset, 0);box-sizing:var(--r-checkbox--box--box-sizing, border-box);box-shadow:var(--r-checkbox--box--box-shadow, none);opacity:var(--r-checkbox--box--opacity, 1)}.r-checkbox--description{cursor:var(--r-checkbox--label-container--cursor, pointer);flex:var(--r-checkbox--label-container--flex, 1);line-height:var(--r-checkbox--label-container--line-height, 1.5);display:var(--r-checkbox--label-container--display, flex);flex-direction:var(--r-checkbox--label-container--flex-direction, column);gap:var(--r-checkbox--label-container--gap, var(--r-spacing-025, 0.25rem))}.r-checkbox--label{cursor:var(--r-checkbox--label--cursor, pointer)}.r-checkbox--message{margin-top:var(--r-checkbox--message--margin-top, var(--r-spacing-025, 0.25rem))}:host(.visually-hidden),.visually-hidden{position:absolute;width:0.0625rem;height:0.0625rem;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}";
-
-const Checkbox = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.rChange = createEvent(this, "rChange");
-        this.rReset = createEvent(this, "rReset");
-        this.rValidate = createEvent(this, "rValidate");
-        /** Automatically focus the checkbox when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
-        this.autofocus = false;
-        this.validityState = '';
-        this.validityMessage = '';
-        this.touched = false;
-        // Private properties
-        this.initial = {};
-        this.uniqueId = `r-checkbox-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        // Private methods
-        this.getValidityStateData = (element) => {
-            let validityState = '';
-            let validityMessage = '';
-            for (const state in element.validity) {
-                if (element.validity[state]) {
-                    validityState = state;
-                    if (this[state + 'Message']) {
-                        validityMessage = this[state + 'Message'];
-                        return { validityState, validityMessage };
-                    }
-                    validityMessage = element.validationMessage;
-                }
-            }
-            return { validityState, validityMessage };
-        };
-        this.validateFormElement = (element = null) => {
-            if (element === null)
-                return;
-            if (this.isNoValidate)
-                return;
-            if (this.error)
-                return;
-            const { validityState, validityMessage } = this.getValidityStateData(element);
-            this.validityState = validityState;
-            this.validityMessage = validityMessage;
-            const isValid = this.validityState === 'valid';
-            this.valid = isValid;
-            this.invalid = !isValid;
-            this.rValidate.emit({
-                state: this.validityState,
-                message: this.validityMessage
-            });
-        };
-        this.handleClick = (event) => {
-            if (this.disabled)
-                return;
-            const target = event.target;
-            if (target.tagName !== 'A') {
-                event.preventDefault();
-                this.toggleChecked();
-            }
-        };
-        this.onSubmitForm = (event) => {
-            if (this.isNoValidate)
-                return;
-            this.validateFormElement(this.nativeElement);
-            // If data is not valid -> prevent form submittion
-            if (this.invalid) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.onResetForm = () => {
-            this.validityState = null;
-            this.validityMessage = null;
-            this.checked = this.initial['checked'];
-            this.invalid = this.initial['invalid'];
-            this.valid = !this.invalid;
-            const { host, value, checked } = this;
-            this.rReset.emit({ element: host, value, checked });
-        };
-        this.contributeToFormData = (event) => {
-            appendControlToFormData(this.nativeElement || this.host, event.formData);
-        };
-        this.applyAutofocus = () => {
-            queueMicrotask(() => {
-                this.setFocus();
-            });
-        };
-    }
-    // Public Methods
-    /**
-     * Asynchronously retrieves the validity state of the checkbox.
-     *
-     * This method updates the internal validity state and message by calling `getValidityStateData`
-     * with the native element, and then returns an object containing the current validity state and message.
-     *
-     * @returns A promise that resolves to an object containing the validity state and message.
-     * The object has two properties:
-     *   - `state`: A string representing the validity state.
-     *   - `message`: A string containing the validity message.
-     */
-    async getValidityState() {
-        const { validityState, validityMessage } = this.getValidityStateData(this.nativeElement);
-        this.validityState = validityState;
-        this.validityMessage = validityMessage;
-        return {
-            state: this.validityState,
-            message: this.validityMessage
-        };
-    }
-    /**
-     * Sets focus on the checkbox element.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Removes focus from the checkbox element.
-     */
-    async setBlur() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    /**
-     * Checks the checkbox element.
-     */
-    async check() {
-        this.checked = true;
-    }
-    /**
-     * Unchecks the checkbox element.
-     */
-    async uncheck() {
-        this.checked = false;
-    }
-    /**
-     * Toggles the checked state of the checkbox element.
-     */
-    async toggleChecked() {
-        this.touched = true;
-        this.checked = !this.checked;
-    }
-    /**
-     * Sets the indeterminate state of the checkbox element.
-     */
-    async setIndeterminate() {
-        this.indeterminate = true;
-    }
-    /**
-     * Sets the indeterminate state of the checkbox element.
-     */
-    async clearIndeterminate() {
-        this.indeterminate = false;
-    }
-    /**
-     * Validates the checkbox without triggering UI and returns a boolean indicating its validity.
-     * @returns A boolean indicating whether the checkbox is valid.
-     */
-    async checkValidity() {
-        const { validityState } = this.getValidityStateData(this.nativeElement);
-        return validityState === 'valid';
-    }
-    // Watchers
-    async handleCheckedChange() {
-        // Only proceed if checkbox has been interacted with
-        if (!this.touched)
-            return;
-        if (this.disabled)
-            return;
-        const { host, value, checked } = this;
-        this.rChange.emit({ element: host, value, checked });
-        // Update native element checked state
-        if (this.nativeElement) {
-            this.nativeElement.checked = checked;
-        }
-        // Validate if required
-        if (this.required && !this.isNoValidate) {
-            this.validateFormElement(this.nativeElement);
-        }
-    }
-    // Getters
-    /** Identify wrapping form element */
-    get parentFormEl() {
-        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
-    }
-    /** Determine whether this element should be ignored during Constraint Validation API validation. */
-    get isNoValidate() {
-        var _a;
-        return (((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.hasAttribute('novalidate')) ||
-            this.novalidate ||
-            false);
-    }
-    get hasErrorMessage() {
-        var _a;
-        return typeof this.error === 'string' && ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    get hasCustomErrorMessage() {
-        var _a;
-        return typeof this.customErrorMessage === 'string' && ((_a = this.customErrorMessage) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    get hasValidationError() {
-        var _a;
-        return this.validityState !== 'valid' && ((_a = this.validityMessage) === null || _a === void 0 ? void 0 : _a.length) > 0;
-    }
-    get hasInvalidMessage() {
-        if (!this.invalid)
-            return false;
-        return this.hasErrorMessage || this.hasCustomErrorMessage || this.hasValidationError;
-    }
-    connectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.addEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', this.onSubmitForm, { capture: true });
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.addEventListener('reset', this.onResetForm);
-    }
-    disconnectFormEventListeners() {
-        var _a, _b, _c;
-        (_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('formdata', this.contributeToFormData);
-        (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitForm);
-        (_c = this.parentFormEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('reset', this.onResetForm);
-    }
-    // Lifecycle methods
-    componentWillLoad() {
-        this.initial['checked'] = this.checked;
-        this.initial['invalid'] = this.invalid;
-    }
-    componentDidLoad() {
-        if (this.nativeElement) {
-            this.nativeElement.indeterminate = this.indeterminate;
-        }
-        if (this.autofocus)
-            this.applyAutofocus();
-    }
-    connectedCallback() {
-        this.connectFormEventListeners();
-    }
-    disconnectedCallback() {
-        this.disconnectFormEventListeners();
-    }
-    render() {
-        const { error, name, value, disabled, required, uniqueId, checked, indeterminate, autofocus } = this;
-        const inputAttrs = {
-            name,
-            value,
-            disabled,
-            required,
-            checked,
-            indeterminate,
-            autofocus
-        };
-        return (h(Host, { key: '06eb235ee3c0da6317a1b23d699e4964d7201111', onClick: this.handleClick }, h("div", { key: '8fa412dae7fdde690c5fc5efb11efb12ceb30d4f', class: "r-checkbox" }, h("input", Object.assign({ key: '7a192e581b959504c01a33168a58e452434e1f11', class: "r-checkbox--input", type: "checkbox" }, inputAttrs, { id: `${uniqueId}-input`, ref: el => this.nativeElement = el, "aria-describedby": this.hasInvalidMessage ? `${uniqueId}-message` : null, "aria-required": `${this.required || false}`, "aria-invalid": `${this.invalid || false}` })), h("div", { key: 'f22d560241a1f7ac083f90677d166087a99d0647', class: "r-checkbox--box", "aria-hidden": "true" }, this.checked ?
-            h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.80019 15.8988L4.6002 11.6988L3.2002 13.0988L8.80019 18.6988L20.8002 6.69883L19.4002 5.29883L8.80019 15.8988Z", fill: "currentColor" }))
-            : this.indeterminate ?
-                h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { x: "4", y: "11", width: "16", height: "2", fill: "currentColor" }))
-                : null), h("div", { key: '0dd969ea2f03ea289772a3c1d59841b93248d9bd', class: "r-checkbox--description" }, h("label", { key: '5ec66dcfbabb9c8a8362e8d246cf59aa411dce78', class: "r-checkbox--label", id: `${uniqueId}-label`, htmlFor: `${uniqueId}-input` }, h("slot", { key: 'c7755df4134ed6c2d321b513f0707adb26987000' })), h("div", { key: '49dfc099a6fe5e600ea246a4511a1f83d34f2f9e', id: `${uniqueId}-message`, class: !this.hasInvalidMessage ? 'visually-hidden' : 'r-checkbox--message', "aria-live": "polite", "aria-atomic": "true" }, this.hasInvalidMessage &&
-            h("r-hint", { key: 'ee682a67c574da004bd8208f58fcd9ab6191f3bd', variant: "error" }, error || this.customErrorMessage || this.validityMessage))))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "checked": ["handleCheckedChange"]
-    }; }
-};
-Checkbox.style = checkboxCss;
-
-export { Checkbox as r_checkbox };