- toast-close now composes the canonical <IconButton rounded="full"> via soma's child snippet (keeps the round dismiss shape); removed the bespoke [data-toast-close] chrome + the orphaned --toast-close-* recipe tokens; the toast item grid still places it in the trailing column. aria-label routes through the common close label. - Per the close-family decision: variant/color defer to Button's canonical defaults (solid/primary) across the family — no hardcoded ghost/neutral. banner-close dropped its ghost/neutral defaults to match popover/dialog/drawer. - component-visual-attrs manifest: toast-close delegates icon-only to IconButton. Verified in browser (toast close = round solid-primary ✕, correctly placed). svelte-check + orphan test clean for touched files. Excludes words/palabras/chronos. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>active-uix
parent
0a43225ec2
commit
7092450734
@ -1,27 +1,41 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
/**
|
||||||
|
* Eidos `Toast.Close` — composes the canonical `<IconButton>` via soma's
|
||||||
|
* `child` snippet (no bespoke close chrome — it inherits Button's chrome,
|
||||||
|
* focus ring and disabled). `rounded='full'` keeps the toast's round dismiss
|
||||||
|
* shape; `variant` / `color` defer to Button's canonical defaults. The
|
||||||
|
* accessible name routes through langs ("Cerrar"). A `child` snippet bypasses
|
||||||
|
* IconButton.
|
||||||
|
*/
|
||||||
|
import { ActiveEidos } from '$uix/eidos';
|
||||||
import * as Toast from '$soma/components/toast';
|
import * as Toast from '$soma/components/toast';
|
||||||
|
import { IconButton } from '$uix/eidos/components/icon-button';
|
||||||
|
import { SvgX } from '$uix/eidos/components/svg';
|
||||||
import type { ToastCloseProps } from './types';
|
import type { ToastCloseProps } from './types';
|
||||||
|
|
||||||
let { children, ...rest }: ToastCloseProps = $props();
|
let {
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
color,
|
||||||
|
'aria-label': ariaLabel,
|
||||||
|
child: outerChild,
|
||||||
|
children,
|
||||||
|
...rest
|
||||||
|
}: ToastCloseProps = $props();
|
||||||
|
|
||||||
|
const eidos = ActiveEidos.require();
|
||||||
|
const resolvedSize = $derived(size ?? 'sm');
|
||||||
|
const closeLabel = $derived(ariaLabel ?? eidos.langs.ts('#?common.buttons.close|Close'));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Toast.Close {...rest} data-icon-only={!children ? '' : undefined}>
|
<Toast.Close {...rest}>
|
||||||
{#if children}
|
{#snippet child({ props })}
|
||||||
{@render children?.()}
|
{#if outerChild}
|
||||||
|
{@render outerChild({ props })}
|
||||||
{:else}
|
{:else}
|
||||||
<svg
|
<IconButton {...props} {variant} size={resolvedSize} {color} rounded="full" aria-label={closeLabel}>
|
||||||
viewBox="0 0 24 24"
|
{#if children}{@render children()}{:else}<SvgX />{/if}
|
||||||
width="14"
|
</IconButton>
|
||||||
height="14"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18" />
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18" />
|
|
||||||
</svg>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
{/snippet}
|
||||||
</Toast.Close>
|
</Toast.Close>
|
||||||
|
|||||||
Loading…
Reference in new issue