@riverty/web-components 6.2.1 → 6.3.1

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

@@ -3,7 +3,54 @@
 var index = require('./index-BnETQtSf.js');
 var formData = require('./formData-B2DZyLxP.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}";
+/**
+ * Native HTML input attributes that can be passed through.
+ * Using Set for O(1) lookup performance instead of O(n) array includes.
+ */
+const nativeInputAttributesSet = new Set([
+    'accept', 'autocorrect', 'capture', 'dirname',
+    'height', 'incremental', 'list', 'multiple', 'size', 'src', 'width'
+]);
+/**
+ * Special case mappings for attributes that need custom camelCase conversion
+ * beyond simple hyphen-based transformation. Maps HTML attribute name (lowercase)
+ * to JSX property name (camelCase).
+ */
+const attributeCamelCaseMap = {
+    'autocorrect': 'autoCorrect',
+};
+/**
+ * Component-specific props that should NOT be passed to the native input.
+ * Using Set for O(1) lookup performance.
+ */
+const excludedAttributesSet = new Set([
+    'internal', 'full-width', 'fullwidth', 'validity-marker', 'validitymarker',
+    'error', 'valid', 'invalid', 'hint', 'field-indicator', 'fieldindicator',
+    'value-missing-message', 'valuemissingmessage', 'type-mismatch-message', 'typemismatchmessage',
+    'pattern-mismatch-message', 'patternmismatchmessage', 'too-long-message', 'toolongmessage',
+    'too-short-message', 'tooshortmessage', 'range-overflow-message', 'rangeoverflowmessage',
+    'range-underflow-message', 'rangeunderflowmessage', 'step-mismatch-message', 'stepmismatchmessage',
+    'bad-input-message', 'badinputmessage', 'custom-error-message', 'customerrormessage'
+]);
+/**
+ * Framework/DOM-specific attributes that should never be passed through.
+ */
+const frameworkAttributesSet = new Set([
+    'class', 'style', 'id', 'slot', 'ref', 'key'
+]);
+/**
+ * ARIA attributes that are already handled explicitly by the component
+ * and should not be passed through to avoid conflicts.
+ */
+const managedAriaAttributesSet = new Set([
+    'aria-invalid',
+    'aria-required',
+    'aria-placeholder',
+    'aria-describedby',
+    'data-value'
+]);
+
+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)}:host([size]){--r-input--width:auto;--r-input--input--width:auto;--r-input--container--display:inline-flex}.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) {
@@ -14,6 +61,11 @@ const RInput = class {
         this.rFocus = index.createEvent(this, "rFocus");
         this.rChange = index.createEvent(this, "rChange");
         this.rReset = index.createEvent(this, "rReset");
+        this.rBeforeInput = index.createEvent(this, "rBeforeInput");
+        this.rInvalid = index.createEvent(this, "rInvalid");
+        this.rKeyDown = index.createEvent(this, "rKeyDown");
+        this.rKeyUp = index.createEvent(this, "rKeyUp");
+        this.rSelect = index.createEvent(this, "rSelect");
         /**
          * Input type (e.g. `text`, `email`, `number`, `password`).
          * See HTMLInputElement `type` for supported values.
@@ -23,6 +75,8 @@ const RInput = class {
          * Current value. Mutable: can be changed programmatically or through user input.
          */
         this.value = '';
+        /** Internal state for options extracted from slotted datalist */
+        this.slottedOptions = [];
         /**
          * When `true` field renders valid/invalid marker within.
         */
@@ -38,11 +92,37 @@ const RInput = class {
         /** Private flag to prevent validation during reset */
         this.isResetting = false;
         this.nativeElement = null;
+        /**
+         * Helper to set the native input element ref and apply boolean properties
+         * that don't get properly set through JSX attribute spreading.
+         */
+        this.setNativeInputRef = (el) => {
+            this.nativeElement = el;
+            if (el) {
+                el.addEventListener('beforeinput', this.onBeforeInput);
+                // Manually apply boolean native attributes as properties
+                // This is necessary because Stencil's JSX doesn't always properly
+                // set boolean DOM properties when spreading attributes
+                const passthroughAttrs = this.collectNativeAttributes();
+                // List of boolean native input properties that need manual application
+                const booleanProps = ['multiple'];
+                for (const prop of booleanProps) {
+                    if (prop in passthroughAttrs && passthroughAttrs[prop] === true) {
+                        el[prop] = true;
+                    }
+                }
+            }
+        };
         this.uniqueId = `r-input-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         /**
          * Initial attributes state
          * */
         this.initial = {};
+        /**
+         * Cache for passthrough attributes to avoid recomputing on every render.
+         * Cleared when attributes might have changed.
+         */
+        this.passthroughAttrsCache = null;
         this.getValidityStateData = (element) => {
             let validityState = '';
             let validityMessage = '';
@@ -118,9 +198,25 @@ const RInput = class {
             this.host.classList.add('focused');
             this.rFocus.emit();
         };
+        this.onBeforeInput = (event) => {
+            this.rBeforeInput.emit(event);
+        };
+        this.onInvalid = (event) => {
+            this.rInvalid.emit(event);
+        };
+        this.onKeyDown = (event) => {
+            this.rKeyDown.emit(event);
+        };
+        this.onKeyUp = (event) => {
+            this.rKeyUp.emit(event);
+        };
+        this.onSelect = (event) => {
+            this.rSelect.emit(event);
+        };
         this.contributeToFormData = (event) => {
             formData.appendControlToFormData(this.nativeElement || this.host, event.formData);
         };
+        this.datalistObserver = null;
         this.onResetForm = () => {
             if (this.readonly)
                 return;
@@ -232,6 +328,11 @@ const RInput = class {
         this.value = value;
         this.validateFormElement(this.nativeElement);
     }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        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.
@@ -259,6 +360,56 @@ const RInput = class {
         this.touched = false;
         this.dirty = false;
     }
+    get datalistId() {
+        return `${this.uniqueId}-list`;
+    }
+    /**
+     * Checks if an attribute should be excluded from passthrough.
+     */
+    shouldExcludeAttribute(attrName) {
+        return (frameworkAttributesSet.has(attrName) ||
+            excludedAttributesSet.has(attrName) ||
+            managedAriaAttributesSet.has(attrName));
+    }
+    /**
+     * Collects native HTML input attributes from the host element that aren't
+     * already handled by explicit props. This allows passing through attributes
+     * like 'list', 'multiple', 'size', etc. without creating explicit props.
+     * Optimized with Set lookups (O(1)) and caching.
+     */
+    collectNativeAttributes() {
+        // Return cached result if available
+        if (this.passthroughAttrsCache !== null) {
+            return this.passthroughAttrsCache;
+        }
+        const collected = {};
+        const hostAttrs = this.host.attributes;
+        // Early return if no attributes to process
+        if (!hostAttrs || hostAttrs.length === 0) {
+            this.passthroughAttrsCache = collected;
+            return collected;
+        }
+        for (const attr of Array.from(hostAttrs)) {
+            const attrName = attr.name.toLowerCase();
+            // Skip framework/component-specific attributes using helper method
+            if (this.shouldExcludeAttribute(attrName)) {
+                continue;
+            }
+            // Include data-* or native input attributes (exclude aria- - component manages ARIA via inputAttrs)
+            if (attrName.startsWith('data-') || nativeInputAttributesSet.has(attrName)) {
+                // Use special camelCase mapping for certain attributes that need it for JSX properties
+                // Otherwise keep the attribute name as-is for native HTML attributes  
+                const jsxAttrName = attributeCamelCaseMap[attrName] || attrName;
+                // Handle boolean attributes: if value is empty or matches attribute name, set to true
+                // This ensures proper JSX rendering for attributes like 'multiple'
+                const attrValue = attr.value;
+                collected[jsxAttrName] = (attrValue === '' || attrValue === attrName) ? true : attrValue;
+            }
+        }
+        // Cache the result
+        this.passthroughAttrsCache = collected;
+        return collected;
+    }
     /** Identify wrapping form element */
     get parentFormEl() {
         return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
@@ -272,7 +423,7 @@ const RInput = class {
         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);
+        return (this.validityState && this.validityState !== 'valid' || this.invalid) && !!(this.validityMessage || this.customErrorMessage);
     }
     get hasMessage() {
         return this.hasError || this.hasValidationError;
@@ -291,12 +442,52 @@ const RInput = class {
         return !!this.host.querySelector('[slot="trailing"]');
     }
     get validEmailPattern() {
+        if (!this.value)
+            return false;
         const regex = new RegExp(this.pattern, 'u');
         return regex.test(this.value);
     }
     componentWillLoad() {
         this.initial['value'] = this.value;
         this.initial['invalid'] = this.invalid;
+        // Clear passthrough attributes cache to ensure fresh collection on load
+        this.passthroughAttrsCache = null;
+        // Extract options from slotted datalist
+        this.extractSlottedDatalistOptions();
+    }
+    /**
+     * Extracts options from a slotted <datalist> element.
+     * Supports both default slot and slot="datalist" usage.
+     */
+    extractSlottedDatalistOptions() {
+        // First check for slot="datalist"
+        const slottedDatalist = this.host.querySelector('datalist[slot="datalist"]');
+        if (!slottedDatalist) {
+            // Check for datalist in default slot
+            const defaultSlotDatalist = Array.from(this.host.querySelectorAll('datalist'))
+                .find(el => !el.hasAttribute('slot'));
+            if (!defaultSlotDatalist) {
+                return;
+            }
+            this.slottedOptions = this.parseDatalistOptions(defaultSlotDatalist);
+        }
+        else {
+            this.slottedOptions = this.parseDatalistOptions(slottedDatalist);
+        }
+    }
+    /**
+     * Parses options from a HTMLDataListElement into InputOption array.
+     */
+    parseDatalistOptions(datalist) {
+        const options = [];
+        const optionElements = datalist.querySelectorAll('option');
+        optionElements.forEach(opt => {
+            options.push({
+                value: opt.value,
+                label: opt.label || opt.textContent || opt.value
+            });
+        });
+        return options;
     }
     connectFormEventListeners() {
         var _a, _b, _c;
@@ -304,18 +495,49 @@ const RInput = class {
         (_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 }); });
+        this.setupDatalistObserver();
+        if (this.autofocus && !RInput.autofocusHandled) {
+            RInput.autofocusHandled = true;
+            queueMicrotask(() => { var _a; return (_a = this.host.querySelector('input[autofocus]')) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); });
+        }
     }
     disconnectedCallback() {
+        var _a;
         this.disconnectFormEventListeners();
+        this.disconnectDatalistObserver();
+        (_a = this.nativeElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('beforeinput', this.onBeforeInput);
+    }
+    setupDatalistObserver() {
+        this.extractSlottedDatalistOptions();
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.datalistObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    this.extractSlottedDatalistOptions();
+                    break;
+                }
+            }
+        });
+        this.datalistObserver.observe(this.host, {
+            childList: true,
+            subtree: false
+        });
+    }
+    disconnectDatalistObserver() {
+        if (this.datalistObserver) {
+            this.datalistObserver.disconnect();
+            this.datalistObserver = null;
+        }
+    }
+    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);
     }
     handleValueChange() {
         if (!this.isResetting) {
@@ -323,12 +545,18 @@ const RInput = class {
         }
     }
     handleTypeChange() {
-        this.setValue(this.nativeElement.value);
+        if (this.nativeElement) {
+            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,
+        // Collect any native input attributes that were set on the host element
+        const passthroughAttrs = this.collectNativeAttributes();
+        // Combine options from prop and slotted datalist (prop takes precedence)
+        const options = [...(this.slottedOptions || [])];
+        const hasDatalist = options.length > 0;
+        const inputAttrs = Object.assign(Object.assign({ disabled,
             readonly,
             required,
             label,
@@ -340,20 +568,15 @@ const RInput = class {
             max,
             form,
             pattern,
-            autocomplete,
-            autofocus: autofocus || null,
-            passwordrules,
+            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
-        };
+            spellcheck, inputmode: this.inputmode || null, id: uniqueId }, passthroughAttrs), {
+            // Component-controlled values always win
+            'data-value': value, 'aria-invalid': `${invalid || false}`, 'aria-required': `${required || false}`, 'aria-describedby': this.ariaDescribedBy,
+            // list attribute: use internal datalist when options provided, otherwise use passthrough value (explicit takes precedence)
+            list: hasDatalist ? this.datalistId : (passthroughAttrs.list || null)
+        });
         const labelAttr = label ? {
             id: `${uniqueId}-label`,
             fieldIndicator
@@ -375,19 +598,11 @@ const RInput = class {
             const iconColor = shouldShowInvalidMarker ? colors.invalid : colors.valid;
             return index.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 (index.h(index.Host, { onClick: this.handleClick, onKeyup: this.handleKeyup, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, index.h("div", { class: internal ? 'visually-hidden' : 'r-input--label-container' }, index.h("label", { htmlFor: uniqueId }, label ?
             index.h("r-label", Object.assign({ class: "r-input--label" }, labelAttr), label)
             :
                 index.h("slot", { name: "label" })), index.h("slot", { name: "popover" })), hint &&
-            index.h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { class: "r-input--container" }, index.h("slot", { name: "leading" }), index.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 })), index.h("div", { class: "r-input--trailing" }, this.readonly &&
+            index.h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { class: "r-input--container" }, index.h("slot", { name: "leading" }), index.h("input", Object.assign({ class: "r-input--input", type: this.type }, inputAttrs, { ref: this.setNativeInputRef, value: this.value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onInvalid: this.onInvalid, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp, onSelect: this.onSelect })), hasDatalist && (index.h("datalist", { ref: (el) => el && (el.id = this.datalistId) }, options.map((option) => (index.h("option", { value: option.value }, option.label || option.value))))), index.h("div", { class: "r-input--trailing" }, this.readonly &&
             index.h("r-icon", { class: "r-input--readonly-icon", name: "pen-disabled", size: "s" }), renderValidationMarker(), this.hasTrailingSlot &&
             index.h("slot", { name: "trailing" }))), index.h("div", { id: `${uniqueId}-message`, "aria-live": !internal ? 'polite' : null, class: !internal ? 'r-input--message' : 'visually-hidden' }, index.h("slot", { name: "message" }, this.hasMessage && index.h("r-hint", { variant: valid ? 'success' : 'error' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))))));
     }
@@ -397,6 +612,7 @@ const RInput = class {
         "type": ["handleTypeChange"]
     }; }
 };
+RInput.autofocusHandled = false;
 RInput.style = inputCss;
 
 exports.r_input = RInput;

package/dist/cjs/r-pagination.cjs.entry.js

@@ -192,6 +192,9 @@ const RPagination = class {
         }
         return isArrowButton ? buttonElement : (_e = this.el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(`.r-pagination--item[data-index="${this.pageActive}"]`);
     }
+    handlePropsChange() {
+        this.setPaginationState();
+    }
     componentWillLoad() {
         this.setPaginationState();
     }
@@ -203,9 +206,6 @@ const RPagination = class {
     componentDidRender() {
         this.syncHeaderWidth();
     }
-    componentDidUpdate() {
-        this.setPaginationState(); // Recalculate when props change
-    }
     render() {
         const { active, previous, next, first, itemsPerPage, itemsPerPageOptions, startText, middleText, endText, selectText, listBoxPosition } = this;
         const itemTemplate = (type, index$1) => {
@@ -308,6 +308,12 @@ const RPagination = class {
         return (index.h(index.Host, { role: "navigation" }, index.h("div", { class: "r-pagination" }, this.resultsLine && renderHeader(), renderList())));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "totalResults": ["handlePropsChange"],
+        "itemsPerPage": ["handlePropsChange"],
+        "variant": ["handlePropsChange"],
+        "pageActive": ["handlePropsChange"]
+    }; }
 };
 RPagination.style = paginationCss;
 

package/dist/cjs/r-panel.cjs.entry.js

@@ -168,10 +168,10 @@ const Panel = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '0404a2c3acbba8414d7baffc8c0f861e512fe7cb', role: "navigation", collapsed: this.isCollapsed }, index.h("div", { key: 'b93d1555f060793b7137fd6aac0de2a1a1f35436', class: "r-panel" }, index.h("div", { key: 'b7dd2dee4c145a21a5a963750e8b26ab2d8b9bbe', class: "r-panel--header" }, this.hasHeader && (index.h("a", { key: 'dbb02cd6271fba2a5d4a783a20d5e6d9e34ee734', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
+        return (index.h(index.Host, { key: '44996078c23da8ce9b5b48044d24d45778e688b4', role: "navigation", collapsed: this.isCollapsed }, index.h("div", { key: 'a217b08d3fda5e4f8761d971074e3de797363f32', class: "r-panel" }, index.h("div", { key: '8ff71b762feffd1cc9478014e011fc60875a5e3d', class: "r-panel--header" }, this.hasHeader && (index.h("a", { key: '9ad8475299e9f04341cc1c4b5b9e65551f2f6ca2', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
             index.h("slot", { name: "logo-collapsed" })
             :
-                index.h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "angle-left", rAriaLabel: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), index.h("div", { key: 'bb3d86b7a4b0890709d4a4637eca033ddaec24a6', class: "r-panel--body" }, index.h("slot", { key: '201aa3f616d3d239fc7b0edc23565a6618304ce5' })), this.hasFooter && !this.isCollapsed && (index.h("div", { key: 'a15f34fbb86ad8b16c6d036b885c7c8b13655fc6', class: "r-panel--footer" }, index.h("slot", { key: '41de73edf832d3a5ca93e4f9a79a62780fdcd68b', name: "footer" }))))));
+                index.h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (index.h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "angle-left", rAriaLabel: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), index.h("div", { key: '14b5a3ee0e11eda6585a84e0f05aa682950fbce2', class: "r-panel--body" }, index.h("slot", { key: 'e008d4f4796415779cd8e3dbda696b966b4ac184' })), this.hasFooter && !this.isCollapsed && (index.h("div", { key: '702c5859f2a7aa60903ec1df29f8977cf46dd0b8', class: "r-panel--footer" }, index.h("slot", { key: '347796d3e0bbffed77ae9368270f6e27eb93e156', name: "footer" }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/r-popover-action.cjs.entry.js

@@ -71,7 +71,7 @@ const PopoverAction = class {
         return focusable.focusableElements(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '8e0de158033b48c66aa49930911e1f383c2010ae', slot: "action" }, index.h("slot", { key: 'b9c762d2c1774600a29306559253125abc21cbcd', onSlotchange: this.handleSlotChange })));
+        return (index.h(index.Host, { key: 'a2e9f0482b6de85e54d5fb6c748113efbb76b887', slot: "action" }, index.h("slot", { key: '656f07644cd0d2e9a15263f644676a3e698d005d', onSlotchange: this.handleSlotChange })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-popover-content.cjs.entry.js

@@ -53,7 +53,7 @@ const PopoverContent = class {
         return focusable.focusableElements(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: 'f05a31b3948094f5f7ca657f4bd81474af2fcb6e', slot: "content", class: "r-typography" }, index.h("slot", { key: '0ecbe8de6c0ec200499aead61fc883804c4c4dd7' })));
+        return (index.h(index.Host, { key: '2384c04a8610e5d26bcd3e3fb4e70c99fca7d76a', slot: "content", class: "r-typography" }, index.h("slot", { key: '52ce40873c2e32725ee8ef8fc385d498ff8b973c' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-popover-headline.cjs.entry.js

@@ -19,7 +19,7 @@ const PopoverHeadline = class {
         theming.stopInverseThemeAwareness(this.host, themeContextElement);
     }
     render() {
-        return (index.h(index.Host, { key: '21f1656241f40201d5eb98cfb454d9c509f6cfe1', slot: "headline" }, index.h("slot", { key: 'fa9861bd13bcb23b420c5b5aa085ba6ceecb3df4' })));
+        return (index.h(index.Host, { key: 'bdbaecb36f49d54a1b33ef27d1c954834df68198', slot: "headline" }, index.h("slot", { key: '82eb6ae289211e5a23149e12125c1c30cf6b3ffd' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-popover-trigger.cjs.entry.js

@@ -61,7 +61,7 @@ const PopoverTrigger = class {
         (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (index.h(index.Host, { key: '313cccef6d7f463a6088581b2efc3057a97d61b2', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("slot", { key: '65ff3ba6c677c693445c0c82feae795a94768cf8' })));
+        return (index.h(index.Host, { key: '6c97f11b7263d0cf574fdafcef3d7a9733fe7925', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("slot", { key: '7d434e3505eda793e8d1d50f9fb1aa608061fa50' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-popover.cjs.entry.js

@@ -331,8 +331,8 @@ const Popover = class {
     }
     render() {
         const TAG = !this.activeElement ? 'button' : 'div';
-        return (index.h(index.Host, { key: 'f836d35a44519d273dc399d0ae6142f17e78888e', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, index.h("div", { key: '88146350c8695487a18028a20bf1313052b35870', class: "r-popover" }, index.h(TAG, { key: 'de1a53f1f921acc223ebd0276b46e43832e5a82f', class: "r-popover--trigger", "aria-label": !this.activeElement ? this.triggerAriaLabel : null, ref: el => this.triggerElement = el, "aria-haspopup": "dialog", popoverTarget: !this.activeElement ? `${this.uniqueId}-board` : null, popoverTargetAction: !this.activeElement ? this.triggerAction : null }, index.h("slot", { key: '2946f68024273f6b7bbb250faca7794eb712cc58', name: "trigger" })), index.h("div", { key: 'cf44066fb1ec34178d73b812f5bcca3b1977575d', class: "r-popover--board", id: `${this.uniqueId}-board`, role: "dialog", "aria-label": this.headlineSlotContent, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
-            index.h("r-icon-button", { key: '41e3e2bef98b88328984233271e7378a767eaf76', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), index.h("div", { key: '9d47e8f5e2cb4d27118b64cfcf3eb83dd7d84ff0', class: "r-popover--board-content" }, index.h("slot", { key: '68f384a418a32a14b01adb7e3d407e4e46f8ca95', name: "headline" }), index.h("slot", { key: '3536f9f3aa738919115c1ad017cd0f66438fb044', name: "content" }), index.h("slot", { key: '4ecbf5d23cb23f9adaade04f3694a6d17f773365', name: "action" })), index.h("div", { key: '1c3acee058d689e106b9fca008d77229d52b2aea', class: "r-popover--board-pointer", "aria-hidden": "true" }, index.h("svg", { key: 'bb211b28714acc84753bbaaafee1ab1624d51b6c', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '0ad29cb4ef8d2d7f62738af3b1749c5b5e007d87', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
+        return (index.h(index.Host, { key: '655880fb3d3f069e13bc7025f932abc192df8918', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, index.h("div", { key: '6617392de14d78a1a53172fc689245749f01909a', class: "r-popover" }, index.h(TAG, { key: '87dc99d5ab380b7f288fa9fba0e861feacff6e20', class: "r-popover--trigger", "aria-label": !this.activeElement ? this.triggerAriaLabel : null, ref: el => this.triggerElement = el, "aria-haspopup": "dialog", popoverTarget: !this.activeElement ? `${this.uniqueId}-board` : null, popoverTargetAction: !this.activeElement ? this.triggerAction : null }, index.h("slot", { key: '51c875b84c1311e40292cf7fe80f7753fcd15abf', name: "trigger" })), index.h("div", { key: '24a2d6a90d0fe9167a08328e80ed6164c94170f0', class: "r-popover--board", id: `${this.uniqueId}-board`, role: "dialog", "aria-label": this.headlineSlotContent, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
+            index.h("r-icon-button", { key: '51e2563b582c5300eff1a032829bfdfb4947bdb6', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), index.h("div", { key: '6abf0772e1b45c1c6be7eeeb5a0b37469e17c4de', class: "r-popover--board-content" }, index.h("slot", { key: 'd4af6923192d72fb77e0591dbc9f163965fdb9b7', name: "headline" }), index.h("slot", { key: '469fb95a09ce36ad41b7a76e3f09c8834c4e7e14', name: "content" }), index.h("slot", { key: '17145240e43b06ae7186ad8d46a3d10b7996d3f2', name: "action" })), index.h("div", { key: '68e7ce9cdbe5c5b765d5866d9ea6c80d6b830630', class: "r-popover--board-pointer", "aria-hidden": "true" }, index.h("svg", { key: '55d0e368d2af54a082fc8323b9b1e40457a5a62b', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '86db95e48bed58187dea614c81527f6bd7ef9f3e', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/r-progress-bar.cjs.entry.js

@@ -17,7 +17,7 @@ const ProgressBar = class {
             max: '100',
             'aria-label': rAriaLabel
         };
-        return (index.h(index.Host, { key: '8d8307ebac0b8a231569bd86c35175d9f11e14ac' }, index.h("progress", Object.assign({ key: '631b8ecaaca4fde5c14ddabb74ff076610557832' }, progressBarAttrs, { class: "r-progress-bar" }))));
+        return (index.h(index.Host, { key: '832812688a18bea634c8ff2c5ea69599cdefdcff' }, index.h("progress", Object.assign({ key: 'd3384feada9ee1594e3ee331377d30ae1e8725f1' }, progressBarAttrs, { class: "r-progress-bar" }))));
     }
 };
 ProgressBar.style = progressBarCss;

package/dist/cjs/r-radio-button-description.cjs.entry.js

@@ -9,7 +9,7 @@ const RadioButtonDescription = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '0cc8dafb54d3b65f6c3af977bde4019ac413042d', slot: "description" }, index.h("div", { key: '7347ec0238fbf3c8471cdcf6fb3cf303a0f9c4e7', class: "r-radio-button-description", style: { display: 'contents' } }, index.h("slot", { key: '940714dd9b350c10b47486454139506d38fa0366' }))));
+        return (index.h(index.Host, { key: '30f29f811a727ba758a1e5b89fb86baf78076694', slot: "description" }, index.h("div", { key: '233da5297c2b1e47def8e92f0d8e9a5fba846dc8', class: "r-radio-button-description", style: { display: 'contents' } }, index.h("slot", { key: 'f00f06ec8f07b3995fb2249977cad70df930a4c9' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-radio-button-leading.cjs.entry.js

@@ -9,7 +9,7 @@ const RadioButtonLeading = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2f4f3dae827959cebf6a5b5797d8942b6fbbeded', slot: "leading" }, index.h("div", { key: '6dfda6f9bf0c88056d3d46f095b1f30e615ac5d7', class: "r-radio-button-leading", style: { display: 'contents' } }, index.h("slot", { key: 'd909c93595d5f43ad3d8b93262134b52fbfde23c' }))));
+        return (index.h(index.Host, { key: 'fcfa2b1df999df8a168bd0255ad7855dce28485c', slot: "leading" }, index.h("div", { key: '2d0e091a66adb24576f5e4a2f0959b8c83dc2017', class: "r-radio-button-leading", style: { display: 'contents' } }, index.h("slot", { key: 'cebdf0262db3ce092efbe2e8e830aa54903aa59e' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-radio-button-title.cjs.entry.js

@@ -9,7 +9,7 @@ const RadioButtonTitle = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2d2ae73f63409f55e0d5920c351cfed20d3b69d9', slot: "title" }, index.h("div", { key: '8f0ed8680798a41ddf827e74b245e43464f51eb0', class: "r-radio-button-title", style: { display: 'contents' } }, index.h("slot", { key: '336df52466bdad5baa93b1ed6abb192bee958e30' }))));
+        return (index.h(index.Host, { key: '12da195c66d902eba41e84b1ccaf3efbabbac144', slot: "title" }, index.h("div", { key: '84fc3a3e1d0b9b641a7fb859d03e904b5009cb44', class: "r-radio-button-title", style: { display: 'contents' } }, index.h("slot", { key: '6562965e5dfa79f4b9f80f22b4293e8ea600e4b2' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-radio-button-trailing.cjs.entry.js

@@ -9,7 +9,7 @@ const RadioButtonTrailing = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '628b87d2952aad3e25f8fd6b0b61c6db06a15959', slot: "trailing" }, index.h("div", { key: '93d2888f3e10e6346fda143ba8d0757d2913a503', class: "r-radio-button-trailing", style: { display: 'contents' } }, index.h("slot", { key: '5929143a1c1b54e9e3f082dd54c2e1376a80dece' }))));
+        return (index.h(index.Host, { key: 'b9fc1731ecc2b522e341cfaceb5b703c8d74253f', slot: "trailing" }, index.h("div", { key: 'f1319664b1543a4a784cb2cd665567a4d561bdc3', class: "r-radio-button-trailing", style: { display: 'contents' } }, index.h("slot", { key: 'dbed8559c3b0a5ba2580fe9e8c297e7eb947e5a5' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-radio-button.cjs.entry.js

@@ -126,11 +126,11 @@ const RadioButton = class {
             required,
             autofocus
         };
-        return (index.h(index.Host, { key: 'cf6b1b5db202773a2c6eea4df6a9303275054a73' }, index.h("label", { key: '4e203583a2b779e239c2893eadccc3514f84b0c4', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, index.h("input", Object.assign({ key: '14e89b050928abd51b66e8637c39bbd8da8e9856' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), index.h("span", { key: 'ee55afd60c5dbb947e9c12fffc401f7acfcefada', class: "r-radio-button--box" }), this.isLeading &&
-            index.h("div", { key: 'eabd27b399dee0bc2cef0fb7a92adad55095708b', class: "r-radio-button--leading" }, index.h("slot", { key: '5ec99653141268456cf9c8b2398f70c7b1afd36d', name: "leading" }, this.icon && index.h("r-icon", { key: '47662e84ad1aac02e867ddd040b5b7e1890ba986', name: this.icon, size: "m" }))), index.h("div", { key: 'bcaaf67c6cdf95a0bfa0dd5784d69c237e551a0e', class: "r-radio-button--text" }, index.h("slot", { key: 'a54f1823afe368d85f9bd4743ac0aa1df7298049', name: "title" }, index.h("div", { key: 'b531b659b920d7f064f10e622b83099d14270935', style: { display: 'contents' } }, index.h("slot", { key: 'b51f3e83234681804c49cb1043d90de70e4929db' }))), index.h("slot", { key: 'd217abfd3675898afd5b41a543200f7104019aed', name: "description" }, this.description)), this.isTrailing &&
-            index.h("div", { key: '664ddcc19dba3029343532caa13b05a6e3834977', class: "r-radio-button--trailing" }, index.h("slot", { key: 'b4ec626236a01c9c74b20ae09194ea414bc7699c', name: "trailing" }))), invalid && error &&
-            index.h("r-hint", { key: 'bd60d4337984662f410613b470b6e3be695343f5', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
-            index.h("r-hint", { key: '31c5712fe6f2164219e28484a40ce5452a836743', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
+        return (index.h(index.Host, { key: 'ce9e98b6480c18675ac0dac4b118e574872f9af7' }, index.h("label", { key: 'adb23e0f9092e7c5bc2c0c70df71fa255f8a441b', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, index.h("input", Object.assign({ key: 'cdd35d3caebb8e7eb8162dcc97c73f85067a55bb' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), index.h("span", { key: '89e258e8d5b41a51ff48ad26f1e83bcdb447089a', class: "r-radio-button--box" }), this.isLeading &&
+            index.h("div", { key: '14e5cbd3fb54b86761f68f53f64081be3021bf9d', class: "r-radio-button--leading" }, index.h("slot", { key: '8350ee29002de443338179d8e926356fa080cb97', name: "leading" }, this.icon && index.h("r-icon", { key: 'ba1ad94e6eabd2aa113e46ddc4f5f7cdc8e39635', name: this.icon, size: "m" }))), index.h("div", { key: '75c735e748dc36c3c785cb048f920060f31c7c9a', class: "r-radio-button--text" }, index.h("slot", { key: 'b2f39d35860d6ed36bf1913836af065ed093a9b4', name: "title" }, index.h("div", { key: '4f6fdd992b61a01c13810fbee76f66d514f8e8e2', style: { display: 'contents' } }, index.h("slot", { key: 'b0d6d3eb4b9687751822fd6e026cc5eec2fe3d6b' }))), index.h("slot", { key: '66f2d4a0262d494b4c5c700e48abb7210e5fc8df', name: "description" }, this.description)), this.isTrailing &&
+            index.h("div", { key: '64bb5efd43a7e52461dff3e3416c968bbe44d1a4', class: "r-radio-button--trailing" }, index.h("slot", { key: '20798c2198cc1360f6b04fa0a94984bb697eda6c', name: "trailing" }))), invalid && error &&
+            index.h("r-hint", { key: '06bd4aa937a926612c428e9f9cfcde98e60c6ca7', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
+            index.h("r-hint", { key: '5031e00344241c184fb8ef2aa8275274415b8a3e', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
     }
     get host() { return index.getElement(this); }
 };