@rarui/components 1.25.0 → 1.27.0-rc.2

package/CHANGELOG.md

@@ -2,7 +2,65 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
-## 2025-09-23 `1.26.0`
+## 2025-09-26 `1.28.0`
+
+- **PassThroughAttributesMixin**: Introduced mixin for managing pass-through attributes (data-_, aria-_) to internal elements, providing consistent attribute filtering and avoiding conflicts with component-managed attributes. Includes convenience methods `getDataAttributes()`, `getDataAndAriaAttributes()`, and configurable exclusion patterns. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- **Lit Binding Best Practices**: Comprehensive review and improvement of property binding patterns across Link, Button, Input, Password, and Search components following Lit best practices. Added `reflect: true` to all visual properties for better CSS styling and debugging, removed unnecessary boolean converters, and applied consistent mixin usage for ARIA properties and pass-through attributes. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🎉 New features
+
+## 2025-09-25 `1.27.0`
+
+#### 🎉 New features
+
+- **SprinkleAttributesMixin**: Introduced new mixin that replaces `@AddSprinkleAttributes` decorator, providing cleaner implementation with automatic HTML attribute parsing, responsive value support for CSS properties, and optional `cssProps` for programmatic usage. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **AriaAttributesMixin**: Created mixin that eliminates ARIA properties duplication across all components, automatically providing `ariaLabel`, `ariaLabelledBy`, and `ariaDescribedBy` with proper reflection. Applied to 15+ components: Avatar, Button, Badge, Checkbox, Select, Modal, Card, Sidebar, Dropdown, Chip, Title, Text, Icon, Search, Password, and others. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **BaseComponentMixin**: Introduced combined mixin that includes both SprinkleAttributesMixin and AriaAttributesMixin for complete component foundation with automatic CSS properties and ARIA support. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **SpreadAttributesDirective**: Centralized reusable directive for spreading HTML attributes to DOM elements, moved from individual components to shared utils structure for better maintainability. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🐛 Bug fixes
+
+- **Select Dropdown Auto-Close**: Fixed Select component to automatically close dropdown after selecting an option in single-select mode. Corrected property binding from `?visible` to `.visible` for proper Dropdown communication and added proper timing for UI updates. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **Dropdown Property Reflection**: Improved Dropdown component by adding `reflect: true` to visual and configuration properties (position, strategy, offset, open, enabled-\*) for better CSS styling support, debugging visibility, and accessibility. Removed unnecessary boolean converters following Lit best practices. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **Modal Property Reflection**: Enhanced Modal component with `reflect: true` on all visual properties (open, padding, max-width, portal-id) for improved debugging and CSS styling capabilities. Optimized event dispatching to only trigger `rarui-modal-open-changed` when `open` property actually changes. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- **Enhanced Dropdown Events**: Improved Dropdown component's `dropdown-visibility-change` event to include specific reason information ("click-outside", "escape-key", "click-open", "click-close") instead of generic reasons, enabling better component communication and more precise interaction handling. Updated Select component to properly respond to specific dismissal reasons. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+- **Utils Structure Cleanup**: Removed unused utility files and mixins, keeping only essential mixins for better maintainability and reduced bundle size. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **Divider Width Fix**: Fixed host element width behavior to respect user-provided size values, using fit-content for fixed sizes and proper percentage handling for values like "50%". ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+- **Code Duplication Reduction**: Eliminated 9+ lines of duplicated ARIA property declarations per component, reducing codebase size and improving maintainability across all web components. ([#139](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/139) by [@junior](https://git.rarolabs.com.br/junior))
+
+## 2025-09-25 `1.26.0`
+
+#### 🛠 Breaking changes
+
+- **Select Component Architecture Refactor**: Completely redesigned Select component to use slot-based sub-components (`rarui-select-option`, `rarui-select-optgroup`) instead of `options` property for better semantic HTML, improved accessibility, and enhanced developer experience. Migration required from `.options` arrays to slot-based markup. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🎉 New features
+
+- **Select Sub-Components**: Introduced `rarui-select-option` and `rarui-select-optgroup` components enabling semantic HTML structure with native option selection, default values via `selected` attribute, and improved screen reader compatibility. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Context Provider System**: Implemented advanced Context Provider pattern in Select using `@lit/context` for seamless parent-child communication, state synchronization, and coordinated updates between Select and SelectOption components. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **MutationObserver Integration**: Added intelligent DOM change detection with MutationObserver to automatically sync Select state when SelectOption children are added, removed, or modified, ensuring consistent UI state. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Enhanced Checkbox Integration**: Improved multiple selection with properly controlled checkbox states using readonly checkboxes as visual indicators while maintaining click interaction through parent dropdown items. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Manual Dropdown Dismiss Control**: Implemented custom click-outside and ESC key handling with complete `menuOpen` state control, replacing automatic dropdown dismiss for better programmatic control and consistent behavior. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🐛 Bug fixes
+
+- **Multiple Select FormData Fix**: Corrected FormData handling for multiple selections to create proper multiple entries with same name instead of comma-separated strings, ensuring native form submission compatibility. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Checkbox Boolean Binding**: Standardized Checkbox component property bindings using proper Lit conventions (`?checked=${value}` vs `checked="${value}"`) for consistent boolean attribute handling and resolved diagnostic warnings. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Selection State Synchronization**: Fixed selection state inconsistencies by establishing Context as single source of truth, eliminating conflicts between local component state and parent coordination. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+- **Form Value Updates**: Enhanced form integration by ensuring `_updateFormValue()` is called in all selection change scenarios (`handleSelect`, `handleRemoveOption`, chip removal) for consistent FormData synchronization. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- **Code Organization Improvements**: Refactored Select component render method by dividing large `render()` function into focused sub-methods (`_renderTrigger`, `_renderPlaceholder`, `_renderSelectedOptions`, `_renderControls`, `_renderContent`) for improved maintainability. ([#138](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/138) by [@junior](https://git.rarolabs.com.br/junior))
+
+## 2025-09-23 `1.25.0`
 
 #### 🎉 New features
 
@@ -19,7 +77,7 @@
 - Fixed missing `ifDefined` imports across multiple components that were accidentally removed during cleanup process, ensuring proper template directive functionality. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
 - Improved component type compatibility by standardizing ARIA property types to `string | null` matching LitElement base class requirements. ([#137](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/137) by [@junior](https://git.rarolabs.com.br/junior))
 
-## 2025-09-18 `1.25.0`
+## 2025-09-18 `1.24.1`
 
 #### 🎉 New features
 

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.24.2-rc.6",
+  "version": "1.27.0-rc.2",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -1361,6 +1361,12 @@
           "name": "for",
           "description": "The for attribute specifies which form element a label is bound to.",
           "type": "string"
+        },
+        {
+          "name": "hidden",
+          "description": "Specifies whether the label is hidden or not",
+          "type": "boolean",
+          "default": false
         }
       ]
     },
@@ -3348,7 +3354,7 @@
         },
         {
           "name": "name",
-          "description": "The name of the input for form submission.",
+          "description": "The name of the input for form submission.\n\n(Required)",
           "type": "string"
         },
         {
@@ -3459,7 +3465,7 @@
         },
         {
           "name": "name",
-          "description": "The name of the input for form submission.",
+          "description": "The name of the input for form submission.\n\n(Required)",
           "type": "string"
         },
         {
@@ -3624,7 +3630,7 @@
     },
     {
       "name": "rarui-select",
-      "description": "## Rarui Select\n---\nSelect component for choosing options from a dropdown menu with support for single and multiple selection.\n\nFeatures:\n- **Single Selection**: Choose one option from the list\n- **Multiple Selection**: Choose multiple options with checkboxes\n- **Custom Content**: Support for slot-based custom content and filtering\n- **Accessibility**: Full keyboard navigation with ESC key support\n- **Controlled Behavior**: Uses internal web components (Dropdown, Checkbox, Text, Box, Chip, Icon)\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.",
+      "description": "## Rarui Select\n---\nSelect component for choosing options from a dropdown menu with support for single and multiple selection.\n\nFeatures:\n- **Single Selection**: Choose one option from the list using rarui-select-option elements\n- **Multiple Selection**: Choose multiple options with checkboxes using rarui-select-option elements\n- **Slot-based Content**: Use rarui-select-option elements as children for flexible content\n- **Accessibility**: Full keyboard navigation with ESC key support\n- **Controlled Behavior**: Uses internal web components (Dropdown, Checkbox, Text, Box, Chip, Icon)\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.",
       "attributes": [
         {
           "name": "open",
@@ -3729,11 +3735,6 @@
             }
           ]
         },
-        {
-          "name": "options",
-          "description": "Options for the Select component. This should be an array of SelectOptionProps objects.\n\n(Required)",
-          "type": "array"
-        },
         {
           "name": "value",
           "description": "Default selected values for the Select component.\nThis should be an array of SelectOptionProps objects representing the selected options.",
@@ -3833,6 +3834,51 @@
         }
       ]
     },
+    {
+      "name": "rarui-select-select-opt-group",
+      "description": "## Rarui Select OptGroup\n---\nGroup component for organizing related options within rarui-select.\n\nFeatures:\n- **Visual Grouping**: Groups related options with an optional label\n- **Accessibility**: Proper ARIA group semantics\n- **Disabled State**: Can disable entire groups of options\n- **Flexible Content**: Contains rarui-select-option elements\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label for the option group. Displayed as a header for the group.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Whether this option group is disabled, preventing selection of all options within.",
+          "type": "boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "rarui-select-select-option",
+      "description": "## Rarui Select Option\n---\nIndividual option component for use within rarui-select.\n\nFeatures:\n- **Flexible Content**: Support for both label attribute and slot content\n- **Selection State**: Automatic handling of selected state\n- **Accessibility**: Full ARIA support and keyboard navigation\n- **Parent Integration**: Automatically detects parent select configuration\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The value of the option that will be submitted with forms.\n\n(Required)",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "The label text for the option. If not provided, will use slot content.",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "Whether this option is currently selected.",
+          "type": "boolean",
+          "default": false
+        },
+        {
+          "name": "disabled",
+          "description": "Whether this option is disabled and cannot be selected.",
+          "type": "boolean",
+          "default": false
+        }
+      ]
+    },
     {
       "name": "rarui-textarea",
       "description": "## Rarui Textarea\n---\nExpanded text area for long text entries. Allows you to enter large blocks of text, such as comments or detailed descriptions.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/textarea) for more details.",
@@ -7813,7 +7859,7 @@
         },
         {
           "name": "as",
-          "description": "Changes the rendered element.\n\n- a\n- abbr\n- address\n- area\n- article\n- aside\n- audio\n- b\n- base\n- bdi\n- bdo\n- blockquote\n- body\n- br\n- button\n- canvas\n- caption\n- cite\n- code\n- col\n- colgroup\n- data\n- datalist\n- dd\n- del\n- details\n- dfn\n- dialog\n- div\n- dl\n- dt\n- em\n- embed\n- fieldset\n- figcaption\n- figure\n- footer\n- form\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n- head\n- header\n- hgroup\n- hr\n- html\n- i\n- iframe\n- img\n- input\n- ins\n- kbd\n- label\n- legend\n- li\n- link\n- main\n- map\n- mark\n- menu\n- meta\n- meter\n- nav\n- noscript\n- object\n- ol\n- optgroup\n- option\n- output\n- p\n- picture\n- pre\n- progress\n- q\n- rarui-accordion\n- rarui-accordion-body\n- rarui-accordion-header\n- rarui-accordion-item\n- rarui-avatar\n- rarui-badge\n- rarui-banner\n- rarui-box\n- rarui-breadcrumb\n- rarui-breadcrumb-item\n- rarui-button\n- rarui-card\n- rarui-card-body\n- rarui-card-header\n- rarui-checkbox\n- rarui-chip\n- rarui-divider\n- rarui-dropdown\n- rarui-dropdown-item\n- rarui-icon\n- rarui-icon-button\n- rarui-input\n- rarui-label\n- rarui-link\n- rarui-modal\n- rarui-modal-footer\n- rarui-modal-header\n- rarui-pagination\n- rarui-progress\n- rarui-progress-circle\n- rarui-radio-button\n- rarui-select\n- rarui-side-navigation\n- rarui-side-navigation-item\n- rarui-sidebar\n- rarui-skeleton\n- rarui-status\n- rarui-stepper\n- rarui-stepper-step\n- rarui-tabs\n- rarui-text\n- rarui-textarea\n- rarui-theme-provider\n- rarui-title\n- rarui-toggle\n- rarui-tooltip\n- rp\n- rt\n- ruby\n- s\n- samp\n- script\n- section\n- select\n- slot\n- small\n- source\n- span\n- strong\n- style\n- sub\n- summary\n- sup\n- table\n- tbody\n- td\n- template\n- textarea\n- tfoot\n- th\n- thead\n- time\n- title\n- tr\n- track\n- u\n- ul\n- var\n- video\n- wbr\n\n@default div",
+          "description": "Changes the rendered element.\n\n- a\n- abbr\n- address\n- area\n- article\n- aside\n- audio\n- b\n- base\n- bdi\n- bdo\n- blockquote\n- body\n- br\n- button\n- canvas\n- caption\n- cite\n- code\n- col\n- colgroup\n- data\n- datalist\n- dd\n- del\n- details\n- dfn\n- dialog\n- div\n- dl\n- dt\n- em\n- embed\n- fieldset\n- figcaption\n- figure\n- footer\n- form\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6\n- head\n- header\n- hgroup\n- hr\n- html\n- i\n- iframe\n- img\n- input\n- ins\n- kbd\n- label\n- legend\n- li\n- link\n- main\n- map\n- mark\n- menu\n- meta\n- meter\n- nav\n- noscript\n- object\n- ol\n- optgroup\n- option\n- output\n- p\n- picture\n- pre\n- progress\n- q\n- rarui-accordion\n- rarui-accordion-body\n- rarui-accordion-header\n- rarui-accordion-item\n- rarui-avatar\n- rarui-badge\n- rarui-banner\n- rarui-box\n- rarui-breadcrumb\n- rarui-breadcrumb-item\n- rarui-button\n- rarui-card\n- rarui-card-body\n- rarui-card-header\n- rarui-checkbox\n- rarui-chip\n- rarui-divider\n- rarui-dropdown\n- rarui-dropdown-item\n- rarui-icon\n- rarui-icon-button\n- rarui-input\n- rarui-label\n- rarui-link\n- rarui-modal\n- rarui-modal-footer\n- rarui-modal-header\n- rarui-pagination\n- rarui-progress\n- rarui-progress-circle\n- rarui-radio-button\n- rarui-select\n- rarui-select-optgroup\n- rarui-select-option\n- rarui-side-navigation\n- rarui-side-navigation-item\n- rarui-sidebar\n- rarui-skeleton\n- rarui-status\n- rarui-stepper\n- rarui-stepper-step\n- rarui-tabs\n- rarui-text\n- rarui-textarea\n- rarui-theme-provider\n- rarui-title\n- rarui-toggle\n- rarui-tooltip\n- rp\n- rt\n- ruby\n- s\n- samp\n- script\n- section\n- select\n- slot\n- small\n- source\n- span\n- strong\n- style\n- sub\n- summary\n- sup\n- table\n- tbody\n- td\n- template\n- textarea\n- tfoot\n- th\n- thead\n- time\n- title\n- tr\n- track\n- u\n- ul\n- var\n- video\n- wbr\n\n@default div",
           "type": "string",
           "values": [
             {
@@ -8144,6 +8190,12 @@
             {
               "name": "rarui-select"
             },
+            {
+              "name": "rarui-select-optgroup"
+            },
+            {
+              "name": "rarui-select-option"
+            },
             {
               "name": "rarui-side-navigation"
             },

package/dist/index.d.ts

@@ -18276,6 +18276,8 @@ interface SideNavigationItemTypings {
 }
 type SideNavigationItemProps = SideNavigationItemTypings & Pick<SideNavigationVariants, "level">;
 
+type AriaInvalid = "false" | "true" | "grammar" | "spelling" | null;
+
 /**
  * Utility types for Web Components property handling in Rarui Design System
  *
@@ -18315,11 +18317,13 @@ declare global {
 type AvatarManifestProperties = Pick<AvatarProps, "size">;
 type AvatarProperties = WebComponentProperties<AvatarManifestProperties>;
 
-declare class RaruiAvatar extends LitElement {
-    size?: AvatarProperties["size"];
+declare const RaruiAvatar_base: (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiAvatar extends RaruiAvatar_base {
+    size?: AvatarProperties["size"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
     private handleSlotChange;
@@ -18342,13 +18346,15 @@ declare global {
 type BadgeManifestProperties = BadgeProps;
 type BadgeProperties = WebComponentProperties<BadgeManifestProperties>;
 
-declare class RaruiBagde extends LitElement {
-    variant?: BadgeProperties["variant"];
-    size?: BadgeProperties["size"];
-    appearance?: BadgeProperties["appearance"];
+declare const RaruiBagde_base: (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiBagde extends RaruiBagde_base {
+    variant?: BadgeProperties["variant"];
+    size?: BadgeProperties["size"];
+    appearance?: BadgeProperties["appearance"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -18368,14 +18374,22 @@ declare global {
 type DividerManifestProperties = DividerProps;
 type DividerProperties = WebComponentProperties<DividerManifestProperties>;
 
-declare class RaruiDivider extends LitElement {
+declare const RaruiDivider_base: (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiDivider extends RaruiDivider_base {
     sprinkleAttrs: Record<string, string>;
     direction?: DividerProperties["direction"];
     type?: DividerProperties["type"];
     thickness?: DividerProperties["thickness"];
     color?: DividerProperties["color"];
     size?: DividerProperties["size"];
+    private get _isPercentageSize();
     static styles: CSSResult;
+    updated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    private _updateHostWidth;
     render(): TemplateResult<1>;
 }
 
@@ -18407,13 +18421,18 @@ type IconManifestProperties = IconProps & {
 };
 type IconProperties = WebComponentProperties<IconManifestProperties>;
 
-declare class RaruiIcon extends LitElement {
-    sprinkleAttrs: Record<string, string>;
-    name: IconProperties["name"];
-    size: Sizes | string;
+declare const RaruiIcon_base: (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiIcon extends RaruiIcon_base {
+    sprinkleAttrs: Record<string, string>;
+    name: IconProperties["name"];
+    size: Sizes | string;
     static styles: CSSResult;
     private getSvgWithSize;
     render(): TemplateResult<1> | null;
@@ -18436,6 +18455,11 @@ type LabelManifestProperties = {
      * The for attribute specifies which form element a label is bound to.
      */
     for?: string;
+    /**
+     * Specifies whether the label is hidden or not
+     * @default false
+     */
+    hidden?: boolean;
 };
 type LabelProperties = WebComponentProperties<LabelManifestProperties>;
 
@@ -18521,16 +18545,21 @@ type TextManifestProperties = TextProps & {
 };
 type TextProperties = WebComponentProperties<TextManifestProperties>;
 
-declare class RaruiText extends LitElement {
+declare const RaruiText_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiText extends RaruiText_base {
     sprinkleAttrs: Record<string, string>;
     as: TextProperties["as"];
     "line-clamp"?: TextProperties["line-clamp"];
     "color"?: TextProperties["color"];
     "font-weight"?: TextProperties["font-weight"];
     "text-align"?: TextProperties["text-align"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     static styles: CSSResult;
     render(): TemplateResult;
 }
@@ -18556,14 +18585,19 @@ type TitleManifestProperties = TitleProps & {
 };
 type TitleProperties = WebComponentProperties<TitleManifestProperties>;
 
-declare class RaruiTitle extends LitElement {
+declare const RaruiTitle_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiTitle extends RaruiTitle_base {
     sprinkleAttrs: Record<string, string>;
     as: TitleProperties["as"];
     "font-weight"?: TitleProperties["font-weight"];
     "text-align"?: TitleProperties["text-align"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     static styles: CSSResult;
     render(): TemplateResult;
 }
@@ -18766,7 +18800,17 @@ type ButtonManifestProperties = ButtonProps & {
 };
 type ButtonProperties = WebComponentProperties<ButtonManifestProperties>;
 
-declare class RaruiButton extends LitElement {
+declare const RaruiButton_base: (new (...args: any[]) => {
+    getPassThroughAttributes(allowedPrefixes?: string[], excludedAttributes?: string[]): Record<string, string>;
+    isManagedAttribute(attrName: string, additionalManagedAttrs?: string[]): boolean;
+    getDataAttributes(excludedAttributes?: string[]): Record<string, string>;
+    getDataAndAriaAttributes(excludedAttributes?: string[]): Record<string, string>;
+}) & (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiButton extends RaruiButton_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -18782,9 +18826,6 @@ declare class RaruiButton extends LitElement {
     name: ButtonProperties["name"];
     value: ButtonProperties["value"];
     form: ButtonProperties["form"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     ariaPressed: "true" | "false" | "mixed" | null;
     ariaExpanded: "true" | "false" | null;
     ariaHasPopup: "menu" | "dialog" | "listbox" | "tree" | "grid" | "true" | "false" | null;
@@ -18860,7 +18901,12 @@ type CheckboxManifestProperties = Pick<CheckboxProps, "error" | "size" | "indete
 };
 type CheckboxProperties = WebComponentProperties<CheckboxManifestProperties>;
 
-declare class RaruiCheckbox extends LitElement {
+declare const RaruiCheckbox_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiCheckbox extends RaruiCheckbox_base {
     label?: CheckboxProperties["label"];
     size: CheckboxProperties["size"];
     error: CheckboxProperties["error"];
@@ -18872,9 +18918,6 @@ declare class RaruiCheckbox extends LitElement {
     name?: CheckboxProperties["name"];
     value?: CheckboxProperties["value"];
     form?: CheckboxProperties["form"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -18939,7 +18982,15 @@ type ChipManifestProperties = ChipProps & {
 };
 type ChipProperties = WebComponentProperties<ChipManifestProperties>;
 
-declare class RaruiChip extends LitElement {
+declare const RaruiChip_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiChip extends RaruiChip_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -18959,9 +19010,6 @@ declare class RaruiChip extends LitElement {
     name?: ChipProperties["name"];
     value?: ChipProperties["value"];
     form?: ChipProperties["form"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     ariaPressed: "true" | "false" | "mixed" | null;
     static styles: CSSResult;
     private handleClick;
@@ -19018,7 +19066,15 @@ type DropdownManifestProperties = DropdownProps & {
 };
 type DropdownProperties = WebComponentProperties<DropdownManifestProperties, "onVisibility" | "portalId">;
 
-declare class RaruiDropdown extends LitElement {
+declare const RaruiDropdown_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiDropdown extends RaruiDropdown_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -19039,9 +19095,6 @@ declare class RaruiDropdown extends LitElement {
     get visible(): boolean | undefined;
     private _visible?;
     private _hasVisibleAttribute;
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     reference: HTMLElement;
     floating: HTMLElement;
     static styles: CSSResult;
@@ -19247,7 +19300,12 @@ type InputManifestProperties = InputProps & {
 };
 type InputProperties = WebComponentProperties<InputManifestProperties>;
 
-declare class RaruiInput extends LitElement {
+declare const RaruiInput_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiInput extends RaruiInput_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -19271,10 +19329,7 @@ declare class RaruiInput extends LitElement {
     minlength: InputProperties["minlength"];
     maxlength: InputProperties["maxlength"];
     pattern: InputProperties["pattern"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
-    ariaInvalid: "true" | "false" | null;
+    ariaInvalid: AriaInvalid;
     private _internals;
     static formAssociated: boolean;
     constructor();
@@ -19370,6 +19425,18 @@ declare global {
     }
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-select-option": any;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-select-optgroup": any;
+    }
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-textarea": RaruiTextarea;
@@ -19447,7 +19514,7 @@ declare class RaruiTextarea extends LitElement {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
-    ariaInvalid: "true" | "false" | null;
+    ariaInvalid: AriaInvalid;
     static styles: CSSResult;
     render(): TemplateResult<1>;
     connectedCallback(): void;
@@ -19518,7 +19585,7 @@ declare class RaruiToggle extends LitElement {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
-    ariaInvalid: "true" | "false" | null;
+    ariaInvalid: AriaInvalid;
     private _internals;
     static formAssociated: boolean;
     constructor();
@@ -19545,7 +19612,15 @@ declare global {
 type SidebarManifestProperties = SidebarProps;
 type SidebarProperties = WebComponentProperties<SidebarManifestProperties, "onRemove">;
 
-declare class RaruiSidebar extends LitElement {
+declare const RaruiSidebar_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiSidebar extends RaruiSidebar_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -19558,9 +19633,6 @@ declare class RaruiSidebar extends LitElement {
     maxWidth: SidebarProperties["max-width"];
     padding: SidebarProperties["padding"];
     portalId: SidebarProperties["portal-id"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     sidebarElement: HTMLElement;
     overlayElement: HTMLElement;
     static styles: CSSResult;
@@ -19735,7 +19807,17 @@ type LinkManifestProperties = LinkProps & {
 };
 type LinkProperties = WebComponentProperties<LinkManifestProperties>;
 
-declare class RaruiLink extends LitElement {
+declare const RaruiLink_base: (new (...args: any[]) => {
+    getPassThroughAttributes(allowedPrefixes?: string[], excludedAttributes?: string[]): Record<string, string>;
+    isManagedAttribute(attrName: string, additionalManagedAttrs?: string[]): boolean;
+    getDataAttributes(excludedAttributes?: string[]): Record<string, string>;
+    getDataAndAriaAttributes(excludedAttributes?: string[]): Record<string, string>;
+}) & (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiLink extends RaruiLink_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -19753,9 +19835,6 @@ declare class RaruiLink extends LitElement {
     name?: LinkProperties["name"];
     value?: LinkProperties["value"];
     form?: LinkProperties["form"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     static styles: CSSResult;
     private _onClick;
     render(): TemplateResult<1>;
@@ -19915,7 +19994,11 @@ declare global {
 type AccordionManifestProperties = AccordionProps;
 type AccordionProperties = WebComponentProperties<AccordionManifestProperties>;
 
-declare class RaruiAccordion extends LitElement {
+declare const RaruiAccordion_base: (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiAccordion extends RaruiAccordion_base {
     sprinkleAttrs: Record<string, string>;
     selectedDefault?: AccordionProperties["selected-default"];
     disabled?: AccordionProperties["disabled"];
@@ -20087,13 +20170,18 @@ declare global {
 type CardManifestProperties = CardProps;
 type CardProperties = WebComponentProperties<CardManifestProperties>;
 
-declare class RaruiCard extends LitElement {
-    sprinkleAttrs: Record<string, string>;
-    padding?: CardProperties["padding"];
-    "background-color": CardProperties["background-color"];
+declare const RaruiCard_base: (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiCard extends RaruiCard_base {
+    sprinkleAttrs: Record<string, string>;
+    padding?: CardProperties["padding"];
+    "background-color": CardProperties["background-color"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -20113,7 +20201,15 @@ declare global {
 type ModalManifestProperties = ModalProps;
 type ModalProperties = WebComponentProperties<ModalManifestProperties, "onDismiss">;
 
-declare class RaruiModal extends LitElement {
+declare const RaruiModal_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiModal extends RaruiModal_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -20125,9 +20221,6 @@ declare class RaruiModal extends LitElement {
     portalId: ModalProperties["portal-id"];
     open: ModalProperties["open"];
     maxWidth: ModalProperties["max-width"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     dialog: HTMLElement;
     static styles: CSSResult;
     cleanupAutoUpdate?: () => void;