@rarui/components 1.24.0 → 1.24.2-rc.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-09-18 `1.25.0`
+
+#### 🎉 New features
+
+- Enhanced form integration across all input components with native HTML form association using ElementInternals API for seamless form submission, validation, and reset capabilities. ([#135](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/135) by [@junior](https://git.rarolabs.com.br/junior))
+- Standardized custom event naming convention with `rarui-*` pattern across all components (Button, Checkbox, Input, Select, Textarea, Chip) for consistent event handling and better namespace organization. ([#135](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/135) by [@junior](https://git.rarolabs.com.br/junior))
+- Implemented comprehensive label integration system with automatic focus management through `rarui-label-click` communication pattern for seamless label-to-control association. ([#135](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/135) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced Button component with intelligent form interaction (automatic submit/reset based on type) and standardized custom event `rarui-button-click` for consistent interaction handling. ([#135](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/135) by [@junior](https://git.rarolabs.com.br/junior))
+- Enhanced Label component with proper HTML semantics (standardized `for` attribute replacing `htmlFor`) and automatic form control association through custom event system. ([#135](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/135) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 🛠 Breaking changes
+
+- Changed Label component `htmlFor` property to `for` for standard HTML label attribute compliance. ([#135](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/135) by [@junior](https://git.rarolabs.com.br/junior))
+- Updated custom event names across all components: `input-change` → `rarui-input-change`, `select-change` → `rarui-select-change`, `textarea-change` → `rarui-textarea-change`, `change` → `rarui-checkbox-change`, `chip-click` → `rarui-chip-click`, `chip-close` → `rarui-chip-close`. ([#135](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/135) by [@junior](https://git.rarolabs.com.br/junior))
+
+#### 💡 Others
+
+- Enhanced Chip component type definitions with comprehensive event documentation for better developer experience. ([#135](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/135) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-09-05 `1.24.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.23.0",
+  "version": "1.24.2-rc.1",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -1355,17 +1355,12 @@
     },
     {
       "name": "rarui-label",
+      "description": "## Rarui Label\n---\nThe label component allows us to name elements within a form.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/label) for more details.",
       "attributes": [
         {
-          "name": "html-for",
+          "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
         }
       ]
     },
@@ -2603,28 +2598,6 @@
       "name": "rarui-checkbox",
       "description": "## Rarui Checkbox\n---\nThe Checkbox allows users to select one or more items from a set and can be used to enable or disable an option.\n\nFeatures hybrid behavior:\n- **Controlled mode**: When `checked` prop is provided, works like React controlled component\n- **Native mode**: When `checked` prop is not provided, works like native HTML checkbox\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.",
       "attributes": [
-        {
-          "name": "label",
-          "description": "The label of the checkbox.",
-          "type": "string"
-        },
-        {
-          "name": "id",
-          "description": "The id of the checkbox.\n\n(Required)",
-          "type": "string"
-        },
-        {
-          "name": "checked",
-          "description": "Controls the checked state of the checkbox.\n\n**Hybrid Behavior:**\n- When provided: Checkbox works in controlled mode - external prop controls the state\n- When not provided: Checkbox works in native mode - maintains its own internal state\n\n@default undefined (native mode)",
-          "type": "boolean",
-          "default": "undefined (native mode)"
-        },
-        {
-          "name": "readonly",
-          "description": "Makes the checkbox read-only, preventing user interaction.\nWhen true, the checkbox displays its current state but cannot be changed by clicking.",
-          "type": "boolean",
-          "default": false
-        },
         {
           "name": "error",
           "description": "Specifies whether the checkbox is in error state",
@@ -2648,6 +2621,18 @@
           "description": "Specifies whether the checkbox is indeterminate state",
           "type": "boolean"
         },
+        {
+          "name": "checked",
+          "description": "Controls the checked state of the checkbox.\n\n**Hybrid Behavior:**\n- When provided: Checkbox works in controlled mode - external prop controls the state\n- When not provided: Checkbox works in native mode - maintains its own internal state\n\n@default undefined (native mode)",
+          "type": "boolean",
+          "default": "undefined (native mode)"
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the checkbox read-only, preventing user interaction.\nWhen true, the checkbox displays its current state but cannot be changed by clicking.",
+          "type": "boolean",
+          "default": false
+        },
         {
           "name": "name",
           "description": "The name of the checkbox for form submission.",
@@ -2875,12 +2860,9 @@
           ]
         },
         {
-          "name": "width",
-          "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
+          "name": "max-width",
+          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
           "values": [
-            {
-              "name": "auto"
-            },
             {
               "name": "fit-content"
             },
@@ -2894,7 +2876,7 @@
               "name": "min-content"
             },
             {
-              "name": "min-intrinsic"
+              "name": "none"
             },
             {
               "name": "stretch"
@@ -2902,9 +2884,12 @@
           ]
         },
         {
-          "name": "max-width",
-          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "name": "width",
+          "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
           "values": [
+            {
+              "name": "auto"
+            },
             {
               "name": "fit-content"
             },
@@ -2918,7 +2903,7 @@
               "name": "min-content"
             },
             {
-              "name": "none"
+              "name": "min-intrinsic"
             },
             {
               "name": "stretch"
@@ -3291,7 +3276,12 @@
         },
         {
           "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"
+        },
+        {
+          "name": "id",
+          "description": "The id of the input for form submission.\n\n(Required)",
           "type": "string"
         },
         {
@@ -3431,6 +3421,11 @@
           "description": "Places a divider between the input and the leading components\n\n@default true",
           "type": "boolean",
           "default": true
+        },
+        {
+          "name": "id",
+          "description": "The id of the input for form submission.\n\n(Required)",
+          "type": "string"
         }
       ]
     },
@@ -3537,6 +3532,11 @@
           "description": "Places a divider between the input and the leading components\n\n@default true",
           "type": "boolean",
           "default": true
+        },
+        {
+          "name": "id",
+          "description": "The id of the input for form submission.\n\n(Required)",
+          "type": "string"
         }
       ]
     },
@@ -3622,11 +3622,6 @@
           "type": "boolean",
           "default": false
         },
-        {
-          "name": "options",
-          "description": "Options for the Select component. This should be an array of SelectOptionProps objects.\n\n(Required)",
-          "type": "array"
-        },
         {
           "name": "multiple",
           "description": "Enables multiple selection mode.",
@@ -3719,15 +3714,21 @@
             }
           ]
         },
+        {
+          "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.",
           "values": []
         },
         {
-          "name": "default-value",
-          "description": "Specifies the default selected value(s) for the select box.\nThis can be a selectOption for single selection or an array of selectOption for multiple selections.",
-          "values": []
+          "name": "enabled-flip",
+          "description": "Determines whether the select box should enable flipping the options' dropdown when there is not enough space to display it in its default direction.\nThis can help ensure the dropdown is always visible on the screen.\n\n@default true",
+          "type": "boolean",
+          "default": true
         },
         {
           "name": "placeholder",
@@ -3735,10 +3736,9 @@
           "type": "string"
         },
         {
-          "name": "enabled-flip",
-          "description": "Determines whether the select box should enable flipping the options' dropdown when there is not enough space to display it in its default direction.\nThis can help ensure the dropdown is always visible on the screen.\n\n@default true",
-          "type": "boolean",
-          "default": true
+          "name": "default-value",
+          "description": "Specifies the default selected value(s) for the select box.\nThis can be a selectOption for single selection or an array of selectOption for multiple selections.",
+          "values": []
         },
         {
           "name": "position",
@@ -7798,7 +7798,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-box\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-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": [
             {
@@ -8033,9 +8033,144 @@
             {
               "name": "q"
             },
+            {
+              "name": "rarui-accordion"
+            },
+            {
+              "name": "rarui-accordion-body"
+            },
+            {
+              "name": "rarui-accordion-header"
+            },
+            {
+              "name": "rarui-accordion-item"
+            },
+            {
+              "name": "rarui-avatar"
+            },
+            {
+              "name": "rarui-badge"
+            },
+            {
+              "name": "rarui-banner"
+            },
             {
               "name": "rarui-box"
             },
+            {
+              "name": "rarui-breadcrumb"
+            },
+            {
+              "name": "rarui-breadcrumb-item"
+            },
+            {
+              "name": "rarui-button"
+            },
+            {
+              "name": "rarui-card"
+            },
+            {
+              "name": "rarui-card-body"
+            },
+            {
+              "name": "rarui-card-header"
+            },
+            {
+              "name": "rarui-checkbox"
+            },
+            {
+              "name": "rarui-chip"
+            },
+            {
+              "name": "rarui-divider"
+            },
+            {
+              "name": "rarui-dropdown"
+            },
+            {
+              "name": "rarui-dropdown-item"
+            },
+            {
+              "name": "rarui-icon"
+            },
+            {
+              "name": "rarui-icon-button"
+            },
+            {
+              "name": "rarui-input"
+            },
+            {
+              "name": "rarui-label"
+            },
+            {
+              "name": "rarui-link"
+            },
+            {
+              "name": "rarui-modal"
+            },
+            {
+              "name": "rarui-modal-footer"
+            },
+            {
+              "name": "rarui-modal-header"
+            },
+            {
+              "name": "rarui-pagination"
+            },
+            {
+              "name": "rarui-progress"
+            },
+            {
+              "name": "rarui-progress-circle"
+            },
+            {
+              "name": "rarui-radio-button"
+            },
+            {
+              "name": "rarui-select"
+            },
+            {
+              "name": "rarui-side-navigation"
+            },
+            {
+              "name": "rarui-side-navigation-item"
+            },
+            {
+              "name": "rarui-sidebar"
+            },
+            {
+              "name": "rarui-skeleton"
+            },
+            {
+              "name": "rarui-status"
+            },
+            {
+              "name": "rarui-stepper"
+            },
+            {
+              "name": "rarui-stepper-step"
+            },
+            {
+              "name": "rarui-tabs"
+            },
+            {
+              "name": "rarui-text"
+            },
+            {
+              "name": "rarui-textarea"
+            },
+            {
+              "name": "rarui-theme-provider"
+            },
+            {
+              "name": "rarui-title"
+            },
+            {
+              "name": "rarui-toggle"
+            },
+            {
+              "name": "rarui-tooltip"
+            },
             {
               "name": "rp"
             },
@@ -8483,13 +8618,13 @@
           "type": "number",
           "values": [
             {
-              "name": 0
+              "name": "0"
             },
             {
-              "name": 1
+              "name": "1"
             },
             {
-              "name": 2
+              "name": "2"
             }
           ]
         },
@@ -8536,13 +8671,13 @@
           "type": "number",
           "values": [
             {
-              "name": 0
+              "name": "0"
             },
             {
-              "name": 1
+              "name": "1"
             },
             {
-              "name": 2
+              "name": "2"
             }
           ]
         },

package/dist/index.d.ts

@@ -16928,29 +16928,6 @@ declare const styles$6: {
 
 type InputVariants = NonNullable<RecipeVariants<typeof styles$6.container> & RecipeVariants<typeof styles$6.input>>;
 
-declare const styles$5: {
-    label: RuntimeFn<{
-        /**
-         * Specifies whether the label is hidden or not
-         * @default false
-         */
-        hidden: {
-            true: {
-                border: "0";
-                clip: "rect(0 0 0 0)";
-                height: "1px";
-                margin: "-1px";
-                overflow: "hidden";
-                padding: "0";
-                position: "absolute";
-                width: "1px";
-            };
-        };
-    }>;
-};
-
-type LabelVariants = RecipeVariants<typeof styles$5.label>;
-
 declare const styles$4: {
     link: RuntimeFn<{
         /**
@@ -17894,14 +17871,6 @@ interface TextProps extends TextSprinkle {
     lineClamp?: number;
 }
 
-interface LabelTyping {
-    /**
-     * The for attribute specifies which form element a label is bound to.
-     */
-    htmlFor?: string;
-}
-type LabelProps = LabelTyping & LabelVariants;
-
 interface TooltipTyping {
     /**
      * Conditional for displaying the popover arrow.
@@ -18453,14 +18422,20 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/label) for more details.
  */
-type LabelManifestProperties = LabelProps;
+type LabelManifestProperties = {
+    /**
+     * The for attribute specifies which form element a label is bound to.
+     */
+    for?: string;
+};
 type LabelProperties = WebComponentProperties<LabelManifestProperties>;
 
 declare class RaruiLabel extends LitElement {
-    htmlFor: LabelProperties["html-for"];
+    for: LabelProperties["for"];
     hidden: boolean;
     static styles: CSSResult;
     render(): TemplateResult<1>;
+    private _handleClick;
 }
 
 declare global {
@@ -18770,6 +18745,7 @@ declare class RaruiButton extends LitElement {
     form: ButtonProperties["form"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
+    private _handleClick;
 }
 
 declare global {
@@ -18788,7 +18764,7 @@ declare global {
  *
  * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.
  */
-type CheckboxManifestProperties = CheckboxProps & {
+type CheckboxManifestProperties = Pick<CheckboxProps, 'error' | 'size' | 'indeterminate'> & {
     /**
      * Controls the checked state of the checkbox.
      *
@@ -18839,13 +18815,22 @@ declare class RaruiCheckbox extends LitElement {
     value?: CheckboxProperties["value"];
     form?: CheckboxProperties["form"];
     private _hasCheckedAttribute;
+    private _internals;
     private input;
+    static formAssociated: boolean;
+    constructor();
     static styles: CSSResult;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     updated(changedProperties: Map<string, any>): void;
     render(): TemplateResult<1>;
     private _onChange;
+    private _updateFormValue;
+    focus(): void;
+    blur(): void;
+    private _handleLabelClick;
+    formResetCallback(): void;
     private getAriaCheckedValue;
 }
 
@@ -19122,7 +19107,11 @@ type InputManifestProperties = InputProps & {
     /**
      * The name of the input for form submission.
      */
-    name?: string;
+    name: string;
+    /**
+     * The id of the input for form submission.
+     */
+    id: string;
     /**
      * Associates the input with a form element by ID.
      */
@@ -19158,7 +19147,9 @@ declare class RaruiInput extends LitElement {
     border: InputProperties["border"];
     divider: InputProperties["divider"];
     disabled: InputProperties["disabled"];
-    value: string;
+    private _value;
+    get value(): string;
+    set value(val: string);
     placeholder?: string;
     type: InputProperties["type"];
     name: InputProperties["name"];
@@ -19168,10 +19159,19 @@ declare class RaruiInput extends LitElement {
     minlength: InputProperties["minlength"];
     maxlength: InputProperties["maxlength"];
     pattern: InputProperties["pattern"];
+    private _internals;
+    static formAssociated: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     static styles: CSSResult;
     render(): TemplateResult<1>;
     private _focusInput;
     private _onInput;
+    focus(): void;
+    blur(): void;
+    private _handleLabelClick;
+    formResetCallback(): void;
 }
 
 declare global {
@@ -19230,9 +19230,16 @@ declare class RaruiRadioButton extends LitElement {
     form: RadioButtonProperties["form"];
     required: RadioButtonProperties["required"];
     readonly: RadioButtonProperties["readonly"];
+    private _internals;
+    static formAssociated: boolean;
+    constructor();
     static styles: CSSResult;
     render(): TemplateResult<1>;
     private _onChange;
+    private _uncheckOtherRadioButtons;
+    focus(): void;
+    blur(): void;
+    formResetCallback(): void;
 }
 
 declare global {
@@ -19294,7 +19301,12 @@ type TextareaProperties = WebComponentProperties<TextareaManifestProperties>;
 
 declare class RaruiTextarea extends LitElement {
     disabled: boolean;
-    value?: string;
+    private _value;
+    get value(): string;
+    set value(val: string);
+    private _internals;
+    static formAssociated: boolean;
+    constructor();
     appearance?: TextareaProperties["appearance"];
     lines?: TextareaProperties["lines"];
     name: TextareaProperties["name"];
@@ -19306,6 +19318,13 @@ declare class RaruiTextarea extends LitElement {
     maxlength: TextareaProperties["maxlength"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onInput;
+    focus(): void;
+    blur(): void;
+    private _handleLabelClick;
+    formResetCallback(): void;
 }
 
 declare global {
@@ -19358,8 +19377,15 @@ declare class RaruiToggle extends LitElement {
     value: ToggleProperties["value"];
     form: ToggleProperties["form"];
     required: ToggleProperties["required"];
+    private _internals;
+    static formAssociated: boolean;
+    constructor();
     static styles: CSSResult;
     render(): TemplateResult<1>;
+    private _onChange;
+    focus(): void;
+    blur(): void;
+    formResetCallback(): void;
 }
 
 declare global {
@@ -19674,6 +19700,25 @@ declare class RaruiSideNavigationItem extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-theme-provider": RaruiThemeProvider;
+    }
+}
+type Theme = "dark" | "base";
+
+declare class RaruiThemeProvider extends LitElement {
+    theme: Theme;
+    private previousTheme?;
+    protected createRenderRoot(): this;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private applyTheme;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-accordion": RaruiAccordion;
@@ -19912,22 +19957,3 @@ declare class RaruiModalHeader extends LitElement {
     private handleClose;
     render(): TemplateResult<1>;
 }
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "rarui-theme-provider": RaruiThemeProvider;
-    }
-}
-type Theme = "dark" | "base";
-
-declare class RaruiThemeProvider extends LitElement {
-    theme: Theme;
-    private previousTheme?;
-    protected createRenderRoot(): this;
-    static styles: CSSResult;
-    connectedCallback(): void;
-    updated(changedProperties: Map<string, unknown>): void;
-    disconnectedCallback(): void;
-    private applyTheme;
-    render(): TemplateResult<1>;
-}