@adea-ai/ui 0.131.1 → 0.134.0

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

@@ -4,8 +4,27 @@ export type SecretInputGroupProps = {
     disabled: boolean;
     onChange: JSX.EventHandler<HTMLInputElement, Event>;
     onClear?: () => void;
+    /**
+     * What the clear action does, for this field: its accessible name and its
+     * tooltip while enabled ("Clear stored token", "Clear Google token path").
+     * Defaults to "Clear API key".
+     */
+    clearLabel?: string;
+    /**
+     * Why the clear action is unavailable, shown as its tooltip while the group is
+     * `disabled`. Defaults to the policy message, so name the real reason when a
+     * field is disabled for another one ("Set a token variable first").
+     */
+    disabledReason?: string;
     class?: string;
 } & Pick<ComponentProps<'input'>, 'id' | 'aria-label' | 'aria-describedby' | 'aria-invalid'>;
-/** A password input with an optional keyboard-accessible clear action. */
+/**
+ * A password input with an optional keyboard-accessible clear action.
+ *
+ * The wording is the caller's: inside a `FormField` the input takes the field's
+ * label, outside one it needs `aria-label` (the fallback names an API key), and
+ * `clearLabel` and `disabledReason` name the clear action for the field it
+ * belongs to, so a bearer token or a token path is not announced as an API key.
+ */
 export declare function SecretInputGroup(props: SecretInputGroupProps): JSX.Element;
 //# sourceMappingURL=secret-input-group.d.ts.map

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,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,kBAAkB,GAAG,cAAc,CAAC,CAAA;AAE5F,0EAA0E;AAC1E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eA2C5D"}
+{"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"}

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

@@ -1,10 +1,17 @@
 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, mergeProps } from "solid-js/web";
+import { createComponent, memo, mergeProps } from "solid-js/web";
 import { 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. */
+/**
+* A password input with an optional keyboard-accessible clear action.
+*
+* The wording is the caller's: inside a `FormField` the input takes the field's
+* label, outside one it needs `aria-label` (the fallback names an API key), and
+* `clearLabel` and `disabledReason` name the clear action for the field it
+* belongs to, so a bearer token or a token path is not announced as an API key.
+*/
 function SecretInputGroup(props) {
 	const field = useContext(FormFieldContext);
 	const [local, rest] = splitProps(props, [
@@ -12,6 +19,8 @@ function SecretInputGroup(props) {
 		"disabled",
 		"onChange",
 		"onClear",
+		"clearLabel",
+		"disabledReason",
 		"aria-label",
 		"class"
 	]);
@@ -51,10 +60,12 @@ function SecretInputGroup(props) {
 					return local.disabled;
 				},
 				get tooltip() {
-					return local.disabled ? "This API key is managed by policy" : "Clear API key";
+					return memo(() => !!local.disabled)() ? local.disabledReason ?? "This API key is managed by policy" : local.clearLabel ?? "Clear API key";
 				},
 				tooltipSide: "top",
-				"aria-label": "Clear API key",
+				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","class","Pick","SecretInputGroup","props","field","local","rest","input","_$createComponent","_$mergeProps","aria-label","undefined","type","autocomplete","onInput","children","variant","size","tooltip","tooltipSide","onClick","_$createComponent","_$mergeProps"],"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  class?: string\n} & Pick<ComponentProps<'input'>, 'id' | 'aria-label' | 'aria-describedby' | 'aria-invalid'>\n\n/** A password input with an optional keyboard-accessible clear action. */\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    '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={local.disabled ? 'This API key is managed by policy' : 'Clear API key'}\n        tooltipSide=\"top\"\n        aria-label=\"Clear API key\"\n        onClick={() => local.onClear?.()}\n      >\n        Clear\n      </ActionButton>\n    </InputGroup>\n  )\n}\n"],"mappings":";;;;;;;AAcA,SAAgBkB,iBAAiBC,OAA8B;CAC7D,MAAMC,QAAQnB,WAAWI,gBAAgB;CACzC,MAAM,CAACgB,OAAOC,QAAQtB,WAAWmB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,MAAMI,QAAKC,gBACRjB,iBAAekB,WACVH,MAAI;EAAA,KAAA,gBAAA;GAAA,OACID,MAAM,kBAAkBD,QAAQO,KAAAA,IAAY;EAAc;EACtEC,MAAI;EACJC,cAAY;EAAA,IACZpB,QAAK;GAAA,OAAEY,MAAMZ;EAAK;EAAA,IAClBC,WAAQ;GAAA,OAAEW,MAAMX;EAAQ;EAAA,IACxBoB,UAAO;GAAA,OAAET,MAAMV;EAAQ;CAAA,CAAA,CAAA;CAI3B,IAAI,CAACU,MAAMN,SAAS,OAAAS,gBAAQlB,YAAU;EAAA,KAAA,WAAA;GAAA,OAAQe,MAAML;EAAK;EAAAe,UAAGR;CAAK,CAAA;CAEjE,OAAAC,gBACGlB,YAAU;EAAA,KAAA,WAAA;GAAA,OAAQe,MAAML;EAAK;EAAA,IAAAe,WAAA;GAAA,OAAA,CAC3BR,OAAKC,gBACLpB,cAAY;IAAA,aAAA;IAEX4B,SAAO;IACPC,MAAI;IAAA,SAAA;IAAA,IAEJvB,WAAQ;KAAA,OAAEW,MAAMX;IAAQ;IAAA,IACxBwB,UAAO;KAAA,OAAEb,MAAMX,WAAW,sCAAsC;IAAe;IAC/EyB,aAAW;IAAA,cAAA;IAEXC,eAAef,MAAMN,UAAU;IAACgB,UAAA;GAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAMxC"}
+{"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"}

package/dist/components/ui/native-select/native-select.d.ts

@@ -7,6 +7,14 @@ export type NativeSelectProps = Omit<ComponentProps<'select'>, 'size'> & {
      * control that this styled single-line select is not.
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Layout classes for the element that wraps the select and its chevron: a
+     * width or `max-w-*`, `flex-1`, `col-span-*`, a margin. `class` reaches the
+     * `<select>` itself, which is the wrong box for any of those, because the
+     * wrapper is what a flex or grid parent lays out. The select fills the
+     * wrapper, so the chevron stays at the control's edge at any width.
+     */
+    wrapperClass?: string;
     /** Render the choices from data instead of raw option children. */
     options?: readonly NativeSelectOption[];
     /** Initialize an uncontrolled selection after its native options mount. */

package/dist/components/ui/native-select/native-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/native-select/native-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACvE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACvC,2EAA2E;IAC3E,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;CACjD,CAAA;AAkCD;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCAuFpD"}
+{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/native-select/native-select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACvE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACvC,2EAA2E;IAC3E,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;CACjD,CAAA;AAkCD;;;;;;;;;GASG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCA2FpD"}

package/dist/components/ui/native-select/native-select.js

@@ -1,10 +1,10 @@
 import { cn } from "../../../lib/utils.js";
 import { useFormFieldControl } from "../../../lib/form-field.js";
-import { createComponent, effect, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { className, createComponent, effect, insert, mergeProps, spread, template, use } from "solid-js/web";
 import { ChevronDownIcon } from "lucide-solid";
 import { For, Show, createEffect, onMount, splitProps } from "solid-js";
 //#region src/components/ui/native-select/native-select.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=native-select-wrapper class="relative inline-flex min-w-0"><select data-slot=native-select>`);
+var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=native-select-wrapper><select data-slot=native-select>`);
 var _tmpl$2 = /*#__PURE__*/ template(`<option>`);
 function setSelectedValue(select, value, multiple) {
 	if (value === void 0) return;
@@ -24,6 +24,7 @@ function initializeDefaultSelection(select, value, multiple) {
 function NativeSelect(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
+		"wrapperClass",
 		"size",
 		"children",
 		"defaultValue",
@@ -76,7 +77,7 @@ function NativeSelect(props) {
 				return field?.["aria-errormessage"] ?? local["aria-errormessage"];
 			},
 			get ["class"]() {
-				return cn("min-w-0 appearance-none rounded-md border border-input bg-transparent", {
+				return cn("w-full min-w-0 appearance-none rounded-md border border-input bg-transparent", {
 					"h-control-sm px-control-sm pr-8 text-xs": local.size === "sm",
 					"h-control-md px-control-md pr-9 text-sm": local.size === "md" || local.size === void 0,
 					"h-control-lg px-control-lg pr-9 text-sm": local.size === "lg"
@@ -110,6 +111,7 @@ function NativeSelect(props) {
 				return cn("pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground", local.size === "sm" ? "size-3.5" : "size-4");
 			}
 		}), null);
+		effect(() => className(_el$, cn("relative inline-flex min-w-0", local.wrapperClass)));
 		return _el$;
 	})();
 }

package/dist/components/ui/native-select/native-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.js","names":["ChevronDownIcon","ComponentProps","createEffect","For","onMount","Show","splitProps","useFormFieldControl","cn","NativeSelectProps","Omit","size","options","NativeSelectOption","defaultValue","setSelectedValue","select","HTMLSelectElement","value","multiple","undefined","Array","isArray","selected","Set","map","String","option","has","initializeDefaultSelection","defaultValues","defaultSelected","Readonly","label","disabled","NativeSelect","props","local","rest","field","id","Boolean","_el$","_tmpl$","_el$2","firstChild","_$use","element","_$spread","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","_$insert","_$createComponent","when","fallback","children","each","_el$3","_tmpl$2","_$effect","_$mergeProps","_$createComponent"],"sources":["../../../../src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, For, onMount, Show, splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\nexport type NativeSelectProps = Omit<ComponentProps<'select'>, 'size'> & {\n  /**\n   * The control rung, matching `Input` and `SelectTrigger`: `sm` for a dense\n   * toolbar or pane filter, `md` (the default) everywhere else. This replaces the\n   * native `size` attribute, which turns a select into a list box — a different\n   * control that this styled single-line select is not.\n   */\n  size?: 'sm' | 'md' | 'lg'\n  /** Render the choices from data instead of raw option children. */\n  options?: readonly NativeSelectOption[]\n  /** Initialize an uncontrolled selection after its native options mount. */\n  defaultValue?: ComponentProps<'select'>['value']\n}\n\nfunction setSelectedValue(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  if (multiple && Array.isArray(value)) {\n    const selected = new Set(value.map(String))\n    for (const option of select.options) option.selected = selected.has(option.value)\n    return\n  }\n\n  select.value = String(Array.isArray(value) ? (value[0] ?? '') : value)\n}\n\nfunction initializeDefaultSelection(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  const defaultValues =\n    multiple && Array.isArray(value)\n      ? new Set(value.map(String))\n      : new Set([String(Array.isArray(value) ? (value[0] ?? '') : value)])\n\n  for (const option of select.options) option.defaultSelected = defaultValues.has(option.value)\n  setSelectedValue(select, value, multiple)\n}\n\n/**\n * NativeSelect.\n *\n * A styled native `<select>` for compact, finite choices. Use `Select` when the\n * list needs a custom popover, typed options, or runtime filtering; this keeps\n * the browser's built-in keyboard, form, option, and label behavior.\n *\n * Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and\n * the Adea token system; see the root NOTICE for source and attribution.\n */\nexport type NativeSelectOption = Readonly<{\n  value: string\n  label: string\n  disabled?: boolean\n}>\n\nexport function NativeSelect(props: NativeSelectProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'size',\n    'children',\n    'defaultValue',\n    'options',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n  let select: HTMLSelectElement | undefined\n\n  // Set selection after native options exist; setting select.value before its\n  // children are mounted makes browsers fall back to the first option.\n  createEffect(() => {\n    if (!select) return\n    setSelectedValue(select, rest.value, Boolean(rest.multiple))\n  })\n  onMount(() => {\n    if (select && rest.value === undefined) {\n      initializeDefaultSelection(select, local.defaultValue, Boolean(rest.multiple))\n    }\n  })\n\n  return (\n    <span data-slot=\"native-select-wrapper\" class=\"relative inline-flex min-w-0\">\n      <select\n        ref={(element) => {\n          select = element\n        }}\n        data-slot=\"native-select\"\n        id={field?.id ?? local.id}\n        aria-label={local['aria-label']}\n        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n        class={cn(\n          'min-w-0 appearance-none rounded-md border border-input bg-transparent',\n          {\n            'h-control-sm px-control-sm pr-8 text-xs': local.size === 'sm',\n            'h-control-md px-control-md pr-9 text-sm':\n              local.size === 'md' || local.size === undefined,\n            'h-control-lg px-control-lg pr-9 text-sm': local.size === 'lg',\n          },\n          'transition-[color,box-shadow,border-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',\n          local.class\n        )}\n        {...rest}\n      >\n        <Show when={local.options} fallback={local.children}>\n          {(options) => (\n            <For each={options()}>\n              {(option) => (\n                <option value={option.value} disabled={option.disabled}>\n                  {option.label}\n                </option>\n              )}\n            </For>\n          )}\n        </Show>\n      </select>\n      <ChevronDownIcon\n        data-slot=\"native-select-icon\"\n        aria-hidden=\"true\"\n        class={cn(\n          'pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground',\n          local.size === 'sm' ? 'size-3.5' : 'size-4'\n        )}\n      />\n    </span>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"native-select.js","names":["ChevronDownIcon","ComponentProps","createEffect","For","onMount","Show","splitProps","useFormFieldControl","cn","NativeSelectProps","Omit","size","wrapperClass","options","NativeSelectOption","defaultValue","setSelectedValue","select","HTMLSelectElement","value","multiple","undefined","Array","isArray","selected","Set","map","String","option","has","initializeDefaultSelection","defaultValues","defaultSelected","Readonly","label","disabled","NativeSelect","props","local","rest","field","id","Boolean","_el$","_tmpl$","_el$2","firstChild","_$use","element","_$spread","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","_$insert","_$createComponent","when","fallback","children","each","_el$3","_tmpl$2","_$effect","_$className","_$mergeProps","_$createComponent","_$className"],"sources":["../../../../src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { ChevronDownIcon } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, For, onMount, Show, splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\nexport type NativeSelectProps = Omit<ComponentProps<'select'>, 'size'> & {\n  /**\n   * The control rung, matching `Input` and `SelectTrigger`: `sm` for a dense\n   * toolbar or pane filter, `md` (the default) everywhere else. This replaces the\n   * native `size` attribute, which turns a select into a list box — a different\n   * control that this styled single-line select is not.\n   */\n  size?: 'sm' | 'md' | 'lg'\n  /**\n   * Layout classes for the element that wraps the select and its chevron: a\n   * width or `max-w-*`, `flex-1`, `col-span-*`, a margin. `class` reaches the\n   * `<select>` itself, which is the wrong box for any of those, because the\n   * wrapper is what a flex or grid parent lays out. The select fills the\n   * wrapper, so the chevron stays at the control's edge at any width.\n   */\n  wrapperClass?: string\n  /** Render the choices from data instead of raw option children. */\n  options?: readonly NativeSelectOption[]\n  /** Initialize an uncontrolled selection after its native options mount. */\n  defaultValue?: ComponentProps<'select'>['value']\n}\n\nfunction setSelectedValue(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  if (multiple && Array.isArray(value)) {\n    const selected = new Set(value.map(String))\n    for (const option of select.options) option.selected = selected.has(option.value)\n    return\n  }\n\n  select.value = String(Array.isArray(value) ? (value[0] ?? '') : value)\n}\n\nfunction initializeDefaultSelection(\n  select: HTMLSelectElement,\n  value: ComponentProps<'select'>['value'],\n  multiple: boolean\n) {\n  if (value === undefined) return\n\n  const defaultValues =\n    multiple && Array.isArray(value)\n      ? new Set(value.map(String))\n      : new Set([String(Array.isArray(value) ? (value[0] ?? '') : value)])\n\n  for (const option of select.options) option.defaultSelected = defaultValues.has(option.value)\n  setSelectedValue(select, value, multiple)\n}\n\n/**\n * NativeSelect.\n *\n * A styled native `<select>` for compact, finite choices. Use `Select` when the\n * list needs a custom popover, typed options, or runtime filtering; this keeps\n * the browser's built-in keyboard, form, option, and label behavior.\n *\n * Translated from shadcn/ui's MIT-licensed NativeSelect wrapper to SolidJS and\n * the Adea token system; see the root NOTICE for source and attribution.\n */\nexport type NativeSelectOption = Readonly<{\n  value: string\n  label: string\n  disabled?: boolean\n}>\n\nexport function NativeSelect(props: NativeSelectProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'wrapperClass',\n    'size',\n    'children',\n    'defaultValue',\n    'options',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('control', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n  let select: HTMLSelectElement | undefined\n\n  // Set selection after native options exist; setting select.value before its\n  // children are mounted makes browsers fall back to the first option.\n  createEffect(() => {\n    if (!select) return\n    setSelectedValue(select, rest.value, Boolean(rest.multiple))\n  })\n  onMount(() => {\n    if (select && rest.value === undefined) {\n      initializeDefaultSelection(select, local.defaultValue, Boolean(rest.multiple))\n    }\n  })\n\n  return (\n    <span\n      data-slot=\"native-select-wrapper\"\n      class={cn('relative inline-flex min-w-0', local.wrapperClass)}\n    >\n      <select\n        ref={(element) => {\n          select = element\n        }}\n        data-slot=\"native-select\"\n        id={field?.id ?? local.id}\n        aria-label={local['aria-label']}\n        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n        class={cn(\n          'w-full min-w-0 appearance-none rounded-md border border-input bg-transparent',\n          {\n            'h-control-sm px-control-sm pr-8 text-xs': local.size === 'sm',\n            'h-control-md px-control-md pr-9 text-sm':\n              local.size === 'md' || local.size === undefined,\n            'h-control-lg px-control-lg pr-9 text-sm': local.size === 'lg',\n          },\n          'transition-[color,box-shadow,border-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',\n          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',\n          local.class\n        )}\n        {...rest}\n      >\n        <Show when={local.options} fallback={local.children}>\n          {(options) => (\n            <For each={options()}>\n              {(option) => (\n                <option value={option.value} disabled={option.disabled}>\n                  {option.label}\n                </option>\n              )}\n            </For>\n          )}\n        </Show>\n      </select>\n      <ChevronDownIcon\n        data-slot=\"native-select-icon\"\n        aria-hidden=\"true\"\n        class={cn(\n          'pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground',\n          local.size === 'sm' ? 'size-3.5' : 'size-4'\n        )}\n      />\n    </span>\n  )\n}\n"],"mappings":"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"}

package/dist/r/src/components/composites/list-row/list-row-control.tsx

@@ -18,6 +18,15 @@ export type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicP
     trailing?: JSX.Element
     /** A second line that wraps and grows the row to fit its content. */
     description?: string
+    /**
+     * Keep the description on one line and end it with an ellipsis instead of
+     * wrapping, so a described row stays at its minimum height however long the
+     * text is. Use it where rows must be a predictable height (a virtualised
+     * queue); leave it off where the whole description should be readable. Pair
+     * it with a `tooltip` when the full text matters, and with
+     * `stackTrailing={false}` to keep a trailing slot beside the text.
+     */
+    truncateDescription?: boolean
     /**
      * Whether a described row may drop its trailing slot onto its own line when
      * the row gets narrow (the default). Pass `false` for a short, truncating
@@ -43,6 +52,7 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
     'leading',
     'trailing',
     'description',
+    'truncateDescription',
     'stackTrailing',
     'type',
     'tabIndex',
@@ -92,7 +102,8 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
             <span
               data-slot="list-row-description"
               class={cn(
-                'text-xs break-words',
+                'text-xs',
+                { truncate: local.truncateDescription, 'break-words': !local.truncateDescription },
                 local.selected ? 'text-foreground' : 'text-muted-foreground'
               )}
             >

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

@@ -86,6 +86,14 @@ export function SettingsRow(
     orientation?: 'horizontal' | 'vertical'
     /** Hide the divider this row would otherwise contribute. */
     bare?: boolean
+    /**
+     * Drop the row's own 16px padding so its label and control sit on the same
+     * edges as the fields around it. For a row placed loose in a
+     * `bodyLayout="content"` section, where nothing encloses it and the section's
+     * gap already spaces it from its neighbours. Leave it off inside a divided
+     * rows body or a `Card`, whose edge the padding is there to clear.
+     */
+    flush?: boolean
   }
 ) {
   const [local, rest] = splitProps(props, [
@@ -94,6 +102,7 @@ export function SettingsRow(
     'description',
     'orientation',
     'bare',
+    'flush',
     'children',
   ])
   const rowId = createUniqueId()
@@ -113,7 +122,8 @@ export function SettingsRow(
       <div
         data-slot="settings-row"
         class={cn(
-          'flex gap-4 p-4',
+          'flex gap-4',
+          local.flush ? 'p-0' : 'p-4',
           local.orientation === 'vertical'
             ? 'flex-col'
             : 'flex-col sm:flex-row sm:items-center sm:justify-between',

package/dist/r/src/components/ui/empty/empty-state.tsx

@@ -2,22 +2,45 @@ import { Search } from 'lucide-solid'
 import type { ComponentProps, JSX } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
 import { ActionButton } from '../../composites/action-button'
+import { cn } from '../../../lib/utils'
 import { Spinner } from '../spinner'
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty'
 
-export type EmptyStateProps = Omit<ComponentProps<'div'>, 'children' | 'role' | 'aria-live'> & {
-  title: string
-  detail: string
-  busy?: boolean
-  icon?: JSX.Element
-  announceAs?: 'alert' | 'status'
-  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
-  action?: () => void
-  actionLabel?: string
-  actionTooltip?: string
-}
+type EmptyStateSecondaryAction =
+  | {
+      secondaryAction?: undefined
+      secondaryActionLabel?: undefined
+      secondaryActionTooltip?: never
+    }
+  | {
+      /** A second, quieter way out beside `action`: "Open settings" next to "Retry". */
+      secondaryAction: () => void
+      /** Required: there is no sensible default name for an arbitrary second action. */
+      secondaryActionLabel: string
+      secondaryActionTooltip?: string
+    }
+
+export type EmptyStateProps = Omit<ComponentProps<'div'>, 'children' | 'role' | 'aria-live'> &
+  EmptyStateSecondaryAction & {
+    title: string
+    detail: string
+    busy?: boolean
+    icon?: JSX.Element
+    announceAs?: 'alert' | 'status'
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+    action?: () => void
+    actionLabel?: string
+    actionTooltip?: string
+  }
 
-/** A semantic empty, loading, or error state built from the shared empty parts. */
+/**
+ * A semantic empty, loading, or error state built from the shared empty parts.
+ *
+ * `action` is the primary way forward. `secondaryAction` adds one quieter
+ * alternative after it, in a `secondary` button, so the primary stays first in
+ * the tab order. Two actions side by side is the limit: a state that needs more
+ * should compose the `Empty*` parts directly.
+ */
 export function EmptyState(props: EmptyStateProps) {
   const [local, rest] = splitProps(props, [
     'title',
@@ -29,6 +52,9 @@ export function EmptyState(props: EmptyStateProps) {
     'action',
     'actionLabel',
     'actionTooltip',
+    'secondaryAction',
+    'secondaryActionLabel',
+    'secondaryActionTooltip',
     'class',
   ])
 
@@ -55,15 +81,27 @@ export function EmptyState(props: EmptyStateProps) {
         </EmptyTitle>
         <EmptyDescription>{local.detail}</EmptyDescription>
       </EmptyHeader>
-      <Show when={local.action}>
-        <EmptyContent>
-          <ActionButton
-            tooltip={local.actionTooltip ?? local.actionLabel ?? 'Try again'}
-            aria-label={local.actionLabel ?? 'Try again'}
-            onClick={local.action}
-          >
-            {local.actionLabel ?? 'Try again'}
-          </ActionButton>
+      <Show when={local.action || local.secondaryAction}>
+        <EmptyContent class={cn({ 'flex-row flex-wrap justify-center': !!local.secondaryAction })}>
+          <Show when={local.action}>
+            <ActionButton
+              tooltip={local.actionTooltip ?? local.actionLabel ?? 'Try again'}
+              aria-label={local.actionLabel ?? 'Try again'}
+              onClick={local.action}
+            >
+              {local.actionLabel ?? 'Try again'}
+            </ActionButton>
+          </Show>
+          <Show when={local.secondaryAction}>
+            <ActionButton
+              variant="secondary"
+              tooltip={local.secondaryActionTooltip ?? local.secondaryActionLabel}
+              aria-label={local.secondaryActionLabel}
+              onClick={local.secondaryAction}
+            >
+              {local.secondaryActionLabel}
+            </ActionButton>
+          </Show>
         </EmptyContent>
       </Show>
     </Empty>

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

@@ -195,8 +195,12 @@ export type FieldGroupProps = ComponentProps<'div'> & {
    * that needs the full width says `class="col-span-full"`. Below `sm` it is
    * one column again, because two inputs side by side on a phone are each too
    * narrow to read.
+   *
+   * `3` is the same grid with three columns from `sm`, for a row of short values
+   * (a trio of limits, a day count and two thresholds). Each column is a third of
+   * the group, so reach for `2` when a field holds a path, a URL or a sentence.
    */
-  columns?: 1 | 2
+  columns?: 1 | 2 | 3
 }
 
 /** A visual stack for related controls that does not imply fieldset semantics. */
@@ -206,7 +210,11 @@ export function FieldGroup(props: FieldGroupProps) {
     <div
       data-slot="field-group"
       class={cn(
-        local.columns === 2 ? 'grid gap-4 sm:grid-cols-2' : 'flex flex-col gap-4',
+        {
+          'grid gap-4 sm:grid-cols-2': local.columns === 2,
+          'grid gap-4 sm:grid-cols-3': local.columns === 3,
+          'flex flex-col gap-4': local.columns !== 2 && local.columns !== 3,
+        },
         local.class
       )}
       {...rest}

package/dist/r/src/components/ui/field/number-field.tsx

@@ -8,6 +8,20 @@ export type NumberFieldProps = {
   value: number
   min: number
   max: number
+  /**
+   * The increment of the spinner and the arrow keys, and the grid a typed value
+   * must sit on: `min` plus a whole number of steps. Use it for stepped or
+   * fractional values (`0.05` for a 0-1 score, `5` for a percentage in fives).
+   * Without it a field steps by 1, or by `any` when `integer` is `false`, which
+   * accepts every decimal but leaves the spinner moving in whole numbers.
+   */
+  step?: number
+  /**
+   * Whether only whole numbers are valid. It defaults to `true`, or, when a
+   * `step` is given, to whether both the step and its base `min` are whole
+   * numbers, so `step={0.05}` accepts decimals without also saying
+   * `integer={false}`, and `min={0.5} step={1}` accepts 0.5, 1.5, 2.5.
+   */
   integer?: boolean
   onChange: (value: number) => void
   class?: string
@@ -16,13 +30,20 @@ export type NumberFieldProps = {
 
 /**
  * A controlled numeric field that keeps an editable draft while validating
- * range and integer constraints. Invalid drafts are announced and restored
- * to the latest controlled value when focus leaves the input.
+ * range, integer and step constraints. Invalid drafts are announced and restored
+ * to the latest controlled value when focus leaves the input, so `onChange`
+ * only ever receives a value the field accepts — a caller never needs a
+ * `Number(value) || fallback` of its own.
  */
 export function NumberField(props: NumberFieldProps) {
   const [draft, setDraft] = createSignal(String(props.value))
   const [error, setError] = createSignal('')
-  const integer = () => props.integer ?? true
+  // Whole numbers only when nothing on the grid is fractional: a whole step from
+  // a fractional `min` (0.5, 1.5, 2.5) puts the spinner's own values off the
+  // integers, so inference needs the step and its base to both be whole.
+  const integer = () =>
+    props.integer ??
+    (props.step === undefined || (Number.isInteger(props.step) && Number.isInteger(props.min)))
 
   createEffect(() => {
     setDraft(String(props.value))
@@ -38,6 +59,16 @@ export function NumberField(props: NumberFieldProps) {
     if (next < props.min || next > props.max) {
       return `${props.label} must be between ${props.min} and ${props.max}.`
     }
+    if (props.step !== undefined && props.step > 0) {
+      // Compare in whole steps with a tolerance: 0.15 / 0.05 is 3.0000000000000004,
+      // and rejecting it would make the spinner's own values invalid.
+      const steps = (next - props.min) / props.step
+      if (Math.abs(steps - Math.round(steps)) > 1e-9) {
+        return props.min === 0
+          ? `${props.label} must be a multiple of ${props.step}.`
+          : `${props.label} must be ${props.min} plus a multiple of ${props.step}.`
+      }
+    }
     return ''
   }
 
@@ -48,7 +79,7 @@ export function NumberField(props: NumberFieldProps) {
         value={draft()}
         min={props.min}
         max={props.max}
-        step={integer() ? 1 : 'any'}
+        step={props.step ?? (integer() ? 1 : 'any')}
         required
         onInput={(event) => {
           const raw = event.currentTarget.value

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

@@ -8,10 +8,29 @@ export type SecretInputGroupProps = {
   disabled: boolean
   onChange: JSX.EventHandler<HTMLInputElement, Event>
   onClear?: () => void
+  /**
+   * What the clear action does, for this field: its accessible name and its
+   * tooltip while enabled ("Clear stored token", "Clear Google token path").
+   * Defaults to "Clear API key".
+   */
+  clearLabel?: string
+  /**
+   * Why the clear action is unavailable, shown as its tooltip while the group is
+   * `disabled`. Defaults to the policy message, so name the real reason when a
+   * field is disabled for another one ("Set a token variable first").
+   */
+  disabledReason?: string
   class?: string
 } & Pick<ComponentProps<'input'>, 'id' | 'aria-label' | 'aria-describedby' | 'aria-invalid'>
 
-/** A password input with an optional keyboard-accessible clear action. */
+/**
+ * A password input with an optional keyboard-accessible clear action.
+ *
+ * The wording is the caller's: inside a `FormField` the input takes the field's
+ * label, outside one it needs `aria-label` (the fallback names an API key), and
+ * `clearLabel` and `disabledReason` name the clear action for the field it
+ * belongs to, so a bearer token or a token path is not announced as an API key.
+ */
 export function SecretInputGroup(props: SecretInputGroupProps) {
   const field = useContext(FormFieldContext)
   const [local, rest] = splitProps(props, [
@@ -19,6 +38,8 @@ export function SecretInputGroup(props: SecretInputGroupProps) {
     'disabled',
     'onChange',
     'onClear',
+    'clearLabel',
+    'disabledReason',
     'aria-label',
     'class',
   ])
@@ -46,9 +67,13 @@ export function SecretInputGroup(props: SecretInputGroupProps) {
         size="xs"
         class="-me-1 h-6 min-w-0 shrink-0 px-2"
         disabled={local.disabled}
-        tooltip={local.disabled ? 'This API key is managed by policy' : 'Clear API key'}
+        tooltip={
+          local.disabled
+            ? (local.disabledReason ?? 'This API key is managed by policy')
+            : (local.clearLabel ?? 'Clear API key')
+        }
         tooltipSide="top"
-        aria-label="Clear API key"
+        aria-label={local.clearLabel ?? 'Clear API key'}
         onClick={() => local.onClear?.()}
       >
         Clear

package/dist/r/src/components/ui/native-select/native-select.tsx

@@ -12,6 +12,14 @@ export type NativeSelectProps = Omit<ComponentProps<'select'>, 'size'> & {
    * control that this styled single-line select is not.
    */
   size?: 'sm' | 'md' | 'lg'
+  /**
+   * Layout classes for the element that wraps the select and its chevron: a
+   * width or `max-w-*`, `flex-1`, `col-span-*`, a margin. `class` reaches the
+   * `<select>` itself, which is the wrong box for any of those, because the
+   * wrapper is what a flex or grid parent lays out. The select fills the
+   * wrapper, so the chevron stays at the control's edge at any width.
+   */
+  wrapperClass?: string
   /** Render the choices from data instead of raw option children. */
   options?: readonly NativeSelectOption[]
   /** Initialize an uncontrolled selection after its native options mount. */
@@ -69,6 +77,7 @@ export type NativeSelectOption = Readonly<{
 export function NativeSelect(props: NativeSelectProps) {
   const [local, rest] = splitProps(props, [
     'class',
+    'wrapperClass',
     'size',
     'children',
     'defaultValue',
@@ -103,7 +112,10 @@ export function NativeSelect(props: NativeSelectProps) {
   })
 
   return (
-    <span data-slot="native-select-wrapper" class="relative inline-flex min-w-0">
+    <span
+      data-slot="native-select-wrapper"
+      class={cn('relative inline-flex min-w-0', local.wrapperClass)}
+    >
       <select
         ref={(element) => {
           select = element
@@ -116,7 +128,7 @@ export function NativeSelect(props: NativeSelectProps) {
         aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
         aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
         class={cn(
-          'min-w-0 appearance-none rounded-md border border-input bg-transparent',
+          'w-full min-w-0 appearance-none rounded-md border border-input bg-transparent',
           {
             'h-control-sm px-control-sm pr-8 text-xs': local.size === 'sm',
             'h-control-md px-control-md pr-9 text-sm':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.131.1",
+  "version": "0.134.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",

package/src/components/composites/list-row/list-row-control.tsx

@@ -18,6 +18,15 @@ export type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicP
     trailing?: JSX.Element
     /** A second line that wraps and grows the row to fit its content. */
     description?: string
+    /**
+     * Keep the description on one line and end it with an ellipsis instead of
+     * wrapping, so a described row stays at its minimum height however long the
+     * text is. Use it where rows must be a predictable height (a virtualised
+     * queue); leave it off where the whole description should be readable. Pair
+     * it with a `tooltip` when the full text matters, and with
+     * `stackTrailing={false}` to keep a trailing slot beside the text.
+     */
+    truncateDescription?: boolean
     /**
      * Whether a described row may drop its trailing slot onto its own line when
      * the row gets narrow (the default). Pass `false` for a short, truncating
@@ -43,6 +52,7 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
     'leading',
     'trailing',
     'description',
+    'truncateDescription',
     'stackTrailing',
     'type',
     'tabIndex',
@@ -92,7 +102,8 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
             <span
               data-slot="list-row-description"
               class={cn(
-                'text-xs break-words',
+                'text-xs',
+                { truncate: local.truncateDescription, 'break-words': !local.truncateDescription },
                 local.selected ? 'text-foreground' : 'text-muted-foreground'
               )}
             >