@rarui/components 1.8.0-rc.1 → 1.8.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 `@rarui/components` components is a component library built with [Stencil](https://stenciljs.com/docs/introduction).
 
+## 2025-06-10 `1.8.0`
+
+#### 🎉 New features
+
+- Added new exhibition `Tooltip` component. ([#115](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/115) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-06-02 `1.7.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -7,6 +7,7 @@
       "attributes": [
         {
           "name": "size",
+          "default": "medium",
           "description": "Specifies the size of the Avatar component.\n\n- large\n- medium\n- small\n- xLarge",
           "type": "string",
           "values": [
@@ -33,6 +34,7 @@
       "attributes": [
         {
           "name": "appearance",
+          "default": "brand",
           "description": "Determines the visual style of the badge, influencing its color scheme and appearance.\n\n- brand\n- danger\n- info\n- inverted\n- neutral\n- success\n- warning",
           "type": "string",
           "values": [
@@ -62,6 +64,7 @@
         },
         {
           "name": "size",
+          "default": "medium",
           "description": "Specifies the size of the badge, controlling its dimensions.\n\n- dot\n- large\n- medium\n- small",
           "type": "string",
           "values": [
@@ -72,7 +75,8 @@
               "name": "large"
             },
             {
-              "name": "medium"
+              "name": "medium",
+              "description": "(default)"
             },
             {
               "name": "small"
@@ -81,6 +85,7 @@
         },
         {
           "name": "variant",
+          "default": "solid",
           "description": "Defines the visual variant of the badge, affecting its background style.\n\n- outlined\n- solid",
           "type": "string",
           "values": [
@@ -88,7 +93,8 @@
               "name": "outlined"
             },
             {
-              "name": "solid"
+              "name": "solid",
+              "description": "(default)"
             }
           ]
         }
@@ -100,11 +106,13 @@
       "attributes": [
         {
           "name": "direction",
+          "default": "horizontal",
           "description": "The direction of the Divider.\n\n- horizontal\n- vertical",
           "type": "string",
           "values": [
             {
-              "name": "horizontal"
+              "name": "horizontal",
+              "description": "(default)"
             },
             {
               "name": "vertical"
@@ -113,11 +121,13 @@
         },
         {
           "name": "size",
+          "default": "100%",
           "description": "The **`size`** CSS property sets an element's area.",
           "values": []
         },
         {
           "name": "type",
+          "default": "solid",
           "description": "The **`type`** shorthand CSS property sets the line style for all four sides of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$dashed\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$dashed\",\n\"md\": \"$solid\",\n\"lg\": \"$dashed\",\n\"xl\": \"$solid\"\n}\n```\n\n- $dashed\n- $solid",
           "values": [
             {
@@ -130,10 +140,12 @@
         },
         {
           "name": "thickness",
+          "default": "$1",
           "description": "The **`thickness`** shorthand CSS property sets the width of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$1\",\n\"md\": \"$2\",\n\"lg\": \"$1\",\n\"xl\": \"$2\"\n}\n```\n\n- $1\n- $2",
           "values": [
             {
-              "name": "$1"
+              "name": "$1",
+              "description": "(default)"
             },
             {
               "name": "$2"
@@ -142,6 +154,7 @@
         },
         {
           "name": "color",
+          "default": "$divider",
           "description": "The **`color`** CSS property sets an element's color.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$brand\",\n\"md\": \"$brand-alt\",\n\"lg\": \"$disabled\",\n\"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning",
           "values": [
             {
@@ -154,7 +167,8 @@
               "name": "$disabled"
             },
             {
-              "name": "$divider"
+              "name": "$divider",
+              "description": "(default)"
             },
             {
               "name": "$error"
@@ -441,6 +455,7 @@
         },
         {
           "name": "font-weight",
+          "default": "$regular",
           "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$bold\",\n\"md\": \"$medium\",\n\"lg\": \"$regular\",\n\"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
           "values": [
             {
@@ -720,6 +735,7 @@
       "attributes": [
         {
           "name": "as",
+          "default": "h1",
           "description": "Type of html tag to create for the title.\n\n- h1\n- h2\n- h3\n- h4\n- h5\n- h6",
           "type": "string",
           "values": [
@@ -809,6 +825,7 @@
         },
         {
           "name": "font-weight",
+          "default": "$regular",
           "description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$bold\",\n\"md\": \"$medium\",\n\"lg\": \"$regular\",\n\"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
           "values": [
             {
@@ -977,73 +994,68 @@
     },
     {
       "name": "rarui-tooltip",
-      "description": "## Rarui Tooltip\n---\nA Divider is a thin line used to separate or group content in lists and layouts.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/divider) for more details.",
+      "description": "## Rarui Tootip\n---\nTooltips are informative, specific, and action-oriented text labels that provide contextual support\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/tooltip) for more details.",
       "attributes": [
+        {
+          "name": "inverted",
+          "default": false,
+          "description": "Specifies whether the color scheme should be inverted",
+          "type": "boolean"
+        },
+        {
+          "name": "padding",
+          "default": "base",
+          "description": "Specifies the padding for the tooltip\n\n- base\n- none",
+          "type": "string",
+          "values": [
+            {
+              "name": "base",
+              "description": "(default)"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
         {
           "name": "arrow",
+          "default": true,
           "description": "Conditional for displaying the popover arrow.",
           "type": "boolean"
         },
         {
           "name": "match-reference-width",
+          "default": false,
           "description": "A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.",
           "type": "boolean"
         },
         {
           "name": "enabled-hover",
+          "default": false,
           "description": "Adds hover event listeners that change the open state, like CSS :hover.",
           "type": "boolean"
         },
         {
           "name": "enabled-click",
+          "default": true,
           "description": "Adds click event listeners that change the open state.",
           "type": "boolean"
         },
         {
           "name": "enabled-dismiss",
+          "default": true,
           "description": "Adds listeners that dismiss (close) the floating element.",
           "type": "boolean"
         },
         {
           "name": "offset",
+          "default": 10,
           "description": "Offest displaces the floating element from its core placement along the specified axes.",
           "type": "number"
         },
-        {
-          "name": "portal-id",
-          "description": "Specifies the ID of the portal element where the tooltip should be rendered.\nThis can be useful for rendering the tooltip in a different part of the DOM, such as a modal or overlay.",
-          "type": "string"
-        },
-        {
-          "name": "visible",
-          "description": "If true, the component is shown.",
-          "type": "boolean"
-        },
-        {
-          "name": "on-visibility",
-          "description": "Function to control popover opening and closing.",
-          "type": "(visible: boolean) => void;"
-        },
-        {
-          "name": "inverted",
-          "description": "Specifies whether the color scheme should be inverted",
-          "type": "boolean"
-        },
-        {
-          "name": "padding",
-          "description": "Specifies the padding for the tooltip\n\n- base\n- none",
-          "type": "string",
-          "values": [
-            {
-              "name": "base"
-            },
-            {
-              "name": "none"
-            }
-          ]
-        },
         {
           "name": "position",
+          "default": "bottom",
           "description": "Position of the popover.\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",
           "type": "string",
           "values": [
@@ -1088,6 +1100,7 @@
         },
         {
           "name": "strategy",
+          "default": "fixed",
           "description": "CSS positioning strategy used for the tooltip.\n\n- `\"fixed\"` (default) positions the tooltip relative to the viewport,\n  so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the tooltip relative to the nearest positioned ancestor,\n  which can be useful when you want the tooltip to move with page content.\n\nUse `\"fixed\"` for tooltips that should remain visible on scroll,\nand `\"absolute\"` when tooltips need to be positioned within scrollable containers.\n\n- absolute\n- fixed",
           "type": "string",
           "values": [
@@ -1113,6 +1126,7 @@
         },
         {
           "name": "color",
+          "default": "$info",
           "description": "Specifies the color of the progress.\nThis prop accepts one of the following values: \"$info\", \"$success\" or \"$brand\"\n\n- $brand\n- $info\n- $success",
           "type": "string",
           "values": [
@@ -1141,6 +1155,7 @@
         },
         {
           "name": "color",
+          "default": "$info",
           "description": "Specifies the color of the progress.\nThis prop accepts one of the following values: \"$info\", \"$success\" or \"$brand\"\n\n- $brand\n- $info\n- $success",
           "type": "string",
           "values": [
@@ -1158,6 +1173,7 @@
         },
         {
           "name": "size",
+          "default": "large",
           "description": "Specifies the size of the progress indicator.\nThis prop accepts one of the following values: \"large\" or \"small\".\n\n- large\n- small",
           "type": "string",
           "values": [
@@ -1341,6 +1357,7 @@
       "attributes": [
         {
           "name": "disabled",
+          "default": false,
           "description": "Disables the button, disallowing user interaction.",
           "type": "boolean"
         },
@@ -1351,11 +1368,13 @@
         },
         {
           "name": "appearance",
+          "default": "brand",
           "description": "Defines the appearance variants for the button component.\nEach appearance variant corresponds to a specific background color, border color, and text color.\n\n- brand\n- danger\n- inverted\n- neutral\n- success\n- warning",
           "type": "string",
           "values": [
             {
-              "name": "brand"
+              "name": "brand",
+              "description": "(default)"
             },
             {
               "name": "danger"
@@ -1376,6 +1395,7 @@
         },
         {
           "name": "size",
+          "default": "large",
           "description": "Defines the size of the button component.\n\n- large\n- medium\n- small",
           "type": "string",
           "values": [
@@ -1393,6 +1413,7 @@
         },
         {
           "name": "variant",
+          "default": "solid",
           "description": "Defines the visual variant of the badge, affecting its background style, border and text.\n\n- outlined\n- solid\n- text\n- tonal",
           "type": "string",
           "values": [
@@ -1400,7 +1421,8 @@
               "name": "outlined"
             },
             {
-              "name": "solid"
+              "name": "solid",
+              "description": "(default)"
             },
             {
               "name": "text"
@@ -1412,11 +1434,13 @@
         },
         {
           "name": "type",
+          "default": "button",
           "description": "Defines the native button type.\nCan be 'button', 'submit', or 'reset'.\n\n- button\n- reset\n- submit",
           "type": "string",
           "values": [
             {
-              "name": "button"
+              "name": "button",
+              "description": "(default)"
             },
             {
               "name": "reset"
@@ -1506,6 +1530,7 @@
         },
         {
           "name": "disabled",
+          "default": false,
           "description": "Disables the radio button, disallowing user interaction.",
           "type": "boolean"
         }
@@ -1517,6 +1542,7 @@
       "attributes": [
         {
           "name": "lines",
+          "default": 2,
           "description": "Number of lines to be rendered for the user to input text",
           "type": "number"
         },
@@ -1535,6 +1561,7 @@
         },
         {
           "name": "disabled",
+          "default": false,
           "description": "Disables the Textarea, disallowing user interaction.",
           "type": "boolean"
         }
@@ -2920,6 +2947,7 @@
         },
         {
           "name": "line-height",
+          "default": "base",
           "description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$body-l\",\n\"md\": \"$body-m\",\n\"lg\": \"$body-s\",\n\"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
           "values": [
             {
@@ -5350,6 +5378,7 @@
         },
         {
           "name": "position",
+          "default": "left",
           "description": "Controls where the tab buttons are displayed. This prop accepts one of the following values: \"left\", \"center\", or \"right\".\n\n- center\n- left\n- right",
           "type": "string",
           "values": [
@@ -5378,6 +5407,7 @@
       "attributes": [
         {
           "name": "padding",
+          "default": "base",
           "description": "Specifies the padding inside the card.\nThis prop accepts one of the following values: \"none\" or \"base\".\n\n- base\n- none",
           "type": "string",
           "values": [
@@ -5392,6 +5422,7 @@
         },
         {
           "name": "background-color",
+          "default": "$primary",
           "description": "Specifies the background color of the card.\nThis prop accepts one of the following values: \"$transparent\", \"$background\", \"$primary\", or \"$secondary\"\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\nOr an object like:\n```\n{\n\"xs\": \"$background\",\n\"md\": \"$primary\",\n\"lg\": \"$secondary\",\n\"xl\": \"$transparent\"\n}\n```\n\n- $background\n- $primary\n- $secondary\n- $transparent",
           "values": [
             {

package/dist/index.d.ts

@@ -1,3 +1,88 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/** TemplateResult types */
+declare const HTML_RESULT = 1;
+declare const SVG_RESULT = 2;
+declare const MATHML_RESULT = 3;
+type ResultType = typeof HTML_RESULT | typeof SVG_RESULT | typeof MATHML_RESULT;
+/**
+ * The return type of the template tag functions, {@linkcode html} and
+ * {@linkcode svg} when it hasn't been compiled by @lit-labs/compiler.
+ *
+ * A `TemplateResult` object holds all the information about a template
+ * expression required to render it: the template strings, expression values,
+ * and type of template (html or svg).
+ *
+ * `TemplateResult` objects do not create any DOM on their own. To create or
+ * update DOM you need to render the `TemplateResult`. See
+ * [Rendering](https://lit.dev/docs/components/rendering) for more information.
+ *
+ */
+type UncompiledTemplateResult<T extends ResultType = ResultType> = {
+    ['_$litType$']: T;
+    strings: TemplateStringsArray;
+    values: unknown[];
+};
+/**
+ * The return type of the template tag functions, {@linkcode html} and
+ * {@linkcode svg}.
+ *
+ * A `TemplateResult` object holds all the information about a template
+ * expression required to render it: the template strings, expression values,
+ * and type of template (html or svg).
+ *
+ * `TemplateResult` objects do not create any DOM on their own. To create or
+ * update DOM you need to render the `TemplateResult`. See
+ * [Rendering](https://lit.dev/docs/components/rendering) for more information.
+ *
+ * In Lit 4, this type will be an alias of
+ * MaybeCompiledTemplateResult, so that code will get type errors if it assumes
+ * that Lit templates are not compiled. When deliberately working with only
+ * one, use either {@linkcode CompiledTemplateResult} or
+ * {@linkcode UncompiledTemplateResult} explicitly.
+ */
+type TemplateResult<T extends ResultType = ResultType> = UncompiledTemplateResult<T>;
+/**
+ * Object specifying options for controlling lit-html rendering. Note that
+ * while `render` may be called multiple times on the same `container` (and
+ * `renderBefore` reference node) to efficiently update the rendered content,
+ * only the options passed in during the first render are respected during
+ * the lifetime of renders to that unique `container` + `renderBefore`
+ * combination.
+ */
+interface RenderOptions {
+    /**
+     * An object to use as the `this` value for event listeners. It's often
+     * useful to set this to the host component rendering a template.
+     */
+    host?: object;
+    /**
+     * A DOM node before which to render content in the container.
+     */
+    renderBefore?: ChildNode | null;
+    /**
+     * Node used for cloning the template (`importNode` will be called on this
+     * node). This controls the `ownerDocument` of the rendered DOM, along with
+     * any inherited context. Defaults to the global `document`.
+     */
+    creationScope?: {
+        importNode(node: Node, deep?: boolean): Node;
+    };
+    /**
+     * The initial connected state for the top-level part being rendered. If no
+     * `isConnected` option is set, `AsyncDirective`s will be connected by
+     * default. Set to `false` if the initial render occurs in a disconnected tree
+     * and `AsyncDirective`s should see `isConnected === false` for their initial
+     * render. The `part.setConnected()` method must be used subsequent to initial
+     * render to change the connected state of the part.
+     */
+    isConnected?: boolean;
+}
+
 /**
  * A CSSResult or native CSSStyleSheet.
  *
@@ -829,49 +914,6 @@ declare abstract class ReactiveElement extends HTMLElement implements ReactiveCo
     protected firstUpdated(_changedProperties: PropertyValues): void;
 }
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-/**
- * Object specifying options for controlling lit-html rendering. Note that
- * while `render` may be called multiple times on the same `container` (and
- * `renderBefore` reference node) to efficiently update the rendered content,
- * only the options passed in during the first render are respected during
- * the lifetime of renders to that unique `container` + `renderBefore`
- * combination.
- */
-interface RenderOptions {
-    /**
-     * An object to use as the `this` value for event listeners. It's often
-     * useful to set this to the host component rendering a template.
-     */
-    host?: object;
-    /**
-     * A DOM node before which to render content in the container.
-     */
-    renderBefore?: ChildNode | null;
-    /**
-     * Node used for cloning the template (`importNode` will be called on this
-     * node). This controls the `ownerDocument` of the rendered DOM, along with
-     * any inherited context. Defaults to the global `document`.
-     */
-    creationScope?: {
-        importNode(node: Node, deep?: boolean): Node;
-    };
-    /**
-     * The initial connected state for the top-level part being rendered. If no
-     * `isConnected` option is set, `AsyncDirective`s will be connected by
-     * default. Set to `false` if the initial render occurs in a disconnected tree
-     * and `AsyncDirective`s should see `isConnected === false` for their initial
-     * render. The `part.setConnected()` method must be used subsequent to initial
-     * render to change the connected state of the part.
-     */
-    isConnected?: boolean;
-}
-
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -16151,14 +16193,17 @@ interface DividerSprinkle {
     size?: string | Conditions<string>;
     /**
      * The **`type`** shorthand CSS property sets the line style for all four sides of an element's.
+     * @default solid
      */
     type?: AddDollar<DividerBorderStyle> | Conditions<AddDollar<DividerBorderStyle>>;
     /**
      * The **`thickness`** shorthand CSS property sets the width of an element's.
+     * @default $1
      */
     thickness?: AddDollar<keyof typeof dividerBorderWidthProperties> | Conditions<AddDollar<keyof typeof dividerBorderWidthProperties>>;
     /**
      * The **`color`** CSS property sets an element's color.
+     * @default $divider
      */
     color?: AddDollar<keyof typeof borderColorProperties> | Conditions<AddDollar<keyof typeof borderColorProperties>>;
 }
@@ -16337,7 +16382,7 @@ declare const badgeStyles: {
         };
         /**
          * Specifies the size of the badge, controlling its dimensions.
-         * @defaiult medium
+         * @default medium
          */
         size: {
             large: {
@@ -16365,7 +16410,7 @@ declare const badgeStyles: {
         };
         /**
          * Defines the visual variant of the badge, affecting its background style.
-         * @defaiult solid
+         * @default solid
          */
         variant: {
             solid: {};
@@ -16395,6 +16440,7 @@ declare const buttonStyles: {
         /**
          * Defines the appearance variants for the button component.
          * Each appearance variant corresponds to a specific background color, border color, and text color.
+         * @default brand
          */
         appearance: {
             brand: {
@@ -16430,7 +16476,7 @@ declare const buttonStyles: {
         };
         /**
          * Defines the size of the button component.
-         * @default "large"
+         * @default large
          */
         size: {
             large: {
@@ -16454,6 +16500,7 @@ declare const buttonStyles: {
         };
         /**
          * Defines the visual variant of the badge, affecting its background style, border and text.
+         * @default solid
          */
         variant: {
             solid: {
@@ -16694,6 +16741,7 @@ declare const styles: {
     tooltip: RuntimeFn<{
         /**
          * Specifies whether the color scheme should be inverted
+         * @default false
          */
         inverted: {
             true: {
@@ -16707,6 +16755,7 @@ declare const styles: {
         };
         /**
          * Specifies the padding for the tooltip
+         * @default base
          */
         padding: {
             base: {
@@ -16781,6 +16830,7 @@ type AvatarProps = AvatarTypings & AvatarVariants;
 interface DividerProps extends DividerSprinkle {
     /**
      * The direction of the Divider.
+     * @default horizontal
      */
     direction?: "vertical" | "horizontal";
 }
@@ -17050,13 +17100,13 @@ declare global {
     }
 }
 /**
- * ## Rarui Tooltip
+ * ## Rarui Tootip
  * ---
- * A Divider is a thin line used to separate or group content in lists and layouts.
+ * Tooltips are informative, specific, and action-oriented text labels that provide contextual support
  *
- * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/divider) for more details.
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/tooltip) for more details.
  */
-type TooltipProperties = Partial<TooltipProps> & {
+type TooltipProperties = Partial<Omit<TooltipProps, "visible" | "onVisibility" | "portalId">> & {
     /**
      * Position of the popover.
      * @default bottom
@@ -17078,10 +17128,10 @@ type TooltipProperties = Partial<TooltipProps> & {
 };
 
 declare class RaruiTooltip extends LitElement {
+    arrow: TooltipProperties["arrow"];
     padding: TooltipProperties["padding"];
     offset: TooltipProperties["offset"];
     inverted: TooltipProperties["inverted"];
-    arrow: TooltipProperties["arrow"];
     enabledDismiss: TooltipProperties["enabledDismiss"];
     enabledClick: TooltipProperties["enabledClick"];
     enabledHover: TooltipProperties["enabledHover"];
@@ -17168,18 +17218,18 @@ type ButtonProperties = Partial<ButtonProps> & {
     /**
      * Defines the native button type.
      * Can be 'button', 'submit', or 'reset'.
-     * @default 'button'
+     * @default button
      */
     type?: "button" | "submit" | "reset";
 };
 
 declare class RaruiButton extends LitElement {
-    full: ButtonProperties["full"];
-    size: ButtonProperties["size"];
     type: ButtonProperties["type"];
+    size: ButtonProperties["size"];
     variant: ButtonProperties["variant"];
-    disabled: ButtonProperties["disabled"];
     appearance: ButtonProperties["appearance"];
+    disabled: ButtonProperties["disabled"];
+    full: ButtonProperties["full"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }