@rarui/components 1.20.0 → 1.22.0

package/dist/index.d.ts

@@ -17466,6 +17466,54 @@ declare const styles: {
 
 type TooltipVariants = NonNullable<RecipeVariants<typeof styles.tooltip>>;
 
+declare const accordionStyles: {
+    item: RuntimeFn<{
+        selected: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+                borderBottomColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":active": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":disabled": {
+                    borderBottomColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    backgroundColor: "transparent";
+                };
+            };
+        };
+        size: {
+            large: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
+            };
+            medium: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
+            };
+            small: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    body: RuntimeFn<{
+        /**
+         * Padding properties are used to generate space around the content area of an Accordion.Body..
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+};
+
+type AccordionVariants = Omit<NonNullable<RecipeVariants<typeof accordionStyles.item>>, "selected"> & NonNullable<RecipeVariants<typeof accordionStyles.body>>;
+
 declare const breadcrumbStyles: {
     breadcrumb: string;
     item: RuntimeFn<{
@@ -17593,6 +17641,54 @@ declare const paginationStyles: {
 
 type PaginationVariants = Omit<NonNullable<RecipeVariants<typeof paginationStyles.item>>, "selected">;
 
+declare const sidebarStyles: {
+    sidebar: RuntimeFn<{
+        /**
+         * Specifies where the sidebar should be positioned
+         */
+        position: {
+            left: {
+                left: number;
+                transform: "translateX(-100%)";
+            };
+            right: {
+                right: number;
+                transform: "translateX(100%)";
+            };
+        };
+        /**
+         * Determines if the sidebar is shown or not.
+         * @default true
+         */
+        open: {
+            true: {
+                opacity: number;
+                transform: "translateX(0)";
+            };
+        };
+    }>;
+    overlay: string;
+};
+declare const sidebarPaddingProperties: {
+    none: string;
+    small: `var(--${string})` | `var(--${string}, ${string})`;
+    medium: `var(--${string})` | `var(--${string}, ${string})`;
+};
+
+type SidebarVariants = RecipeVariants<typeof sidebarStyles.sidebar>;
+type SidebarDynamicProperties = Pick<StandardLonghandProperties, "maxWidth">;
+interface SidebarSprinkle extends SidebarDynamicProperties {
+    /**
+     * The **`padding`** CSS shorthand property sets the padding area on all four sides of an element at once.
+     * @default small
+     */
+    padding?: AddDollar<keyof typeof sidebarPaddingProperties> | Conditions<AddDollar<keyof typeof sidebarPaddingProperties>>;
+    /**
+     * The zIndex property specifies the stack order of the box.
+     */
+    zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
+}
+
 declare const sideNavigationStyles: {
     sideNavigation: RuntimeFn<{
         active: {
@@ -18016,6 +18112,48 @@ interface ToggleTyping {
 }
 type ToggleProps = ToggleTyping & ToggleVariants;
 
+interface AccordionProps {
+    /**
+     * Informs which accordion item is open by default, this value must be the same as informed in the index of each item
+     */
+    selectedDefault?: string;
+    /**
+     * Disables the accordion, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+type AccordionBodyProps = Pick<AccordionVariants, "padding">;
+
+interface AccordionHeaderTyping {
+    /**
+     * The title to display in the accordion header.
+     */
+    title?: string;
+    /**
+     * The subtitle to display in the accordion header.
+     */
+    subtitle?: string;
+    /**
+     * Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.
+     * @default false
+     */
+    noIconToggle?: boolean;
+}
+type AccordionHeaderProps = AccordionHeaderTyping & Pick<AccordionVariants, "size">;
+
+interface AccordionItemProps {
+    /**
+     * Unique indicator to identify accordion items
+     */
+    index: string;
+    /**
+     * This is an attribute used to identify a DOM node for testing purposes.
+     */
+    testId?: string;
+}
+
 interface BannerTyping {
     /**
      * A function to be called when the user closes the banner. This function is typically used to handle the closing action.
@@ -18076,6 +18214,33 @@ interface ModalHeaderTypings {
 }
 type ModalHeaderProps = ModalHeaderTypings;
 
+interface SidebarTyping {
+    /**
+     * Whether the sidebar is open or not.
+     */
+    open?: boolean;
+    /**
+     * Specifies the ID of the portal element where the sidebar should be rendered.
+     * This can be useful for rendering the sidebar in a different part of the DOM, such as a modal or overlay.
+     */
+    portalId?: string;
+    /**
+     * Callback fired when the component requests to be closed.
+     * @TJS-type () => void;
+     */
+    onRemove?: () => void;
+}
+type SidebarProps = SidebarTyping & SidebarSprinkle & SidebarVariants;
+
+interface BreadcrumbProps {
+    /**
+     * Specifies the number of breadcrumb items to display after truncation.
+     * This is useful for managing the display of long breadcrumb lists.
+     * @default 10
+     */
+    itemsAfterTruncate?: number;
+}
+
 interface BreadcrumbItemTyping {
     /**
      * The name of the breadcrumb item. This is typically the text that is displayed for the item.
@@ -18133,6 +18298,30 @@ interface SideNavigationItemTypings {
 }
 type SideNavigationItemProps = SideNavigationItemTypings & Pick<SideNavigationVariants, "level">;
 
+/**
+ * Utility types for Web Components property handling in Rarui Design System
+ *
+ * These types help convert React-style camelCase properties to web component
+ * kebab-case attributes while maintaining type safety.
+ */
+/**
+ * Converts a camelCase string to kebab-case
+ *
+ * @example
+ * CamelToKebab<"maxWidth"> // "max-width"
+ * CamelToKebab<"portalId"> // "portal-id"
+ * CamelToKebab<"position"> // "position"
+ */
+type CamelToKebab<T extends string> = T extends `${infer Start}${infer Rest}` ? Rest extends `${infer First}${infer End}` ? First extends Uppercase<First> ? `${Lowercase<Start>}-${CamelToKebab<`${Lowercase<First>}${End}`>}` : `${Lowercase<Start>}${CamelToKebab<Rest>}` : Lowercase<T> : T;
+type CamelToKebabKeys<T> = {
+    [K in keyof T as CamelToKebab<string & K>]: T[K];
+};
+/**
+ * Common React properties that should be excluded from web component types
+ */
+type CommonReactExclusions = "children" | "className" | "style" | "ref" | "key";
+type WebComponentProperties<TReactProps, TExclude extends keyof TReactProps = never> = CamelToKebabKeys<Omit<Partial<TReactProps>, CommonReactExclusions | TExclude>>;
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-avatar": RaruiAvatar;
@@ -18145,7 +18334,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/avatar) for more details.
  */
-type AvatarProperties = Pick<AvatarProps, "size">;
+type AvatarManifestProperties = Pick<AvatarProps, "size">;
+type AvatarProperties = WebComponentProperties<AvatarManifestProperties>;
 
 declare class RaruiAvatar extends LitElement {
     size?: AvatarProperties["size"];
@@ -18165,7 +18355,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.
  */
-type BadgeProperties = Partial<BadgeProps>;
+type BadgeManifestProperties = BadgeProps;
+type BadgeProperties = WebComponentProperties<BadgeManifestProperties>;
 
 declare class RaruiBagde extends LitElement {
     variant?: BadgeProperties["variant"];
@@ -18187,7 +18378,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/divider) for more details.
  */
-type DividerProperties = Partial<DividerProps>;
+type DividerManifestProperties = DividerProps;
+type DividerProperties = WebComponentProperties<DividerManifestProperties>;
 
 declare class RaruiDivider extends LitElement {
     sprinkleAttrs: Record<string, string>;
@@ -18200,7 +18392,7 @@ declare class RaruiDivider extends LitElement {
     render(): TemplateResult<1>;
 }
 
-type IconName = "phone-call-outlined" | "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-filled" | "phone-outlined" | "pin-filled" | "pin-outlined" | "play-arrow-filled" | "play-arrow-outlined" | "play-circle-filled" | "play-circle-outlined" | "plus" | "power-settings-new" | "printer-filled" | "printer-outlined" | "push-pin-filled" | "push-pin-outlined" | "receipt-filled" | "receipt-outlined" | "recycle" | "redeem" | "redo" | "refresh" | "refresh-alt" | "remove" | "remove-circle-filled" | "remove-circle-outlined" | "repeat" | "reply" | "save-alt" | "screen-outlined" | "search" | "send-filled" | "send-outlined" | "sentiment-dissatisfied-filled" | "sentiment-dissatisfied-outlined" | "sentiment-neutral-filled" | "sentiment-neutral-outlined" | "sentiment-satisfied-filled" | "sentiment-satisfied-outlined" | "sentiment-very-dissatisfied-filled" | "sentiment-very-dissatisfied-outlined" | "sentiment-very-satisfied-filled" | "sentiment-very-satisfied-outlined" | "settings-filled" | "settings-outlined" | "share-filled" | "share-outlined" | "shopping-bag-filled" | "shopping-bag-outlined" | "shopping-cart-add" | "shopping-cart-filled" | "shopping-cart-outlined" | "sprout" | "sprout-outline-outlined" | "star-filled" | "star-outlined" | "stay-primary-portrait" | "storefront" | "tag-filled" | "tag-outlined" | "textsms-filled" | "textsms-outlined" | "thumb-down-filled" | "thumb-down-outlined" | "thumb-up-filled" | "thumb-up-outlined" | "tiktok" | "toc" | "trash-filled" | "trash-outlined" | "truck-filled" | "truck-outlined" | "tune" | "twitter" | "undo" | "upload-filled" | "upload-outlined" | "user-circle-filled" | "user-circle-outlined" | "user-filled" | "user-outlined" | "user-square-filled" | "user-square-outlined" | "users-filled" | "users-outlined" | "view-grid-filled" | "view-grid-outlined" | "view-list-filled" | "view-list-outlined" | "warning-bubble-filled" | "warning-bubble-outlined" | "warning-filled" | "warning-outlined" | "whatsapp-filled" | "whatsapp-outlined" | "work-filled" | "work-outlined" | "wysiwyg-filled" | "youtube-filled" | "youtube-outlined" | "zoom-in" | "zoom-out";
+type IconName = "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-call-outlined" | "phone-filled" | "phone-outlined" | "pin-filled" | "pin-outlined" | "play-arrow-filled" | "play-arrow-outlined" | "play-circle-filled" | "play-circle-outlined" | "plus" | "power-settings-new" | "printer-filled" | "printer-outlined" | "push-pin-filled" | "push-pin-outlined" | "receipt-filled" | "receipt-outlined" | "recycle" | "redeem" | "redo" | "refresh" | "refresh-alt" | "remove" | "remove-circle-filled" | "remove-circle-outlined" | "repeat" | "reply" | "save-alt" | "screen-outlined" | "search" | "send-filled" | "send-outlined" | "sentiment-dissatisfied-filled" | "sentiment-dissatisfied-outlined" | "sentiment-neutral-filled" | "sentiment-neutral-outlined" | "sentiment-satisfied-filled" | "sentiment-satisfied-outlined" | "sentiment-very-dissatisfied-filled" | "sentiment-very-dissatisfied-outlined" | "sentiment-very-satisfied-filled" | "sentiment-very-satisfied-outlined" | "settings-filled" | "settings-outlined" | "share-filled" | "share-outlined" | "shopping-bag-filled" | "shopping-bag-outlined" | "shopping-cart-add" | "shopping-cart-filled" | "shopping-cart-outlined" | "sprout" | "sprout-outline-outlined" | "star-filled" | "star-outlined" | "stay-primary-portrait" | "storefront" | "tag-filled" | "tag-outlined" | "textsms-filled" | "textsms-outlined" | "thumb-down-filled" | "thumb-down-outlined" | "thumb-up-filled" | "thumb-up-outlined" | "tiktok" | "toc" | "trash-filled" | "trash-outlined" | "truck-filled" | "truck-outlined" | "tune" | "twitter" | "undo" | "upload-filled" | "upload-outlined" | "user-circle-filled" | "user-circle-outlined" | "user-filled" | "user-outlined" | "user-square-filled" | "user-square-outlined" | "users-filled" | "users-outlined" | "view-grid-filled" | "view-grid-outlined" | "view-list-filled" | "view-list-outlined" | "warning-bubble-filled" | "warning-bubble-outlined" | "warning-filled" | "warning-outlined" | "whatsapp-filled" | "whatsapp-outlined" | "work-filled" | "work-outlined" | "wysiwyg-filled" | "youtube-filled" | "youtube-outlined" | "zoom-in" | "zoom-out";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -18215,7 +18407,7 @@ declare global {
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/icon) for more details.
  */
 type Sizes = "small" | "medium" | "large";
-type IconProperties = IconProps & {
+type IconManifestProperties = IconProps & {
     /**
      * Name of the icon to be rendered (must be in the @rarui/icons package).
      */
@@ -18226,6 +18418,7 @@ type IconProperties = IconProps & {
      */
     size?: Sizes | number;
 };
+type IconProperties = WebComponentProperties<IconManifestProperties>;
 
 declare class RaruiIcon extends LitElement {
     sprinkleAttrs: Record<string, string>;
@@ -18248,10 +18441,11 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/label) for more details.
  */
-type LabelProperties = Partial<LabelProps>;
+type LabelManifestProperties = LabelProps;
+type LabelProperties = WebComponentProperties<LabelManifestProperties>;
 
 declare class RaruiLabel extends LitElement {
-    htmlFor: LabelProperties["htmlFor"];
+    htmlFor: LabelProperties["html-for"];
     hidden: boolean;
     static styles: CSSResult;
     render(): TemplateResult<1>;
@@ -18269,7 +18463,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/stepper) for more details.
  */
-type StepperStepProperties = Partial<StepperStepProps>;
+type StepperStepManifestProperties = StepperStepProps;
+type StepperStepProperties = WebComponentProperties<StepperStepManifestProperties>;
 
 declare class RaruiStepperStep extends LitElement {
     description: StepperStepProperties["description"];
@@ -18293,7 +18488,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/stepper) for more details.
  */
-type StepperProperties = Partial<StepperProps>;
+type StepperManifestProperties = StepperProps;
+type StepperProperties = WebComponentProperties<StepperManifestProperties>;
 
 declare class RaruiStepper extends LitElement {
     direction: StepperProperties["direction"];
@@ -18316,14 +18512,15 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.
  */
-type TextProperties = Omit<TextProps, "as">;
+type TextManifestProperties = TextProps;
+type TextProperties = WebComponentProperties<TextManifestProperties, "as">;
 
 declare class RaruiText extends LitElement {
     sprinkleAttrs: Record<string, string>;
-    "line-clamp"?: TextProperties["lineClamp"];
+    "line-clamp"?: TextProperties["line-clamp"];
     "color"?: TextProperties["color"];
-    "font-weight"?: TextProperties["fontWeight"];
-    "text-align"?: TextProperties["textAlign"];
+    "font-weight"?: TextProperties["font-weight"];
+    "text-align"?: TextProperties["text-align"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -18340,13 +18537,14 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/typography) for more details.
  */
-type TitleProperties = Partial<TitleProps>;
+type TitleManifestProperties = TitleProps;
+type TitleProperties = WebComponentProperties<TitleManifestProperties>;
 
 declare class RaruiTitle extends LitElement {
     sprinkleAttrs: Record<string, string>;
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    "font-weight"?: TitleProperties["fontWeight"];
-    "text-align"?: TitleProperties["textAlign"];
+    "font-weight"?: TitleProperties["font-weight"];
+    "text-align"?: TitleProperties["text-align"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -18375,7 +18573,7 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/tooltip) for more details.
  */
-type TooltipProperties = Partial<Omit<TooltipProps, "visible" | "onVisibility" | "portalId">> & {
+type TooltipManifestProperties = Omit<TooltipProps, "visible" | "onVisibility" | "portalId"> & {
     /**
      * Position of the tooltip.
      * @default bottom
@@ -18395,16 +18593,17 @@ type TooltipProperties = Partial<Omit<TooltipProps, "visible" | "onVisibility" |
      */
     strategy?: "fixed" | "absolute";
 };
+type TooltipProperties = WebComponentProperties<TooltipManifestProperties>;
 
 declare class RaruiTooltip extends LitElement {
     arrow: TooltipProperties["arrow"];
     padding: TooltipProperties["padding"];
     offset: TooltipProperties["offset"];
     inverted: TooltipProperties["inverted"];
-    enabledDismiss: TooltipProperties["enabledDismiss"];
-    enabledClick: TooltipProperties["enabledClick"];
-    enabledHover: TooltipProperties["enabledHover"];
-    matchReferenceWidth: TooltipProperties["matchReferenceWidth"];
+    enabledDismiss: TooltipProperties["enabled-dismiss"];
+    enabledClick: TooltipProperties["enabled-click"];
+    enabledHover: TooltipProperties["enabled-hover"];
+    matchReferenceWidth: TooltipProperties["match-reference-width"];
     position: TooltipProperties["position"];
     strategy: TooltipProperties["strategy"];
     open: boolean;
@@ -18440,7 +18639,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.
  */
-type ProgressCircleProperties = Partial<ProgressCircleProps>;
+type ProgressCircleManifestProperties = ProgressCircleProps;
+type ProgressCircleProperties = WebComponentProperties<ProgressCircleManifestProperties>;
 
 declare class RaruiProgressCircle extends LitElement {
     size?: ProgressCircleProperties["size"];
@@ -18462,7 +18662,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.
  */
-type ProgressProperties = Partial<ProgressProps>;
+type ProgressManifestProperties = ProgressProps;
+type ProgressProperties = WebComponentProperties<ProgressManifestProperties>;
 
 declare class RaruiProgress extends LitElement {
     percentage?: ProgressProperties["percentage"];
@@ -18484,7 +18685,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/status) for more details.
  */
-type StatusProperties = Partial<StatusProps>;
+type StatusManifestProperties = StatusProps;
+type StatusProperties = WebComponentProperties<StatusManifestProperties>;
 
 declare class RaruiStatus extends LitElement {
     appearance?: StatusProperties["appearance"];
@@ -18508,7 +18710,7 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.
  */
-type ButtonProperties = Partial<ButtonProps> & {
+type ButtonManifestProperties = ButtonProps & {
     /**
      * Defines the native button type.
      * Can be 'button', 'submit', or 'reset'.
@@ -18516,6 +18718,7 @@ type ButtonProperties = Partial<ButtonProps> & {
      */
     type?: "button" | "submit" | "reset";
 };
+type ButtonProperties = WebComponentProperties<ButtonManifestProperties>;
 
 declare class RaruiButton extends LitElement {
     type: ButtonProperties["type"];
@@ -18540,7 +18743,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/checkbox) for more details.
  */
-type CheckboxProperties = Partial<CheckboxProps>;
+type CheckboxManifestProperties = CheckboxProps;
+type CheckboxProperties = WebComponentProperties<CheckboxManifestProperties>;
 
 declare class RaruiCheckbox extends LitElement {
     label?: CheckboxProperties["label"];
@@ -18565,13 +18769,14 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.
  */
-type ChipProperties = Partial<ChipProps> & {
+type ChipManifestProperties = ChipProps & {
     /**
      * Disables the chip, disallowing user interaction.
      * @default false
      */
     disabled?: boolean;
 };
+type ChipProperties = WebComponentProperties<ChipManifestProperties>;
 
 declare class RaruiChip extends LitElement {
     sprinkleAttrs: Record<string, string>;
@@ -18579,8 +18784,8 @@ declare class RaruiChip extends LitElement {
     size?: ChipProperties["size"];
     closeable: ChipProperties["closeable"];
     pill: ChipProperties["pill"];
-    textTransform?: ChipProperties["textTransform"];
-    textOverflow?: ChipProperties["textOverflow"];
+    textTransform?: ChipProperties["text-transform"];
+    textOverflow?: ChipProperties["text-overflow"];
     selected?: ChipProperties["selected"];
     disabled?: ChipProperties["disabled"];
     static styles: CSSResult;
@@ -18601,7 +18806,7 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.
  */
-type DropdownProperties = Omit<Partial<DropdownProps>, "onVisibility" | "portalId"> & {
+type DropdownManifestProperties = DropdownProps & {
     /**
      * Position of the dropdown.
      * @default bottom-start
@@ -18621,6 +18826,7 @@ type DropdownProperties = Omit<Partial<DropdownProps>, "onVisibility" | "portalI
      */
     strategy?: "fixed" | "absolute";
 };
+type DropdownProperties = WebComponentProperties<DropdownManifestProperties, "onVisibility" | "portalId">;
 
 declare class RaruiDropdown extends LitElement {
     sprinkleAttrs: Record<string, string>;
@@ -18628,10 +18834,10 @@ declare class RaruiDropdown extends LitElement {
     padding: DropdownProperties["padding"];
     position: DropdownProperties["position"];
     strategy: DropdownProperties["strategy"];
-    matchReferenceWidth?: DropdownProperties["matchReferenceWidth"];
-    enabledFlip?: DropdownProperties["enabledFlip"];
-    enabledClick: DropdownProperties["enabledClick"];
-    enabledDismiss: DropdownProperties["enabledDismiss"];
+    matchReferenceWidth?: DropdownProperties["match-reference-width"];
+    enabledFlip?: DropdownProperties["enabled-flip"];
+    enabledClick: DropdownProperties["enabled-click"];
+    enabledDismiss: DropdownProperties["enabled-dismiss"];
     open: boolean;
     set visible(value: boolean | undefined);
     get visible(): boolean | undefined;
@@ -18665,7 +18871,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/dropdown) for more details.
  */
-type DropdownItemProperties = Omit<DropdownItemProps, "icon">;
+type DropdownItemManifestProperties = DropdownItemProps;
+type DropdownItemProperties = WebComponentProperties<DropdownItemManifestProperties>;
 
 declare class RaruiDropdownItem extends LitElement {
     name: DropdownItemProperties["name"];
@@ -18686,7 +18893,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.
  */
-type IconButtonProperties = Partial<IconButtonProps>;
+type IconButtonManifestProperties = IconButtonProps;
+type IconButtonProperties = WebComponentProperties<IconButtonManifestProperties>;
 
 declare class RaruiIconButton extends LitElement {
     size: IconButtonProperties["size"];
@@ -18710,7 +18918,7 @@ declare global {
  *
  * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/input) for more details.
  */
-type InputProperties = Partial<InputProps> & {
+type InputManifestProperties = InputProps & {
     /**
      * The value of the input element.
      */
@@ -18725,6 +18933,7 @@ type InputProperties = Partial<InputProps> & {
      */
     disabled?: boolean;
 };
+type InputProperties = WebComponentProperties<InputManifestProperties>;
 
 declare class RaruiInput extends LitElement {
     size: InputProperties["size"];
@@ -18755,7 +18964,7 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/radiobutton) for more details.
  */
-type RadioButtonProperties = Partial<RadioButtonProps> & {
+type RadioButtonManifestProperties = RadioButtonProps & {
     /**
      * Defines a unique identifier (ID) which must be unique in the whole document.
      * Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
@@ -18767,6 +18976,7 @@ type RadioButtonProperties = Partial<RadioButtonProps> & {
      */
     disabled?: boolean;
 };
+type RadioButtonProperties = WebComponentProperties<RadioButtonManifestProperties>;
 
 declare class RaruiRadioButton extends LitElement {
     id: string;
@@ -18793,13 +19003,14 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/textarea) for more details.
  */
-type TextareaProperties = Partial<TextareaProps> & {
+type TextareaManifestProperties = TextareaProps & {
     /**
      * Disables the Textarea, disallowing user interaction.
      * @default false
      */
     disabled?: boolean;
 };
+type TextareaProperties = WebComponentProperties<TextareaManifestProperties>;
 
 declare class RaruiTextarea extends LitElement {
     disabled: boolean;
@@ -18823,7 +19034,7 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/toggle) for more details.
  */
-type ToggleProperties = Partial<ToggleProps> & {
+type ToggleManifestProperties = ToggleProps & {
     /**
      * Defines if Toggle is disabled.
      * When `true`, the component cannot be interacted.
@@ -18836,6 +19047,7 @@ type ToggleProperties = Partial<ToggleProps> & {
      */
     id?: string;
 };
+type ToggleProperties = WebComponentProperties<ToggleManifestProperties>;
 
 declare class RaruiToggle extends LitElement {
     name: ToggleProperties["name"];
@@ -18849,6 +19061,48 @@ declare class RaruiToggle extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-sidebar": RaruiSidebar;
+    }
+}
+/**
+ * ## Rarui Sidebar
+ * ---
+ * A sidebar component that slides in from the left or right side of the screen, with floating-ui positioning for responsive behavior.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/layout/sidebar) for more details.
+ */
+type SidebarManifestProperties = SidebarProps;
+type SidebarProperties = WebComponentProperties<SidebarManifestProperties, "onRemove">;
+
+declare class RaruiSidebar extends LitElement {
+    sprinkleAttrs: Record<string, string>;
+    open: SidebarProperties["open"];
+    position: SidebarProperties["position"];
+    maxWidth: SidebarProperties["max-width"];
+    padding: SidebarProperties["padding"];
+    portalId: SidebarProperties["portal-id"];
+    sidebarElement: HTMLElement;
+    overlayElement: HTMLElement;
+    static styles: CSSResult;
+    cleanupAutoUpdate?: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: Map<string, any>): void;
+    private getPortalRoot;
+    private scheduleUpdatePosition;
+    private handleKeyDown;
+    private handleClickOutside;
+    private dismiss;
+    updatePosition(): Promise<void>;
+    private getMiddleware;
+    computePosition(virtualReference?: any): Promise<void>;
+    private createVirtualReference;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-breadcrumb": RaruiBreadcrumb;
@@ -18861,14 +19115,8 @@ declare global {
  *
  * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/breadcrumb) for more details.
  */
-interface BreadcrumbProperties {
-    /**
-     * Especifica o número de itens do breadcrumb a serem exibidos após o truncamento.
-     * Útil para gerenciar a exibição de listas longas de breadcrumb.
-     * @default 10
-     */
-    'items-after-truncate'?: number;
-}
+type BreadcrumbManifestProperties = BreadcrumbProps;
+type BreadcrumbProperties = WebComponentProperties<BreadcrumbManifestProperties>;
 
 declare class RaruiBreadcrumb extends LitElement {
     itemsAfterTruncate: BreadcrumbProperties["items-after-truncate"];
@@ -18901,7 +19149,7 @@ declare global {
  *
  * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/breadcrumb-item) for more details.
  */
-type BreadcrumbItemProperties = BreadcrumbItemProps & {
+type BreadcrumbItemManifestProperties = BreadcrumbItemProps & {
     /**
      * Nome do item do breadcrumb exibido como texto.
      */
@@ -18916,6 +19164,7 @@ type BreadcrumbItemProperties = BreadcrumbItemProps & {
      */
     as?: "button" | "a";
 };
+type BreadcrumbItemProperties = WebComponentProperties<BreadcrumbItemManifestProperties>;
 
 declare class RaruiBreadcrumbItem extends LitElement {
     name?: BreadcrumbItemProperties["name"];
@@ -18941,7 +19190,7 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/link) for more details.
  */
-type LinkProperties = Partial<LinkProps> & {
+type LinkManifestProperties = LinkProps & {
     /**
      * Defines the native type of the button.
      * It can be `Button`, `submit` or `reset`.
@@ -18969,6 +19218,7 @@ type LinkProperties = Partial<LinkProps> & {
      */
     href?: string;
 };
+type LinkProperties = WebComponentProperties<LinkManifestProperties>;
 
 declare class RaruiLink extends LitElement {
     type: LinkProperties["type"];
@@ -18993,14 +19243,15 @@ declare global {
  *
  * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/pagination) for more details.
  */
-type PaginationProperties = Partial<Omit<PaginationProps, "onPageChange">>;
+type PaginationManifestProperties = PaginationProps;
+type PaginationProperties = WebComponentProperties<PaginationManifestProperties, "onPageChange">;
 
 declare class RaruiPagination extends LitElement {
-    activePage: PaginationProperties["activePage"];
-    pageCount: PaginationProperties["pageCount"];
+    activePage: PaginationProperties["active-page"];
+    pageCount: PaginationProperties["page-count"];
     size?: PaginationProperties["size"];
-    showNumbers: PaginationProperties["showNumbers"];
-    showArrows: PaginationProperties["showArrows"];
+    showNumbers: PaginationProperties["show-numbers"];
+    showArrows: PaginationProperties["show-arrows"];
     static styles: CSSResult;
     private handlePageChange;
     render(): TemplateResult<1>;
@@ -19023,7 +19274,7 @@ declare global {
  *
  * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/side-navigation) for more details.
  */
-type SideNavigationProperties = Partial<SideNavigationProps> & {
+type SideNavigationManifestProperties = SideNavigationProps & {
     /**
      * Whether the navigation item is disabled.
      * @default false
@@ -19040,6 +19291,7 @@ type SideNavigationProperties = Partial<SideNavigationProps> & {
      */
     as?: "button" | "a";
 };
+type SideNavigationProperties = WebComponentProperties<SideNavigationManifestProperties>;
 
 declare class RaruiSideNavigation extends LitElement {
     name: SideNavigationProperties["name"];
@@ -19070,13 +19322,14 @@ declare global {
  *
  * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/navigation/side-navigation) for more details.
  */
-type SideNavigationItemProperties = Partial<SideNavigationItemProps> & {
+type SideNavigationItemManifestProperties = SideNavigationItemProps & {
     /**
      * The HTML element type to render.
      * @default "button"
      */
     as?: "button" | "a";
 };
+type SideNavigationItemProperties = WebComponentProperties<SideNavigationItemManifestProperties>;
 
 declare class RaruiSideNavigationItem extends LitElement {
     active: SideNavigationItemProperties["active"];
@@ -19088,6 +19341,112 @@ declare class RaruiSideNavigationItem extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-accordion": RaruiAccordion;
+    }
+}
+/**
+ * ## Rarui Accordion
+ * ---
+ * The Accordion component displays a list of expandable sections that users can toggle open or closed.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
+ */
+type AccordionManifestProperties = AccordionProps;
+type AccordionProperties = WebComponentProperties<AccordionManifestProperties>;
+
+declare class RaruiAccordion extends LitElement {
+    sprinkleAttrs: Record<string, string>;
+    selectedDefault?: AccordionProperties["selected-default"];
+    disabled?: AccordionProperties["disabled"];
+    private selected;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleItemToggle;
+    private updateItemsState;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, any>): void;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-accordion-item": RaruiAccordionItem;
+    }
+}
+/**
+ * ## Rarui Accordion Item
+ * ---
+ * Container for accordion header and body content.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
+ */
+type AccordionItemManifestProperties = AccordionItemProps;
+type AccordionItemProperties = WebComponentProperties<AccordionItemManifestProperties>;
+
+declare class RaruiAccordionItem extends LitElement {
+    index: AccordionItemProperties["index"];
+    selected: boolean;
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleHeaderClick;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-accordion-header": RaruiAccordionHeader;
+    }
+}
+/**
+ * ## Rarui Accordion Header
+ * ---
+ * Clickable header section that toggles the accordion item visibility.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
+ */
+type AccordionHeaderManifestProperties = AccordionHeaderProps;
+type AccordionHeaderProperties = WebComponentProperties<AccordionHeaderManifestProperties>;
+
+declare class RaruiAccordionHeader extends LitElement {
+    title: NonNullable<AccordionHeaderProperties["title"]>;
+    subtitle: AccordionHeaderProperties["subtitle"];
+    size: AccordionHeaderProperties["size"];
+    noIconToggle: AccordionHeaderProperties["no-icon-toggle"];
+    disabled: boolean;
+    selected: boolean;
+    static styles: CSSResult;
+    private handleClick;
+    private getTitleSize;
+    private getSubtitleSize;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-accordion-body": RaruiAccordionBody;
+    }
+}
+/**
+ * ## Rarui Accordion Body
+ * ---
+ * Content area that is shown/hidden when accordion item is toggled.
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/accordion) for more details.
+ */
+type AccordionBodyManifestProperties = AccordionBodyProps;
+type AccordionBodyProperties = WebComponentProperties<AccordionBodyManifestProperties>;
+
+declare class RaruiAccordionBody extends LitElement {
+    padding: AccordionBodyProperties["padding"];
+    selected: boolean;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-banner": RaruiBanner;
@@ -19100,7 +19459,7 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/banner) for more details.
  */
-type BannerProperties = Partial<Pick<BannerProps, "appearance" | "floating">> & {
+type BannerManifestProperties = BannerProps & {
     /**
      * If `true`, display the closing button in the upper right corner of the banner.
      * When clicked, it fires the `close` event that can be listened to externally.
@@ -19109,6 +19468,7 @@ type BannerProperties = Partial<Pick<BannerProps, "appearance" | "floating">> &
      */
     closable?: boolean;
 };
+type BannerProperties = WebComponentProperties<BannerManifestProperties, "onClose">;
 
 declare class RaruiBanner extends LitElement {
     appearance?: BannerProperties["appearance"];
@@ -19131,7 +19491,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.
  */
-type CardHeaderProperties = Partial<CardHeaderProps>;
+type CardHeaderManifestProperties = CardHeaderProps;
+type CardHeaderProperties = WebComponentProperties<CardHeaderManifestProperties>;
 
 declare class RaruiCardHeader extends LitElement {
     sprinkleAttrs: Record<string, string>;
@@ -19152,12 +19513,13 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/card) for more details.
  */
-type CardProperties = Partial<CardProps>;
+type CardManifestProperties = CardProps;
+type CardProperties = WebComponentProperties<CardManifestProperties>;
 
 declare class RaruiCard extends LitElement {
     sprinkleAttrs: Record<string, string>;
     padding?: CardProperties["padding"];
-    "background-color": CardProperties["backgroundColor"];
+    "background-color": CardProperties["background-color"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -19174,14 +19536,15 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.
  */
-type ModalProperties = Omit<Partial<ModalProps>, "onDismiss">;
+type ModalManifestProperties = ModalProps;
+type ModalProperties = WebComponentProperties<ModalManifestProperties, "onDismiss">;
 
 declare class RaruiModal extends LitElement {
     sprinkleAttrs: Record<string, string>;
     padding: ModalProperties["padding"];
-    portalId: ModalProperties["portalId"];
+    portalId: ModalProperties["portal-id"];
     open: ModalProperties["open"];
-    maxWidth: ModalProperties["maxWidth"];
+    maxWidth: ModalProperties["max-width"];
     dialog: HTMLElement;
     static styles: CSSResult;
     cleanupAutoUpdate?: () => void;
@@ -19207,7 +19570,8 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/modal) for more details.
  */
-type ModalHeaderProperties = ModalHeaderProps;
+type ModalHeaderManifestProperties = ModalHeaderProps;
+type ModalHeaderProperties = WebComponentProperties<ModalHeaderManifestProperties>;
 
 declare class RaruiModalHeader extends LitElement {
     title: string;