ionbase-ui 0.25.0 → 0.27.0

package/dist/meta/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "usage": "Pick a component here, then read dist/meta/<Name>.json for its full contract.",
   "hooks": [
     "useToast"
@@ -97,11 +97,51 @@
         "shape": [
           "circle",
           "square"
+        ],
+        "topIndicator": [
+          "neutral",
+          "primary",
+          "success",
+          "warning",
+          "error",
+          "information"
+        ],
+        "bottomIndicator": [
+          "neutral",
+          "primary",
+          "success",
+          "warning",
+          "error",
+          "information"
         ]
       },
       "detail": "dist/meta/Avatar.json",
       "hasIntent": true
     },
+    "AvatarGradient": {
+      "summary": "Avatar's initials-only sibling: a lit, bevelled disc in one of eight colours, for people with no photo.",
+      "status": "stable",
+      "variants": {
+        "size": [
+          "sm",
+          "md",
+          "lg",
+          "mini"
+        ],
+        "color": [
+          "slate",
+          "blue",
+          "violet",
+          "pink",
+          "orange",
+          "green",
+          "red",
+          "light"
+        ]
+      },
+      "detail": "dist/meta/AvatarGradient.json",
+      "hasIntent": true
+    },
     "AvatarGroup": {
       "summary": "Overlapping Avatars with a `+N` overflow, for showing several people in one row's width.",
       "status": "stable",

package/dist/meta/patterns/index.json

@@ -1,6 +1,6 @@
 {
   "package": "ionbase-ui",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "usage": "A pattern is a documented composition of components, not a component. Read one here, then read the contracts of what it composes.",
   "patterns": {
     "DataTable": {

package/dist/styles/avatar-gradient.css

@@ -0,0 +1,226 @@
+/*
+ * Avatar Gradient
+ *
+ * Measured from Figma `Avatar Gradient` (1054:305). Circle only — the set has
+ * no Shape axis, because a gradient this directional does not survive a corner.
+ *
+ * Sizes and the type ramp are Avatar's, including regular weight at Mini:
+ *
+ *   mini    24   type 12/18 regular
+ *   small   32   type 14/20 medium
+ *   medium  40   type 16/24 medium
+ *   large   48   type 20/32 medium
+ *
+ * EVERY GRADIENT IS A PAIR ALREADY IN THE PALETTE
+ *
+ * `--color-<hue>-500` to `--color-<hue>-600`, and `light` is gray 100 to 200.
+ * Nothing here needed a new token, which is worth stating because the opposite
+ * would have been the expensive outcome: eight bespoke gradient tokens that
+ * Figma owns and this repo could only copy.
+ *
+ * The middle stop is the arithmetic midpoint of the two ends, sitting at 60%
+ * rather than 50%. That offset is the whole shape of it — a plain two-stop
+ * gradient puts the midpoint at 50% and reads flatter. `color-mix` is how the
+ * midpoint stays derived from the pair instead of being a third literal, and
+ * it is also the only way to write it at all: `color-no-hex` forbids the hex,
+ * and there is no token for a value halfway between two tokens.
+ */
+.ion-avatar-gradient {
+  --ion-avatar-gradient-size: var(--spacing-40);
+  --ion-avatar-gradient-font-size: var(--type-body);
+  --ion-avatar-gradient-line-height: var(--type-body-line-height);
+  --ion-avatar-gradient-font-weight: var(--font-weight-medium);
+
+  /* Slate, which is also the block default — Figma's default variant. */
+  --ion-avatar-gradient-from: var(--color-gray-500);
+  --ion-avatar-gradient-to: var(--color-gray-600);
+
+  /*
+   * White, from the primitive ramp rather than `--text-on-color`.
+   *
+   * NOT AN OVERSIGHT, AND DO NOT "FIX" IT TO THE SEMANTIC TOKEN. The surface
+   * under this text is built from primitives, so it does not theme; the dark
+   * theme flips `--text-on-color` to black, which would put black initials on
+   * an unchanged mid-blue disc. A foreground has to theme exactly as much as
+   * the background it sits on, and this one sits on a background that does not.
+   */
+  --ion-avatar-gradient-text: var(--color-base-white);
+
+  /*
+   * The sheen: a white radial highlight low and centre, over the linear
+   * gradient. Identical in proportion at all four sizes — Figma expresses it as
+   * a userSpaceOnUse radial scaled per size, and the ratios come out the same
+   * to three decimals, so it is written once as percentages.
+   */
+  --ion-avatar-gradient-sheen: 18%;
+  --ion-avatar-gradient-sheen-mid: 3.6%;
+
+  /*
+   * Bevel and lift.
+   *
+   * A LOCAL, BECAUSE A RAW COLOUR IN A `box-shadow` DECLARATION IS BANNED — and
+   * the ban is right. Its reason is that a raw colour is a place dark mode has
+   * to be fixed by hand, once per occurrence; naming it here makes this file
+   * exactly one such place instead of five, which is the same trade
+   * `elevation.css` makes for the shared ramp. These are local Figma effects,
+   * not effect STYLES, so they are not in that ramp and cannot be: the exporter
+   * only sees named styles, and there is nothing here for it to name.
+   *
+   * All three offsets are derived from the box rather than written four times:
+   * Figma scales the effect with the component, so the arithmetic IS the
+   * design. S/24 and S/12 for the inner shade, S/48 for the top highlight, and
+   * S/16 and S/6 for the drop.
+   */
+  --ion-avatar-gradient-elevation:
+    inset 0 calc(-1 * var(--ion-avatar-gradient-size) / 24)
+      calc(var(--ion-avatar-gradient-size) / 12) 0 rgb(0 0 0 / 12%),
+    inset 0 calc(var(--ion-avatar-gradient-size) / 48)
+      calc(var(--ion-avatar-gradient-size) / 48 * 1.4) 0 rgb(255 255 255 / 24%),
+    0 calc(var(--ion-avatar-gradient-size) / 16)
+      calc(var(--ion-avatar-gradient-size) / 6) 0 rgb(13 15 23 / 12%);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  width: var(--ion-avatar-gradient-size);
+  height: var(--ion-avatar-gradient-size);
+  border-radius: var(--radius-full);
+  color: var(--ion-avatar-gradient-text);
+
+  /*
+   * The flat colour under the gradient is the `from` end, and that choice is
+   * load-bearing twice over. It is the fallback if `background-image` never
+   * paints, and it is the lightest part of the disc — so it is also the worst
+   * case for white text, which is what makes `verify-contrast` measure the
+   * pairing that actually needs measuring rather than a flattering one.
+   */
+  background-color: var(--ion-avatar-gradient-from);
+  background-image:
+    radial-gradient(
+      55.556% 64.103% at 50% 70.513%,
+      rgb(255 255 255 / var(--ion-avatar-gradient-sheen)) 0%,
+      rgb(255 255 255 / var(--ion-avatar-gradient-sheen-mid)) 60%,
+      rgb(255 255 255 / 0%) 100%
+    ),
+    linear-gradient(
+      180deg,
+      var(--ion-avatar-gradient-from) 0%,
+      color-mix(
+          in srgb,
+          var(--ion-avatar-gradient-from),
+          var(--ion-avatar-gradient-to)
+        )
+        60%,
+      var(--ion-avatar-gradient-to) 100%
+    );
+  box-shadow: var(--ion-avatar-gradient-elevation);
+  font-family: var(--font-family-sans);
+  font-size: var(--ion-avatar-gradient-font-size);
+  line-height: var(--ion-avatar-gradient-line-height);
+  font-weight: var(--ion-avatar-gradient-font-weight);
+  user-select: none;
+}
+
+.ion-avatar-gradient--mini {
+  --ion-avatar-gradient-size: var(--spacing-24);
+  --ion-avatar-gradient-font-size: var(--type-caption);
+  --ion-avatar-gradient-line-height: var(--type-caption-line-height);
+  --ion-avatar-gradient-font-weight: var(--font-weight-regular);
+}
+
+.ion-avatar-gradient--sm {
+  --ion-avatar-gradient-size: var(--spacing-32);
+  --ion-avatar-gradient-font-size: var(--type-body-sm);
+  --ion-avatar-gradient-line-height: var(--type-body-sm-line-height);
+}
+
+.ion-avatar-gradient--lg {
+  --ion-avatar-gradient-size: var(--spacing-48);
+  --ion-avatar-gradient-font-size: var(--type-body-lg);
+  --ion-avatar-gradient-line-height: var(--type-body-lg-line-height);
+}
+
+/*
+ * The eight colours. Each declares its own `color` and `background-color`
+ * rather than inheriting them from the block: the contrast gate pairs what one
+ * rule declares, and a colour it has to find on a different scope resolves
+ * through the cascade to something that never renders together.
+ */
+.ion-avatar-gradient--slate,
+.ion-avatar-gradient--blue,
+.ion-avatar-gradient--violet,
+.ion-avatar-gradient--pink,
+.ion-avatar-gradient--orange,
+.ion-avatar-gradient--green,
+.ion-avatar-gradient--red {
+  color: var(--ion-avatar-gradient-text);
+  background-color: var(--ion-avatar-gradient-from);
+}
+
+.ion-avatar-gradient--slate {
+  --ion-avatar-gradient-from: var(--color-gray-500);
+  --ion-avatar-gradient-to: var(--color-gray-600);
+}
+
+.ion-avatar-gradient--blue {
+  --ion-avatar-gradient-from: var(--color-blue-500);
+  --ion-avatar-gradient-to: var(--color-blue-600);
+}
+
+.ion-avatar-gradient--violet {
+  --ion-avatar-gradient-from: var(--color-purple-500);
+  --ion-avatar-gradient-to: var(--color-purple-600);
+}
+
+.ion-avatar-gradient--pink {
+  --ion-avatar-gradient-from: var(--color-pink-500);
+  --ion-avatar-gradient-to: var(--color-pink-600);
+}
+
+.ion-avatar-gradient--orange {
+  --ion-avatar-gradient-from: var(--color-orange-500);
+  --ion-avatar-gradient-to: var(--color-orange-600);
+}
+
+.ion-avatar-gradient--green {
+  --ion-avatar-gradient-from: var(--color-green-500);
+  --ion-avatar-gradient-to: var(--color-green-600);
+}
+
+.ion-avatar-gradient--red {
+  --ion-avatar-gradient-from: var(--color-red-500);
+  --ion-avatar-gradient-to: var(--color-red-600);
+}
+
+/*
+ * Light is the odd one and gets dark text, a stronger sheen and a gentler
+ * bevel — Figma halves the shade to 5% and doubles the highlight to 50%,
+ * because the same values that read as depth on a saturated disc read as dirt
+ * on a near-white one.
+ *
+ * Its text is `--color-gray-900`, not `--text-default`, for exactly the reason
+ * the seven colours use `--color-base-white` rather than `--text-on-color`.
+ * The first pass used the semantic token here and the contrast gate caught it
+ * in the dark theme at 1.05:1 — `--text-default` themes to near-white while
+ * `--color-gray-100` underneath it does not, so the initials disappeared. A
+ * foreground has to theme exactly as much as the background it sits on.
+ */
+.ion-avatar-gradient--light {
+  --ion-avatar-gradient-from: var(--color-gray-100);
+  --ion-avatar-gradient-to: var(--color-gray-200);
+  --ion-avatar-gradient-text: var(--color-gray-900);
+  --ion-avatar-gradient-sheen: 32%;
+  --ion-avatar-gradient-sheen-mid: 6.4%;
+  --ion-avatar-gradient-elevation:
+    inset 0 calc(-1 * var(--ion-avatar-gradient-size) / 24)
+      calc(var(--ion-avatar-gradient-size) / 12) 0 rgb(0 0 0 / 5%),
+    inset 0 calc(var(--ion-avatar-gradient-size) / 48)
+      calc(var(--ion-avatar-gradient-size) / 48 * 1.4) 0 rgb(255 255 255 / 50%),
+    0 calc(var(--ion-avatar-gradient-size) / 16)
+      calc(var(--ion-avatar-gradient-size) / 6) 0 rgb(13 15 23 / 12%);
+
+  color: var(--ion-avatar-gradient-text);
+  background-color: var(--ion-avatar-gradient-from);
+}

package/dist/styles/avatar.css

@@ -1,52 +1,116 @@
 /*
  * Avatar
  *
- * Measured from Figma `Avatar` (77:22248) and `Avatar Group`.
+ * Measured from Figma `Avatar` (74:164) and `Avatar Group` (74:279).
  *
- *   mini    24   type 12/18   icon 12   square radius/xs
- *   small   32   type 14/20   icon 16   square radius/sm
- *   medium  40   type 16/24   icon 20   square radius/md
- *   large   48   type 20/32   icon 24   square radius/md
+ *   mini    24   type 12/18 regular   icon 12   square radius/xs
+ *   small   32   type 14/20 medium    icon 16   square radius/sm
+ *   medium  40   type 16/24 medium    icon 20   square radius/md
+ *   large   48   type 20/32 medium    icon 24   square radius/md
  *
  * Circle is radius/full at every size; square steps up with the box, which is
  * concentric-corner arithmetic rather than one shared corner.
  *
- * Surface is surface/muted with a 1px border/strong at every size and type —
- * the border is what separates overlapping avatars in a group, so it is not
- * decoration and must not be dropped.
+ * Two things here were wrong against Figma until the 2026-08-27 re-export, and
+ * both were invisible because they are one token apart from something plausible:
+ *
+ *   Large used `type/h5` (20/28). The style Figma applies is Body/Large
+ *   Emphasis (20/32). Same font-size, four pixels of leading apart.
+ *
+ *   Mini used font-weight/medium. Figma's Mini is the Caption style, which is
+ *   font-weight/regular. Every other size is Emphasis and stays medium.
+ *
+ * Surface and border depend on the Type variant, which is the other correction:
+ * Character and Icon sit on surface/muted behind border/strong, but Image sits
+ * on surface/placeholder behind border/subtle — a photo needs a quieter frame
+ * than an empty box does. The border is what separates overlapping avatars in a
+ * group, so it is not decoration and must not be dropped from either.
+ *
+ * THE ROOT DOES NOT CLIP, AND THAT IS LODAD-BEARING
+ *
+ * `.ion-avatar__media` carries the surface, the border and the `overflow` that
+ * crops the photo. The root carries only geometry. They cannot be the same box:
+ * an indicator sits in a corner that is OUTSIDE a circle's clip path, so a root
+ * that clipped the image would slice the indicator in half. Figma draws it the
+ * same way — an unclipped frame around a clipped `Media` child, with the ring
+ * and the indicators as siblings of it.
  */
 .ion-avatar {
   --ion-avatar-size: var(--spacing-40);
   --ion-avatar-radius: var(--radius-md);
   --ion-avatar-font-size: var(--type-body);
   --ion-avatar-line-height: var(--type-body-line-height);
+  --ion-avatar-font-weight: var(--font-weight-medium);
   --ion-avatar-icon: var(--icon-size-md);
+  --ion-avatar-surface: var(--surface-muted);
+  --ion-avatar-border: var(--border-strong);
+
+  /* Ring and indicator geometry, indexed by size the way everything else is. */
+  --ion-avatar-ring-width: var(--border-width-thick);
+  --ion-avatar-indicator-size: var(--spacing-14);
+
+  /*
+   * 1.5px, and it cannot be a token: the border ladder is 1 / 2 / 4 and Figma
+   * puts a half-step here so the 14px indicator keeps the same visual gap the
+   * 16px one gets from 2px. Written once, as a local, rather than inline —
+   * a raw length in a `border-width` declaration is a theming bug everywhere
+   * else in this system and the lint rule is right to say so.
+   */
+  --ion-avatar-indicator-ring: 1.5px;
+
+  /*
+   * The glyph inside the top indicator: 11 / 10 / 8 / 6 against a 16 / 14 / 12
+   * / 8 dot. Not a ratio and not a rung on the icon ladder — Figma tuned these
+   * four by eye, and the smallest is below anything `--icon-size-*` carries.
+   */
+  --ion-avatar-indicator-icon: 10px;
 
+  position: relative;
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
-  overflow: hidden;
   width: var(--ion-avatar-size);
   height: var(--ion-avatar-size);
-  background-color: var(--surface-muted);
-  border-style: solid;
-  border-width: var(--border-width-default);
-  border-color: var(--border-strong);
   border-radius: var(--ion-avatar-radius);
   color: var(--text-tertiary);
   font-family: var(--font-family-sans);
   font-size: var(--ion-avatar-font-size);
   line-height: var(--ion-avatar-line-height);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--ion-avatar-font-weight);
   user-select: none;
 }
 
+.ion-avatar__media {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: var(--ion-avatar-surface);
+  border-style: solid;
+  border-width: var(--border-width-default);
+  border-color: var(--ion-avatar-border);
+  border-radius: inherit;
+}
+
+/* Figma's `Type=Image`: a photo gets the placeholder surface and the quiet
+ * border. Applied from `showImage`, not from `src`, so a 404 that falls back
+ * to initials also falls back to the Character variant's frame. */
+.ion-avatar--image {
+  --ion-avatar-surface: var(--surface-placeholder);
+  --ion-avatar-border: var(--border-subtle);
+}
+
 .ion-avatar--mini {
   --ion-avatar-size: var(--spacing-24);
   --ion-avatar-radius: var(--radius-xs);
   --ion-avatar-font-size: var(--type-caption);
   --ion-avatar-line-height: var(--type-caption-line-height);
+  --ion-avatar-font-weight: var(--font-weight-regular);
+  --ion-avatar-ring-width: var(--border-width-default);
+  --ion-avatar-indicator-size: var(--spacing-8);
+  --ion-avatar-indicator-ring: var(--border-width-default);
+  --ion-avatar-indicator-icon: 6px;
 
   /*
    * `2xs`, not `xs` — this is 12 and must stay 12.
@@ -64,21 +128,28 @@
   --ion-avatar-font-size: var(--type-body-sm);
   --ion-avatar-line-height: var(--type-body-sm-line-height);
   --ion-avatar-icon: var(--icon-size-sm);
+  --ion-avatar-ring-width: var(--border-width-default);
+  --ion-avatar-indicator-size: var(--spacing-12);
+  --ion-avatar-indicator-ring: var(--border-width-default);
+  --ion-avatar-indicator-icon: 8px;
 }
 
 /* Large shares Medium's corner — the square ladder stops climbing at radius/md. */
 .ion-avatar--lg {
   --ion-avatar-size: var(--spacing-48);
-  --ion-avatar-font-size: var(--type-h5);
-  --ion-avatar-line-height: var(--type-h5-line-height);
+  --ion-avatar-font-size: var(--type-body-lg);
+  --ion-avatar-line-height: var(--type-body-lg-line-height);
   --ion-avatar-icon: var(--icon-size-lg);
+  --ion-avatar-indicator-size: var(--spacing-16);
+  --ion-avatar-indicator-ring: var(--border-width-thick);
+  --ion-avatar-indicator-icon: 11px;
 }
 
 .ion-avatar--circle {
   --ion-avatar-radius: var(--radius-full);
 }
 
-/* The image fills the box and is cropped by `overflow: hidden` on the parent,
+/* The image fills the box and is cropped by `overflow: hidden` on the media,
  * so it inherits the corner without repeating it. */
 .ion-avatar__image {
   width: 100%;
@@ -99,6 +170,101 @@
   height: var(--ion-avatar-icon);
 }
 
+/*
+ * Ring — Figma's `Show Ring`.
+ *
+ * Drawn INSIDE the avatar's own edge, over the media, at the same size as the
+ * box. Not an `outline` and not a `box-shadow` spread: both of those sit
+ * outside the element and would change the avatar's footprint, which breaks the
+ * group's overlap arithmetic and any layout that measured the avatar. Figma
+ * draws a same-size overlay, so this does too.
+ */
+.ion-avatar__ring {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-style: solid;
+  border-width: var(--ion-avatar-ring-width);
+  border-color: var(--surface-primary);
+  border-radius: inherit;
+}
+
+/*
+ * Indicators — Figma's `Show Top Indicator` / `Show Bottom Indicator`, each an
+ * instance of the `Status Indicator` component (1008:1764).
+ *
+ * Both sit flush in a corner: Figma's `left` is size minus indicator at every
+ * size and shape, which is `right: 0`. The border is `ring/offset`, so the dot
+ * reads as separate from the photo underneath it rather than as part of it —
+ * that is why it is a border and not a gap.
+ */
+.ion-avatar__indicator {
+  position: absolute;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ion-avatar-indicator-size);
+  height: var(--ion-avatar-indicator-size);
+  border-style: solid;
+  border-width: var(--ion-avatar-indicator-ring);
+  border-color: var(--ring-offset);
+  border-radius: var(--radius-full);
+}
+
+.ion-avatar__indicator--top {
+  top: 0;
+}
+
+.ion-avatar__indicator--bottom {
+  bottom: 0;
+}
+
+.ion-avatar__indicator svg {
+  width: var(--ion-avatar-indicator-icon);
+  height: var(--ion-avatar-indicator-icon);
+}
+
+/*
+ * The six intents, spelled the same way Badge and Alert spell them. Colour and
+ * surface are declared together per intent rather than hoisted to the block:
+ * the contrast gate pairs what one rule declares, and a foreground it has to
+ * find on a different element resolves to the block's `--text-tertiary` and
+ * measures a pairing that never renders.
+ */
+.ion-avatar__indicator--neutral,
+.ion-avatar__indicator--primary,
+.ion-avatar__indicator--success,
+.ion-avatar__indicator--warning,
+.ion-avatar__indicator--error,
+.ion-avatar__indicator--information {
+  color: var(--text-on-color);
+}
+
+.ion-avatar__indicator--neutral {
+  background-color: var(--surface-inverse);
+}
+
+.ion-avatar__indicator--primary {
+  background-color: var(--surface-primary);
+}
+
+.ion-avatar__indicator--success {
+  background-color: var(--surface-success);
+}
+
+.ion-avatar__indicator--warning {
+  background-color: var(--surface-warning);
+}
+
+.ion-avatar__indicator--error {
+  background-color: var(--surface-error);
+}
+
+.ion-avatar__indicator--information {
+  background-color: var(--surface-information);
+}
+
 /*
  * Avatar Group
  *

package/dist/styles/index.css

@@ -39,6 +39,7 @@
 @import url('./toggle.css');
 @import url('./menu.css');
 @import url('./avatar.css');
+@import url('./avatar-gradient.css');
 @import url('./header.css');
 @import url('./logo.css');
 @import url('./table.css');

package/llms.txt

@@ -2,7 +2,7 @@
 
 > IonBase is a React design system for enterprise SaaS, built to be consumed by an agent rather than read by a developer. Every component ships a machine-readable contract carrying the judgement a type signature cannot: when to use it, what to use instead, the anti-patterns, and what it guarantees for accessibility versus what it requires of you.
 
-Version 0.25.0. 44 components.
+Version 0.27.0. 45 components.
 
 ## Read these, in this order
 
@@ -13,7 +13,7 @@ Both are importable: `ionbase-ui/meta/index` and `ionbase-ui/meta/<Name>.json`.
 
 ## Components
 
-`AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGroup`, `Badge`, `Button`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `ConfidenceIndicator`, `Divider`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `PhoneInput`, `Popover`, `Radio`, `RadioGroup`, `ScrollProgress`, `Select`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Toast`, `ToastProvider`, `Toggle`, `Tooltip`
+`AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Button`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `ConfidenceIndicator`, `Divider`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `PhoneInput`, `Popover`, `Radio`, `RadioGroup`, `ScrollProgress`, `Select`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Toast`, `ToastProvider`, `Toggle`, `Tooltip`
 
 ## Patterns
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",