@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,275 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const tabsCss = ":host{display:block;margin-top:var(--r-spacing-150, 1.5rem)}";
+
+const RTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rChange = createEvent(this, "rChange");
+        this.activeTab = null;
+    }
+    /** `<r-tab>` group of elements */
+    get tabElements() {
+        var _a;
+        return (_a = this.host.querySelector('r-tabs-list')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('r-tab');
+    }
+    /** `<r-tab-panel>` group of elements */
+    get panelElements() {
+        return this.host.querySelectorAll(':scope > r-tab-panel');
+    }
+    /** Active tab element */
+    get activeTabElement() {
+        return this.activeTab || this.host.querySelector('r-tab[active]');
+    }
+    /** Check if active tab element exists */
+    get hasActiveTabElement() {
+        return this.activeTabElement !== null;
+    }
+    /** Check if active tab element is disabled */
+    get isActiveTabElementDisabled() {
+        var _a;
+        return ((_a = this.activeTabElement) === null || _a === void 0 ? void 0 : _a.disabled) || false;
+    }
+    get isStructureCorrect() {
+        var _a, _b;
+        return Boolean(((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.panelElements) === null || _b === void 0 ? void 0 : _b.length));
+    }
+    get isMissingPanel() {
+        var _a, _b;
+        return ((_a = this.panelElements) === null || _a === void 0 ? void 0 : _a.length) < ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length);
+    }
+    get isDisabledPanel() {
+        return Boolean(Array.from(this.panelElements).find(panel => panel.hasAttribute('disabled')));
+    }
+    _disableTabIfPanelMissing() {
+        var _a;
+        if (!this.isMissingPanel)
+            return;
+        (_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.forEach((tab, index) => {
+            if (!this.panelElements[index]) {
+                tab.disabled = true;
+                tab.setAttribute('disabled', 'true');
+                return;
+            }
+        });
+    }
+    get tabGroupsAmount() {
+        return document.querySelectorAll('r-tabs').length;
+    }
+    markGroupsWithIndex() {
+        document.querySelectorAll('r-tabs').forEach((el, index) => {
+            el.setAttribute('data-group', `${index}`);
+        });
+    }
+    _connectTabsAndPanelsById() {
+        this.markGroupsWithIndex();
+        // Connect tabs and panels with id's
+        this.tabElements.forEach((tab, index) => {
+            var _a, _b;
+            const label = this.transliterateToKebabCase(tab.textContent);
+            // Unique id per each tab-panel pair
+            const tabId = `r-tab-${label}`;
+            const panelId = `r-tab-panel-${label}`;
+            // Assign `id` and `panel-id` to each tab
+            tab.setAttribute('id', tabId);
+            tab.setAttribute('panel-id', panelId);
+            // Assign `tab-id` and `id` to each panel
+            (_a = this.panelElements[index]) === null || _a === void 0 ? void 0 : _a.setAttribute('tab-id', tabId);
+            (_b = this.panelElements[index]) === null || _b === void 0 ? void 0 : _b.setAttribute('id', panelId);
+            return this;
+        });
+    }
+    _disableTabIfPanelDisabled() {
+        if (!this.isDisabledPanel)
+            return;
+        this.panelElements.forEach(panel => {
+            if (panel.hasAttribute('disabled')) {
+                const tabEl = Array.from(this.tabElements).find(tab => tab.getAttribute('id') === panel.getAttribute('tab-id'));
+                tabEl.setAttribute('disabled', 'true');
+            }
+        });
+    }
+    transliterateToKebabCase(label) {
+        // Normalize and replace accents/diacritics
+        let latinLabel = label.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+        // Replace common non-Latin characters with approximate Latin equivalents
+        latinLabel = latinLabel
+            .replace(/ß/g, "ss") // German Eszett
+            .replace(/æ/g, "ae") // Scandinavian
+            .replace(/ø/g, "o") // Scandinavian
+            .replace(/đ/g, "d") // Croatian/Serbian
+            .replace(/ł/g, "l"); // Polish
+        latinLabel = latinLabel.toLowerCase();
+        // Replace spaces and underscores with dashes
+        latinLabel = latinLabel.replace(/[ _]+/g, "-");
+        // Remove non-alphanumeric and non-dash characters
+        latinLabel = latinLabel.replace(/[^a-z0-9-]/g, "");
+        // Remove consecutive dashes and trim
+        latinLabel = latinLabel.replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+        return latinLabel;
+    }
+    get tabIdFromUrl() {
+        const url = new URL(window.location.href);
+        return url.searchParams.get('tab') || null;
+    }
+    get tabsGroupFromUrl() {
+        const url = new URL(window.location.href);
+        return url.searchParams.get('tabs-group') || '0';
+    }
+    get groupFromData() {
+        return this.host.getAttribute('data-group');
+    }
+    _getTabElFromUrl() {
+        if (!this.navigation)
+            return;
+        const isCurrentGroup = this.groupFromData === this.tabsGroupFromUrl;
+        if (!isCurrentGroup)
+            return;
+        // Find the tab that matches the `tabId`
+        const tabEl = Array.from(this.tabElements).find(tab => tab.id === this.tabIdFromUrl);
+        if (!tabEl)
+            return null;
+        return tabEl;
+    }
+    _defineInitiallyActiveTab() {
+        if (this.tabIdFromUrl)
+            return this._getTabElFromUrl();
+        if (this.hasActiveTabElement && !this.isActiveTabElementDisabled)
+            return this.activeTabElement;
+        return this.host.querySelector('r-tab:not([disabled])');
+    }
+    _selectInitialTabAndPanel() {
+        const tabEl = this._defineInitiallyActiveTab();
+        tabEl && this._selectTab(tabEl);
+    }
+    _selectTab(tabEl) {
+        // Pass active tab to state
+        this.activeTab = tabEl;
+        // Mark active tab element
+        this.tabElements.forEach(element => {
+            element.active = element.id === tabEl.id;
+            element.active ? element.setAttribute('active', '') : element.removeAttribute('active');
+        });
+        // Mark active panel element
+        this.panelElements.forEach(element => {
+            element.active = element.id === tabEl.panelId;
+            element.active ? element.setAttribute('active', '') : element.removeAttribute('active');
+        });
+        // If URL contains tabId --> scroll active tab into view
+        if (this.tabIdFromUrl)
+            this.host.scrollIntoView({ behavior: 'smooth' });
+    }
+    handlePopState(event) {
+        var _a, _b;
+        if (!this.navigation)
+            return;
+        const tabId = (_a = event.state) === null || _a === void 0 ? void 0 : _a.tabId;
+        const tabsGroup = (_b = event.state) === null || _b === void 0 ? void 0 : _b.tabsGroup;
+        const isInGroup = tabsGroup === this.host.getAttribute('data-group');
+        if (!tabId)
+            window.location.reload();
+        if (!isInGroup)
+            return;
+        const tab = Array.from(this.tabElements).find(tab => tab.id === tabId);
+        if (!tab)
+            return;
+        this._selectTab(tab);
+    }
+    handleHistory(tab) {
+        const tabId = tab.getAttribute('id');
+        const tabsGroup = tab.closest('r-tabs').getAttribute('data-group');
+        const url = new URL(window.location.href);
+        url.searchParams.set('tab', tabId);
+        if (this.tabGroupsAmount > 1)
+            url.searchParams.set('tabs-group', tabsGroup);
+        history.pushState({ tabId, tabsGroup }, '', url.toString());
+    }
+    _changeFocusTab(tab, keycode) {
+        const tabs = Array.from(this.tabElements).filter(element => !element.disabled);
+        const index = tabs.indexOf(tab);
+        let nextTab;
+        switch (keycode) {
+            case 'ArrowLeft':
+                nextTab = index === 0 ? tabs[tabs.length - 1] : tabs[index - 1];
+                break;
+            case 'ArrowRight':
+                nextTab = index === tabs.length - 1 ? tabs[0] : tabs[index + 1];
+                break;
+            case 'Home':
+                nextTab = tabs[0];
+                break;
+            case 'End':
+                nextTab = tabs[tabs.length - 1];
+                break;
+        }
+        if (nextTab) {
+            nextTab.focus();
+            this.scrollTabIntoView(nextTab);
+        }
+    }
+    scrollTabIntoView(tab) {
+        var _a;
+        const tabsList = this.host.querySelector('r-tabs-list');
+        if (!tabsList)
+            return;
+        const container = (_a = tabsList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-tabs-list--tabs-container');
+        if (!container)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        // Check if tab is fully visible
+        const isFullyVisible = tabRect.left >= containerRect.left - 1 &&
+            tabRect.right <= containerRect.right + 1;
+        if (isFullyVisible)
+            return;
+        // Calculate scroll offset to center the tab
+        const centerOffset = (tabRect.left - containerRect.left) -
+            (containerRect.width / 2) +
+            (tabRect.width / 2);
+        container.scrollBy({
+            left: centerOffset,
+            behavior: 'smooth'
+        });
+    }
+    /** Listen for "click" event on `<r-tab>` */
+    tabChangeAction(event) {
+        event.stopPropagation();
+        const tab = event.target;
+        this._selectTab(tab);
+        if (this.navigation)
+            this.handleHistory(tab);
+        this.rChange.emit({ element: tab });
+    }
+    componentWillLoad() {
+        // If no tabs or no panels, skip the rest of initiation
+        if (!this.isStructureCorrect)
+            return;
+        // If panel is missing, tab is disabled
+        this._disableTabIfPanelMissing();
+        // Establish connection between tabs and panels through id
+        this._connectTabsAndPanelsById();
+        // If panel is disabled, tab is disabled
+        this._disableTabIfPanelDisabled();
+        // Active initial tab and panel
+        this._selectInitialTabAndPanel();
+    }
+    connectedCallback() {
+        // Listen for popstate events (when the user navigates back/forward)
+        window.addEventListener('popstate', this.handlePopState.bind(this));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('popstate', this.handlePopState.bind(this));
+    }
+    /** Listen for "moveTabFocus" event on `<r-tab>` */
+    moveTabFocusAction(e) {
+        e.stopPropagation();
+        this._changeFocusTab(e.target, e.detail.keycode);
+    }
+    render() {
+        return (h(Host, { key: 'a1ff15e7b90774486932acd7035839fc8794e10b', class: "r-tabs" }, h("slot", { key: '4d8a00d7344c8cbc69896b43da740009fa54cab9' })));
+    }
+    get host() { return getElement(this); }
+};
+RTabs.style = tabsCss;
+
+export { RTabs as r_tabs };

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

@@ -0,0 +1,268 @@
+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 textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #b00c15)}.r-textarea--label-container{display:var(--r-textarea--label-container--display, flex);gap:var(--r-textarea--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-textarea--label-container--align-items, center);justify-content:var(--r-textarea--label-container--align-items, space-between)}.r-textarea--label-container ::slotted([slot=popover]){display:var(--r-textarea--popover--display, inline-flex);height:var(--r-textarea--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-textarea--popover--align-items, center);justify-content:var(--r-textarea--popover--justify-content, center);margin-right:var(--r-textarea--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-textarea--popover-trigger--min-width, var(--r-spacing-150, 1.5))}.r-textarea--input::placeholder{color:var(--r-textarea--input--placeholder--color, var(--r-text-soft, #686868))}.r-textarea--input{vertical-align:top;width:var(--r-textarea--input--width, 100%);max-width:var(--r-textarea--input--max-width, 100%);min-height:var(--r-textarea--input--min-height, 8.875em);font-family:var(--r-textarea--input--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-textarea--input--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-textarea--input--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-textarea--input--line-height, var(--r-line-height-m, 1.5));color:var(--r-textarea--input--color, var(--r-text-regular, #282828));background-color:var(--r-textarea--input--background-color, transparent);opacity:var(--r-textarea--input--opacity, 1);border-width:var(--r-textarea--input--border-width, 0px);border-style:var(--r-textarea--input--border-style, solid);border-color:var(--r-textarea--input--border-color, var(--r-border-soft, #686868));border-radius:var(--r-textarea--input--border-radius, 0);box-sizing:var(--r-textarea--input--box-sizing, border-box);box-shadow:var(--r-textarea--input--box-shadow, none);padding:var(--r-textarea--input--padding, var(--r-textarea--input--padding-top, 0.688em) var(--r-textarea--input--padding-right, 0.625em) var(--r-textarea--input--padding-bottom, 0.688em) var(--r-textarea--input--padding-left, 0.625em));margin-top:var(--r-textarea--input--margin-top, 0);resize:var(--r-textarea--input--resize, both);z-index:var(--r-textarea--input--z-index, initial);outline:var(--r-textarea--input--outline, none);outline-offset:var(--r-textarea--input--outline-offset, 0);pointer-events:var(--r-textarea--input--pointer-events, auto);cursor:var(--r-textarea--input--cursor, inherit)}.r-textarea--container{display:flex;align-items:start;overflow:visible;background-color:var(--r-textarea--container--background-color, var(--r-background-interactive-softest, #f7f7f7));border-width:var(--r-textarea--container--border-width, 1px);border-style:var(--r-textarea--container--border-style, solid);border-color:var(--r-textarea--container--border-color, var(--r-border-soft, #686868));padding:var(--r-textarea--container--padding, 0);margin-top:var(--r-textarea--container--margin-top, var(--r-spacing-025, 0.25rem));box-shadow:var(--r-textarea--container--box-shadow, none);outline:var(--r-textarea--container--outline, none);outline-offset:var(--r-textarea--container--outline-offset, none)}.r-textarea--container[data-readonly=true]{--r-textarea--container--background-color:var(--r-background-soft, #f3f1f0);--r-textarea--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-textarea--container--cursor:text}.r-textarea--container:hover:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-hovered)}.r-textarea--container:active:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-pressed)}.r-textarea--container:focus-within{--r-textarea--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-textarea--container--outline:2px solid var(--r-border-focused, #0071e3);--r-textarea--container--outline-offset:2px}.r-textarea--trailing{display:var(--r-textarea--trailing--display, flex);margin-top:var(--r-textarea--trailing--margin-top, 0.688em);margin-right:var(--r-textarea--trailing--margin-right, 0.625em);margin-left:var(--r-textarea--trailing--margin-left, auto);gap:var(--r-textarea--trailing--gap, 0.625rem)}.r-textarea--trailing:empty{display:none}.r-textarea--readonly-icon{color:var(--r-textarea--readonly-icon--color, var(--r-icon-soft, #686868))}.r-textarea--messages{display:flex;gap:var(--r-textarea--messages--gap, var(--r-spacing-025, 0.25rem))}.r-textarea--messages--counter{margin-left:auto}.r-textarea--messages:has(r-hint){margin-top:var(--r-spacing-025, 0.25rem)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+
+const RTextarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.rChange = createEvent(this, "rChange");
+        this.rInput = createEvent(this, "rInput");
+        this.rReset = createEvent(this, "rReset");
+        this.rValidate = createEvent(this, "rValidate");
+        /** Represents the current value of the `<textarea>`, reflecting the content entered
+         * by the user or provided programmatically. */
+        this.value = this.textareaSlotValue;
+        /** Specifies a short hint that describes the expected value of the `<textarea>`,
+         * displayed when it is empty. */
+        this.placeholder = 'Provide an input';
+        /** Controls the resizability of the `<textarea>`, allowing
+         * or preventing the user from resizing it. */
+        this.resize = 'none';
+        /** Custom message when the character limit is reached to alert screen reader users. */
+        this.characterLimitReachedMessage = "You've reached the character limit.";
+        /** Custom validity state */
+        this.validityState = null;
+        /** Custom validity message */
+        this.validityMessage = '';
+        /**
+         * Initial attributes state
+         * */
+        this.initial = {};
+        /** Unique id */
+        this.uniqueId = `r-textarea-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.onInput = event => {
+            if (this.readonly)
+                return;
+            this.value = event.target.value;
+            this.validateFormElement(this.nativeElement);
+            const { host, value } = this;
+            this.rInput.emit({ element: host, value });
+            if (value.length === this.maxlength && this.characterLimitReachedAlert) {
+                this.characterLimitReachedAlert.innerText = this.characterLimitReachedMessage;
+                setTimeout(() => {
+                    this.characterLimitReachedAlert.innerText = '';
+                }, 2000);
+            }
+        };
+        this.onChange = event => {
+            if (this.readonly)
+                return;
+            this.value = event.target.value;
+            this.validateFormElement(this.nativeElement);
+            const { host, value } = this;
+            this.rChange.emit({ element: host, value });
+        };
+        this.onSubmitForm = (event) => {
+            if (this.isNoValidate)
+                return;
+            this.validateFormElement(this.nativeElement);
+            if (this.invalid) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.onResetForm = () => {
+            if (this.readonly)
+                return;
+            // Return to initial state
+            this.validityState = null;
+            this.validityMessage = null;
+            this.value = this.initial['value'];
+            this.invalid = this.initial['invalid'];
+            this.valid = !this.invalid;
+            const { host, value } = this;
+            this.rReset.emit({ element: host, value });
+        };
+        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.contributeToFormData = (event) => {
+            appendControlToFormData(this.nativeElement || this.host, event.formData);
+        };
+    }
+    /** Sets the value of the element. */
+    async setValue(value) {
+        if (this.readonly)
+            return;
+        this.value = value;
+    }
+    /** Gets the value of the element. */
+    async getValue() {
+        return this.value;
+    }
+    /** Resets value and validity state to initial. */
+    async reset() {
+        if (this.readonly)
+            return;
+        this.validityState = null;
+        this.validityMessage = null;
+        this.value = this.initial['value'];
+        this.invalid = this.initial['invalid'];
+        this.valid = !this.invalid;
+    }
+    /** Sets focus on the element. */
+    async setFocus() {
+        this.nativeElement.focus();
+    }
+    /** Removes focus from the element. */
+    async setBlur() {
+        this.nativeElement.blur();
+    }
+    /** Sets the start and end positions of the text selection. */
+    async setSelectionRange(start, end, direction) {
+        this.nativeElement.setSelectionRange(start, end, direction);
+    }
+    /** Replaces the current text selection with a new string. */
+    async setRangeText(replacement, start, end, selectionMode) {
+        this.nativeElement.setRangeText(replacement, start, end, selectionMode);
+    }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
+    /**
+     * Validates the textarea without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the textarea is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
+    /** Validates an element and displays validity state. */
+    async reportValidity() {
+        this.validateFormElement(this.nativeElement);
+    }
+    /** 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() {
+        if (!this.validityState)
+            return false;
+        const isInvalid = this.validityState !== 'valid';
+        const hasMessage = !!(this.customErrorMessage || this.validityMessage);
+        return isInvalid && hasMessage;
+    }
+    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 textareaSlotValue() {
+        return this.host.textContent;
+    }
+    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);
+    }
+    componentWillLoad() {
+        this.initial['value'] = this.value;
+        this.initial['invalid'] = this.invalid;
+    }
+    connectedCallback() {
+        this.connectFormEventListeners();
+    }
+    disconnectedCallback() {
+        this.disconnectFormEventListeners();
+    }
+    render() {
+        const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, readonly } = this;
+        const textareaAttrs = {
+            name,
+            rows,
+            cols,
+            placeholder,
+            required,
+            maxlength,
+            minlength,
+            form,
+            value,
+            disabled,
+            resize,
+            readonly,
+            id: uniqueId,
+            'aria-describedby': this.ariaDescribedBy,
+            'aria-invalid': `${!!invalid}`,
+            'aria-required': `${!!required}`
+        };
+        const labelAttr = label ? {
+            label,
+            fieldIndicator
+        } : {};
+        // 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, null, h("div", { class: "r-textarea--label-container" }, h("label", { htmlFor: uniqueId }, label &&
+            h("r-label", Object.assign({ id: `${uniqueId}-label` }, labelAttr), label)), h("slot", { name: "popover" })), hint &&
+            h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), h("div", { class: "r-textarea--trailing" }, this.readonly && h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && h("slot", { name: "trailing" }))), h("div", { class: "r-textarea--messages" }, h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage)), showCounter && h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
+            h("div", { class: "visually-hidden", ref: el => this.characterLimitReachedAlert = el, "aria-live": "assertive" }))));
+    }
+    get host() { return getElement(this); }
+};
+RTextarea.style = textareaCss;
+
+export { RTextarea as r_textarea };

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

@@ -0,0 +1,44 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const toastGroupCss = ":host([data-visually-hidden=true]){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:var(--display, block);position:var(--position, fixed);top:var(--top, 0);right:var(--right, 0);bottom:var(--bottom, auto);left:var(--left, auto);overflow:var(--overflow, hidden);overflow-y:var(--overflow-y, auto);width:var(--width, 352px);max-height:var(--max-height, calc(100vh - 64px));padding-right:var(--padding-right, 32px);padding-top:var(--padding-top, 16px);padding-bottom:var(--padding-bottom, 32px);z-index:var(--z-index, 1)}:host ::slotted(r-toast){margin-top:var(--r-spacing-100, 1rem)}.r-toast-group{position:relative;display:var(--r-toast-group--display, flex);flex-direction:var(--r-toast-group--flex-direction, column);justify-content:var(--r-toast-group--justify-content, flex-start)}";
+
+const ToastGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.updateHiddenState = () => {
+            this.host.setAttribute('data-visually-hidden', `${!this.hasChildren}`);
+        };
+        this.observeSlotContentChange = () => {
+            this.observer = new MutationObserver(async (mutations) => {
+                var _a, _b;
+                this.updateHiddenState();
+                const addedToast = mutations
+                    .flatMap(mutation => Array.from(mutation.addedNodes))
+                    .find(node => node.nodeName === 'R-TOAST');
+                if (addedToast) {
+                    // Measure height then reveal for smooth animation
+                    await ((_a = addedToast.measureAndPrepareHeight) === null || _a === void 0 ? void 0 : _a.call(addedToast));
+                    await ((_b = addedToast.reveal) === null || _b === void 0 ? void 0 : _b.call(addedToast));
+                }
+            });
+            this.observer.observe(this.host, {
+                childList: true,
+                subtree: true
+            });
+        };
+    }
+    get hasChildren() {
+        return this.host.querySelectorAll('r-toast').length > 0;
+    }
+    componentWillLoad() {
+        this.updateHiddenState();
+        this.observeSlotContentChange();
+    }
+    render() {
+        return (h(Host, { key: '9924942e0ad98ba7e26b0b816bc79546c43c6064' }, h("div", { key: 'ea11ad2d95cb84e15773ab1278ae2229a6fda25d', class: "r-toast-group" }, h("slot", { key: '047c070360fe1649a96b867456228892fa75cd26' }))));
+    }
+    get host() { return getElement(this); }
+};
+ToastGroup.style = toastGroupCss;
+
+export { ToastGroup as r_toast_group };