@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,147 @@
+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: 'e93ad739417293917e59c26f213c0fbf784ed4d7' }, h(TagName, Object.assign({ key: 'c447e81e5900ad18d0af96025d6f5634fd1e5d2f', class: "r-button" }, attrs, { "aria-label": rAriaLabel || null, "aria-current": this.ariaCurrentValue, ref: (el) => (this.nativeElement = el), onClick: this.handleClick }), h("span", { key: '4f2706c98face1c8ef1cc72ae186501f49540d39', class: "r-button--slot" }, icon && h("r-icon", Object.assign({ key: '916942e6657fa1f7e342d120111a381db7200470', name: icon }, iconAttrs, { size: "s" })), this.hasIconSlot && h("slot", { key: '961c37f8d825639256a8234dbae92bdc926c7263', name: "icon" }), h("div", { key: '19189a21d18b0145d6990dd3bfecfd8d85d37aa9', style: { display: 'contents' } }, h("slot", { key: 'da586b1e067dac24d0fb81e59599d3ee83a536f4', 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

@@ -0,0 +1,235 @@
+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, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateGroup();
+    }
+    /**
+     * 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

@@ -0,0 +1,272 @@
+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 an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
+    /**
+     * 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 && 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: 'caf581918e9dabe998fde4118ba5d890e731cd4d', onClick: this.handleClick }, h("div", { key: 'a5f144a25be70960a5bde7b16b3a85aa57c24b9d', class: "r-checkbox" }, h("input", Object.assign({ key: 'd1505294bfc6b3f9b296c03df184078a061dcedd', 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: '8fc3f4f251db2bc58f15851881d0122552c83a04', 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: 'e64607f95963658e0bbddd32564fd003d5d26b10', class: "r-checkbox--description" }, h("label", { key: 'ea592fe0ce74007f0a23ba9aaed73059597e9891', class: "r-checkbox--label", id: `${uniqueId}-label`, htmlFor: `${uniqueId}-input` }, h("slot", { key: 'e795b6c1e51724e95840532666e7fc3e29fd52a5' })), h("div", { key: 'ea461714f04e42bc81d488c7050783007d1edbe9', id: `${uniqueId}-message`, class: !this.hasInvalidMessage ? 'visually-hidden' : 'r-checkbox--message', "aria-live": "polite", "aria-atomic": "true" }, this.hasInvalidMessage &&
+            h("r-hint", { key: '7ed7bd758187daacd72d93f3aba91e9c9123c9fd', 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 };