feat(eidos): dialog/drawer modal-plane + h3 title role + framework-Button trigger/close + density testbed
- dialog + drawer adopt data-depth="modal" (surface·border·base-shadow from the plane); recipes pruned of orphan content-bg/border/shadow. The bundle's on-surface font fixes the Times New Roman of portaled content (Decisión 8). - Dialog.Close inherits the dialog size via context.ts, capped at md (sm→sm, md/lg/xl/full→md; full is layout, not a bigger control — Radix/Mantine/MD3). THEMING §5 container→part norm. - Dialog title → h3 typography role (--dialog-title-* points at --style-h3-*, override knob kept). - Dialog trigger + close compose the framework <Button> via the asChild `child` snippet (the trigger was a passthrough that rendered soma's native <button>); variant/color/size defer to the canonical Button defaults (solid/primary) — no hardcoded ghost/neutral. - demo layout (web/routes/uix/+layout@.svelte): "Display" control — density·scaling·border-width applied to :root (reaches portaled overlays) to observe the interrelated theming axes live. - update the depth-plane test (z is token-only; on-surface font) + the archetype audit hand-off. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>active-uix
parent
27012a5c68
commit
7d31cd3fd7
@ -0,0 +1,31 @@
|
|||||||
|
import { getContext, setContext } from 'svelte';
|
||||||
|
import type { DialogSize } from './types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Eidos context for `<Dialog.*>` parts — the dialog publishes its resolved
|
||||||
|
* Content `size` so the parts it owns (close button, and any size-aware part)
|
||||||
|
* derive their own size from the container instead of hardcoding one.
|
||||||
|
*
|
||||||
|
* The size norm (THEMING.md §5 "Subset por componente"): a part follows the
|
||||||
|
* container's size, clamped to the part's own subset. The close composes
|
||||||
|
* `Button`, whose subset tops out at `xl`, so a `full` dialog resolves the
|
||||||
|
* close to `xl`. The reader owns that clamp; the context just carries the
|
||||||
|
* dialog's resolved size verbatim.
|
||||||
|
*
|
||||||
|
* Property getter so reads stay reactive — when the dialog's `size` prop
|
||||||
|
* changes, parts observing `ctx.size` see the new value on the next read.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const KEY = Symbol('dialog-eidos-ctx');
|
||||||
|
|
||||||
|
export interface DialogEidosCtx {
|
||||||
|
readonly size: DialogSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setDialogEidosCtx(ctx: DialogEidosCtx): void {
|
||||||
|
setContext(KEY, ctx);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDialogEidosCtx(): DialogEidosCtx | undefined {
|
||||||
|
return getContext<DialogEidosCtx | undefined>(KEY);
|
||||||
|
}
|
||||||
@ -1,10 +1,27 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
/**
|
||||||
|
* Eidos `<Dialog.Trigger>` — composes the canonical `<Button>` via soma's
|
||||||
|
* `child` snippet, so the trigger is a framework Button (not soma's native
|
||||||
|
* `<button>` fallback). `variant` / `size` / `color` default to nothing and
|
||||||
|
* therefore defer to Button's canonical defaults (`solid` / `md` / `primary`
|
||||||
|
* — the primary "open" action). A `child` snippet bypasses the Button for a
|
||||||
|
* fully custom trigger element.
|
||||||
|
*/
|
||||||
import * as Dialog from '$soma/components/dialog';
|
import * as Dialog from '$soma/components/dialog';
|
||||||
|
import { Button } from '$uix/eidos/components/button';
|
||||||
import type { DialogTriggerProps } from './types';
|
import type { DialogTriggerProps } from './types';
|
||||||
|
|
||||||
let { children, ...rest }: DialogTriggerProps = $props();
|
let { children, variant, size, color, child: outerChild, ...rest }: DialogTriggerProps = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Dialog.Trigger {...rest}>
|
<Dialog.Trigger {...rest}>
|
||||||
{@render children?.()}
|
{#snippet child({ props })}
|
||||||
|
{#if outerChild}
|
||||||
|
{@render outerChild({ props })}
|
||||||
|
{:else}
|
||||||
|
<Button {...props} {variant} {size} {color}>
|
||||||
|
{@render children?.()}
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
{/snippet}
|
||||||
</Dialog.Trigger>
|
</Dialog.Trigger>
|
||||||
|
|||||||
Loading…
Reference in new issue