@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/Tooltip.svelte

@@ -0,0 +1,70 @@
+<script module lang="ts">
+	/** What .tooltip is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'tooltip';
+
+	export const AXES = {
+		/* The side of the trigger the bubble sits on. */
+		side: ['top', 'right', 'bottom', 'left'],
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error']
+	} as const;
+
+	export const FLAGS = {
+		open: 'Show the bubble all the time, not only on hover and focus.',
+		float:
+			'Where the browser has anchor positioning: escape clipping ancestors and flip when there is no room (no arrow then). Ignored elsewhere.'
+	} as const;
+	export const PARTS = ['content'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A short hint next to its trigger, on hover and on keyboard focus.
+	 *
+	 * Pure CSS: the bubble does not move to stay on screen. Pick the `side`
+	 * that has room. The first focusable element inside gets `aria-describedby`
+	 * pointing at the bubble, so a screen reader reads the hint too.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+		/** The hint, as text. */
+		text?: string;
+		/** The hint, as markup. Wins over `text`. */
+		tip?: Snippet;
+		class?: string;
+		/** The trigger. */
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		text,
+		tip,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	const id = `tooltip-${Math.random().toString(36).slice(2, 9)}`;
+
+	/** Points the trigger at the bubble, for assistive technology. */
+	function describe(node: HTMLElement) {
+		const trigger = node.querySelector<HTMLElement>('a[href], button, input, select, textarea, [tabindex]');
+		trigger?.setAttribute('aria-describedby', id);
+	}
+</script>
+
+<!-- The anchor name is per instance: `float` ties this bubble to this trigger. -->
+<span {...applied.rest} class={classes} style:--tooltip-anchor="--{id}" use:describe>
+	{@render children?.()}
+	<span class="tooltip-content" role="tooltip" {id}>
+		{#if tip}{@render tip()}{:else}{text}{/if}
+	</span>
+</span>

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,34 @@
+/** What .tooltip is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "tooltip";
+export declare const AXES: {
+    readonly side: readonly ["top", "right", "bottom", "left"];
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+};
+export declare const FLAGS: {
+    readonly open: "Show the bubble all the time, not only on hover and focus.";
+    readonly float: "Where the browser has anchor positioning: escape clipping ancestors and flip when there is no room (no arrow then). Ignored elsewhere.";
+};
+export declare const PARTS: readonly ["content"];
+/**
+     * A short hint next to its trigger, on hover and on keyboard focus.
+     *
+     * Pure CSS: the bubble does not move to stay on screen. Pick the `side`
+     * that has room. The first focusable element inside gets `aria-describedby`
+     * pointing at the bubble, so a screen reader reads the hint too.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** The hint, as text. */
+    text?: string;
+    /** The hint, as markup. Wins over `text`. */
+    tip?: Snippet;
+    class?: string;
+    /** The trigger. */
+    children?: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/WindowFrame.svelte

@@ -0,0 +1,53 @@
+<script module lang="ts">
+	/** What .window-frame is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'window-frame';
+
+	export const AXES = {} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['bar', 'controls', 'title', 'actions', 'body'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * An application window drawn around content: a title bar with three window
+	 * controls, a title and actions, above a body that scrolls.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+		/** The title, as text or as markup. */
+		title?: string | Snippet;
+		/** Buttons on the right of the bar. */
+		actions?: Snippet;
+		class?: string;
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		title,
+		actions,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<div {...applied.rest} class={classes}>
+	<div class="window-frame-bar">
+		<span class="window-frame-controls" aria-hidden="true"><span></span><span></span><span></span></span>
+		<span class="window-frame-title">
+			{#if typeof title === 'function'}{@render title()}{:else}{title ?? ''}{/if}
+		</span>
+		<span class="window-frame-actions">{@render actions?.()}</span>
+	</div>
+	<div class="window-frame-body">{@render children?.()}</div>
+</div>

package/dist/components/WindowFrame.svelte.d.ts

@@ -0,0 +1,24 @@
+/** What .window-frame is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "window-frame";
+export declare const AXES: {};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["bar", "controls", "title", "actions", "body"];
+/**
+     * An application window drawn around content: a title bar with three window
+     * controls, a title and actions, above a body that scrolls.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The title, as text or as markup. */
+    title?: string | Snippet;
+    /** Buttons on the right of the bar. */
+    actions?: Snippet;
+    class?: string;
+    children?: Snippet;
+}
+declare const WindowFrame: import("svelte").Component<Props, {}, "">;
+type WindowFrame = ReturnType<typeof WindowFrame>;
+export default WindowFrame;

package/dist/components/accordion-context.d.ts

@@ -0,0 +1,8 @@
+export interface AccordionGroup {
+    /** Join the group; returns the function to leave it. */
+    join(close: () => void): () => void;
+    /** A member opened: an exclusive group closes the others. */
+    opened(close: () => void): void;
+}
+export declare function setAccordion(exclusive: () => boolean): void;
+export declare function getAccordion(): AccordionGroup | undefined;

package/dist/components/accordion-context.js

@@ -0,0 +1,25 @@
+/**
+ * How an Accordion and its Collapses talk: a Collapse that opens tells the
+ * group, and an exclusive group closes every other member.
+ */
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('accordion');
+export function setAccordion(exclusive) {
+    const members = new Set();
+    setContext(KEY, {
+        join(close) {
+            members.add(close);
+            return () => members.delete(close);
+        },
+        opened(close) {
+            if (!exclusive())
+                return;
+            for (const other of members)
+                if (other !== close)
+                    other();
+        }
+    });
+}
+export function getAccordion() {
+    return getContext(KEY);
+}

package/dist/components/color.d.ts

@@ -0,0 +1,39 @@
+/**
+ * A CSS colour, as the six hex digits `<input type="color">` insists on.
+ *
+ * Two conversions, and both are needed:
+ *
+ * 1. The value may be a reference — `var(--color-primary)` — so it is resolved
+ *    against the document first, by assigning it to a probe element and
+ *    reading the computed value back.
+ *
+ * 2. That computed value is NOT necessarily rgb. A browser keeps
+ *    `oklch(1 0 0)` as `oklch(1 0 0)`, and reading three numbers out of it
+ *    gives 1, 0, 0 — which as bytes is very nearly black. That is what used to
+ *    happen to every daisy theme, whose whole palette is oklch: the swatches
+ *    all came out black. So the resolved colour is painted onto a 1×1 canvas
+ *    and the pixel is read, which is sRGB by definition whatever the input
+ *    colour space was.
+ *
+ * The picker is the only thing that needs this. The tile beside it is a
+ * `.swatch` with the raw value in `--swatch-color`, and CSS renders oklch
+ * perfectly well — so what you SEE is always right even when the conversion
+ * is not.
+ */
+export declare function colorToHex(input: string): string;
+export interface Oklch {
+    l: number;
+    c: number;
+    h: number;
+}
+export declare function toOklch(input: string): Oklch;
+/** The three numbers back as CSS, in the notation a theme file carries. */
+export declare const oklchToCss: ({ l, c, h }: Oklch) => string;
+/**
+ * WCAG contrast against a surface, measured off real pixels.
+ *
+ * Not computed from the lightness: two colours at the same OKLCH lightness
+ * can be a stop apart in relative luminance, and the badge has to say what a
+ * checker would say rather than what the slider suggests.
+ */
+export declare function contrastRatio(a: string, b: string): number;

package/dist/components/color.js

@@ -0,0 +1,92 @@
+/**
+ * A CSS colour, as the six hex digits `<input type="color">` insists on.
+ *
+ * Two conversions, and both are needed:
+ *
+ * 1. The value may be a reference — `var(--color-primary)` — so it is resolved
+ *    against the document first, by assigning it to a probe element and
+ *    reading the computed value back.
+ *
+ * 2. That computed value is NOT necessarily rgb. A browser keeps
+ *    `oklch(1 0 0)` as `oklch(1 0 0)`, and reading three numbers out of it
+ *    gives 1, 0, 0 — which as bytes is very nearly black. That is what used to
+ *    happen to every daisy theme, whose whole palette is oklch: the swatches
+ *    all came out black. So the resolved colour is painted onto a 1×1 canvas
+ *    and the pixel is read, which is sRGB by definition whatever the input
+ *    colour space was.
+ *
+ * The picker is the only thing that needs this. The tile beside it is a
+ * `.swatch` with the raw value in `--swatch-color`, and CSS renders oklch
+ * perfectly well — so what you SEE is always right even when the conversion
+ * is not.
+ */
+let probe = null;
+let ctx = null;
+export function colorToHex(input) {
+    if (typeof document === 'undefined')
+        return '#000000';
+    if (!probe) {
+        probe = document.createElement('span');
+        probe.style.display = 'none';
+        document.body.appendChild(probe);
+    }
+    /* Reset then assign, so an invalid value leaves black rather than whatever
+       the previous call left behind. */
+    probe.style.color = '#000000';
+    probe.style.color = input;
+    const resolved = getComputedStyle(probe).color;
+    if (!ctx) {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 1;
+        ctx = canvas.getContext('2d', { willReadFrequently: true });
+    }
+    if (!ctx)
+        return '#000000';
+    try {
+        /* Clear first: a colour with alpha would otherwise composite over the
+           previous pixel and come back wrong. */
+        ctx.clearRect(0, 0, 1, 1);
+        ctx.fillStyle = '#000000';
+        ctx.fillStyle = resolved;
+        ctx.fillRect(0, 0, 1, 1);
+        const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+        return '#' + [r, g, b].map((n = 0) => n.toString(16).padStart(2, '0')).join('');
+    }
+    catch {
+        return '#000000';
+    }
+}
+const lin = (v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+export function toOklch(input) {
+    const hex = colorToHex(input);
+    const [r = 0, g = 0, b = 0] = [1, 3, 5].map((i) => lin(parseInt(hex.slice(i, i + 2), 16) / 255));
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+    const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+    const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+    return {
+        l: Math.round(L * 1000) / 1000,
+        c: Math.round(Math.hypot(A, B) * 1000) / 1000,
+        h: Math.round((((Math.atan2(B, A) * 180) / Math.PI + 360) % 360) * 10) / 10
+    };
+}
+/** The three numbers back as CSS, in the notation a theme file carries. */
+export const oklchToCss = ({ l, c, h }) => `oklch(${Math.round(l * 1000) / 10}% ${Math.round(c * 1000) / 1000} ${h})`;
+/**
+ * WCAG contrast against a surface, measured off real pixels.
+ *
+ * Not computed from the lightness: two colours at the same OKLCH lightness
+ * can be a stop apart in relative luminance, and the badge has to say what a
+ * checker would say rather than what the slider suggests.
+ */
+export function contrastRatio(a, b) {
+    const lum = (x) => {
+        const hex = colorToHex(x);
+        const [r = 0, g = 0, bl = 0] = [1, 3, 5].map((i) => lin(parseInt(hex.slice(i, i + 2), 16) / 255));
+        return 0.2126 * r + 0.7152 * g + 0.0722 * bl;
+    };
+    const [x, y] = [lum(a), lum(b)];
+    return Math.round(((Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05)) * 10) / 10;
+}