@rarui/components 1.28.1 → 1.29.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-10-09 `1.29.0`
+
+#### 🎉 New features
+
+- Added `items-after-truncate` property to the `Select` component for controlling item truncation with "+X" chip display in multiple selection mode. ([#143](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/143) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-10-07 `1.28.1`
 
 #### 🐛 Bug fixes

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.28.0",
+  "version": "1.28.1",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -3777,6 +3777,12 @@
           "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": "items-after-truncate",
+          "description": "Maximum number of items to display before showing a \"+X\" chip with the remaining count.\nWhen set, only the specified number of selected items will be shown, followed by a chip indicating how many more items are selected.\n\n@default undefined (shows all selected items)",
+          "type": "number",
+          "default": "undefined (shows all selected items)"
+        },
         {
           "name": "position",
           "description": "Position of the dropdown relative to the trigger.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start\n\n@default bottom-start",

package/dist/index.d.ts

@@ -1,6 +1,3 @@
-import { IconName } from '@rarui/icons/dist/html/types';
-import { BreadcrumbProps, AccordionProps } from '@rarui/typings';
-
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -17082,6 +17079,57 @@ declare const styles$3: {
 
 type RadioButtonVariants = NonNullable<RecipeVariants<typeof styles$3.radioButton>>;
 
+declare const selectStyles: {
+    select: RuntimeFn<{
+        /**
+         * Determines the visual style of the input, affecting its border
+         */
+        appearance: {
+            success: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":active": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+            error: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":active": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the badge, controlling its dimensions.
+         */
+        size: {
+            large: {
+                height: "3rem";
+            };
+            medium: {
+                height: "2.5rem";
+            };
+            small: {
+                height: "2rem";
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    list: string;
+    close: string;
+};
+
 declare const dropdownStyles: {
     dropdown: RuntimeFn<{
         /**
@@ -17124,6 +17172,9 @@ interface DropdownSprinkle extends DropdownDynamicProperties {
     zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
 }
 
+type SelectVariants = NonNullable<RecipeVariants<typeof selectStyles.select>>;
+type SelectSprinkle = Pick<StandardLonghandProperties, "maxHeight"> & Pick<DropdownSprinkle, "zIndex">;
+
 declare const statusStyles: {
     status: RuntimeFn<{
         /**
@@ -18069,6 +18120,74 @@ interface RadioButtonTyping {
 }
 type RadioButtonProps = RadioButtonTyping & RadioButtonVariants;
 
+interface SelectOptionProps {
+    /**
+     * Label for the option. This is the text that will be displayed for the option.
+     */
+    label: string;
+    /**
+     * Value of the option. This is the value that will be used internally and returned when the option is selected.
+     */
+    value: string;
+}
+interface SelectTyping {
+    /**
+     * Options for the Select component. This should be an array of SelectOptionProps objects.
+     */
+    options: SelectOptionProps[];
+    /**
+     * Default selected values for the Select component.
+     * This should be an array of SelectOptionProps objects representing the selected options.
+     */
+    value?: SelectOptionProps | SelectOptionProps[];
+    /**
+     * Callback function that is called when the selected values change.
+     * This function receives an array of SelectOptionProps objects representing the selected options.
+     */
+    onChange?: (selectedOptions: SelectOptionProps | SelectOptionProps[]) => void;
+    /**
+     * Enables multiple selection mode.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Specifies the default selected value(s) for the select box.
+     * This can be a selectOption for single selection or an array of selectOption for multiple selections.
+     */
+    defaultValue?: SelectOptionProps | SelectOptionProps[];
+    /**
+     * If true, the Select component is shown.
+     */
+    open?: boolean;
+    /**
+     * Placeholder text displayed when no option is selected.
+     */
+    placeholder?: string;
+    /**
+     * Disables the select component, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Determines whether the select box should enable flipping the options' dropdown when there is not enough space to display it in its default direction.
+     * This can help ensure the dropdown is always visible on the screen.
+     * @default true
+     */
+    enabledFlip?: boolean;
+    /**
+     * Specifies the ID of the portal element where the dropdown should be rendered.
+     * This can be useful for rendering the dropdown in a different part of the DOM, such as a modal or overlay.
+     */
+    portalId?: string;
+    /**
+     * Maximum number of items to display before showing a "+X" chip with the remaining count.
+     * When set, only the specified number of selected items will be shown, followed by a chip indicating how many more items are selected.
+     * @default undefined (shows all selected items)
+     */
+    itemsAfterTruncate?: number;
+}
+type SelectProps = SelectTyping & SelectVariants & SelectSprinkle;
+
 interface TextareaProps extends TextareaVariants {
     /**
      * Number of lines to be rendered for the user to input text
@@ -18093,6 +18212,18 @@ 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 {
@@ -18201,6 +18332,15 @@ interface SidebarTyping {
 }
 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.
@@ -18379,6 +18519,8 @@ declare class RaruiDivider extends RaruiDivider_base {
     render(): TemplateResult<1>;
 }
 
+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 {
         "rarui-icon": RaruiIcon;
@@ -19446,9 +19588,134 @@ declare class RaruiRadioButton extends RaruiRadioButton_base {
 
 declare global {
     interface HTMLElementTagNameMap {
-        "rarui-select": any;
+        "rarui-select": RaruiSelect;
     }
 }
+/**
+ * ## Rarui Select
+ * ---
+ * Select component for choosing options from a dropdown menu with support for single and multiple selection.
+ *
+ * Features:
+ * - **Single Selection**: Choose one option from the list using rarui-select-option elements
+ * - **Multiple Selection**: Choose multiple options with checkboxes using rarui-select-option elements
+ * - **Slot-based Content**: Use rarui-select-option elements as children for flexible content
+ * - **Accessibility**: Full keyboard navigation with ESC key support
+ * - **Controlled Behavior**: Uses internal web components (Dropdown, Checkbox, Text, Box, Chip, Icon)
+ *
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.
+ */
+type SelectManifestProperties = Omit<SelectProps, "onChange" | "portalId" | "options"> & {
+    /**
+     * Position of the dropdown relative to the trigger.
+     * @default "bottom-start"
+     */
+    position?: Placement;
+    /**
+     * CSS positioning strategy used for the dropdown.
+     *
+     * - `"fixed"` (default) positions the dropdown relative to the viewport,
+     *   so it stays in the same place even when the page is scrolled.
+     * - `"absolute"` positions the dropdown relative to the nearest positioned ancestor,
+     *   which can be useful when you want the dropdown to move with page content.
+     *
+     * Use `"fixed"` for dropdowns that should remain visible on scroll,
+     * and `"absolute"` when dropdowns need to be positioned within scrollable containers.
+     * @default "fixed"
+     */
+    strategy?: "fixed" | "absolute";
+    /**
+     * The name of the select for form submission.
+     */
+    name?: string;
+    /**
+     * Associates the select with a form element by ID.
+     */
+    form?: string;
+    /**
+     * Whether the select is required for form validation.
+     * @default false
+     */
+    required?: boolean;
+};
+type SelectProperties = WebComponentProperties<SelectManifestProperties>;
+
+declare const RaruiSelect_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiSelect extends RaruiSelect_base {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    sprinkleAttrs: Record<string, string>;
+    private _internals;
+    static formAssociated: boolean;
+    constructor();
+    size: SelectProperties["size"];
+    appearance: SelectProperties["appearance"];
+    placeholder?: string;
+    disabled: boolean;
+    multiple: SelectProperties["multiple"];
+    open: SelectProperties["open"];
+    enabledFlip: SelectProperties["enabled-flip"];
+    position: SelectProperties["position"];
+    maxHeight: SelectProperties["max-height"];
+    zIndex: SelectProperties["z-index"];
+    strategy: SelectProperties["strategy"];
+    name: SelectProperties["name"];
+    form: SelectProperties["form"];
+    required: SelectProperties["required"];
+    itemsAfterTruncate: SelectProperties["items-after-truncate"];
+    ariaInvalid: AriaInvalid;
+    get value(): SelectOptionProps | SelectOptionProps[] | undefined;
+    set value(value: SelectOptionProps | SelectOptionProps[] | undefined);
+    private _value;
+    get defaultValue(): SelectOptionProps | SelectOptionProps[] | undefined;
+    set defaultValue(value: SelectOptionProps | SelectOptionProps[] | undefined);
+    private _defaultValue;
+    private selectedOptions;
+    private menuOpen;
+    private childOptions;
+    dropdown: Element;
+    private _selectContext;
+    private _observer?;
+    static styles: CSSResult;
+    connectedCallback(): void;
+    private _setupMutationObserver;
+    private _syncSelectedOptionsFromChildren;
+    disconnectedCallback(): void;
+    private _updateSelectedOptions;
+    private handleSelect;
+    private handleRemoveOption;
+    private renderHiddenFormInputs;
+    private handleResetOptions;
+    private handleDropdownOpenChange;
+    private _handleOptionSelect;
+    private _handleContextOptionSelect;
+    private _handleOptionMount;
+    private _handleOptionUnmount;
+    private _updateContext;
+    private handleSelectClick;
+    render(): TemplateResult<1>;
+    private _renderTrigger;
+    private _renderPlaceholder;
+    private _renderSelectedOptions;
+    private _renderControls;
+    private _renderContent;
+    private _updateFormValue;
+    focus(): void;
+    blur(): void;
+    private _handleLabelClick;
+    formResetCallback(): void;
+}
 
 declare global {
     interface HTMLElementTagNameMap {