From 32598d7cf3bac5ceff8bfa40501bb04c0641b731 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 23 May 2026 13:41:18 +0200
Subject: [PATCH] fix(alert-dialog): narrow Action.variant to canonical
 SelectionVariant (3)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stops the chip-count drift introduced in \`c98510af\`. AlertDialog.Action
was exposing all 6 ButtonVariant chips, breaking the 3-chip rhythm the
rest of UIX follows. Per DEMO_AUTHORING_GUIDE §12.7 every chip-group
must enumerate the full union the type declares — so the fix is to
narrow the *type*, not truncate the chips.

\`AlertDialogActionVariant = Extract<ButtonVariant, SelectionVariant>\`
imports the canonical set from \`eidos/lib/types.ts\` (`solid | outline |
ghost`), which is the right shape for a primary action button:
- keeps 'solid' as the CTA default
- 3-chip parity with Cancel (ControlVariant), DropdownMenu.Trigger
  (ControlVariant), and the rest of the form-control surface
- no invented vocab — uses the existing canon set named for exactly
  this use case ("selection chips / toggles" semantically maps to
  "selection / action buttons")

Demo array drops from 6 to 3 chips; API row updated to reflect the
narrowing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/uix/eidos/components/alert-dialog/types.ts  | 17 +++++++++++------
 .../uix/components/alert-dialog/+page.svelte    | 13 ++++++-------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/uix/eidos/components/alert-dialog/types.ts b/src/uix/eidos/components/alert-dialog/types.ts
index 050c57cc9..72a8a831a 100644
--- a/src/uix/eidos/components/alert-dialog/types.ts
+++ b/src/uix/eidos/components/alert-dialog/types.ts
@@ -9,7 +9,7 @@ import type {
 	ButtonRounded,
 	ButtonProps as EidosButtonProps
 } from '$uix/eidos/components/button';
-import type { ControlVariant, ResponsiveProp } from '$uix/eidos/lib/types';
+import type { ControlVariant, SelectionVariant, ResponsiveProp } from '$uix/eidos/lib/types';
 
 /**
  * Eidos `<AlertDialog>` — visual wrapper over `soma/alert-dialog`. A
@@ -45,13 +45,18 @@ export type AlertDialogProps = ProviderProps;
  * Action button. Renders an eidos `<Button>` internally. Visual props
  * are forwarded; `variant` defaults to `'solid'` (primary CTA) and
  * `intent` defaults to the parent dialog's intent (so a risk-flagged
- * AlertDialog paints a red Action automatically). The `variant` set is
- * the full ButtonVariant since Action is the primary call-to-action of
- * a destructive confirmation flow.
+ * AlertDialog paints a red Action automatically).
+ *
+ * `variant` narrows to SelectionVariant (`'solid' | 'outline' | 'ghost'`)
+ * per DEMO_AUTHORING_GUIDE §12.7 — canonical 3-value set for
+ * action/selection buttons. Keeps 'solid' as the CTA default while
+ * staying in the 3-chip rhythm the rest of UIX follows.
  */
+export type AlertDialogActionVariant = Extract<ButtonVariant, SelectionVariant>;
+
 export type AlertDialogActionProps = ActionProps & {
-	/** Button visual variant. @default 'solid' */
-	variant?: ButtonVariant;
+	/** Button visual variant, narrowed to SelectionVariant. @default 'solid' */
+	variant?: AlertDialogActionVariant;
 	/** Button size scale. @default 'md' */
 	size?: ResponsiveProp<ButtonSize>;
 	/** Button corner radius. */
diff --git a/web/routes/uix/components/alert-dialog/+page.svelte b/web/routes/uix/components/alert-dialog/+page.svelte
index 2a7a7b6ce..33372569b 100644
--- a/web/routes/uix/components/alert-dialog/+page.svelte
+++ b/web/routes/uix/components/alert-dialog/+page.svelte
@@ -41,11 +41,10 @@
 	let triggerLabel = $state('Delete project…');
 	let actionText = $state('Delete project');
 	let cancelText = $state('Cancel');
-	// Eidos · Action visual props (forwarded to <Button>). Action keeps
-	// the full ButtonVariant since it's the primary call-to-action.
-	let actionVariant = $state<'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'plain'>(
-		'solid'
-	);
+	// Eidos · Action visual props (forwarded to <Button>). variant narrows
+	// ButtonVariant → SelectionVariant (3-set: solid · outline · ghost)
+	// per DEMO_AUTHORING_GUIDE §12.7. Default stays 'solid' (CTA).
+	let actionVariant = $state<'solid' | 'outline' | 'ghost'>('solid');
 	let actionSize = $state<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');
 	// Cancel narrows variant to ControlVariant per DEMO_AUTHORING_GUIDE §12.7.
 	let cancelVariant = $state<'surface' | 'outline' | 'ghost'>('outline');
@@ -450,7 +449,7 @@
 				<label data-uix-control>
 					<span data-uix-control-label>variant</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['solid', 'soft', 'surface', 'outline', 'ghost', 'plain'] as v (v)}
+						{#each ['solid', 'outline', 'ghost'] as v (v)}
 							<button
 								data-uix-chip
 								data-active={actionVariant === v}
@@ -582,7 +581,7 @@
 					<tbody>
 						<tr><td class="name">aria-label</td><td class="type">string</td><td class="default empty">"Confirm"</td><td>Overrides the default accessible name.</td></tr>
 						<tr><td class="name">onclick</td><td class="type">(e: MouseEvent) =&gt; void</td><td class="default empty">—</td><td>Business handler. The default close runs LAST — consumer logic gets first chance to gate.</td></tr>
-						<tr><td class="name">variant <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ButtonVariant: 'solid' | 'soft' | 'surface' | 'outline' | 'ghost' | 'plain'</td><td class="default">'solid'</td><td>Forwarded to the inner <code>&lt;Button&gt;</code>. Keeps the full ButtonVariant since Action is the primary call-to-action.</td></tr>
+						<tr><td class="name">variant <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">SelectionVariant: 'solid' | 'outline' | 'ghost'</td><td class="default">'solid'</td><td>Forwarded to the inner <code>&lt;Button&gt;</code>. Narrowed from ButtonVariant per DEMO_AUTHORING_GUIDE §12.7 — 3-value SelectionVariant keeps 'solid' as the CTA default while staying in the canonical chip rhythm.</td></tr>
 						<tr><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">'xs' | 'sm' | 'md' | 'lg' | 'xl'</td><td class="default">'md'</td><td>Button size scale.</td></tr>
 						<tr><td class="name">intent <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">'neutral' | 'affirm' | 'fulfill' | 'risk' | 'threat' | 'loss'</td><td class="default empty">inherits</td><td>When omitted, reads the parent <code>AlertDialog.intent</code> (neutral · risk · threat) so a flagged dialog paints a matching Action automatically.</td></tr>
 						<tr><td class="name">color · rounded · iconOnly · icon · endIcon <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">Button props</td><td class="default empty">—</td><td>Standard Button visual knobs forwarded through.</td></tr>