diff --git a/continue.md b/continue.md index 14df4087a..53d668231 100644 --- a/continue.md +++ b/continue.md @@ -31,6 +31,25 @@ Actualizacion permutation runner 2026-05-16: - Los 53 morfos restantes no tienen ruta `/uix/components/{kebab}` en el shell actual; no contarlos como cobertura hasta que exista demo. +Actualizacion permutation axes 2026-05-16: + +- Variantes URL del runner activadas en demos que ya tenian estado real para + honrarlas: + - `accordion`: `disabled`. + - `collapsible`: `disabled`. + - `checkbox`: `disabled`, `invalid`. + - `radio-group`: `dir`, `disabled`, `invalid`. + - `switch`: `disabled`, `invalid`. + - `tabs`: `dir`, `orientation`, `disabled`. + - `toggle`: `disabled`, `invalid`. + - `tooltip`: `dir`, `disabled`. +- En variantes `disabled`, los pasos interactivos se omiten desde la propia + demo para validar el estado estatico deshabilitado sin forzar clicks sobre + controles inactivos. +- Validacion: `node --import tsx/esm scripts/permutation-check.ts + http://127.0.0.1:5192` -> 12 demos instrumentadas OK, 54 pasos, 28 variantes + URL. + Arranque rapido para mañana: - Rama `active-uix` queda por delante de `gita/active-uix` con los commits de diff --git a/web/routes/uix/components/accordion/+page.svelte b/web/routes/uix/components/accordion/+page.svelte index f42092ec4..9849f670e 100644 --- a/web/routes/uix/components/accordion/+page.svelte +++ b/web/routes/uix/components/accordion/+page.svelte @@ -8,8 +8,10 @@ import { compileMorfo } from '$uix/morfo'; import { accordionMorfo } from '@/uix/morfo/components/accordion'; import { getActiveUix } from '$active-uix'; + import { page } from '$app/state'; const uix = getActiveUix(); + const params = page.url.searchParams; type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y'; let tab = $state('live'); @@ -22,7 +24,7 @@ let size = $state('md'); let variant = $state('outline'); let collapsible = $state(true); - let disabled = $state(false); + let disabled = $state(params.get('perm.disabled') === 'true'); let orientation = $state('vertical'); let loop = $state(false); let region = $state(true); @@ -142,6 +144,10 @@ ); + + + +
Disclosure · Accordion
@@ -193,8 +199,8 @@ {item.title} diff --git a/web/routes/uix/components/checkbox/+page.svelte b/web/routes/uix/components/checkbox/+page.svelte index d86081807..a9b42d123 100644 --- a/web/routes/uix/components/checkbox/+page.svelte +++ b/web/routes/uix/components/checkbox/+page.svelte @@ -9,8 +9,10 @@ import { compileMorfo } from '$uix/morfo'; import { checkboxMorfo } from '@/uix/morfo/components/checkbox'; import { getActiveUix } from '$active-uix'; + import { page } from '$app/state'; const uix = getActiveUix(); + const params = page.url.searchParams; type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y'; let tab = $state('live'); @@ -18,10 +20,10 @@ // ── State ────────────────────────────────────────────────────────────── let checked = $state(false); let indeterminate = $state(false); - let disabled = $state(false); + let disabled = $state(params.get('perm.disabled') === 'true'); let readonly = $state(false); let required = $state(false); - let invalid = $state(false); + let invalid = $state(params.get('perm.invalid') === 'true'); let size = $state('md'); let variant = $state('solid'); let color = $state('primary'); @@ -135,6 +137,10 @@ ); + + + + {#snippet customIcon({ checked: c, indeterminate: i }: CheckboxIconSnippetArgs)} {#if i} @@ -178,8 +184,8 @@ {color} name={nameAttr || undefined} value={valueAttr} - data-perm-step="0" - data-perm-label="toggle main checkbox" + data-perm-step={disabled ? undefined : '0'} + data-perm-label={disabled ? undefined : 'toggle main checkbox'} > {#if nameAttr}{/if} diff --git a/web/routes/uix/components/collapsible/+page.svelte b/web/routes/uix/components/collapsible/+page.svelte index 205ef6111..2030146a9 100644 --- a/web/routes/uix/components/collapsible/+page.svelte +++ b/web/routes/uix/components/collapsible/+page.svelte @@ -3,15 +3,17 @@ import { compileMorfo } from '$uix/morfo'; import { collapsibleMorfo } from '@/uix/morfo/components/collapsible'; import { getActiveUix } from '$active-uix'; + import { page } from '$app/state'; const uix = getActiveUix(); + const params = page.url.searchParams; type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y'; let tab = $state('live'); // ── Live state ──────────────────────────────────────────────────────── let open = $state(false); - let disabled = $state(false); + let disabled = $state(params.get('perm.disabled') === 'true'); let triggerLabel = $state('Show details'); let bodyText = $state( 'Disclosure is non-evaluative — no intent / color / size. The morfo declares TWO emerge events instead of one toggle so expand (sequence: post) and collapse (sequence: pre) can carry distinct perceptual signatures.' @@ -98,6 +100,10 @@ ); + + + +
Disclosure · Collapsible
@@ -128,7 +134,10 @@
- + {triggerLabel} diff --git a/web/routes/uix/components/radio-group/+page.svelte b/web/routes/uix/components/radio-group/+page.svelte index 63e3629bc..9a66784fc 100644 --- a/web/routes/uix/components/radio-group/+page.svelte +++ b/web/routes/uix/components/radio-group/+page.svelte @@ -10,24 +10,26 @@ import { compileMorfo } from '$uix/morfo'; import { radioGroupMorfo } from '@/uix/morfo/components/radio-group'; import { getActiveUix } from '$active-uix'; + import { page } from '$app/state'; const uix = getActiveUix(); + const params = page.url.searchParams; type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y'; let tab = $state('live'); let value = $state('pro'); - let disabled = $state(false); + let disabled = $state(params.get('perm.disabled') === 'true'); let readonly = $state(false); let required = $state(false); - let invalid = $state(false); + let invalid = $state(params.get('perm.invalid') === 'true'); let size = $state('md'); let variant = $state('solid'); let color = $state('primary'); let orientation = $state('vertical'); let columns = $state(undefined); let loop = $state(false); - let dir = $state<'ltr' | 'rtl'>('ltr'); + let dir = $state<'ltr' | 'rtl'>((params.get('perm.dir') as 'ltr' | 'rtl' | null) ?? 'ltr'); let nameAttr = $state('plan'); let labelText = $state('Choose a plan'); let useCustomIcon = $state(false); @@ -139,6 +141,10 @@ ); + + + + {#snippet customIcon({ checked: c }: RadioGroupIconSnippetArgs)} {#if c} + +
Forms · Switch
@@ -155,8 +161,8 @@ {required} {invalid} aria-label={label} - data-perm-step="0" - data-perm-label="toggle switch" + data-perm-step={disabled ? undefined : '0'} + data-perm-label={disabled ? undefined : 'toggle switch'} /> {label} diff --git a/web/routes/uix/components/tabs/+page.svelte b/web/routes/uix/components/tabs/+page.svelte index cc5d008c6..ec5cb4916 100644 --- a/web/routes/uix/components/tabs/+page.svelte +++ b/web/routes/uix/components/tabs/+page.svelte @@ -11,8 +11,10 @@ import { compileMorfo } from '$uix/morfo'; import { tabsMorfo } from '@/uix/morfo/components/tabs'; import { getActiveUix } from '$active-uix'; + import { page } from '$app/state'; const uix = getActiveUix(); + const params = page.url.searchParams; type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y'; let tab = $state('live'); @@ -21,11 +23,13 @@ let value = $state('overview'); let variant = $state('line'); let size = $state('md'); - let orientation = $state('horizontal'); + let orientation = $state( + (params.get('perm.orientation') as Orientation | null) ?? 'horizontal' + ); let activationMode = $state('automatic'); let loop = $state(true); - let dir = $state<'ltr' | 'rtl'>('ltr'); - let disabled = $state(false); + let dir = $state<'ltr' | 'rtl'>((params.get('perm.dir') as 'ltr' | 'rtl' | null) ?? 'ltr'); + let disabled = $state(params.get('perm.disabled') === 'true'); let fitted = $state(false); let scrollable = $state(false); let collapseAt = $state('never'); @@ -146,6 +150,10 @@ ); + + + +
Controls · Tabs
@@ -191,10 +199,14 @@ Billing - Team + Team Integrations {#if showIndicator && variant !== 'surface'}{/if} diff --git a/web/routes/uix/components/toggle/+page.svelte b/web/routes/uix/components/toggle/+page.svelte index 8128fdbb7..35ec7f372 100644 --- a/web/routes/uix/components/toggle/+page.svelte +++ b/web/routes/uix/components/toggle/+page.svelte @@ -6,18 +6,20 @@ import { compileMorfo } from '$uix/morfo'; import { toggleMorfo } from '@/uix/morfo/components/toggle'; import { getActiveUix } from '$active-uix'; + import { page } from '$app/state'; const uix = getActiveUix(); + const params = page.url.searchParams; type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y'; let tab = $state('live'); // ── State ────────────────────────────────────────────────────────────── let pressed = $state(false); - let disabled = $state(false); + let disabled = $state(params.get('perm.disabled') === 'true'); let readonly = $state(false); let required = $state(false); - let invalid = $state(false); + let invalid = $state(params.get('perm.invalid') === 'true'); let intent = $state<'neutral' | 'affirm' | 'risk' | 'threat'>('neutral'); let color = $state<'primary' | 'secondary' | ''>(''); let size = $state('md'); @@ -129,6 +131,10 @@ ); + + + + {#snippet boldIcon()} + +
Overlays · Tooltip
@@ -164,9 +173,9 @@ disabled={providerDisabled} > {triggerLabel}