ionbase-ui 0.26.0 → 0.27.0

package/dist/components/Avatar.d.ts

@@ -1,6 +1,12 @@
 import React from 'react';
 export type AvatarSize = 'mini' | 'sm' | 'md' | 'lg';
 export type AvatarShape = 'circle' | 'square';
+/**
+ * The intents Figma's `Status Indicator` draws. Same six words as `BadgeIntent`
+ * and `AlertIntent`, and deliberately so — an indicator is the smallest way this
+ * system says "success", and it should not say it differently here.
+ */
+export type AvatarIndicatorIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'information';
 export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Matches the Figma `Size` variant: Mini 24, Small 32, Medium 40, Large 48. */
     size?: AvatarSize;
@@ -18,6 +24,25 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
     initials?: string;
     /** Figma's `Type=Icon`. Rendered when there is neither `src` nor `initials`. */
     icon?: React.ReactNode;
+    /** Figma's `Show Ring` — a 1px/2px brand ring drawn inside the avatar's edge. */
+    ring?: boolean;
+    /**
+     * Figma's `Show Top Indicator`, as the intent of the `Status Indicator`
+     * instance it holds. Top-right, and it carries a glyph: this is the corner
+     * that says something was verified or requested, not who is online.
+     */
+    topIndicator?: AvatarIndicatorIntent;
+    /** Replaces the top indicator's default check glyph. */
+    topIndicatorIcon?: React.ReactNode;
+    /** Names the top indicator for assistive tech. Without it the mark is decorative. */
+    topIndicatorLabel?: string;
+    /**
+     * Figma's `Show Bottom Indicator`. Bottom-right and glyphless — the presence
+     * dot.
+     */
+    bottomIndicator?: AvatarIndicatorIntent;
+    /** Names the bottom indicator for assistive tech. Colour alone is not a status. */
+    bottomIndicatorLabel?: string;
 }
 /**
  * Avatar picks its content the way Figma's `Type` variant does, but by
@@ -30,6 +55,14 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
  *
  * It is a `<span>`, not a `<div>`, so it can sit inline beside text without the
  * caller fighting a block element.
+ *
+ * THE MEDIA IS A CHILD, AND IT HAS TO BE
+ *
+ * The box that clips the image is `.ion-avatar__media`, not the root. The root
+ * cannot clip: a corner indicator sits outside a circle's clip path and would
+ * be sliced in half by the `overflow: hidden` that crops the photo. Figma
+ * draws exactly this — an unclipped frame holding a clipped `Media` child and
+ * the indicators as its siblings.
  */
 export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/components/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACxE,gFAAgF;IAChF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;yBACqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,MAAM,qFA6DlB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,yFAoDvB,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAC/B,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAE1E,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACxE,gFAAgF;IAChF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;yBACqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,iFAAiF;IACjF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,qFAAqF;IACrF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,mFAAmF;IACnF,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAgBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,qFAiIlB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,yFAoDvB,CAAC"}

package/dist/components/Avatar.js

@@ -1,6 +1,12 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useState } from 'react';
+/**
+ * Figma's check, from the `Status Indicator` icon slot. Inlined for the same
+ * reason as Checkbox's mark: it is part of the indicator, not a slot a caller
+ * fills — and a caller who wants a different glyph passes `topIndicatorIcon`.
+ */
+const IndicatorCheck = () => (_jsx("svg", { viewBox: "0 0 11 11", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M8.53878 2.70544C8.7015 2.54272 8.96525 2.54272 9.12797 2.70544C9.29063 2.86816 9.29067 3.13193 9.12797 3.29463L4.54464 7.87796C4.38194 8.04065 4.11817 8.04061 3.95545 7.87796L1.87211 5.79463C1.7094 5.63192 1.70941 5.36816 1.87211 5.20544C2.03483 5.04272 2.29859 5.04272 2.46131 5.20544L4.25004 6.99417L8.53878 2.70544Z", fill: "currentColor" }) }));
 /**
  * Avatar picks its content the way Figma's `Type` variant does, but by
  * precedence rather than by a prop: image, then initials, then icon. A caller
@@ -12,8 +18,16 @@ import React, { forwardRef, useState } from 'react';
  *
  * It is a `<span>`, not a `<div>`, so it can sit inline beside text without the
  * caller fighting a block element.
+ *
+ * THE MEDIA IS A CHILD, AND IT HAS TO BE
+ *
+ * The box that clips the image is `.ion-avatar__media`, not the root. The root
+ * cannot clip: a corner indicator sits outside a circle's clip path and would
+ * be sliced in half by the `overflow: hidden` that crops the photo. Figma
+ * draws exactly this — an unclipped frame holding a clipped `Media` child and
+ * the indicators as its siblings.
  */
-export const Avatar = forwardRef(({ size = 'md', shape = 'circle', src, alt, initials, icon, className, ...rest }, ref) => {
+export const Avatar = forwardRef(({ size = 'md', shape = 'circle', src, alt, initials, icon, ring = false, topIndicator, topIndicatorIcon, topIndicatorLabel, bottomIndicator, bottomIndicatorLabel, className, ...rest }, ref) => {
     const [imgFailed, setImgFailed] = useState(false);
     // Reset failure when `src` changes — adjust state during render rather than
     // an effect, so a recovered URL shows the image on the same update.
@@ -27,12 +41,37 @@ export const Avatar = forwardRef(({ size = 'md', shape = 'circle', src, alt, ini
         'ion-avatar',
         size !== 'md' ? `ion-avatar--${size}` : '',
         shape === 'circle' ? 'ion-avatar--circle' : '',
+        // Figma's Image variant sits on surface/placeholder behind a border/subtle
+        // rather than the muted surface the other two use. It follows what is
+        // actually painted, so a 404 that falls back to initials looks like the
+        // Character variant it became.
+        showImage ? 'ion-avatar--image' : '',
         className || '',
     ]
         .filter(Boolean)
         .join(' ');
-    const label = alt ?? initials;
-    return (_jsx("span", { ...rest, ref: ref, className: classNames, ...(!showImage && label ? { role: 'img', 'aria-label': label } : {}), children: showImage ? (_jsx("img", { className: "ion-avatar__image", src: src, alt: label ?? '', onError: () => setImgFailed(true) })) : initials ? (_jsx("span", { "aria-hidden": "true", children: initials })) : icon ? (_jsx("span", { className: "ion-avatar__icon", "aria-hidden": "true", children: icon })) : null }));
+    const name = alt ?? initials;
+    const indicatorNames = [topIndicatorLabel, bottomIndicatorLabel].filter(Boolean);
+    /*
+     * WHERE THE INDICATOR'S NAME GOES DEPENDS ON WHETHER THERE IS AN IMAGE, AND
+     * THAT IS NOT AN INCONSISTENCY.
+     *
+     * With no image the root takes `role="img"`, which makes it a leaf: nothing
+     * inside it is exposed, so hidden text in an indicator would be announced
+     * to nobody. The names have to be folded into the root's own label.
+     *
+     * With an image the root has no role and the `<img>` carries the name, so
+     * the indicators can say their own piece as visually hidden text.
+     */
+    const rootLabel = [name, ...indicatorNames].filter(Boolean).join(', ');
+    const renderIndicator = (place, intent, label, children) => (_jsxs("span", { className: `ion-avatar__indicator ion-avatar__indicator--${place} ion-avatar__indicator--${intent}`, ...(label && showImage ? {} : { 'aria-hidden': true }), children: [children, label && showImage ? (_jsx("span", { className: "ion-visually-hidden", children: label })) : null] }));
+    return (_jsxs("span", { ...rest, ref: ref, className: classNames, ...(!showImage && rootLabel
+            ? { role: 'img', 'aria-label': rootLabel }
+            : {}), children: [_jsx("span", { className: "ion-avatar__media", children: showImage ? (_jsx("img", { className: "ion-avatar__image", src: src, alt: name ?? '', onError: () => setImgFailed(true) })) : initials ? (_jsx("span", { "aria-hidden": "true", children: initials })) : icon ? (_jsx("span", { className: "ion-avatar__icon", "aria-hidden": "true", children: icon })) : null }), ring ? _jsx("span", { className: "ion-avatar__ring", "aria-hidden": "true" }) : null, topIndicator
+                ? renderIndicator('top', topIndicator, topIndicatorLabel, topIndicatorIcon ?? _jsx(IndicatorCheck, {}))
+                : null, bottomIndicator
+                ? renderIndicator('bottom', bottomIndicator, bottomIndicatorLabel, null)
+                : null] }));
 });
 Avatar.displayName = 'Avatar';
 /**

package/dist/components/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAwBpD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,QAAQ,EAChB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,4EAA4E;IAC5E,oEAAoE;IACpE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC5C,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;QACpB,UAAU,CAAC,GAAG,CAAC,CAAC;QAChB,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAED,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IAC7C,MAAM,UAAU,GAAG;QACjB,YAAY;QACZ,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;QAC9C,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,KAAK,GAAG,GAAG,IAAI,QAAQ,CAAC;IAE9B,OAAO,CACL,kBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,KAGjB,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAEpE,SAAS,CAAC,CAAC,CAAC,CACX,cACE,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,IAAI,EAAE,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GACjC,CACH,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,8BAAkB,MAAM,YAAE,QAAQ,GAAQ,CAC3C,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,eAAM,SAAS,EAAC,kBAAkB,iBAAa,MAAM,YAClD,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,GACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAU9B;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EACpE,GAAG,EACH,EAAE;IACF,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAC5E,MAAM,KAAK,GAAG,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC9D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAE7C,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACnC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YAC1B,OAAO,KAAK,CAAC,GAAG,IAAI,IAAI;gBACtB,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;QAC5C,CAAC;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAoB,CAAC;QACzC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAwC,EAAE;YAClE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,IAAI;YACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK;YAC3B,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC;SACpB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;QACjB,KAAK,CAAC,IAAI,CACR,KAAC,MAAM,IAEL,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,IAAI,QAAQ,EAAE,EACxB,GAAG,EAAE,GAAG,QAAQ,OAAO,IAJnB,YAAY,CAKhB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,iBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,kBAAkB;YAClB,qBAAqB,IAAI,EAAE;YAC3B,SAAS,IAAI,EAAE;SAChB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,YAEX,KAAK,GACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"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"}

package/dist/components/AvatarGradient.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { AvatarSize } from './Avatar.js';
+/**
+ * Figma's `Color` axis. Seven hues plus `light`, and every one of them is a
+ * `--color-<hue>-500` -> `--color-<hue>-600` pair — the gradient needed no new
+ * token, which is the tell that it was drawn from the palette rather than
+ * beside it.
+ */
+export type AvatarGradientColor = 'slate' | 'blue' | 'violet' | 'pink' | 'orange' | 'green' | 'red' | 'light';
+export interface AvatarGradientProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Matches the Figma `Size` variant: Mini 24, Small 32, Medium 40, Large 48. */
+    size?: AvatarSize;
+    /** Matches the Figma `Color` variant. */
+    color?: AvatarGradientColor;
+    /** The two letters. Figma's `Initials`. */
+    initials?: string;
+    /**
+     * Describes the person, not the picture — "Ada Lovelace", not "avatar".
+     * Without it the initials are announced as the letters they are, which is
+     * not a name.
+     */
+    alt?: string;
+}
+/**
+ * AvatarGradient is Avatar's initials-only sibling: a lit, bevelled disc for
+ * people who have no photo.
+ *
+ * IT IS A SEPARATE COMPONENT BECAUSE FIGMA DRAWS A SEPARATE COMPONENT, AND THE
+ * AXES ARE THE ARGUMENT
+ *
+ * It has `Color`, which Avatar does not. It has no `Shape`, because a gradient
+ * this directional only reads on a circle. It has no `Type`, because there is
+ * no image and no icon to fall back to — the initials are the whole content.
+ * Folding it into Avatar would mean a `color` prop that does nothing on three
+ * of Avatar's four states and a `shape` prop that this one has to reject.
+ *
+ * There is no `icon` and no `src` fallback here on purpose. If you have a
+ * photo, or nothing at all to put in the circle, that is `Avatar`.
+ */
+export declare const AvatarGradient: React.ForwardRefExoticComponent<AvatarGradientProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=AvatarGradient.d.ts.map

package/dist/components/AvatarGradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGradient.d.ts","sourceRoot":"","sources":["../../src/components/AvatarGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAC7B,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAChF,gFAAgF;IAChF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,6FA6B1B,CAAC"}

package/dist/components/AvatarGradient.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * AvatarGradient is Avatar's initials-only sibling: a lit, bevelled disc for
+ * people who have no photo.
+ *
+ * IT IS A SEPARATE COMPONENT BECAUSE FIGMA DRAWS A SEPARATE COMPONENT, AND THE
+ * AXES ARE THE ARGUMENT
+ *
+ * It has `Color`, which Avatar does not. It has no `Shape`, because a gradient
+ * this directional only reads on a circle. It has no `Type`, because there is
+ * no image and no icon to fall back to — the initials are the whole content.
+ * Folding it into Avatar would mean a `color` prop that does nothing on three
+ * of Avatar's four states and a `shape` prop that this one has to reject.
+ *
+ * There is no `icon` and no `src` fallback here on purpose. If you have a
+ * photo, or nothing at all to put in the circle, that is `Avatar`.
+ */
+export const AvatarGradient = forwardRef(({ size = 'md', color = 'slate', initials, alt, className, ...rest }, ref) => {
+    const classNames = [
+        'ion-avatar-gradient',
+        size !== 'md' ? `ion-avatar-gradient--${size}` : '',
+        `ion-avatar-gradient--${color}`,
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const label = alt ?? initials;
+    return (_jsx("span", { ...rest, ref: ref, className: classNames, ...(label ? { role: 'img', 'aria-label': label } : {}), children: initials ? _jsx("span", { "aria-hidden": "true", children: initials }) : null }));
+});
+AvatarGradient.displayName = 'AvatarGradient';
+//# sourceMappingURL=AvatarGradient.js.map

package/dist/components/AvatarGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGradient.js","sourceRoot":"","sources":["../../src/components/AvatarGradient.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA2B1C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC,CACE,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,UAAU,GAAG;QACjB,qBAAqB;QACrB,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,wBAAwB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACnD,wBAAwB,KAAK,EAAE;QAC/B,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,KAAK,GAAG,GAAG,IAAI,QAAQ,CAAC;IAE9B,OAAO,CACL,kBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,KAGjB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAEtD,QAAQ,CAAC,CAAC,CAAC,8BAAkB,MAAM,YAAE,QAAQ,GAAQ,CAAC,CAAC,CAAC,IAAI,GACxD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/components/index.d.ts

@@ -21,7 +21,9 @@ export type { ToggleProps, ToggleSize, ToggleIntent } from './Toggle.js';
 export { Menu, MenuItem } from './Menu.js';
 export type { MenuProps, MenuItemProps } from './Menu.js';
 export { Avatar, AvatarGroup } from './Avatar.js';
-export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarShape, } from './Avatar.js';
+export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarShape, AvatarIndicatorIntent, } from './Avatar.js';
+export { AvatarGradient } from './AvatarGradient.js';
+export type { AvatarGradientProps, AvatarGradientColor, } from './AvatarGradient.js';
 export { Header } from './Header.js';
 export type { HeaderProps } from './Header.js';
 export { Logo, LogoMark } from './Logo.js';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/components/index.js

@@ -10,6 +10,7 @@ export { Radio, RadioGroup } from './Radio.js';
 export { Toggle } from './Toggle.js';
 export { Menu, MenuItem } from './Menu.js';
 export { Avatar, AvatarGroup } from './Avatar.js';
+export { AvatarGradient } from './AvatarGradient.js';
 export { Header } from './Header.js';
 export { Logo, LogoMark } from './Logo.js';
 export { Divider } from './Divider.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAOnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAOlD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAS5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMtE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAOnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQlD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAS5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMtE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/figma-descriptions.json

@@ -1,147 +1,152 @@
 {
-  "version": "0.26.0",
+  "version": "0.27.0",
   "begin": "───── CODE · ionbase-ui ─────",
   "end": "───── end code ─────",
   "blocks": {
     "21:461": {
       "figmaComponent": "Button",
       "component": "Button",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Button } from 'ionbase-ui';\n<Button variant=\"primary-brand\" size=\"sm\">Label</Button>\n\nPROPERTIES\n  Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Primary Soft=primary-soft, Secondary=secondary, Tertiary=tertiary, Destructive=destructive, Success=success\n  Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n  State → isDisabled (Disabled only)\n  Label → children\n  Leading Icon → startIcon\n  Trailing Icon → endIcon\n  Show Leading Icon → startIcon\n  Show Trailing Icon → endIcon\n\nNOTES\n  State: Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one.\n  Leading Icon: wrap in Icon; omit Icon's label, the button text names it\n  Trailing Icon: same\n  Show Leading Icon: an absent prop is the switch — React needs no Show boolean, so false means omit startIcon\n  Show Trailing Icon: same\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Button } from 'ionbase-ui';\n<Button variant=\"primary-brand\" size=\"sm\">Label</Button>\n\nPROPERTIES\n  Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Primary Soft=primary-soft, Secondary=secondary, Tertiary=tertiary, Destructive=destructive, Success=success\n  Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n  State → isDisabled (Disabled only)\n  Label → children\n  Leading Icon → startIcon\n  Trailing Icon → endIcon\n  Show Leading Icon → startIcon\n  Show Trailing Icon → endIcon\n\nNOTES\n  State: Default, Hover, Pressed and Focus are CSS and React Aria — :hover, :focus-visible, data-pressed — not props. Only Disabled is one.\n  Leading Icon: wrap in Icon; omit Icon's label, the button text names it\n  Trailing Icon: same\n  Show Leading Icon: an absent prop is the switch — React needs no Show boolean, so false means omit startIcon\n  Show Trailing Icon: same\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "623:151": {
       "figmaComponent": "Icon Button",
       "component": "Button",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Button } from 'ionbase-ui';\n<Button variant=\"primary-brand\" size=\"sm\" aria-label=\"…\" />\n\nPROPERTIES\n  Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Primary Soft=primary-soft, Secondary=secondary, Tertiary=tertiary, Destructive=destructive, Success=success\n  Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n  State → isDisabled (Disabled only)\n  Icon → startIcon\n\nNot a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.\n\nNOTES\n  State: as Button\n  Icon: with Icon's own label omitted — the Button's aria-label carries the name\n  Shape: Figma draws a square and a circle variant; code has no shape prop. A round icon button is a className, not an API.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Button } from 'ionbase-ui';\n<Button variant=\"primary-brand\" size=\"sm\" aria-label=\"…\" />\n\nPROPERTIES\n  Type → variant: Primary Brand=primary-brand, Primary Neutral=primary-neutral, Primary Soft=primary-soft, Secondary=secondary, Tertiary=tertiary, Destructive=destructive, Success=success\n  Size → size: Small=sm, Medium=md, Large=lg, XLarge=xl\n  State → isDisabled (Disabled only)\n  Icon → startIcon\n\nNot a separate component in code: an icon-only Button. It is the one case where aria-label is required, because there is no text to name it.\n\nNOTES\n  State: as Button\n  Icon: with Icon's own label omitted — the Button's aria-label carries the name\n  Shape: Figma draws a square and a circle variant; code has no shape prop. A round icon button is a className, not an API.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/button/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "80:275": {
       "figmaComponent": "Input",
       "component": "Input",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Input } from 'ionbase-ui';\n<Input size=\"lg\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Value → value\n  Leading Icon → leadingIcon\n  Trailing Icon → trailingIcon\n  Show Leading Icon → leadingIcon\n  Show Trailing Icon → trailingIcon\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis.\n  Value: or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value\n  Show Leading Icon: false means omit the prop\n  Show Trailing Icon: false means omit the prop\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/input/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Input } from 'ionbase-ui';\n<Input size=\"lg\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Value → value\n  Leading Icon → leadingIcon\n  Trailing Icon → trailingIcon\n  Show Leading Icon → leadingIcon\n  Show Trailing Icon → trailingIcon\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content. Disabled is isDisabled, Read-only is isReadOnly — both react-aria props rather than this axis.\n  Value: or defaultValue when uncontrolled; Figma's text is placeholder content, not necessarily a value\n  Show Leading Icon: false means omit the prop\n  Show Trailing Icon: false means omit the prop\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/input/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "80:372": {
       "figmaComponent": "Input/Phone",
       "component": "PhoneInput",
-      "block": "───── CODE · ionbase-ui ─────\nimport { PhoneInput } from 'ionbase-ui';\n<PhoneInput size=\"lg\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Dial Code → dialCode\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/phone-input/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { PhoneInput } from 'ionbase-ui';\n<PhoneInput size=\"lg\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Dial Code → dialCode\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/phone-input/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "82:379": {
       "figmaComponent": "Select",
       "component": "Select",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Select } from 'ionbase-ui';\n<Select size=\"lg\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Value → placeholder\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled\n  Value: Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/select/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Select } from 'ionbase-ui';\n<Select size=\"lg\" label=\"…\" />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  State → isInvalid (Invalid only)\n  Value → placeholder\n\nNOTES\n  State: Hover, Focus and Filled are CSS or content; Disabled is isDisabled\n  Value: Figma's text is the collapsed display value. In code that is `placeholder` when nothing is chosen; once something is, the label comes from the `options` array.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/select/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "87:350": {
       "figmaComponent": "Checkbox",
       "component": "Checkbox",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Checkbox } from 'ionbase-ui';\n<Checkbox size=\"sm\" intent=\"brand\">Label</Checkbox>\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n  State → isIndeterminate (Indeterminate, Indeterminate-disabled only)\n  Label → children\n  Show Label → children\n\nNOTES\n  State: Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping.\n  Show Label: false means a bare box — and then aria-label becomes required\n  Focused: a drawn focus ring. In code it is :focus-visible, which the browser owns.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/checkbox/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Checkbox } from 'ionbase-ui';\n<Checkbox size=\"sm\" intent=\"brand\">Label</Checkbox>\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n  State → isIndeterminate (Indeterminate, Indeterminate-disabled only)\n  Label → children\n  Show Label → children\n\nNOTES\n  State: Checked is `checked`/`defaultChecked`, and the -disabled halves are isDisabled. One Figma axis, three code props, which is why it is not a single mapping.\n  Show Label: false means a bare box — and then aria-label becomes required\n  Focused: a drawn focus ring. In code it is :focus-visible, which the browser owns.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/checkbox/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "89:314": {
       "figmaComponent": "Radio",
       "component": "Radio",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Radio } from 'ionbase-ui';\n<Radio size=\"lg\" intent=\"brand\" value={…}>Label</Radio>\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n  Label → children\n  Show Label → children\n\nNOTES\n  State: Selected/Unselected is the RadioGroup's value, not a prop on the Radio — a radio cannot own its own selection\n  Show Label: false means aria-label is required\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/radio/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Radio } from 'ionbase-ui';\n<Radio size=\"lg\" intent=\"brand\" value={…}>Label</Radio>\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n  Label → children\n  Show Label → children\n\nNOTES\n  State: Selected/Unselected is the RadioGroup's value, not a prop on the Radio — a radio cannot own its own selection\n  Show Label: false means aria-label is required\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/radio/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "88:323": {
       "figmaComponent": "Toggle",
       "component": "Toggle",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Toggle } from 'ionbase-ui';\n<Toggle size=\"sm\" intent=\"brand\">Label</Toggle>\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n  Label → children\n  Show Label → children\n\nNOTES\n  State: On/Off is `checked`/`defaultChecked` on the underlying input, not a Toggle prop\n  Show Label: false means aria-label is required\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toggle/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Toggle } from 'ionbase-ui';\n<Toggle size=\"sm\" intent=\"brand\">Label</Toggle>\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg\n  Color → intent: Brand=brand, Neutral=neutral, Danger=danger\n  Label → children\n  Show Label → children\n\nNOTES\n  State: On/Off is `checked`/`defaultChecked` on the underlying input, not a Toggle prop\n  Show Label: false means aria-label is required\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toggle/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "152:73": {
       "figmaComponent": "Badge",
       "component": "Badge",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Badge } from 'ionbase-ui';\n<Badge intent=\"neutral\">Label</Badge>\n\nPROPERTIES\n  Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n  Label → children\n  Show Label → children\n  Show Dot → dot\n  Show Icon → icon\n  Swap Icon → icon\n\nNOTES\n  Show Icon: false means omit icon; dot wins when both are set\n  Size: Figma draws three sizes; code has no size prop. Badge inherits its type from the text it labels — the same call Link makes.\n  Shape: Pill and Rounded are one radius token apart and code ships the pill only. Add the prop when a real screen needs both, not before.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/badge/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Badge } from 'ionbase-ui';\n<Badge intent=\"neutral\">Label</Badge>\n\nPROPERTIES\n  Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n  Label → children\n  Show Label → children\n  Show Dot → dot\n  Show Icon → icon\n  Swap Icon → icon\n\nNOTES\n  Show Icon: false means omit icon; dot wins when both are set\n  Size: Figma draws three sizes; code has no size prop. Badge inherits its type from the text it labels — the same call Link makes.\n  Shape: Pill and Rounded are one radius token apart and code ships the pill only. Add the prop when a real screen needs both, not before.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/badge/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "812:1902": {
       "figmaComponent": "Alert",
       "component": "Alert",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Alert } from 'ionbase-ui';\n<Alert intent=\"information\" emphasis=\"subtle\" layout=\"inline\">Label</Alert>\n\nPROPERTIES\n  Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n  Emphasis → emphasis: Subtle=subtle, Solid=solid\n  Layout → layout: Inline=inline, Banner=banner\n  Title → title\n  Show Title → title\n  Message → children\n  Show Icon → hideIcon\n  Show Dismiss → onDismiss\n  Show Actions → actions\n\nNOTES\n  Show Title: false means omit title\n  Show Icon: inverted — Figma's Show Icon false is hideIcon true\n  Show Dismiss: the dismiss button appears when a handler is passed; there is no boolean\n  Show Actions: an absent prop is the switch\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/alert/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Alert } from 'ionbase-ui';\n<Alert intent=\"information\" emphasis=\"subtle\" layout=\"inline\">Label</Alert>\n\nPROPERTIES\n  Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n  Emphasis → emphasis: Subtle=subtle, Solid=solid\n  Layout → layout: Inline=inline, Banner=banner\n  Title → title\n  Show Title → title\n  Message → children\n  Show Icon → hideIcon\n  Show Dismiss → onDismiss\n  Show Actions → actions\n\nNOTES\n  Show Title: false means omit title\n  Show Icon: inverted — Figma's Show Icon false is hideIcon true\n  Show Dismiss: the dismiss button appears when a handler is passed; there is no boolean\n  Show Actions: an absent prop is the switch\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/alert/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "820:1655": {
       "figmaComponent": "Toast",
       "component": "Toast",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Toast } from 'ionbase-ui';\n<Toast intent=\"information\" onDismiss={…} id={…} />\n\nPROPERTIES\n  Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n  Title → title\n  Show Title → title\n  Message → message\n  Show Message → message\n  Show Action → action\n  Show Dismiss → dismissLabel\n\nNOTES\n  Show Action: one action only — a second belongs in a Modal\n  Show Dismiss: the dismiss control is always rendered; only its label is configurable\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toast/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Toast } from 'ionbase-ui';\n<Toast intent=\"information\" onDismiss={…} id={…} />\n\nPROPERTIES\n  Intent → intent: Neutral=neutral, Primary=primary, Success=success, Warning=warning, Error=error, Information=information\n  Title → title\n  Show Title → title\n  Message → message\n  Show Message → message\n  Show Action → action\n  Show Dismiss → dismissLabel\n\nNOTES\n  Show Action: one action only — a second belongs in a Modal\n  Show Dismiss: the dismiss control is always rendered; only its label is configurable\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/toast/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "774:1516": {
       "figmaComponent": "Link",
       "component": "Link",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Link } from 'ionbase-ui';\n<Link variant=\"inline\">Label</Link>\n\nPROPERTIES\n  Type → variant: Inline=inline, Standalone=standalone\n  State → isDisabled (Disabled only)\n  Label → children\n  Leading Icon → startIcon\n  Trailing Icon → endIcon\n  Show Leading Icon → startIcon\n  Show Trailing Icon → endIcon\n\nNOTES\n  State: Hover and Focus are CSS; Visited is :visited, which no prop can set\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/link/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Link } from 'ionbase-ui';\n<Link variant=\"inline\">Label</Link>\n\nPROPERTIES\n  Type → variant: Inline=inline, Standalone=standalone\n  State → isDisabled (Disabled only)\n  Label → children\n  Leading Icon → startIcon\n  Trailing Icon → endIcon\n  Show Leading Icon → startIcon\n  Show Trailing Icon → endIcon\n\nNOTES\n  State: Hover and Focus are CSS; Visited is :visited, which no prop can set\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/link/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "53:13": {
       "figmaComponent": "Nav Item",
       "component": "NavItem",
-      "block": "───── CODE · ionbase-ui ─────\nimport { NavItem } from 'ionbase-ui';\n<NavItem>Label</NavItem>\n\nPROPERTIES\n  Label → children\n  Icon → icon\n  Show Chevron → showChevron\n\nNOTES\n  State: Default and Hover are CSS and React Aria's useHover, not props\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/nav-item/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { NavItem } from 'ionbase-ui';\n<NavItem>Label</NavItem>\n\nPROPERTIES\n  Label → children\n  Icon → icon\n  Show Chevron → showChevron\n\nNOTES\n  State: Default and Hover are CSS and React Aria's useHover, not props\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/nav-item/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "82:306": {
       "figmaComponent": "Menu",
       "component": "Menu",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Menu } from 'ionbase-ui';\n<Menu />\n\nNOTES\n  Type: Single and Multi describe how many items may be selected, which is the caller's state. Menu renders the surface and holds no selection of its own.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Menu } from 'ionbase-ui';\n<Menu />\n\nNOTES\n  Type: Single and Multi describe how many items may be selected, which is the caller's state. Menu renders the surface and holds no selection of its own.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "639:2634": {
       "figmaComponent": "Menu Item",
       "component": "MenuItem",
-      "block": "───── CODE · ionbase-ui ─────\nimport { MenuItem } from 'ionbase-ui';\n<MenuItem>Label</MenuItem>\n\nPROPERTIES\n  Status → isSelected (Selected, Selected Primary only)\n  Text → children\n  Show Icon → icon\n  Select Icon → icon\n\nNOTES\n  Status: Hover is CSS. Selected Primary is a second selected styling Figma draws and code does not yet ship.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu-item/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { MenuItem } from 'ionbase-ui';\n<MenuItem>Label</MenuItem>\n\nPROPERTIES\n  Status → isSelected (Selected, Selected Primary only)\n  Text → children\n  Show Icon → icon\n  Select Icon → icon\n\nNOTES\n  Status: Hover is CSS. Selected Primary is a second selected styling Figma draws and code does not yet ship.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/menu-item/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "157:126": {
       "figmaComponent": "Tabs",
       "component": "Tabs",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Tabs } from 'ionbase-ui';\n<Tabs type=\"pill\" orientation=\"horizontal\" aria-label=\"…\" />\n\nPROPERTIES\n  Type → type: Pill=pill, Underline=underline\n  Orientation → orientation: Horizontal=horizontal, Vertical=vertical\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tabs/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Tabs } from 'ionbase-ui';\n<Tabs type=\"pill\" orientation=\"horizontal\" aria-label=\"…\" />\n\nPROPERTIES\n  Type → type: Pill=pill, Underline=underline\n  Orientation → orientation: Horizontal=horizontal, Vertical=vertical\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tabs/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "156:259": {
       "figmaComponent": "Tabs Item",
       "component": "TabItem",
-      "block": "───── CODE · ionbase-ui ─────\nimport { TabItem } from 'ionbase-ui';\n<TabItem key=\"billing\" title=\"Billing\">Panel content</TabItem>\n\nTabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.\n\nNOTES\n  Label: TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract.\n  Type: set on the parent Tabs, not per item\n  Size: set on the parent Tabs, not per item\n  State: selection is the Tabs collection's state; Disabled is disabledKeys on Tabs\n  Show Label: a tab without a label is a tab that cannot be named\n  Show Leading Icon: not yet in the code component\n  Leading Icon: not yet in the code component\n  Show Trailing: not yet in the code component\n  Trailing: not yet in the code component\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tab-item/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { TabItem } from 'ionbase-ui';\n<TabItem key=\"billing\" title=\"Billing\">Panel content</TabItem>\n\nTabItem is a collection item and takes no props of its own. Type, Size and State belong to the parent Tabs or to its selection state, which is why almost everything here is ignored rather than mapped.\n\nNOTES\n  Label: TabItem's label is its `title` collection prop. It is not a typed prop the TypeScript checker can see, so there is nothing here to verify against — see TabItem's contract.\n  Type: set on the parent Tabs, not per item\n  Size: set on the parent Tabs, not per item\n  State: selection is the Tabs collection's state; Disabled is disabledKeys on Tabs\n  Show Label: a tab without a label is a tab that cannot be named\n  Show Leading Icon: not yet in the code component\n  Leading Icon: not yet in the code component\n  Show Trailing: not yet in the code component\n  Trailing: not yet in the code component\n  Focused: drawn focus ring; :focus-visible in code\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tab-item/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "174:103": {
       "figmaComponent": "Table Cell",
       "component": "TableCell",
-      "block": "───── CODE · ionbase-ui ─────\nimport { TableCell } from 'ionbase-ui';\n<TableCell align=\"leading\" />\n\nPROPERTIES\n  Type → header (Header only)\n  Align → align: Leading=leading, Trailing=trailing\n  Show Divider → showDivider\n  Content → children\n  Show Content → children\n\nNOTES\n  Type: Body is the default <td>\n  Density: density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-cell/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { TableCell } from 'ionbase-ui';\n<TableCell align=\"leading\" />\n\nPROPERTIES\n  Type → header (Header only)\n  Align → align: Leading=leading, Trailing=trailing\n  Show Divider → showDivider\n  Content → children\n  Show Content → children\n\nNOTES\n  Type: Body is the default <td>\n  Density: density is set once on Table and reaches the cell through CSS — a per-cell prop could disagree with its own table\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-cell/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "175:605": {
       "figmaComponent": "Table Row",
       "component": "TableRow",
-      "block": "───── CODE · ionbase-ui ─────\nimport { TableRow } from 'ionbase-ui';\n<TableRow />\n\nPROPERTIES\n  State → isSelected (Selected, Selected-Hover only)\n  Show Selection → selection\n\nNOTES\n  State: Hover is CSS\n  Show Selection: takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring\n  Density: set once on Table; see Table Cell\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-row/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { TableRow } from 'ionbase-ui';\n<TableRow />\n\nPROPERTIES\n  State → isSelected (Selected, Selected-Hover only)\n  Show Selection → selection\n\nNOTES\n  State: Hover is CSS\n  Show Selection: takes the Checkbox's own props, not a boolean — a selectable row needs checked/onChange wiring\n  Density: set once on Table; see Table Cell\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/table-row/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "74:164": {
       "figmaComponent": "Avatar",
       "component": "Avatar",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Avatar } from 'ionbase-ui';\n<Avatar size=\"lg\" shape=\"circle\" />\n\nPROPERTIES\n  Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n  Shape → shape: Circle=circle, Square=square\n  Type → src (Image only)\n  Initials → initials\n  Icon → icon\n\nNOTES\n  Type: code picks by precedence rather than a type prop: src, then initials, then icon. Character means pass initials, Icon means pass icon.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Avatar } from 'ionbase-ui';\n<Avatar size=\"lg\" shape=\"circle\" />\n\nPROPERTIES\n  Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n  Shape → shape: Circle=circle, Square=square\n  Type → src (Image only)\n  Initials → initials\n  Icon → icon\n  Show Ring → ring\n  Show Top Indicator → topIndicator\n  Show Bottom Indicator → bottomIndicator\n\nNOTES\n  Type: code picks by precedence rather than a type prop: src, then initials, then icon. Character means pass initials, Icon means pass icon.\n  Show Top Indicator: Figma needs a boolean because the intent lives on the nested Status Indicator instance; code takes the intent itself, so passing one is what shows the mark. The drawn instance is Intent=Primary with its check glyph, which is what `topIndicator=\"primary\"` renders.\n  Show Bottom Indicator: As the top indicator — the intent comes from the nested Status Indicator, which a boolean cannot carry. The drawn instance is Intent=Success with no glyph.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "74:279": {
       "figmaComponent": "Avatar Group",
       "component": "AvatarGroup",
-      "block": "───── CODE · ionbase-ui ─────\nimport { AvatarGroup } from 'ionbase-ui';\n<AvatarGroup size=\"lg\" shape=\"circle\" />\n\nPROPERTIES\n  Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n  Shape → shape: Circle=circle, Square=square\n  Show Overflow → max\n  Show Avatar 3 → children\n  Show Avatar 4 → children\n\nNOTES\n  Show Overflow: the +N avatar appears when children exceed max\n  Show Avatar 3: Figma needs a boolean per slot; React just renders fewer children\n  Show Avatar 4: same\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar-group/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { AvatarGroup } from 'ionbase-ui';\n<AvatarGroup size=\"lg\" shape=\"circle\" />\n\nPROPERTIES\n  Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n  Shape → shape: Circle=circle, Square=square\n  Show Overflow → max\n  Show Avatar 3 → children\n  Show Avatar 4 → children\n\nNOTES\n  Show Overflow: the +N avatar appears when children exceed max\n  Show Avatar 3: Figma needs a boolean per slot; React just renders fewer children\n  Show Avatar 4: same\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar-group/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
+    },
+    "1054:305": {
+      "figmaComponent": "Avatar Gradient",
+      "component": "AvatarGradient",
+      "block": "───── CODE · ionbase-ui ─────\nimport { AvatarGradient } from 'ionbase-ui';\n<AvatarGradient size=\"lg\" color=\"slate\" />\n\nPROPERTIES\n  Size → size: Mini=mini, Small=sm, Medium=md, Large=lg\n  Color → color: Slate=slate, Blue=blue, Violet=violet, Pink=pink, Orange=orange, Green=green, Red=red, Light=light\n  Initials → initials\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/avatar-gradient/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "126:22724": {
       "figmaComponent": "Border",
       "component": "Divider",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Divider } from 'ionbase-ui';\n<Divider orientation=\"vertical\" />\n\nPROPERTIES\n  Style → orientation: Horizontal=horizontal, Vertical=vertical\n\nFigma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/divider/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Divider } from 'ionbase-ui';\n<Divider orientation=\"vertical\" />\n\nPROPERTIES\n  Style → orientation: Horizontal=horizontal, Vertical=vertical\n\nFigma calls it Border; the code component is Divider, because it renders an <hr> and an <hr> is a thematic break rather than an edge.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/divider/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "52:21369": {
       "figmaComponent": "Logo-Ionbase",
       "component": "Logo",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Logo } from 'ionbase-ui';\n<Logo size=\"sm\" wordmark=\"vector\" />\n\nPROPERTIES\n  Size → size: Small=sm, Large=lg\n  Type → wordmark: Logo=vector, Icon=text\n\nNOTES\n  Type: the names invert: Figma's Logo is the serif vector wordmark, Figma's Icon is live Host Grotesk text\n  Property: the Name axis renders placeholder text in an unbound colour — leftover debug content, not a real asset. LogoMark covers the no-wordmark case.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/logo/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Logo } from 'ionbase-ui';\n<Logo size=\"sm\" wordmark=\"vector\" />\n\nPROPERTIES\n  Size → size: Small=sm, Large=lg\n  Type → wordmark: Logo=vector, Icon=text\n\nNOTES\n  Type: the names invert: Figma's Logo is the serif vector wordmark, Figma's Icon is live Host Grotesk text\n  Property: the Name axis renders placeholder text in an unbound colour — leftover debug content, not a real asset. LogoMark covers the no-wordmark case.\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/logo/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "792:1537": {
       "figmaComponent": "Modal",
       "component": "Modal",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Modal } from 'ionbase-ui';\n<Modal size=\"sm\" align=\"left\" title={…} />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg, Fullscreen=fullscreen\n  Align → align: Left=left, Center=center\n  Title → title\n  Description → description\n  Show Description → description\n  Show Close → showClose\n  Show Body → children\n  Show Footer → footer\n  Show Media → media\n  Media → media\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/modal/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Modal } from 'ionbase-ui';\n<Modal size=\"sm\" align=\"left\" title={…} />\n\nPROPERTIES\n  Size → size: Small=sm, Medium=md, Large=lg, Fullscreen=fullscreen\n  Align → align: Left=left, Center=center\n  Title → title\n  Description → description\n  Show Description → description\n  Show Close → showClose\n  Show Body → children\n  Show Footer → footer\n  Show Media → media\n  Media → media\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/modal/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "825:1853": {
       "figmaComponent": "Popover",
       "component": "Popover",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Popover } from 'ionbase-ui';\n<Popover placement=\"bottom\" size=\"sm\">…</Popover>\n\nPROPERTIES\n  Placement → placement: Top=top, Bottom=bottom, Left=left, Right=right\n  Size → size: Small=sm, Medium=md, Large=lg\n  Title → title\n  Show Header → title\n  Body → content\n  Show Body → content\n  Show Close → showClose\n  Show Footer → footer\n  Show Arrow → hideArrow\n\nNOTES\n  Show Arrow: inverted — Show Arrow false is hideArrow true\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/popover/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Popover } from 'ionbase-ui';\n<Popover placement=\"bottom\" size=\"sm\">…</Popover>\n\nPROPERTIES\n  Placement → placement: Top=top, Bottom=bottom, Left=left, Right=right\n  Size → size: Small=sm, Medium=md, Large=lg\n  Title → title\n  Show Header → title\n  Body → content\n  Show Body → content\n  Show Close → showClose\n  Show Footer → footer\n  Show Arrow → hideArrow\n\nNOTES\n  Show Arrow: inverted — Show Arrow false is hideArrow true\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/popover/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "801:68": {
       "figmaComponent": "Tooltip",
       "component": "Tooltip",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Tooltip } from 'ionbase-ui';\n<Tooltip placement=\"top\" label={…}>…</Tooltip>\n\nPROPERTIES\n  Placement → placement: Top=top, Bottom=bottom, Left=left, Right=right\n  Label → label\n  Title → title\n  Show Title → title\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tooltip/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Tooltip } from 'ionbase-ui';\n<Tooltip placement=\"top\" label={…}>…</Tooltip>\n\nPROPERTIES\n  Placement → placement: Top=top, Bottom=bottom, Left=left, Right=right\n  Label → label\n  Title → title\n  Show Title → title\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/tooltip/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "592:857": {
       "figmaComponent": "Full Card",
       "component": "FullCard",
-      "block": "───── CODE · ionbase-ui ─────\nimport { FullCard } from 'ionbase-ui';\n<FullCard alignment=\"right\" headline={…} />\n\nPROPERTIES\n  Row Reverse → alignment: True=left, False=right\n  Headline → headline\n  Description → description\n  Show Description → description\n  Eyebrow → eyebrow\n  Show Eyebrow → eyebrow\n  Actions → actions\n  Show Actions → actions\n  Media → media\n\nNOTES\n  Row Reverse: Figma's boolean reverses the row; the code prop names which side the MEDIA sits on\n  Media: pass the screenshot itself — the component draws the frame\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/full-card/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { FullCard } from 'ionbase-ui';\n<FullCard alignment=\"right\" headline={…} />\n\nPROPERTIES\n  Row Reverse → alignment: True=left, False=right\n  Headline → headline\n  Description → description\n  Show Description → description\n  Eyebrow → eyebrow\n  Show Eyebrow → eyebrow\n  Actions → actions\n  Show Actions → actions\n  Media → media\n\nNOTES\n  Row Reverse: Figma's boolean reverses the row; the code prop names which side the MEDIA sits on\n  Media: pass the screenshot itself — the component draws the frame\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/full-card/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     },
     "69:335": {
       "figmaComponent": "Header",
       "component": "Header",
-      "block": "───── CODE · ionbase-ui ─────\nimport { Header } from 'ionbase-ui';\n<Header />\n\nPROPERTIES\n  Device → open (Mobile-Open, Mobile-Closed only)\n  Center Slot → center\n  End Slot → end\n  Show Center Slot → center\n  Show End Slot → end\n\nNOTES\n  Device: Figma spells one four-way axis; code splits it in two. Desktop/Tablet/Mobile is a media query the browser already answers, and only Open/Closed is a prop.\n  End Slot: a duplicate slot in the Figma component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/header/index.html.md\nGenerated from ionbase-ui@0.26.0. Edit the code, not this block.\n───── end code ─────"
+      "block": "───── CODE · ionbase-ui ─────\nimport { Header } from 'ionbase-ui';\n<Header />\n\nPROPERTIES\n  Device → open (Mobile-Open, Mobile-Closed only)\n  Center Slot → center\n  End Slot → end\n  Show Center Slot → center\n  Show End Slot → end\n\nNOTES\n  Device: Figma spells one four-way axis; code splits it in two. Desktop/Tablet/Mobile is a media query the browser already answers, and only Open/Closed is a prop.\n  End Slot: a duplicate slot in the Figma component\n\nFull contract: https://raza-ahmed.github.io/ionbase-design-system/components/header/index.html.md\nGenerated from ionbase-ui@0.27.0. Edit the code, not this block.\n───── end code ─────"
     }
   }
 }