@adea-ai/ui 0.138.0 → 0.139.0

package/dist/components/ui/callout/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","names":["ComponentProps","splitProps","cva","VariantProps","cn","calloutVariants","variants","variant","default","destructive","success","warning","info","size","sm","md","lg","defaultVariants","CalloutProps","Callout","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","CalloutTitle","_el$2","_tmpl$2","_$mergeProps"],"sources":["../../../../src/components/ui/callout/callout.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Callout.\n *\n * A quiet aside that belongs to the content around it: the summary at the top of\n * an answer, a note in documentation, a remembered fact beside the reply that\n * used it. It is a card-coloured block with one rule on its start edge, and\n * nothing about it interrupts the reader.\n *\n * That is the difference from `Alert`. An `Alert` is a message about the state of\n * the surface it sits in — a failed sync, a validation summary — so it is always\n * `role=\"alert\"`, a live announcement, with a tone glyph and a tinted status\n * surface. A callout is static page content: a plain `div` with `role=\"note\"`, no\n * live region, no icon, and no tint. A caller whose note really is a status\n * message uses `Alert`; one whose note needs a different landmark role passes\n * `role`. Reach for `Card` when the block is a self-contained object with its own\n * header, content and footer; a callout has no parts beyond an optional\n * `CalloutTitle`.\n *\n * The rule is the only thing that varies by `variant`: `default` is the accent\n * (`--primary`), and the four status hues use the same tokens `Alert` does. The\n * rule is a logical `border-s-*`, so it moves to the right in RTL. The corners\n * stay square because a rounded box would curve the rule into a crescent.\n *\n * `size` is the padding rung and the rule's weight together, so a caller never\n * sets `p-*` or a border width to make one denser. The rungs are Cortana's three\n * answer-view callouts, expressed in the Tailwind spacing scale:\n *\n * - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.\n * - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.\n * - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.\n *\n * Type size and colour are inherited rather than set (only the card foreground is\n * applied), so a callout in a dense panel and one in an article both read at the\n * size of the text around them.\n *\n * Text that has no break opportunity (a 200-character token, a URL, a file path)\n * wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`\n * and not `break-word`, because only `anywhere` lowers the box's min-content width:\n * a callout that is a flex or grid item (auto minimum size) then shrinks to its\n * track instead of stretching it. The callout's own padding, rule and width are\n * untouched, so none of its sizing differs from Cortana's.\n *\n * The block is deliberately not a flex or grid container: its children are inline\n * text, links and code, and a flex root would turn each of those into a separate\n * item and break the line.\n */\nexport const calloutVariants = cva(\n  'bg-card text-card-foreground block rounded-none wrap-anywhere',\n  {\n    variants: {\n      variant: {\n        default: 'border-s-primary',\n        destructive: 'border-s-destructive',\n        success: 'border-s-success',\n        warning: 'border-s-warning',\n        info: 'border-s-info',\n      },\n      size: {\n        /** 12px block / 14px inline padding, 2px rule: a short inline note. */\n        sm: 'border-s-2 px-3.5 py-3',\n        /** 18px block / 20px inline padding, 3px rule: a supporting aside. */\n        md: 'border-s-3 px-5 py-4.5',\n        /** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */\n        lg: 'border-s-3 px-6 py-5.5',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'md' },\n  }\n)\n\nexport type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>\n\nexport function Callout(props: CalloutProps) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])\n  return (\n    <div\n      data-slot=\"callout\"\n      role=\"note\"\n      class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * An optional heading line for the callout. It is a styled `div`, not a heading\n * element: a callout sits inside someone else's outline, and a fixed heading\n * level would break it. Pass `role=\"heading\"` with `aria-level` where the\n * content does belong in the outline.\n *\n * The title always carries a 4px (`mb-1`) margin below it, whatever follows: a\n * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such\n * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)\n * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for\n * bare text, the most common body. The unconditional margin is the less\n * surprising failure: it is never missing where text follows. The price is the\n * title-only callout, which would end 4px taller than its padding says. Pass\n * `class=\"mb-0\"` there (`cn` lets the caller's margin win); the `WithTitle` story\n * shows it.\n */\nexport function CalloutTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"callout-title\"\n      class={cn('mb-1 font-medium tracking-tight', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAaK,kBAAkBH,IAC7B,iEACA;CACEI,UAAU;EACRC,SAAS;GACPC,SAAS;GACTC,aAAa;GACbC,SAAS;GACTC,SAAS;GACTC,MAAM;EACR;EACAC,MAAM;;GAEJC,IAAI;;GAEJC,IAAI;;GAEJC,IAAI;EACN;CACF;CACAC,iBAAiB;EAAEV,SAAS;EAAWM,MAAM;CAAK;AACpD,CACF;AAIA,SAAgBM,QAAQC,OAAqB;CAC3C,MAAM,CAACC,OAAOC,QAAQrB,WAAWmB,OAAO;EAAC;EAAS;EAAW;CAAM,CAAC;CACpE,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAIWtB,GAAGC,gBAAgB;IAAEE,SAASc,MAAMd;IAASM,MAAMQ,MAAMR;GAAK,CAAC,GAAGQ,MAAMM,KAAK;EAAC,EAAA,GACjFL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;;;;;;;;;;;;;;;;;AAkBA,SAAgBK,aAAaR,OAA8B;CACzD,MAAM,CAACC,OAAOC,QAAQrB,WAAWmB,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWtB,GAAG,mCAAmCiB,MAAMM,KAAK;EAAC,EAAA,GACrDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAGd"}
+{"version":3,"file":"callout.js","names":["ComponentProps","children","createMemo","splitProps","cva","VariantProps","cn","calloutVariants","variants","variant","default","destructive","success","warning","info","size","sm","md","lg","defaultVariants","CalloutProps","isRendered","node","trim","isCalloutTitle","getAttribute","Callout","props","local","rest","resolved","titleOnly","nodes","toArray","filter","length","_el$","_tmpl$","_$spread","_$mergeProps","data-title-only","undefined","class","_$insert","CalloutTitle","_el$2","_tmpl$2","_$mergeProps"],"sources":["../../../../src/components/ui/callout/callout.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { children, createMemo, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Callout.\n *\n * A quiet aside that belongs to the content around it: the summary at the top of\n * an answer, a note in documentation, a remembered fact beside the reply that\n * used it. It is a card-coloured block with one rule on its start edge, and\n * nothing about it interrupts the reader.\n *\n * That is the difference from `Alert`. An `Alert` is a message about the state of\n * the surface it sits in — a failed sync, a validation summary — so it is always\n * `role=\"alert\"`, a live announcement, with a tone glyph and a tinted status\n * surface. A callout is static page content: a plain `div` with `role=\"note\"`, no\n * live region, no icon, and no tint. A caller whose note really is a status\n * message uses `Alert`; one whose note needs a different landmark role passes\n * `role`. Reach for `Card` when the block is a self-contained object with its own\n * header, content and footer; a callout has no parts beyond an optional\n * `CalloutTitle`.\n *\n * The rule is the only thing that varies by `variant`: `default` is the accent\n * (`--primary`), and the four status hues use the same tokens `Alert` does. The\n * rule is a logical `border-s-*`, so it moves to the right in RTL. The corners\n * stay square because a rounded box would curve the rule into a crescent.\n *\n * `size` is the padding rung and the rule's weight together, so a caller never\n * sets `p-*` or a border width to make one denser. The rungs are Cortana's three\n * answer-view callouts, expressed in the Tailwind spacing scale:\n *\n * - `lg`: 22px / 24px padding, 3px rule — Cortana's `.answer-copy`.\n * - `md`: 18px / 20px padding, 3px rule — Cortana's `.answer-memory`.\n * - `sm`: 12px / 14px padding, 2px rule — Cortana's `.answer-note`.\n *\n * Type size and colour are inherited rather than set (only the card foreground is\n * applied), so a callout in a dense panel and one in an article both read at the\n * size of the text around them.\n *\n * Text that has no break opportunity (a 200-character token, a URL, a file path)\n * wraps with `overflow-wrap: anywhere` rather than overflowing the box. `anywhere`\n * and not `break-word`, because only `anywhere` lowers the box's min-content width:\n * a callout that is a flex or grid item (auto minimum size) then shrinks to its\n * track instead of stretching it. The callout's own padding, rule and width are\n * untouched, so none of its sizing differs from Cortana's.\n *\n * The block is deliberately not a flex or grid container: its children are inline\n * text, links and code, and a flex root would turn each of those into a separate\n * item and break the line.\n */\nexport const calloutVariants = cva(\n  'bg-card text-card-foreground block rounded-none wrap-anywhere',\n  {\n    variants: {\n      variant: {\n        default: 'border-s-primary',\n        destructive: 'border-s-destructive',\n        success: 'border-s-success',\n        warning: 'border-s-warning',\n        info: 'border-s-info',\n      },\n      size: {\n        /** 12px block / 14px inline padding, 2px rule: a short inline note. */\n        sm: 'border-s-2 px-3.5 py-3',\n        /** 18px block / 20px inline padding, 3px rule: a supporting aside. */\n        md: 'border-s-3 px-5 py-4.5',\n        /** 22px block / 24px inline padding, 3px rule: the lead summary of a view. */\n        lg: 'border-s-3 px-6 py-5.5',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'md' },\n  }\n)\n\nexport type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>\n\nconst isRendered = (node: unknown) =>\n  node != null && typeof node !== 'boolean' && (typeof node !== 'string' || node.trim() !== '')\n\nconst isCalloutTitle = (node: unknown) =>\n  typeof node === 'object' &&\n  node !== null &&\n  'getAttribute' in node &&\n  typeof node.getAttribute === 'function' &&\n  node.getAttribute('data-slot') === 'callout-title'\n\nexport function Callout(props: CalloutProps) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'size', 'children'])\n  const resolved = children(() => local.children)\n  // CSS cannot see text nodes, so the callout looks at what it renders and marks a\n  // title with nothing after it. The title reads the mark to drop its bottom margin.\n  const titleOnly = createMemo(() => {\n    const nodes = resolved.toArray().filter(isRendered)\n    return nodes.length === 1 && isCalloutTitle(nodes[0])\n  })\n  return (\n    <div\n      data-slot=\"callout\"\n      data-title-only={titleOnly() ? '' : undefined}\n      role=\"note\"\n      class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    >\n      {resolved()}\n    </div>\n  )\n}\n\n/**\n * An optional heading line for the callout. It is a styled `div`, not a heading\n * element: a callout sits inside someone else's outline, and a fixed heading\n * level would break it. Pass `role=\"heading\"` with `aria-level` where the\n * content does belong in the outline.\n *\n * The title carries a 4px (`mb-1`) margin below it, whatever follows: a\n * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such\n * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)\n * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for\n * bare text, the most common body. So the gap stays the default and the one case\n * that does not want it is detected by `Callout`, which sees its rendered\n * children: a callout whose only child is a title carries `data-title-only`, and\n * the title drops its margin so the block ends at its own padding. A caller never\n * passes `mb-0` for this. Anything else after the title, text included, keeps the\n * gap.\n */\nexport function CalloutTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"callout-title\"\n      class={cn('mb-1 font-medium tracking-tight in-data-title-only:mb-0', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAaO,kBAAkBH,IAC7B,iEACA;CACEI,UAAU;EACRC,SAAS;GACPC,SAAS;GACTC,aAAa;GACbC,SAAS;GACTC,SAAS;GACTC,MAAM;EACR;EACAC,MAAM;;GAEJC,IAAI;;GAEJC,IAAI;;GAEJC,IAAI;EACN;CACF;CACAC,iBAAiB;EAAEV,SAAS;EAAWM,MAAM;CAAK;AACpD,CACF;AAIA,IAAMM,cAAcC,SAClBA,QAAQ,QAAQ,OAAOA,SAAS,cAAc,OAAOA,SAAS,YAAYA,KAAKC,KAAK,MAAM;AAE5F,IAAMC,kBAAkBF,SACtB,OAAOA,SAAS,YAChBA,SAAS,QACT,kBAAkBA,QAClB,OAAOA,KAAKG,iBAAiB,cAC7BH,KAAKG,aAAa,WAAW,MAAM;AAErC,SAAgBC,QAAQC,OAAqB;CAC3C,MAAM,CAACC,OAAOC,QAAQ1B,WAAWwB,OAAO;EAAC;EAAS;EAAW;EAAQ;CAAU,CAAC;CAChF,MAAMG,WAAW7B,eAAe2B,MAAM3B,QAAQ;CAG9C,MAAM8B,YAAY7B,iBAAiB;EACjC,MAAM8B,QAAQF,SAASG,QAAQ,CAAC,CAACC,OAAOb,UAAU;EAClD,OAAOW,MAAMG,WAAW,KAAKX,eAAeQ,MAAM,EAAE;CACtD,CAAC;CACD,cAAA;EAAA,IAAAI,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA;GAAA,KAAA,qBAAA;IAAA,OAGqBR,UAAU,IAAI,KAAKU,KAAAA;GAAS;GAAA,KAAA,WAAA;IAAA,OAEtCnC,GAAGC,gBAAgB;KAAEE,SAASmB,MAAMnB;KAASM,MAAMa,MAAMb;IAAK,CAAC,GAAGa,MAAMc,KAAK;GAAC;EAAA,GACjFb,IAAI,GAAA,OAAA,IAAA;EAAAc,OAAAP,MAEPN,QAAQ;EAAA,OAAAM;CAAA,EAAA,CAAA;AAGf;;;;;;;;;;;;;;;;;;AAmBA,SAAgBQ,aAAajB,OAA8B;CACzD,MAAM,CAACC,OAAOC,QAAQ1B,WAAWwB,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAkB,QAAAC,QAAA;EAAAR,OAAAO,OAAAN,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWjC,GAAG,2DAA2DsB,MAAMc,KAAK;EAAC,EAAA,GAC7Eb,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAgB;CAAA,EAAA,CAAA;AAGd"}

package/dist/components/ui/input-group/secret-input-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"secret-input-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/secret-input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAKhF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,GAAG,CAAC,YAAY,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAA;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,kBAAkB,GAAG,cAAc,CAAC,CAAA;AAE5F;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAiD5D"}
+{"version":3,"file":"secret-input-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input-group/secret-input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAKtF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,GAAG,CAAC,YAAY,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAA;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,kBAAkB,GAAG,cAAc,CAAC,CAAA;AAE5F;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAoD5D"}

package/dist/components/ui/input-group/secret-input-group.js

@@ -2,7 +2,7 @@ import { FormFieldContext } from "../../../lib/form-field.js";
 import { ActionButton } from "../../composites/action-button/action-button.js";
 import { InputGroup, InputGroupInput } from "./input-group.js";
 import { createComponent, memo, mergeProps } from "solid-js/web";
-import { splitProps, useContext } from "solid-js";
+import { Show, splitProps, useContext } from "solid-js";
 //#region src/components/ui/input-group/secret-input-group.tsx
 /**
 * A password input with an optional keyboard-accessible clear action.
@@ -40,34 +40,35 @@ function SecretInputGroup(props) {
 			return local.onChange;
 		}
 	}));
-	if (!local.onClear) return createComponent(InputGroup, {
-		get ["class"]() {
-			return local.class;
-		},
-		children: input
-	});
 	return createComponent(InputGroup, {
 		get ["class"]() {
 			return local.class;
 		},
 		get children() {
-			return [input, createComponent(ActionButton, {
-				"data-slot": "input-group-button",
-				variant: "ghost",
-				size: "xs",
-				"class": "-me-1 h-6 min-w-0 shrink-0 px-2",
-				get disabled() {
-					return local.disabled;
-				},
-				get tooltip() {
-					return memo(() => !!local.disabled)() ? local.disabledReason ?? "This API key is managed by policy" : local.clearLabel ?? "Clear API key";
-				},
-				tooltipSide: "top",
-				get ["aria-label"]() {
-					return local.clearLabel ?? "Clear API key";
+			return [input, createComponent(Show, {
+				get when() {
+					return local.onClear;
 				},
-				onClick: () => local.onClear?.(),
-				children: "Clear"
+				get children() {
+					return createComponent(ActionButton, {
+						"data-slot": "input-group-button",
+						variant: "ghost",
+						size: "xs",
+						"class": "-me-1 h-6 min-w-0 shrink-0 px-2",
+						get disabled() {
+							return local.disabled;
+						},
+						get tooltip() {
+							return memo(() => !!local.disabled)() ? local.disabledReason ?? "This API key is managed by policy" : local.clearLabel ?? "Clear API key";
+						},
+						tooltipSide: "top",
+						get ["aria-label"]() {
+							return local.clearLabel ?? "Clear API key";
+						},
+						onClick: () => local.onClear?.(),
+						children: "Clear"
+					});
+				}
 			})];
 		}
 	});

package/dist/components/ui/input-group/secret-input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"secret-input-group.js","names":["splitProps","useContext","ComponentProps","JSX","ActionButton","FormFieldContext","InputGroup","InputGroupInput","SecretInputGroupProps","value","disabled","onChange","EventHandler","HTMLInputElement","Event","onClear","clearLabel","disabledReason","class","Pick","SecretInputGroup","props","field","local","rest","input","_$createComponent","_$mergeProps","aria-label","undefined","type","autocomplete","onInput","children","variant","size","tooltip","_$memo","tooltipSide","onClick","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/input-group/secret-input-group.tsx"],"sourcesContent":["import { splitProps, useContext, type ComponentProps, type JSX } from 'solid-js'\nimport { ActionButton } from '../../composites/action-button'\nimport { FormFieldContext } from '#lib/form-field'\nimport { InputGroup, InputGroupInput } from './input-group'\n\nexport type SecretInputGroupProps = {\n  value: string\n  disabled: boolean\n  onChange: JSX.EventHandler<HTMLInputElement, Event>\n  onClear?: () => void\n  /**\n   * What the clear action does, for this field: its accessible name and its\n   * tooltip while enabled (\"Clear stored token\", \"Clear Google token path\").\n   * Defaults to \"Clear API key\".\n   */\n  clearLabel?: string\n  /**\n   * Why the clear action is unavailable, shown as its tooltip while the group is\n   * `disabled`. Defaults to the policy message, so name the real reason when a\n   * field is disabled for another one (\"Set a token variable first\").\n   */\n  disabledReason?: string\n  class?: string\n} & Pick<ComponentProps<'input'>, 'id' | 'aria-label' | 'aria-describedby' | 'aria-invalid'>\n\n/**\n * A password input with an optional keyboard-accessible clear action.\n *\n * The wording is the caller's: inside a `FormField` the input takes the field's\n * label, outside one it needs `aria-label` (the fallback names an API key), and\n * `clearLabel` and `disabledReason` name the clear action for the field it\n * belongs to, so a bearer token or a token path is not announced as an API key.\n */\nexport function SecretInputGroup(props: SecretInputGroupProps) {\n  const field = useContext(FormFieldContext)\n  const [local, rest] = splitProps(props, [\n    'value',\n    'disabled',\n    'onChange',\n    'onClear',\n    'clearLabel',\n    'disabledReason',\n    'aria-label',\n    'class',\n  ])\n\n  const input = (\n    <InputGroupInput\n      {...rest}\n      aria-label={local['aria-label'] ?? (field ? undefined : 'New API key')}\n      type=\"password\"\n      autocomplete=\"new-password\"\n      value={local.value}\n      disabled={local.disabled}\n      onInput={local.onChange}\n    />\n  )\n\n  if (!local.onClear) return <InputGroup class={local.class}>{input}</InputGroup>\n\n  return (\n    <InputGroup class={local.class}>\n      {input}\n      <ActionButton\n        data-slot=\"input-group-button\"\n        variant=\"ghost\"\n        size=\"xs\"\n        class=\"-me-1 h-6 min-w-0 shrink-0 px-2\"\n        disabled={local.disabled}\n        tooltip={\n          local.disabled\n            ? (local.disabledReason ?? 'This API key is managed by policy')\n            : (local.clearLabel ?? 'Clear API key')\n        }\n        tooltipSide=\"top\"\n        aria-label={local.clearLabel ?? 'Clear API key'}\n        onClick={() => local.onClear?.()}\n      >\n        Clear\n      </ActionButton>\n    </InputGroup>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAiCA,SAAgBoB,iBAAiBC,OAA8B;CAC7D,MAAMC,QAAQrB,WAAWI,gBAAgB;CACzC,MAAM,CAACkB,OAAOC,QAAQxB,WAAWqB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,MAAMI,QAAKC,gBACRnB,iBAAeoB,WACVH,MAAI;EAAA,KAAA,gBAAA;GAAA,OACID,MAAM,kBAAkBD,QAAQO,KAAAA,IAAY;EAAc;EACtEC,MAAI;EACJC,cAAY;EAAA,IACZtB,QAAK;GAAA,OAAEc,MAAMd;EAAK;EAAA,IAClBC,WAAQ;GAAA,OAAEa,MAAMb;EAAQ;EAAA,IACxBsB,UAAO;GAAA,OAAET,MAAMZ;EAAQ;CAAA,CAAA,CAAA;CAI3B,IAAI,CAACY,MAAMR,SAAS,OAAAW,gBAAQpB,YAAU;EAAA,KAAA,WAAA;GAAA,OAAQiB,MAAML;EAAK;EAAAe,UAAGR;CAAK,CAAA;CAEjE,OAAAC,gBACGpB,YAAU;EAAA,KAAA,WAAA;GAAA,OAAQiB,MAAML;EAAK;EAAA,IAAAe,WAAA;GAAA,OAAA,CAC3BR,OAAKC,gBACLtB,cAAY;IAAA,aAAA;IAEX8B,SAAO;IACPC,MAAI;IAAA,SAAA;IAAA,IAEJzB,WAAQ;KAAA,OAAEa,MAAMb;IAAQ;IAAA,IACxB0B,UAAO;KAAA,OACLC,WAAA,CAAA,CAAAd,MAAMb,QAAQ,CAAA,CAAA,IACTa,MAAMN,kBAAkB,sCACxBM,MAAMP,cAAc;IAAgB;IAE3CsB,aAAW;IAAA,KAAA,gBAAA;KAAA,OACCf,MAAMP,cAAc;IAAe;IAC/CuB,eAAehB,MAAMR,UAAU;IAACkB,UAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAMxC"}
+{"version":3,"file":"secret-input-group.js","names":["Show","splitProps","useContext","ComponentProps","JSX","ActionButton","FormFieldContext","InputGroup","InputGroupInput","SecretInputGroupProps","value","disabled","onChange","EventHandler","HTMLInputElement","Event","onClear","clearLabel","disabledReason","class","Pick","SecretInputGroup","props","field","local","rest","input","_$createComponent","_$mergeProps","aria-label","undefined","type","autocomplete","onInput","children","when","variant","size","tooltip","_$memo","tooltipSide","onClick","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/input-group/secret-input-group.tsx"],"sourcesContent":["import { Show, splitProps, useContext, type ComponentProps, type JSX } from 'solid-js'\nimport { ActionButton } from '../../composites/action-button'\nimport { FormFieldContext } from '#lib/form-field'\nimport { InputGroup, InputGroupInput } from './input-group'\n\nexport type SecretInputGroupProps = {\n  value: string\n  disabled: boolean\n  onChange: JSX.EventHandler<HTMLInputElement, Event>\n  onClear?: () => void\n  /**\n   * What the clear action does, for this field: its accessible name and its\n   * tooltip while enabled (\"Clear stored token\", \"Clear Google token path\").\n   * Defaults to \"Clear API key\".\n   */\n  clearLabel?: string\n  /**\n   * Why the clear action is unavailable, shown as its tooltip while the group is\n   * `disabled`. Defaults to the policy message, so name the real reason when a\n   * field is disabled for another one (\"Set a token variable first\").\n   */\n  disabledReason?: string\n  class?: string\n} & Pick<ComponentProps<'input'>, 'id' | 'aria-label' | 'aria-describedby' | 'aria-invalid'>\n\n/**\n * A password input with an optional keyboard-accessible clear action.\n *\n * The wording is the caller's: inside a `FormField` the input takes the field's\n * label, outside one it needs `aria-label` (the fallback names an API key), and\n * `clearLabel` and `disabledReason` name the clear action for the field it\n * belongs to, so a bearer token or a token path is not announced as an API key.\n */\nexport function SecretInputGroup(props: SecretInputGroupProps) {\n  const field = useContext(FormFieldContext)\n  const [local, rest] = splitProps(props, [\n    'value',\n    'disabled',\n    'onChange',\n    'onClear',\n    'clearLabel',\n    'disabledReason',\n    'aria-label',\n    'class',\n  ])\n\n  const input = (\n    <InputGroupInput\n      {...rest}\n      aria-label={local['aria-label'] ?? (field ? undefined : 'New API key')}\n      type=\"password\"\n      autocomplete=\"new-password\"\n      value={local.value}\n      disabled={local.disabled}\n      onInput={local.onChange}\n    />\n  )\n\n  // One group for both cases: `onClear` may appear or disappear after setup\n  // (a stored secret is cleared, or a configured one arrives), and the input\n  // must keep its element, value and focus while the action comes and goes.\n  return (\n    <InputGroup class={local.class}>\n      {input}\n      <Show when={local.onClear}>\n        <ActionButton\n          data-slot=\"input-group-button\"\n          variant=\"ghost\"\n          size=\"xs\"\n          class=\"-me-1 h-6 min-w-0 shrink-0 px-2\"\n          disabled={local.disabled}\n          tooltip={\n            local.disabled\n              ? (local.disabledReason ?? 'This API key is managed by policy')\n              : (local.clearLabel ?? 'Clear API key')\n          }\n          tooltipSide=\"top\"\n          aria-label={local.clearLabel ?? 'Clear API key'}\n          onClick={() => local.onClear?.()}\n        >\n          Clear\n        </ActionButton>\n      </Show>\n    </InputGroup>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAiCA,SAAgBqB,iBAAiBC,OAA8B;CAC7D,MAAMC,QAAQrB,WAAWI,gBAAgB;CACzC,MAAM,CAACkB,OAAOC,QAAQxB,WAAWqB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,MAAMI,QAAKC,gBACRnB,iBAAeoB,WACVH,MAAI;EAAA,KAAA,gBAAA;GAAA,OACID,MAAM,kBAAkBD,QAAQO,KAAAA,IAAY;EAAc;EACtEC,MAAI;EACJC,cAAY;EAAA,IACZtB,QAAK;GAAA,OAAEc,MAAMd;EAAK;EAAA,IAClBC,WAAQ;GAAA,OAAEa,MAAMb;EAAQ;EAAA,IACxBsB,UAAO;GAAA,OAAET,MAAMZ;EAAQ;CAAA,CAAA,CAAA;CAO3B,OAAAe,gBACGpB,YAAU;EAAA,KAAA,WAAA;GAAA,OAAQiB,MAAML;EAAK;EAAA,IAAAe,WAAA;GAAA,OAAA,CAC3BR,OAAKC,gBACL3B,MAAI;IAAA,IAACmC,OAAI;KAAA,OAAEX,MAAMR;IAAO;IAAA,IAAAkB,WAAA;KAAA,OAAAP,gBACtBtB,cAAY;MAAA,aAAA;MAEX+B,SAAO;MACPC,MAAI;MAAA,SAAA;MAAA,IAEJ1B,WAAQ;OAAA,OAAEa,MAAMb;MAAQ;MAAA,IACxB2B,UAAO;OAAA,OACLC,WAAA,CAAA,CAAAf,MAAMb,QAAQ,CAAA,CAAA,IACTa,MAAMN,kBAAkB,sCACxBM,MAAMP,cAAc;MAAgB;MAE3CuB,aAAW;MAAA,KAAA,gBAAA;OAAA,OACChB,MAAMP,cAAc;MAAe;MAC/CwB,eAAejB,MAAMR,UAAU;MAACkB,UAAA;KAAA,CAAA;IAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAO1C"}

package/dist/r/src/components/composites/tree/tree.tsx

@@ -25,6 +25,7 @@ type TreeContextValue = {
   unregister: (id: string, element: HTMLDivElement | undefined) => void
   focusItem: (id: string) => void
   noteFocus: (id: string) => void
+  noteBlur: (next: EventTarget | null) => void
   activate: (id: string, event: Event) => void
   expand: (id: string, expanded: boolean) => void
   disclosure: () => TreeDisclosure
@@ -114,8 +115,14 @@ export type TreeProps = Omit<
  * the target row: when the active row leaves `visibleItems`, the first visible
  * row becomes the roving stop and `onActiveIdChange` is called with it. If the
  * removed row held focus, or was the last row the tree saw focused, focus moves
- * to that same row; if it had no focus, only the roving stop moves. This is the
- * same in both `disclosure` modes and for every way a host collapses a row.
+ * to that same row; if it had no focus, only the roving stop moves. Focus that
+ * has already gone to a control outside the tree is never pulled back: the tree
+ * forgets its last focused row when focus moves to an element outside it, and
+ * the roving stop alone moves if that control still has focus when the row is
+ * hidden. Focus the tree has asked for but not yet moved (a queued recovery, or a
+ * keyboard move to a row the host has not mounted) is withdrawn when focus lands
+ * outside the tree, and is checked again when a row mounts. This is the same in
+ * both `disclosure` modes and for every way a host collapses a row.
  */
 export function Tree(props: TreeProps) {
   const [local, rest] = splitProps(props, [
@@ -143,9 +150,26 @@ export function Tree(props: TreeProps) {
   const rows = new Map<string, HTMLDivElement>()
   const rowIdsByElement = new WeakMap<HTMLDivElement, string>()
   let pendingFocusId: string | null = null
+  let pendingFocusGuard: ((event: FocusEvent) => void) | undefined
   let requestedRevealId: string | null = null
   let focusedId: string | null = null
   let disposed = false
+  const isInsideTreeRow = (element: Element) => {
+    const row = element.closest('[role="treeitem"]')
+    return row instanceof HTMLDivElement && rowIdsByElement.has(row)
+  }
+  // True when a focusable control outside this tree owns focus. Nothing focused
+  // (`body`) is not outside: that is where focus falls when a focused row is removed.
+  const focusIsOutsideTree = () => {
+    if (typeof document === 'undefined') return false
+    const active = document.activeElement
+    return (
+      active instanceof Element &&
+      active !== document.body &&
+      active !== document.documentElement &&
+      !isInsideTreeRow(active)
+    )
+  }
   const rowSizeObserver =
     typeof ResizeObserver === 'undefined'
       ? undefined
@@ -160,8 +184,33 @@ export function Tree(props: TreeProps) {
           }
         })
 
+  // Focus the tree has asked for but not yet moved (a microtask away, or waiting for a
+  // virtualised row to mount) is only a request. While one is pending, focus arriving
+  // on a control outside the tree withdraws it, so a row mounting later cannot take
+  // focus back from a control the user, or the host, has since chosen.
+  const setPendingFocus = (id: string | null) => {
+    pendingFocusId = id
+    if (typeof document === 'undefined') return
+    if (id === null) {
+      if (pendingFocusGuard) document.removeEventListener('focusin', pendingFocusGuard, true)
+      pendingFocusGuard = undefined
+    } else if (!pendingFocusGuard) {
+      pendingFocusGuard = (event) => {
+        if (event.target instanceof Element && !isInsideTreeRow(event.target)) cancelPendingFocus()
+      }
+      document.addEventListener('focusin', pendingFocusGuard, true)
+    }
+  }
+  // Withdrawing a request also drops the memory of the row it was recovering for:
+  // nothing is left to recover.
+  const cancelPendingFocus = () => {
+    setPendingFocus(null)
+    focusedId = null
+  }
+
   onCleanup(() => {
     disposed = true
+    setPendingFocus(null)
     rowSizeObserver?.disconnect()
   })
 
@@ -176,13 +225,19 @@ export function Tree(props: TreeProps) {
       if (pendingFocusId !== id || effectiveActiveId() !== id) return
       const row = rows.get(id)
       if (!row || typeof document === 'undefined') return
+      // Ownership is checked when focus would move, not when it was requested: a
+      // control outside the tree may have taken focus since, and keeps it.
+      if (focusIsOutsideTree()) {
+        cancelPendingFocus()
+        return
+      }
       row.focus()
-      if (document.activeElement === row) pendingFocusId = null
+      if (document.activeElement === row) setPendingFocus(null)
     })
   }
 
   const focusItem = (id: string) => {
-    pendingFocusId = id
+    setPendingFocus(id)
     local.onActiveIdChange(id)
     if (rows.has(id)) requestedRevealId = null
     else requestReveal(id)
@@ -216,8 +271,14 @@ export function Tree(props: TreeProps) {
       if (focusWasInside) {
         queueMicrotask(() => {
           const fallbackId = effectiveActiveId()
-          if (!disposed && fallbackId !== null && pendingFocusId !== fallbackId)
-            focusItem(fallbackId)
+          if (disposed || fallbackId === null || pendingFocusId === fallbackId) return
+          // Focus fell out of the removed row, but it may have been given to a control
+          // outside the tree before this ran. Only nothing-focused (body) recovers.
+          if (focusIsOutsideTree()) {
+            focusedId = null
+            return
+          }
+          focusItem(fallbackId)
         })
       }
     },
@@ -225,6 +286,13 @@ export function Tree(props: TreeProps) {
     noteFocus: (id) => {
       focusedId = id
     },
+    noteBlur: (next) => {
+      // Focus moving to an element outside this tree ends the memory of the last
+      // focused row and withdraws any focus the tree was still waiting to give a
+      // row. A null target (focus to nothing, or the window losing focus) is
+      // ambiguous, so both stay for the recovery below.
+      if (next instanceof Element && !isInsideTreeRow(next)) cancelPendingFocus()
+    },
     activate: (id, event) => local.onActivate?.(id, event),
     expand: (id, expanded) => local.onExpand?.(id, expanded),
     disclosure: () => local.disclosure ?? 'row',
@@ -239,11 +307,15 @@ export function Tree(props: TreeProps) {
     if (activeId === null) return
     // If the projection removes the last row that took focus (a host filter, or
     // an ancestor collapsing), move focus to the same fallback that now owns the
-    // roving tab stop. `focusedId` is not cleared when focus leaves the tree, so
-    // this also reclaims focus from a control outside it; that long-standing
-    // behaviour is deliberately left as it was.
+    // roving tab stop, unless a control outside the tree has focus: that control
+    // keeps it, and only the roving stop moves.
     if (focusedId !== null && !index().byId.has(focusedId) && pendingFocusId !== activeId) {
-      focusItem(activeId)
+      if (focusIsOutsideTree()) {
+        focusedId = null
+        if (local.activeId !== activeId) local.onActiveIdChange(activeId)
+      } else {
+        focusItem(activeId)
+      }
     } else if (local.activeId !== activeId) {
       local.onActiveIdChange(activeId)
     }
@@ -354,12 +426,19 @@ export function TreeRow(props: TreeRowProps) {
   let registeredId: string | undefined
   const id = () => local.item.id
 
-  onCleanup(() => tree.unregister(registeredId ?? id(), row))
+  const handleFocusOut = (event: FocusEvent) => tree.noteBlur(event.relatedTarget)
+
+  onCleanup(() => {
+    row?.removeEventListener('focusout', handleFocusOut)
+    tree.unregister(registeredId ?? id(), row)
+  })
 
   const setRef = (element: HTMLDivElement) => {
     row = element
     registeredId = id()
     tree.register(registeredId, element)
+    // A listener, not an `onFocusOut` prop, so a host's own handler is untouched.
+    element.addEventListener('focusout', handleFocusOut)
   }
 
   createEffect(() => {

package/dist/r/src/components/layout/top-bar/top-bar.tsx

@@ -12,6 +12,12 @@ import { cn } from '../../../lib/utils'
  * narrow screens the middle track yields space to the controls, and each side
  * group scrolls when necessary so keyboard focus can reveal every action.
  *
+ * The centre track is sized for a lone search field. A bar whose centre holds
+ * more than that, such as a search plus an action beside it, passes
+ * `centerWidth="wide"`: the centre then stays fluid below 1280px, never
+ * narrower than 7rem so its controls are not squeezed out by a long leading
+ * group (which scrolls instead), and takes a wider fixed track above it.
+ *
  * On a frameless desktop window this row is also the drag region, so it carries
  * `window-drag` and the controls inside it opt back out. `macos-inset` and
  * `windows-inset` reserve the space the native window controls occupy, which is
@@ -27,6 +33,13 @@ export type TopBarProps = ComponentProps<'header'> & {
   windowsInset?: boolean
   /** Blur the content scrolling under the bar. */
   glass?: boolean
+  /**
+   * How wide the centre track is. `field` (default) suits a lone search field.
+   * `wide` suits a centre that also holds an action: fluid below 1280px and
+   * never narrower than 7rem (the side groups scroll to make room), then a
+   * clamp of 32vw up to 672px between equal side tracks.
+   */
+  centerWidth?: 'field' | 'wide'
 }
 
 export function TopBar(props: TopBarProps) {
@@ -36,6 +49,7 @@ export function TopBar(props: TopBarProps) {
     'macosInset',
     'windowsInset',
     'glass',
+    'centerWidth',
   ])
 
   return (
@@ -43,6 +57,8 @@ export function TopBar(props: TopBarProps) {
       data-slot="top-bar"
       class={cn(
         'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
+        local.centerWidth === 'wide' &&
+          'grid-cols-[auto_minmax(7rem,1fr)_auto] gap-2 md:grid-cols-[auto_minmax(7rem,1fr)_auto] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)]',
         local.glass && 'glass-panel',
         local.draggable && 'window-drag',
         /* Each edge gets exactly one inline-padding utility. A window inset

package/dist/r/src/components/ui/callout/callout.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { children, createMemo, splitProps } from 'solid-js'
 import { cva, type VariantProps } from '../../../lib/variants'
 import { cn } from '../../../lib/utils'
 
@@ -75,15 +75,35 @@ export const calloutVariants = cva(
 
 export type CalloutProps = ComponentProps<'div'> & VariantProps<typeof calloutVariants>
 
+const isRendered = (node: unknown) =>
+  node != null && typeof node !== 'boolean' && (typeof node !== 'string' || node.trim() !== '')
+
+const isCalloutTitle = (node: unknown) =>
+  typeof node === 'object' &&
+  node !== null &&
+  'getAttribute' in node &&
+  typeof node.getAttribute === 'function' &&
+  node.getAttribute('data-slot') === 'callout-title'
+
 export function Callout(props: CalloutProps) {
-  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
+  const [local, rest] = splitProps(props, ['class', 'variant', 'size', 'children'])
+  const resolved = children(() => local.children)
+  // CSS cannot see text nodes, so the callout looks at what it renders and marks a
+  // title with nothing after it. The title reads the mark to drop its bottom margin.
+  const titleOnly = createMemo(() => {
+    const nodes = resolved.toArray().filter(isRendered)
+    return nodes.length === 1 && isCalloutTitle(nodes[0])
+  })
   return (
     <div
       data-slot="callout"
+      data-title-only={titleOnly() ? '' : undefined}
       role="note"
       class={cn(calloutVariants({ variant: local.variant, size: local.size }), local.class)}
       {...rest}
-    />
+    >
+      {resolved()}
+    </div>
   )
 }
 
@@ -93,22 +113,23 @@ export function Callout(props: CalloutProps) {
  * level would break it. Pass `role="heading"` with `aria-level` where the
  * content does belong in the outline.
  *
- * The title always carries a 4px (`mb-1`) margin below it, whatever follows: a
+ * The title carries a 4px (`mb-1`) margin below it, whatever follows: a
  * paragraph, a list, or bare text. CSS cannot see text nodes, so a selector such
  * as `:last-child` or `:only-child` cannot tell `<Title/>text` (needs the gap)
  * from `<Title/>` (needs none), and `not-last:mb-1` silently dropped the gap for
- * bare text, the most common body. The unconditional margin is the less
- * surprising failure: it is never missing where text follows. The price is the
- * title-only callout, which would end 4px taller than its padding says. Pass
- * `class="mb-0"` there (`cn` lets the caller's margin win); the `WithTitle` story
- * shows it.
+ * bare text, the most common body. So the gap stays the default and the one case
+ * that does not want it is detected by `Callout`, which sees its rendered
+ * children: a callout whose only child is a title carries `data-title-only`, and
+ * the title drops its margin so the block ends at its own padding. A caller never
+ * passes `mb-0` for this. Anything else after the title, text included, keeps the
+ * gap.
  */
 export function CalloutTitle(props: ComponentProps<'div'>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="callout-title"
-      class={cn('mb-1 font-medium tracking-tight', local.class)}
+      class={cn('mb-1 font-medium tracking-tight in-data-title-only:mb-0', local.class)}
       {...rest}
     />
   )

package/dist/r/src/components/ui/input-group/secret-input-group.tsx

@@ -1,4 +1,4 @@
-import { splitProps, useContext, type ComponentProps, type JSX } from 'solid-js'
+import { Show, splitProps, useContext, type ComponentProps, type JSX } from 'solid-js'
 import { ActionButton } from '../../composites/action-button'
 import { FormFieldContext } from '../../../lib/form-field'
 import { InputGroup, InputGroupInput } from './input-group'
@@ -56,28 +56,31 @@ export function SecretInputGroup(props: SecretInputGroupProps) {
     />
   )
 
-  if (!local.onClear) return <InputGroup class={local.class}>{input}</InputGroup>
-
+  // One group for both cases: `onClear` may appear or disappear after setup
+  // (a stored secret is cleared, or a configured one arrives), and the input
+  // must keep its element, value and focus while the action comes and goes.
   return (
     <InputGroup class={local.class}>
       {input}
-      <ActionButton
-        data-slot="input-group-button"
-        variant="ghost"
-        size="xs"
-        class="-me-1 h-6 min-w-0 shrink-0 px-2"
-        disabled={local.disabled}
-        tooltip={
-          local.disabled
-            ? (local.disabledReason ?? 'This API key is managed by policy')
-            : (local.clearLabel ?? 'Clear API key')
-        }
-        tooltipSide="top"
-        aria-label={local.clearLabel ?? 'Clear API key'}
-        onClick={() => local.onClear?.()}
-      >
-        Clear
-      </ActionButton>
+      <Show when={local.onClear}>
+        <ActionButton
+          data-slot="input-group-button"
+          variant="ghost"
+          size="xs"
+          class="-me-1 h-6 min-w-0 shrink-0 px-2"
+          disabled={local.disabled}
+          tooltip={
+            local.disabled
+              ? (local.disabledReason ?? 'This API key is managed by policy')
+              : (local.clearLabel ?? 'Clear API key')
+          }
+          tooltipSide="top"
+          aria-label={local.clearLabel ?? 'Clear API key'}
+          onClick={() => local.onClear?.()}
+        >
+          Clear
+        </ActionButton>
+      </Show>
     </InputGroup>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.138.0",
+  "version": "0.139.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",