@rarui/components 1.22.0 → 1.24.0

package/dist/index.d.ts

@@ -17658,7 +17658,6 @@ declare const sidebarStyles: {
         };
         /**
          * Determines if the sidebar is shown or not.
-         * @default true
          */
         open: {
             true: {
@@ -18001,6 +18000,16 @@ interface CheckboxTyping {
      * The id of the checkbox.
      */
     id: string;
+    /**
+     * Whether the checkbox is checked.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is readonly.
+     * @default false
+     */
+    readonly?: boolean;
 }
 type CheckboxProps = CheckboxTyping & CheckboxVariants;
 
@@ -18341,6 +18350,9 @@ declare class RaruiAvatar extends LitElement {
     size?: AvatarProperties["size"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
+    private handleSlotChange;
+    private handleImageError;
+    private handleImageLoad;
 }
 
 declare global {
@@ -18467,12 +18479,13 @@ type StepperStepManifestProperties = StepperStepProps;
 type StepperStepProperties = WebComponentProperties<StepperStepManifestProperties>;
 
 declare class RaruiStepperStep extends LitElement {
-    description: StepperStepProperties["description"];
-    active: StepperStepProperties["active"];
-    done: StepperStepProperties["done"];
+    description?: StepperStepProperties["description"];
+    active?: StepperStepProperties["active"];
+    done?: StepperStepProperties["done"];
     private direction;
     static styles: CSSResult;
     connectedCallback(): void;
+    private getStepAriaLabel;
     render(): TemplateResult<1>;
 }
 
@@ -18512,17 +18525,24 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.
  */
-type TextManifestProperties = TextProps;
-type TextProperties = WebComponentProperties<TextManifestProperties, "as">;
+type TextManifestProperties = TextProps & {
+    /**
+     * Changes the rendered element for semantic HTML.
+     * @default p
+     */
+    as?: "p" | "span" | "div" | "small" | "strong" | "em";
+};
+type TextProperties = WebComponentProperties<TextManifestProperties>;
 
 declare class RaruiText extends LitElement {
     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"];
     static styles: CSSResult;
-    render(): TemplateResult<1>;
+    render(): TemplateResult;
 }
 
 declare global {
@@ -18537,16 +18557,22 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.
  */
-type TitleManifestProperties = TitleProps;
+type TitleManifestProperties = TitleProps & {
+    /**
+     * Changes the rendered heading element for semantic hierarchy.
+     * @default h1
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
 type TitleProperties = WebComponentProperties<TitleManifestProperties>;
 
 declare class RaruiTitle extends LitElement {
     sprinkleAttrs: Record<string, string>;
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    as: TitleProperties["as"];
     "font-weight"?: TitleProperties["font-weight"];
     "text-align"?: TitleProperties["text-align"];
     static styles: CSSResult;
-    render(): TemplateResult<1>;
+    render(): TemplateResult;
 }
 
 declare type AlignedPlacement = `${Side}-${Alignment}`;
@@ -18717,6 +18743,18 @@ type ButtonManifestProperties = ButtonProps & {
      * @default button
      */
     type?: "button" | "submit" | "reset";
+    /**
+     * The name of the button for form submission.
+     */
+    name?: string;
+    /**
+     * The value of the button for form submission.
+     */
+    value?: string;
+    /**
+     * Associates the button with a form element by ID.
+     */
+    form?: string;
 };
 type ButtonProperties = WebComponentProperties<ButtonManifestProperties>;
 
@@ -18727,6 +18765,9 @@ declare class RaruiButton extends LitElement {
     appearance: ButtonProperties["appearance"];
     disabled: ButtonProperties["disabled"];
     full: ButtonProperties["full"];
+    name: ButtonProperties["name"];
+    value: ButtonProperties["value"];
+    form: ButtonProperties["form"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -18741,9 +18782,48 @@ declare global {
  * ---
  * The Checkbox allows users to select one or more items from a set and can be used to enable or disable an option.
  *
- See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.
+ * Features hybrid behavior:
+ * - **Controlled mode**: When `checked` prop is provided, works like React controlled component
+ * - **Native mode**: When `checked` prop is not provided, works like native HTML checkbox
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.
  */
-type CheckboxManifestProperties = CheckboxProps;
+type CheckboxManifestProperties = CheckboxProps & {
+    /**
+     * Controls the checked state of the checkbox.
+     *
+     * **Hybrid Behavior:**
+     * - When provided: Checkbox works in controlled mode - external prop controls the state
+     * - When not provided: Checkbox works in native mode - maintains its own internal state
+     *
+     * @default undefined (native mode)
+     */
+    checked?: boolean;
+    /**
+     * Makes the checkbox read-only, preventing user interaction.
+     * When true, the checkbox displays its current state but cannot be changed by clicking.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * The name of the checkbox for form submission.
+     */
+    name?: string;
+    /**
+     * The value of the checkbox when checked for form submission.
+     */
+    value?: string;
+    /**
+     * Associates the checkbox with a form element by ID.
+     */
+    form?: string;
+    /**
+     * Indicates whether the checkbox is required for form validation.
+     * @default false
+     */
+    required?: boolean;
+};
 type CheckboxProperties = WebComponentProperties<CheckboxManifestProperties>;
 
 declare class RaruiCheckbox extends LitElement {
@@ -18752,9 +18832,21 @@ declare class RaruiCheckbox extends LitElement {
     error: CheckboxProperties["error"];
     indeterminate: CheckboxProperties["indeterminate"];
     disabled: boolean;
+    checked: boolean;
+    readonly: boolean;
+    required: boolean;
+    name?: CheckboxProperties["name"];
+    value?: CheckboxProperties["value"];
+    form?: CheckboxProperties["form"];
+    private _hasCheckedAttribute;
+    private input;
     static styles: CSSResult;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    updated(changedProperties: Map<string, any>): void;
     render(): TemplateResult<1>;
     private _onChange;
+    private getAriaCheckedValue;
 }
 
 declare global {
@@ -18775,6 +18867,23 @@ type ChipManifestProperties = ChipProps & {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Defines the native button type.
+     * @default button
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * The name of the chip for form submission.
+     */
+    name?: string;
+    /**
+     * The value of the chip for form submission.
+     */
+    value?: string;
+    /**
+     * Associates the chip with a form element by ID.
+     */
+    form?: string;
 };
 type ChipProperties = WebComponentProperties<ChipManifestProperties>;
 
@@ -18788,9 +18897,14 @@ declare class RaruiChip extends LitElement {
     textOverflow?: ChipProperties["text-overflow"];
     selected?: ChipProperties["selected"];
     disabled?: ChipProperties["disabled"];
+    type: ChipProperties["type"];
+    name?: ChipProperties["name"];
+    value?: ChipProperties["value"];
+    form?: ChipProperties["form"];
     static styles: CSSResult;
     private handleClick;
     private handleCloseClick;
+    private handleCloseKeydown;
     render(): TemplateResult<1>;
 }
 
@@ -18804,7 +18918,11 @@ declare global {
  * ---
  * An suspended menu displays a list of options on a temporary surface.
  *
- See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.
+ * Features hybrid behavior:
+ * - **Controlled mode**: When `visible` prop is provided, works like React controlled component
+ * - **Native mode**: When `visible` prop is not provided, manages its own internal state
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.
  */
 type DropdownManifestProperties = DropdownProps & {
     /**
@@ -18825,6 +18943,16 @@ type DropdownManifestProperties = DropdownProps & {
      * @default fixed
      */
     strategy?: "fixed" | "absolute";
+    /**
+     * Controls the visibility state of the dropdown.
+     *
+     * **Hybrid Behavior:**
+     * - When provided: Dropdown works in controlled mode - external prop controls the state
+     * - When not provided: Dropdown works in native mode - manages its own internal state
+     *
+     * @default undefined (native mode)
+     */
+    visible?: boolean;
 };
 type DropdownProperties = WebComponentProperties<DropdownManifestProperties, "onVisibility" | "portalId">;
 
@@ -18842,17 +18970,22 @@ declare class RaruiDropdown extends LitElement {
     set visible(value: boolean | undefined);
     get visible(): boolean | undefined;
     private _visible?;
+    private _hasVisibleAttribute;
     reference: HTMLElement;
     floating: HTMLElement;
     static styles: CSSResult;
     cleanupAutoUpdate?: () => void;
     private updatePositionDebounceId;
     connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, any>): void;
     private scheduleUpdatePosition;
     private handleClickOutside;
+    private handleKeyDown;
+    private closeDropdown;
     private handleClick;
+    private handleReferenceKeydown;
     updatePosition(): Promise<void>;
     private getMiddleware;
     computePosition(): Promise<void>;
@@ -18871,13 +19004,39 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/dropdown) for more details.
  */
-type DropdownItemManifestProperties = DropdownItemProps;
+type DropdownItemManifestProperties = DropdownItemProps & {
+    /**
+     * Disables the dropdown item, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The value associated with this dropdown item for form submission or identification.
+     */
+    value?: string;
+    /**
+     * Defines the native button type.
+     * @default button
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * ARIA role for the dropdown item.
+     * @default menuitem
+     */
+    role?: string;
+};
 type DropdownItemProperties = WebComponentProperties<DropdownItemManifestProperties>;
 
 declare class RaruiDropdownItem extends LitElement {
     name: DropdownItemProperties["name"];
     selected: DropdownItemProperties["selected"];
+    disabled: DropdownItemProperties["disabled"];
+    value: DropdownItemProperties["value"];
+    type: DropdownItemProperties["type"];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     static styles: CSSResult;
+    private handleClick;
+    private handleKeydown;
     render(): TemplateResult<1>;
 }
 
@@ -18893,7 +19052,25 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.
  */
-type IconButtonManifestProperties = IconButtonProps;
+type IconButtonManifestProperties = IconButtonProps & {
+    /**
+     * Defines the native button type.
+     * @default button
+     */
+    type?: "button" | "submit" | "reset";
+    /**
+     * The name of the button for form submission.
+     */
+    name?: string;
+    /**
+     * The value of the button for form submission.
+     */
+    value?: string;
+    /**
+     * Associates the button with a form element by ID.
+     */
+    form?: string;
+};
 type IconButtonProperties = WebComponentProperties<IconButtonManifestProperties>;
 
 declare class RaruiIconButton extends LitElement {
@@ -18902,7 +19079,12 @@ declare class RaruiIconButton extends LitElement {
     appearance: IconButtonProperties["appearance"];
     disabled: IconButtonProperties["disabled"];
     rounded: IconButtonProperties["rounded"];
+    type: IconButtonProperties["type"];
+    name: IconButtonProperties["name"];
+    value: IconButtonProperties["value"];
+    form: IconButtonProperties["form"];
     static styles: CSSResult;
+    private handleClick;
     render(): TemplateResult<1>;
 }
 
@@ -18932,6 +19114,41 @@ type InputManifestProperties = InputProps & {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * The type of input element.
+     * @default text
+     */
+    type?: "text" | "email" | "password" | "tel" | "url" | "number" | "search" | "date" | "datetime-local" | "month" | "week" | "time" | "color" | "range" | "file" | "hidden";
+    /**
+     * The name of the input for form submission.
+     */
+    name?: string;
+    /**
+     * Associates the input with a form element by ID.
+     */
+    form?: string;
+    /**
+     * Whether the input is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the input is readonly.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Minimum length of the input value.
+     */
+    minlength?: number;
+    /**
+     * Maximum length of the input value.
+     */
+    maxlength?: number;
+    /**
+     * Regular expression pattern for input validation.
+     */
+    pattern?: string;
 };
 type InputProperties = WebComponentProperties<InputManifestProperties>;
 
@@ -18943,13 +19160,18 @@ declare class RaruiInput extends LitElement {
     disabled: InputProperties["disabled"];
     value: string;
     placeholder?: string;
+    type: InputProperties["type"];
+    name: InputProperties["name"];
+    form: InputProperties["form"];
+    required: InputProperties["required"];
+    readonly: InputProperties["readonly"];
+    minlength: InputProperties["minlength"];
+    maxlength: InputProperties["maxlength"];
+    pattern: InputProperties["pattern"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
     private _focusInput;
     private _onInput;
-    private _onChange;
-    private _onFocus;
-    private _onBlur;
 }
 
 declare global {
@@ -18975,6 +19197,24 @@ type RadioButtonManifestProperties = RadioButtonProps & {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * The value of the radio button for form submission.
+     */
+    value?: string;
+    /**
+     * Associates the radio button with a form element by ID.
+     */
+    form?: string;
+    /**
+     * Whether the radio button is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the radio button is readonly.
+     * @default false
+     */
+    readonly?: boolean;
 };
 type RadioButtonProperties = WebComponentProperties<RadioButtonManifestProperties>;
 
@@ -18986,18 +19226,28 @@ declare class RaruiRadioButton extends LitElement {
     size?: RadioButtonProperties["size"];
     error?: RadioButtonProperties["error"];
     selected?: RadioButtonProperties["selected"];
+    value: RadioButtonProperties["value"];
+    form: RadioButtonProperties["form"];
+    required: RadioButtonProperties["required"];
+    readonly: RadioButtonProperties["readonly"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
     private _onChange;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-select": any;
+    }
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-textarea": RaruiTextarea;
     }
 }
 /**
- * ## Rarui Radio Button
+ * ## Rarui Textarea
  * ---
  * Expanded text area for long text entries. Allows you to enter large blocks of text, such as comments or detailed descriptions.
  *
@@ -19009,6 +19259,36 @@ type TextareaManifestProperties = TextareaProps & {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * The name of the textarea for form submission.
+     */
+    name?: string;
+    /**
+     * Associates the textarea with a form element by ID.
+     */
+    form?: string;
+    /**
+     * Whether the textarea is required for form validation.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the textarea is readonly.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Placeholder text to display when the textarea is empty.
+     */
+    placeholder?: string;
+    /**
+     * Minimum number of characters required.
+     */
+    minlength?: number;
+    /**
+     * Maximum number of characters allowed.
+     */
+    maxlength?: number;
 };
 type TextareaProperties = WebComponentProperties<TextareaManifestProperties>;
 
@@ -19017,9 +19297,15 @@ declare class RaruiTextarea extends LitElement {
     value?: string;
     appearance?: TextareaProperties["appearance"];
     lines?: TextareaProperties["lines"];
+    name: TextareaProperties["name"];
+    form: TextareaProperties["form"];
+    required: TextareaProperties["required"];
+    readonly: TextareaProperties["readonly"];
+    placeholder: TextareaProperties["placeholder"];
+    minlength: TextareaProperties["minlength"];
+    maxlength: TextareaProperties["maxlength"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
-    private _onChange;
 }
 
 declare global {
@@ -19046,6 +19332,19 @@ type ToggleManifestProperties = ToggleProps & {
      * The name will be used as Fallback to `id`.
      */
     id?: string;
+    /**
+     * The value of the toggle for form submission.
+     */
+    value?: string;
+    /**
+     * Associates the toggle with a form element by ID.
+     */
+    form?: string;
+    /**
+     * Whether the toggle is required for form validation.
+     * @default false
+     */
+    required?: boolean;
 };
 type ToggleProperties = WebComponentProperties<ToggleManifestProperties>;
 
@@ -19056,8 +19355,10 @@ declare class RaruiToggle extends LitElement {
     error: ToggleProperties["error"];
     selected?: ToggleProperties["selected"];
     disabled?: ToggleProperties["disabled"];
+    value: ToggleProperties["value"];
+    form: ToggleProperties["form"];
+    required: ToggleProperties["required"];
     static styles: CSSResult;
-    private handleChange;
     render(): TemplateResult<1>;
 }
 
@@ -19217,6 +19518,31 @@ type LinkManifestProperties = LinkProps & {
      * ** IMPORTANT: ** should only be used when `as="a"`.
      */
     href?: string;
+    /**
+     * Defines the target attribute for links.
+     * @default "_blank" for external links, undefined for internal
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     * Defines the rel attribute for links.
+     * @default "noopener noreferrer" for external links with target="_blank"
+     */
+    rel?: string;
+    /**
+     * The name of the button for form submission.
+     * ** IMPORTANT: ** should only be used when `as="button"`.
+     */
+    name?: string;
+    /**
+     * The value of the button for form submission.
+     * ** IMPORTANT: ** should only be used when `as="button"`.
+     */
+    value?: string;
+    /**
+     * Associates the button with a form element by ID.
+     * ** IMPORTANT: ** should only be used when `as="button"`.
+     */
+    form?: string;
 };
 type LinkProperties = WebComponentProperties<LinkManifestProperties>;
 
@@ -19227,7 +19553,13 @@ declare class RaruiLink extends LitElement {
     size?: LinkProperties["size"];
     href?: LinkProperties["href"];
     disabled: LinkProperties["disabled"];
+    target?: LinkProperties["target"];
+    rel?: LinkProperties["rel"];
+    name?: LinkProperties["name"];
+    value?: LinkProperties["value"];
+    form?: LinkProperties["form"];
     static styles: CSSResult;
+    private _onClick;
     render(): TemplateResult<1>;
 }
 
@@ -19308,6 +19640,7 @@ declare class RaruiSideNavigation extends LitElement {
     private _renderLeadingEnd;
     private _renderContent;
     render(): TemplateResult<1>;
+    private getAriaExpanded;
 }
 
 declare global {