@riverty/web-components 6.2.0 → 6.3.0

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

@@ -1,400 +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 inputCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input--container--background-color:var(--r-background-soft, #f3f1f0);--r-input--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(.focused){--r-input--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input--container--outline:2px solid var(--r-border-focused);--r-input--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([expanded]:not([expanded=false])),:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])){--r-input--container--opacity:0.4;--r-input--container--cursor:not-allowed;--r-input--container--pointer-events:none;--r-input--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input--container--border-color:var(--r-status-error-regular, #b00c15);--r-input--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input{display:var(--r-input--display, flex);flex:var(--r-input--flex, 1);flex-direction:var(--r-input--flex-direction, column);width:var(--r-input--width, auto);font-family:var(--r-input--font-family, system-ui);position:var(--r-input--position, relative);border-radius:var(--r-input--border-radius, 0);cursor:var(--r-input--cursor, inherit)}.r-input--label-container{display:var(--r-input--label-container--display, flex);gap:var(--r-input--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input--label-container--align-items, center);justify-content:var(--r-input--label-container--align-items, space-between)}.r-input--label-container ::slotted([slot=popover]){display:var(--r-input--popover--display, inline-flex);height:var(--r-input--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input--popover--align-items, center);justify-content:var(--r-input--popover--justify-content, center);margin-right:var(--r-input--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input--label{cursor:var(--r-input--label--cursor, inherit)}.r-input--input{font-family:var(--r-input--input--font-family, system-ui);font-size:var(--r-input--input--font-size, 1em);width:var(--r-input--input--width, 100%);max-width:var(--r-input--input--max-width, 100%);height:var(--r-input--input--height, var(--r-spacing-275, 2.75rem));border-radius:var(--r-input--input--border-radius, 0);border:var(--r-input--input--border, none);color:var(--r-input--input--color, var(--r-text-regular, #282828));background-color:var(--r-input--input--background-color, none);appearance:var(--r-input--input--appearance, none);box-sizing:var(--r-input--input--box-sizing, border-box);outline:var(--r-input--input--outline, none);cursor:var(--r-input--input--cursor, inherit);pointer-events:var(--r-input--input--pointer-events, auto)}.r-input--input:autofill,.r-input--input:-webkit-autofill{-webkit-background-clip:text !important}.r-input--input::-ms-reveal{display:var(--r-input--input--ms-reveal--display, none)}.r-input--input::placeholder{color:var(--r-input--input--placeholder--color, var(--r-text-soft, #686868))}.r-input--input[type=search]::-webkit-search-cancel-button{cursor:var(--r-input--input-clear--cursor, pointer);display:var(--r-input--input-clear--display, block);height:var(--r-input--input-clear--height, 0.875rem);width:var(--r-input--input-clear--width, 0.875rem);appearance:var(--r-input--input-clear--appearance, none);background-repeat:var(--r-input--input-clear--background-repeat, no-repeat);background-image:var(--r-input--input-clear--background-image, url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%20viewBox%3D%220.75%200.75%2022.5%2022.5%22%3E%3Cpath%20id%3D%22Vector%202269%22%20stroke%3D%22currentColor%22%20d%3D%22M1.5%201.5L22.5%2022.5%22%2F%3E%3Cpath%20id%3D%22Vector%202270%22%20stroke%3D%22currentColor%22%20d%3D%22M22.5%201.5L1.5%2022.5%22%2F%3E%3C%2Fsvg%3E\"));background-size:var(--r-input--input-clear--background-size, contain);margin-inline:var(--r-input--input-clear--margin-inline, 0);color:currentColor}.r-input--button{position:var(--r-input--icon-button--position, absolute);width:var(--r-input--icon-button--width, calc(1.125em + var(--r-input--icon--width)));height:var(--r-input--icon-button--height, 100%);top:var(--r-input--icon-button--top, 0);right:var(--r-input--icon-button--right, auto);bottom:var(--r-input--icon-button--bottom, auto);left:var(--r-input--icon-button--left, 0);cursor:var(--r-input--icon-button--cursor, inherit)}.r-input--container{position:var(--r-input--container--position, relative);display:var(--r-input--container--display, flex);align-items:var(--r-input--container--align-items, center);gap:var(--r-input--container--gap, 0.625rem);height:var(--r-input--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input--container--border-width, 1px);border-style:var(--r-input--container--border-style, solid);border-color:var(--r-input--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input--container--box-sizing, border-box);box-shadow:var(--r-input--container--box-shadow, none);outline:var(--r-input--container--outline, none);outline-offset:var(--r-input--container--outline-offset, 0);padding-top:var(--r-input--container--padding-top, 0.6875rem);padding-right:var(--r-input--container--padding-right, var(--r-spacing-075, 0.75rem));padding-bottom:var(--r-input--container--padding-bottom, 0.6875rem);padding-left:var(--r-input--container--padding-left, var(--r-spacing-0275, 0.75rem));opacity:var(--r-input--container--opacity, 1);pointer-events:var(--r-input--container--pointer-events, auto);line-height:var(--r-input--container--line-height, 1);cursor:var(--r-input--container--cursor, inherit);margin-top:var(--r-input--container--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--container slot[name=leading]{color:var(--r-input--container-leading--color, var(--r-icon-soft, #686868))}.r-input--message:has(r-hint),.r-input--message ::slotted([slot=message]){margin-top:var(--r-input--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--trailing{display:var(--r-input--trailing--display, flex);margin-left:var(--r-input--trailing--margin-left, auto);align-items:var(--r-input--trailing--align-items, center);gap:var(--r-input--trailing--gap, 0.625rem)}.r-input--trailing:empty{--r-input--trailing--display:none}.r-input--validation-icon{display:var(--r-input--validation-icon--display, inline-block)}.r-input--readonly-icon{color:var(--r-input--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
-
-const RInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.rValidate = createEvent(this, "rValidate");
-        this.rInput = createEvent(this, "rInput");
-        this.rBlur = createEvent(this, "rBlur");
-        this.rFocus = createEvent(this, "rFocus");
-        this.rChange = createEvent(this, "rChange");
-        this.rReset = createEvent(this, "rReset");
-        /**
-         * Input type (e.g. `text`, `email`, `number`, `password`).
-         * See HTMLInputElement `type` for supported values.
-         */
-        this.type = 'text';
-        /**
-         * Current value. Mutable: can be changed programmatically or through user input.
-         */
-        this.value = '';
-        /**
-         * When `true` field renders valid/invalid marker within.
-        */
-        this.validityMarker = true;
-        /** Validity state passed from validateFormElement function after validation */
-        this.validityState = '';
-        /** Validity message passed from validateFormElement function after validation */
-        this.validityMessage = '';
-        /** Defines if the component has been touched by user */
-        this.touched = false;
-        /** Defines if the value has been changed by user interaction */
-        this.dirty = false;
-        /** Private flag to prevent validation during reset */
-        this.isResetting = false;
-        this.nativeElement = null;
-        this.uniqueId = `r-input-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        /**
-         * Initial attributes state
-         * */
-        this.initial = {};
-        this.getValidityStateData = (element) => {
-            let validityState = '';
-            let validityMessage = '';
-            if (this.type === 'email' && this.pattern) {
-                element.setCustomValidity('');
-                validityState = this.validEmailPattern ? 'valid' : 'patternMismatch';
-                validityMessage = this.validEmailPattern ? '' : this.patternMismatchMessage;
-                return { validityState, validityMessage };
-            }
-            for (const state in element.validity) {
-                if (element.validity[state]) {
-                    validityState = state;
-                    const customMessage = this[state + 'Message'];
-                    if (customMessage) {
-                        validityMessage = customMessage;
-                        return { validityState, validityMessage };
-                    }
-                    validityMessage = element.validationMessage;
-                    // Found an error, use it even if no custom message
-                    return { validityState, validityMessage };
-                }
-            }
-            // No errors found, field is valid
-            return { validityState: 'valid', validityMessage: '' };
-        };
-        this.validateFormElement = (element) => {
-            if (element === null)
-                return;
-            if (this.isNoValidate)
-                return;
-            if (this.error)
-                return;
-            // Trigger browser validation to populate validity states
-            if (element.checkValidity) {
-                element.checkValidity();
-            }
-            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.onInput = (event) => {
-            if (this.readonly)
-                return;
-            this.value = event.target.value;
-            this.touched = true;
-            this.dirty = true;
-            const { host, value } = this;
-            this.rInput.emit({ element: host, value });
-        };
-        this.onChange = event => {
-            if (this.readonly)
-                return;
-            this.value = event.target.value;
-            this.touched = true;
-            this.dirty = true;
-            const { host, value } = this;
-            this.rChange.emit({ element: host, value });
-        };
-        this.onBlur = () => {
-            this.host.classList.remove('focused');
-            this.touched = true;
-            this.validateFormElement(this.nativeElement);
-            this.rBlur.emit();
-        };
-        this.onFocus = () => {
-            this.host.classList.add('focused');
-            this.rFocus.emit();
-        };
-        this.contributeToFormData = (event) => {
-            appendControlToFormData(this.nativeElement || this.host, event.formData);
-        };
-        this.onResetForm = () => {
-            if (this.readonly)
-                return;
-            this.isResetting = true;
-            this.markAsPristine();
-            this.validityState = null;
-            this.validityMessage = null;
-            // Restore initial value without triggering validation
-            if (this.nativeElement) {
-                this.nativeElement.value = this.initial['value'] || '';
-            }
-            this.value = this.initial['value'];
-            this.invalid = this.initial['invalid'];
-            this.valid = !this.invalid;
-            this.isResetting = false;
-            const { host, value } = this;
-            this.rReset.emit({ element: host, value });
-        };
-        this.onSubmitForm = (event) => {
-            if (this.isNoValidate)
-                return;
-            this.touched = true;
-            this.validateFormElement(this.nativeElement);
-            if (this.invalid) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        };
-        this.handleKeyup = (event) => {
-            var _a, _b;
-            this.validateFormElement(this.nativeElement);
-            if (this.invalid && !this.isNoValidate)
-                return;
-            if (event.code === 'Enter') {
-                const submitEl = this.host.querySelector('[type="submit"]') ||
-                    ((_a = this.parentFormEl) === null || _a === void 0 ? void 0 : _a.querySelector('[type="submit"]'));
-                if (submitEl && 'triggerClick' in submitEl) {
-                    submitEl === null || submitEl === void 0 ? void 0 : submitEl.triggerClick();
-                }
-                else {
-                    (_b = this.parentFormEl) === null || _b === void 0 ? void 0 : _b.requestSubmit();
-                }
-            }
-        };
-        this.handleClick = () => {
-            this.host.shadowRoot.querySelector('input').focus();
-        };
-    }
-    /**
-     * Programmatically focus the native input element.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Programmatically remove focus from the native input.
-     */
-    async setBlur() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    /**
-     * Select (highlight) the entire current input value.
-     */
-    async select() {
-        var _a;
-        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.select();
-    }
-    /**
-     * Get the start index of the current text selection (or null if unavailable).
-     */
-    async getSelectionStart() {
-        var _a, _b;
-        return (_b = (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : null;
-    }
-    /**
-     * Get the end index of the current text selection (or null if unavailable).
-     */
-    async getSelectionEnd() {
-        var _a, _b;
-        return (_b = (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.selectionEnd) !== null && _b !== void 0 ? _b : null;
-    }
-    /**
-     * Set a selection (or caret) range within the value.
-     * @param start Start index (inclusive)
-     * @param end End index (exclusive)
-     * @param direction Selection direction (browser hint)
-     */
-    async setSelectionRange(start, end, direction = 'none') {
-        if (this.nativeElement) {
-            this.nativeElement.setSelectionRange(start, end, direction);
-        }
-    }
-    /**
-     * Retrieve the current value (returns empty string if unset).
-     */
-    async getValue() {
-        var _a;
-        return ((_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.value) || '';
-    }
-    /**
-     * Set the current value programmatically (does not fire native input/change automatically).
-     */
-    async setValue(value) {
-        if (this.nativeElement) {
-            this.nativeElement.value = value;
-        }
-        this.value = value;
-        this.validateFormElement(this.nativeElement);
-    }
-    /**
-     * Validates the input without triggering UI and returns a boolean indicating its validity.
-     * @returns A boolean indicating whether the input is valid.
-     */
-    async checkValidity() {
-        const { validityState } = this.getValidityStateData(this.nativeElement);
-        return validityState === 'valid';
-    }
-    /**
-     * Gets the touched state (whether user has interacted with the input)
-     */
-    async isTouched() {
-        return this.touched;
-    }
-    /**
-     * Gets the dirty state (whether value has been changed by user)
-     */
-    async isDirty() {
-        return this.dirty;
-    }
-    /**
-     * Resets touched and dirty states to pristine (untouched/clean)
-     */
-    async markAsPristine() {
-        this.touched = false;
-        this.dirty = false;
-    }
-    /** Identify wrapping form element */
-    get parentFormEl() {
-        return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
-    }
-    get ariaDescribedBy() {
-        const describedBy = `${this.uniqueId}-message`;
-        return this.hint ? `${this.uniqueId}-hint ${describedBy}` : describedBy;
-    }
-    get hasError() {
-        var _a;
-        return this.invalid && !!((_a = this.error) === null || _a === void 0 ? void 0 : _a.length);
-    }
-    get hasValidationError() {
-        return (this.validityState !== 'valid' || this.invalid) && !!(this.validityMessage || this.customErrorMessage);
-    }
-    get hasMessage() {
-        return this.hasError || this.hasValidationError;
-    }
-    /**
-     * 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 hasTrailingSlot() {
-        return !!this.host.querySelector('[slot="trailing"]');
-    }
-    get validEmailPattern() {
-        const regex = new RegExp(this.pattern, 'u');
-        return regex.test(this.value);
-    }
-    componentWillLoad() {
-        this.initial['value'] = this.value;
-        this.initial['invalid'] = this.invalid;
-    }
-    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);
-    }
-    connectedCallback() {
-        this.connectFormEventListeners();
-        !!this.autofocus && queueMicrotask(() => { var _a; return (_a = this.host.querySelector('input[autofocus]')) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
-    }
-    disconnectedCallback() {
-        this.disconnectFormEventListeners();
-    }
-    handleValueChange() {
-        if (!this.isResetting) {
-            this.validateFormElement(this.nativeElement);
-        }
-    }
-    handleTypeChange() {
-        this.setValue(this.nativeElement.value);
-    }
-    render() {
-        const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, hint, label, internal, uniqueId, autocomplete, readonly, autofocus, passwordrules, enterkeyhint, spellcheck, autocapitalize, validityMarker } = this;
-        const inputAttrs = {
-            disabled,
-            readonly,
-            required,
-            label,
-            name,
-            placeholder,
-            maxlength,
-            minlength,
-            min,
-            max,
-            form,
-            pattern,
-            autocomplete,
-            autofocus: autofocus || null,
-            passwordrules,
-            enterkeyhint,
-            autocapitalize,
-            spellcheck,
-            inputmode: this.inputmode || null,
-            id: uniqueId,
-            'data-value': value,
-            'aria-placeholder': placeholder,
-            'aria-invalid': `${invalid || false}`,
-            'aria-required': `${required || false}`,
-            'aria-describedby': this.ariaDescribedBy
-        };
-        const labelAttr = label ? {
-            id: `${uniqueId}-label`,
-            fieldIndicator
-        } : {};
-        const renderValidationMarker = () => {
-            const icons = {
-                valid: 'circled-check',
-                invalid: 'circled-exclamation-mark'
-            };
-            const colors = {
-                valid: '--r-status-success-regular',
-                invalid: '--r-status-error-regular'
-            };
-            const shouldShowValidMarker = !!validityMarker && !!valid && !!value;
-            const shouldShowInvalidMarker = !!validityMarker && !!invalid;
-            if (!shouldShowValidMarker && !shouldShowInvalidMarker)
-                return null;
-            const iconName = shouldShowInvalidMarker ? icons.invalid : icons.valid;
-            const iconColor = shouldShowInvalidMarker ? colors.invalid : colors.valid;
-            return h("r-icon", { class: "r-input--validation-icon", "aria-hidden": "true", size: "s", name: iconName, color: iconColor });
-        };
-        // Filter out event listener properties based on naming convention.
-        // Pass them to native element.
-        const eventListeners = Object.entries(this).reduce((acc, [key, value]) => {
-            if (typeof value === 'function' && key.startsWith('on')) {
-                acc[key] = value;
-            }
-            return acc;
-        }, {});
-        return (h(Host, { onClick: this.handleClick, onKeyup: this.handleKeyup, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { class: internal ? 'visually-hidden' : 'r-input--label-container' }, h("label", { htmlFor: uniqueId }, label ?
-            h("r-label", Object.assign({ class: "r-input--label" }, labelAttr), label)
-            :
-                h("slot", { name: "label" })), h("slot", { name: "popover" })), hint &&
-            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-input--container" }, h("slot", { name: "leading" }), h("input", Object.assign({ class: "r-input--input", type: this.type }, inputAttrs, eventListeners, { ref: el => this.nativeElement = el, value: this.value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus })), h("div", { class: "r-input--trailing" }, this.readonly &&
-            h("r-icon", { class: "r-input--readonly-icon", name: "pen-disabled", size: "s" }), renderValidationMarker(), this.hasTrailingSlot &&
-            h("slot", { name: "trailing" }))), h("div", { id: `${uniqueId}-message`, "aria-live": !internal ? 'polite' : null, class: !internal ? 'r-input--message' : 'visually-hidden' }, h("slot", { name: "message" }, this.hasMessage && h("r-hint", { variant: valid ? 'success' : 'error' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["handleValueChange"],
-        "type": ["handleTypeChange"]
-    }; }
-};
-RInput.style = inputCss;
-
-export { RInput as r_input };

package/dist/esm/r-list-item.entry.js

@@ -1,107 +0,0 @@
-import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-CTxpqopm.js';
-
-const listItemCss = ":host([alignment=top]){--r-list-item--trailing-text--font-weight:bold;--r-list-item--trailing--align-self:start}:host([alignment=bottom]) .r-list-item{--r-list-item--trailing--align-self:end}:host([divider]:not([divider=false])){--r-list-item--border-color:var(--r-border-soft, #686868);--r-list-item--border-width:0 0 1px 0}:host([active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([variant=navitem]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item,:host([href]:not([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host([variant=navitem][has-sub-items]:has([active]):hover:not([disabled]:not([disabled=false])))>.r-list-item-wrapper>.r-list-item{--r-list-item--cursor:pointer;--r-list-item--background-color:transparent}:host([variant=navitem][expanded])>.r-list-item-wrapper>.r-list-item{--r-list-item--headline--font-weight:600;--r-list-item--trailing-icon--transform:rotate(180deg);--r-list-item--trailing-icon--color:var(--r-icon-regular, #282828)}:host([variant=navitem][active-parent]:not([expanded])),:host([variant=navitem][active]:not([expanded])){--r-list-item--background-color:var(--r-background-interactive-activated, rgba(40, 40, 40, 0.08))}:host([variant=subitem]) .r-list-item{--r-list-item--margin-left:27px;--r-list-item--border-width:0 0 0 1px;--r-list-item--border-color:var(--r-border-soft, #686868)}:host([variant=subitem][active]) .r-list-item{--r-list-item--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within) .r-list-item[href]{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-list-item--background-color:transparent}:host([disabled]:not([disabled=false])[divider]:not([divider=false])){--r-list-item--border-color:rgba(104,104,104, 0.4);--r-list-item--leading-icon--color:rgba(104,104,104, 0.4)}:host([truncate-description]:not([truncate-description=false])){--r-list-item--description--white-space:nowrap}:host{display:var(--display, block);pointer-events:var(--pointer-events, auto);outline:var(--outline, none);font-family:var(--font-family, var(--r-font-family-text, system-ui));line-height:var(--line-height, var(--r-line-height-m, 1.5));color:var(--color, var(--r-text-regular, #282828))}.r-list-item{display:var(--r-list-item--display, flex);align-items:var(--r-list-item--align-items, center);justify-content:var(--r-list-item--justify-content, center);gap:var(--r-list-item--gap, var(--r-spacing-100, 1rem));width:var(--r-list-item--width, inherit);padding:var(--r-list-item--padding, var(--r-spacing-100, 1rem));margin-left:var(--r-list-item--margin-left, 0);opacity:var(--r-list-item--opacity, 1);color:var(--r-list-item--color, inherit);box-shadow:var(--r-list-item--box-shadow, none);outline:var(--r-list-item--outline, none);outline-offset:var(--r-list-item--outline-offset, 0);text-decoration:var(--r-list-item--text-decoration, none);text-align:var(--r-list-item--text-align, left);background-color:var(--r-list-item--background-color, transparent);border-style:var(--r-list-item--border-style, solid);border-width:var(--r-list-item--border-width, 0);border-color:var(--r-list-item--border-color, transparent);cursor:var(--r-list-item--cursor, inherit);font-weight:var(--r-list-item--font-weight, var(--r-font-weight-regular, 400));font-family:var(--r-list-item--font-family, var(--r-font-family-text, system-ui))}.r-list-item:focus-visible{--r-list-item--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-list-item--outline:2px solid var(--r-border-focused, #0071e3);--r-list-item--outline-offset:2px}.r-list-item--leading{display:var(--r-list-item--leading--display, flex);align-items:var(--r-list-item--leading--align-items, center);color:var(--r-list-item--leading--color, var(--r-icon-soft, #686868))}.r-list-item--leading-icon{color:var(--r-list-item--leading-icon--color, var(--r-icon-soft, #686868))}.r-list-item--trailing{display:var(--r-list-item--trailing--display, flex);align-self:var(--r-list-item--trailing--align-self, center);gap:var(--r-list-item--trailing--gap, var(--r-spacing-050, 0.5rem));color:var(--r-list-item--trailing--color, inherit)}.r-list-item--trailing-icon{transition:var(--r-list-item--trailing-icon--transition, transform 250ms ease-in-out);transform:var(--r-list-item--trailing-icon--transform, rotate(0deg));color:var(--r-list-item--trailing-icon--color, inherit)}.r-list-item--trailing-text{font-weight:var(--r-list-item--trailing-text--font-weight, 400);white-space:var(--r-list-item--trailing-text--white-space, nowrap)}.r-list-item--trailing ::slotted(*){display:var(--r-list-item--trailing-slotted--display, flex);gap:var(--r-list-item--trailing-slotted--display, var(--r-spacing-050, 0.5rem))}.r-list-item--text{display:var(--r-list-item--text--display, flex);flex-grow:var(--r-list-item--text--flex-grow, 1);flex-direction:var(--r-list-item--text--flex-direction, column);gap:var(--r-list-item--text--gap, 0.125rem);white-space:var(--r-list-item--text--white-space, normal);overflow:var(--r-list-item--text--overflow, hidden);text-overflow:var(--r-list-item--text--text-overflow, ellipsis);font-weight:var(--r-list-item--trailing-text--font-weight, inherit)}.r-list-item--sr-text{display:var(--r-list-item--sr-text--display, none)}.r-list-item--headline{font-size:var(--r-list-item--headline--font-size, 1rem);font-weight:var(--r-list-item--headline--font-weight, 600);line-height:var(--r-list-item--headline--line-height, 1.5);color:var(--r-list-item--headline--color, inherit)}.r-list-item--description{font-size:var(--r-list-item--description--font-size, 1rem);font-weight:var(--r-list-item--description--font-weight, 400);line-height:var(--r-list-item--description--line-height, 1.5);color:var(--r-list-item--description--color, var(--r-text-regular, #282828));white-space:var(--r-list-item--description--white-space, normal);overflow:var(--r-list-item--description--overflow, hidden);text-overflow:var(--r-list-item--description--text-overflow, ellipsis)}.r-list-item--description ::slotted(a){color:var(--r-list-item--description--color, inherit)}.r-list-item-wrapper{width:var(--r-list-item-wrapper--width, 100%)}.sub-items{margin:var(--r-sub-items--margin, 0);padding:var(--r-sub-items--padding, 0);list-style-type:var(--r-sub-items--list-style-type, \"\")}.sub-items[aria-hidden=true]{display:none}.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}@media (prefers-reduced-motion){.r-list-item--trailing-icon{transition:none}}";
-
-const RListItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /** Controls the style variation of the list item, such as regular or subitem. */
-        this.variant = 'list-item';
-        /** Determines whether the list item is expanded to show its subitems. It can be toggled programmatically or through user interaction. */
-        this.expanded = false;
-        /** Unique id for each subItem list */
-        this.uniqueSubmitemsId = `r-list-item-subitems-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
-        this.isEl = (selector) => {
-            return this.host.querySelector(selector) !== null;
-        };
-    }
-    /** Method to toggle sub-items of the list-item */
-    async toggleSubitems() {
-        if (this.disabled)
-            return;
-        if (this.variant === 'subitem')
-            return;
-        this.expanded = !this.expanded;
-    }
-    get isLeadingIcon() {
-        return !!this.leadingIcon || !!this.leadingIconSrc;
-    }
-    get isLeadingSlot() {
-        return this.isEl('[slot="leading"]');
-    }
-    get isLeading() {
-        return (this.isLeadingIcon && !this.hideLeadingIcon) || this.isLeadingSlot;
-    }
-    get isTrailingIcon() {
-        var _a, _b;
-        return ((_a = this.trailingIcon) === null || _a === void 0 ? void 0 : _a.length) > 0 || ((_b = this.trailingIconSrc) === null || _b === void 0 ? void 0 : _b.length) > 0;
-    }
-    get isTrailingSlot() {
-        return this.isEl('[slot="trailing"]');
-    }
-    get isTrailing() {
-        var _a;
-        return this.isTrailingIcon || ((_a = this.trailingText) === null || _a === void 0 ? void 0 : _a.length) > 0 || this.isTrailingSlot;
-    }
-    get isTextSlot() {
-        return this.isEl('[slot="text"]');
-    }
-    get isHeadlineSlot() {
-        return this.isEl('[slot="headline"]');
-    }
-    get isDescriptionSlot() {
-        return this.isEl('[slot="description"]');
-    }
-    get headlineContent() {
-        var _a;
-        return ((_a = this.host.querySelector('[slot="headline"]')) === null || _a === void 0 ? void 0 : _a.textContent) || this.headline;
-    }
-    get hasSubitems() {
-        return this.isEl('[variant="subitem"]');
-    }
-    get subItems() {
-        var _a;
-        return (_a = this.host) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[variant="subitem"]');
-    }
-    /** Function to set tabindex for sub-items */
-    setTabIndexOnSubItems() {
-        if (this.hasSubitems) {
-            this.subItems.forEach((element) => {
-                var _a;
-                (_a = element.shadowRoot.querySelector('a.r-list-item')) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', this.disabled ? '-1' : null);
-            });
-        }
-    }
-    componentDidLoad() {
-        this.setTabIndexOnSubItems();
-    }
-    get tagName() {
-        if (this.hasSubitems) {
-            return 'button';
-        }
-        return this.href && !this.disabled ? 'a' : 'div';
-    }
-    render() {
-        const { leadingIcon, leadingIconSrc, trailingIcon, trailingIconSrc, headline, trailingText, description } = this;
-        const TagName = this.tagName;
-        const itemAttrs = Object.assign(Object.assign(Object.assign({ href: TagName === 'a' ? this.href : null, 'aria-current': this.active && TagName === 'a' ? 'page' : null }, (this.disabled ? { role: 'link', 'aria-disabled': 'true' } : null)), (this.hasSubitems ? { 'aria-expanded': `${this.expanded}` } : null)), (this.hasSubitems ? { 'aria-controls': `${this.uniqueSubmitemsId}` } : null));
-        const ListItemContent = (h(TagName, Object.assign({ class: "r-list-item" }, itemAttrs, { onClick: () => this.hasSubitems && this.toggleSubitems() }), this.isLeading &&
-            h("span", { class: "r-list-item--leading" }, h("slot", { name: "leading" }, this.isLeadingIcon && !this.hideLeadingIcon &&
-                h("r-icon", { class: "r-list-item--leading-icon", name: leadingIcon, src: leadingIconSrc }))), h("span", { class: "r-list-item--text" }, !this.isTextSlot ?
-            h(Fragment, null, (this.isHeadlineSlot || headline) &&
-                h("span", { class: "r-list-item--headline" }, h("slot", { name: "headline" }, headline)), (description || this.isDescriptionSlot) &&
-                h("span", { class: "r-list-item--description" }, h("slot", { name: "description" }, description)))
-            :
-                h("slot", { name: "text" })), h("span", { class: "r-list-item--sr-text visually-hidden" }, this.headlineContent), this.isTrailing &&
-            h("span", { class: "r-list-item--trailing" }, h("slot", { name: "trailing" }, this.isTrailingIcon && !trailingText &&
-                h("r-icon", { class: "r-list-item--trailing-icon", name: trailingIcon, src: trailingIconSrc }), trailingText && !this.isTrailingIcon &&
-                h("span", { class: "r-list-item--trailing-text" }, trailingText)))));
-        if (!this.hasSubitems)
-            return h(Host, null, ListItemContent);
-        return (h(Host, null, h("div", { class: "r-list-item-wrapper" }, ListItemContent, h("ul", { "aria-hidden": `${!this.expanded}`, id: this.uniqueSubmitemsId, class: "sub-items" }, h("slot", null)))));
-    }
-    get host() { return getElement(this); }
-};
-RListItem.style = listItemCss;
-
-export { RListItem as r_list_item };