You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte-kit-vice/src/uix/eidos/components/breadcrumb
dev dfb64511de
eidos: theming fixes + size/variant parity batch + docs
5 months ago
..
README.md batch: scaffold README sections + audit refinements → 67/67 PASS 5 months ago
breadcrumb-ellipsis.svelte Advance Eidos demos and form validation docs 5 months ago
breadcrumb-item.svelte Advance Eidos demos and form validation docs 5 months ago
breadcrumb-link.svelte Advance Eidos demos and form validation docs 5 months ago
breadcrumb-list.svelte Advance Eidos demos and form validation docs 5 months ago
breadcrumb-separator.svelte Advance Eidos demos and form validation docs 5 months ago
breadcrumb.css eidos: theming fixes + size/variant parity batch + docs 5 months ago
breadcrumb.svelte Advance Eidos demos and form validation docs 5 months ago
index.ts Advance Eidos demos and form validation docs 5 months ago
types.ts eidos: theming fixes + size/variant parity batch + docs 5 months ago

README.md

Eidos Breadcrumb

Breadcrumb no existe en la rama Air anterior (glm-5:src/uix/air/components). La baseline real es el contrato Morfo/Soma actual y la comparativa con APG, shadcn, React Aria y los catalogos de Radix/Bits/Ark.

Superficie

<Breadcrumb size="md">
	<Breadcrumb.List>
		<Breadcrumb.Item>
			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
		</Breadcrumb.Item>
		<Breadcrumb.Separator />
		<Breadcrumb.Item>
			<Breadcrumb.Link current>Docs</Breadcrumb.Link>
		</Breadcrumb.Item>
	</Breadcrumb.List>
</Breadcrumb>

Partes publicas: List, Item, Link, Separator, Ellipsis.

Comparativa

Capacidad Eidos/Soma APG shadcn React Aria Radix/Bits/Ark
Landmark <nav> etiquetado Si Si Si Si No componente dedicado
Lista ordenada <ol> Si Si Si Si No componente dedicado
Link actual con aria-current Si: current Si Si, via Page Si, ultimo link No componente dedicado
Actual no focusable Si: renderiza <span> Permitido Si, Page Si cuando no hay href No componente dedicado
Valores aria-current multiples Si: page/step/location/date/time/true Solo page en ejemplo No como API Parcial No componente dedicado
Separador custom Si: children Visual Si Si No componente dedicado
Ellipsis colapsado Si No especifica Si Manual No componente dedicado
Ellipsis interactivo Si: interactive + aria-haspopup Manual Con DropdownMenu Manual No componente dedicado
Link/router custom Si: child({ props }) heredado de Soma Manual asChild Link/render props No componente dedicado
RTL Hereda dir/CSS logico No aplica Documentado Browser/author No componente dedicado
I18n por defecto Si: Breadcrumb, More No No No No componente dedicado
Tamano visual canonico Si: sm/md/lg No Tailwind local CSS propio No componente dedicado

Decisiones

  • Eidos no anade estado: todo lo accesible vive en Soma/Morfo.
  • No se crea Breadcrumb.Page. El Link current de Soma cubre el mismo caso, permite varios valores de aria-current y evita otra parte publica que solo seria un alias.
  • Elipsis no prescribe overlay. Cuando es interactivo puede ser trigger de DropdownMenu, Popover o cualquier capa flotante que reciba los props via child.
  • size es visual y se estampa solo en el root como data-size; el recipe usa CSS logico para funcionar en LTR/RTL.

Eventos Sema

Breadcrumb declara 0 eventos semanticos de forma deliberada. La activacion de un crumb es navegacion nativa o routing de la aplicacion, no una ocurrencia perceptiva propia del breadcrumb. Si un ellipsis se convierte en trigger de un Popover/Dropdown, los eventos pertenecen a ese overlay.

Referencias

Baseline

Referencia local: Soma + Morfo + Eidos. La capa visual de Eidos expone size / variant / color sobre el comportamiento que Soma ya implementa; el morfo declara parts, ARIA, keyboard y eventos sema. Las decisiones se alinean con las bibliotecas externas listadas en la Comparativa.

Gaps

Gap Disposición Detalle
API extendida sobre las referencias externas diferir Sólo si llega un caso de uso real. Mantener la superficie estable.
Cobertura adicional de variantes visuales diferir El recipe cubre sm/md/lg + solid/outline/ghost. Más variantes requieren caso concreto.
Documentación per-prop exhaustiva implementar Cuando se cierre el ciclo de remediación de cada componente.
Tests browser-level del flujo completo (Playwright) implementar Cobertura visual + interacciones. Se hace en una pasada conjunta de tests.

Passive justification

Componente passive por diseño: no gestiona estado mutable propio, no responde a teclado más allá del foco del navegador, no emite eventos sema propios. El feedback perceptivo correspondiente al cambio que rodea al componente (validación, progreso, transición) pertenece a quien orquesta ese cambio — Form / Field / Toast / Dialog — no al componente visual.

Powered by TurnKey Linux.