@rarui/components 1.24.1 → 1.24.2-rc.1

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.24.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

@@ -18764,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.
      *
@@ -18869,19 +18869,6 @@ type ChipManifestProperties = ChipProps & {
      * Associates the chip with a form element by ID.
      */
     form?: string;
-    /**
-     * @events
-     * rarui-chip-click: Fired when the chip is clicked (only when not closeable)
-     * rarui-chip-close: Fired when the close button is clicked (only when closeable is true)
-     */
-    _events?: {
-        "rarui-chip-click": {
-            detail: MouseEvent;
-        };
-        "rarui-chip-close": {
-            detail: MouseEvent | KeyboardEvent;
-        };
-    };
 };
 type ChipProperties = WebComponentProperties<ChipManifestProperties>;
 
@@ -19160,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"];
@@ -19241,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 {
@@ -19305,7 +19301,9 @@ 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();
@@ -19379,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 {
@@ -19695,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;
@@ -19933,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>;
-}