tempest-react-sdk 0.74.0 → 0.75.0

package/dist/components/SectionHeader/SectionHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.cjs","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a heading block is slots (eyebrow, title, description,\n * actions) plus the three switches that decide its semantics: level, align and the\n * heading id. Splitting them would leave the id away from the heading it names.\n */\nimport { createContext, useContext, useId, useLayoutEffect, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SectionHeader.module.css\";\n\nexport type SectionHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type SectionHeaderAlign = \"start\" | \"center\";\n\n/**\n * Lets the nearest `<Section>` learn the id of the heading that names it.\n *\n * `register` returns the matching unregister so a heading that unmounts (or\n * changes id) releases the section instead of leaving `aria-labelledby` pointing\n * at an element that no longer exists.\n */\ninterface SectionContextValue {\n    register: (headingId: string) => () => void;\n}\n\nconst SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"id\"> {\n    /** Heading text, rendered as `<h{level}>`. */\n    title?: ReactNode;\n    /** Short label above the title (category, breadcrumbs). */\n    eyebrow?: ReactNode;\n    /** Supporting text rendered below the title. */\n    description?: ReactNode;\n    /** Trailing slot for buttons or menus. */\n    actions?: ReactNode;\n    /** Heading level — semantics only, the look does not change with it. Default `2`. */\n    level?: SectionHeaderLevel;\n    /** Horizontal alignment of the text block. Default `\"start\"`. */\n    align?: SectionHeaderAlign;\n    /** Id of the heading element. Generated with `useId` when absent. */\n    id?: string;\n}\n\n/**\n * Header of a page or of one section of it: eyebrow, title, description and\n * actions, with the same look `Page` uses for its own header.\n *\n * The heading level is a prop because one page needs one `<h1>` and many\n * `<h2>` that look alike; the visual stays the same at every level so the\n * outline is picked by meaning, not by size. Inside a `<Section>` the heading\n * id is registered with it, which is what gives the `region` landmark its\n * accessible name.\n *\n * @example\n * <Section>\n *     <SectionHeader eyebrow=\"Soluções\" title=\"O que podemos desenvolver\" align=\"center\" />\n *     <p>Conteúdo da seção.</p>\n * </Section>\n */\nexport function SectionHeader({\n    title,\n    eyebrow,\n    description,\n    actions,\n    level = 2,\n    align = \"start\",\n    id,\n    className,\n    ...props\n}: SectionHeaderProps) {\n    const autoId = useId();\n    const headingId = id ?? autoId;\n    const section = useContext(SectionContext);\n    const register = section?.register;\n    const hasTitle = Boolean(title);\n    useLayoutEffect(() => {\n        if (!register || !hasTitle) return undefined;\n        return register(headingId);\n    }, [register, hasTitle, headingId]);\n    if (!title && !eyebrow && !description && !actions) return null;\n    const Heading = `h${level}` as const;\n    return (\n        <header\n            className={cn(styles.header, align === \"center\" && styles.center, className)}\n            {...props}\n        >\n            <div className={styles.headerText}>\n                {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                {title && (\n                    <Heading id={headingId} className={styles.title}>\n                        {title}\n                    </Heading>\n                )}\n                {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n\n/** Surface tone a {@link Section} can take. */\nexport type SectionTone = \"inverse\";\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * `\"inverse\"` paints the section in the brand color and inverts every color\n     * token inside it, by writing `data-tempest-tone=\"inverse\"`. The tokens are\n     * opt-in, because most apps never paint a section in the brand: they come\n     * from `tempest-react-sdk/styles/inverse.css` for the SDK's own blue, or from\n     * `createTheme({ primary, inverse: createInverseSurface })` for yours, each\n     * measured against the fill (text and muted text at 4.5:1 or more, the focus\n     * ring at 3:1 or more). With neither loaded the attribute matches nothing and\n     * the section keeps the page's tokens — legible, not inverted. The prop\n     * exists so the tone is typed: a typo in a hand-written attribute fails\n     * silently, a typo here fails the build.\n     */\n    tone?: SectionTone;\n}\n\n/**\n * `<section>` that takes its accessible name from the `SectionHeader` inside it.\n *\n * A `<section>` is exposed as a `region` landmark only when it has an\n * accessible name; without one it is an anonymous group and screen-reader\n * landmark navigation skips it. Wiring `aria-labelledby` to the heading id is\n * the same mechanical step on every page, so the section does it: every\n * `SectionHeader` with a `title` below it registers its id through context (so\n * wrappers in between do not break the link) and the first one mounted names\n * the section; when it unmounts, the next one takes over. An explicit\n * `aria-labelledby` or `aria-label` wins over the registered one, and with no\n * heading the attribute is left off rather than pointing at nothing.\n *\n * @example\n * <Section>\n *     <SectionHeader title=\"Planos\" />\n *     <PlanGrid />\n * </Section>\n *\n * @example\n * <Section tone=\"inverse\">\n *     <SectionHeader title=\"Comece agora\" />\n *     <Button>Criar conta</Button>\n * </Section>\n */\nexport function Section({ children, tone, ...props }: SectionProps) {\n    const [headingIds, setHeadingIds] = useState<string[]>([]);\n    const context = useMemo<SectionContextValue>(\n        () => ({\n            register: (id: string) => {\n                setHeadingIds((current) => [...current, id]);\n                return () => setHeadingIds((current) => current.filter((entry) => entry !== id));\n            },\n        }),\n        [],\n    );\n    const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n    return (\n        <SectionContext.Provider value={context}>\n            <section\n                aria-labelledby={named ? undefined : headingIds[0]}\n                data-tempest-tone={tone}\n                {...props}\n            >\n                {children}\n            </section>\n        </SectionContext.Provider>\n    );\n}\n"],"mappings":"oIAwBA,IAAM,GAAA,EAAiB,EAAA,cAAA,CAA0C,IAAI,EAmCrE,SAAgB,EAAc,CAC1B,QACA,UACA,cACA,UACA,QAAQ,EACR,QAAQ,QACR,KACA,YACA,GAAG,GACgB,CACnB,IAAM,GAAA,EAAS,EAAA,MAAA,CAAM,EACf,EAAY,GAAM,EAElB,GAAA,EADU,EAAA,WAAA,CAAW,CACV,CAAA,EAAS,SACpB,EAAW,EAAQ,EAKzB,IAJA,EAAA,EAAA,gBAAA,KAAsB,CACd,GAAC,GAAa,EAClB,OAAO,EAAS,CAAS,CAC7B,EAAG,CAAC,EAAU,EAAU,CAAS,CAAC,EAC9B,CAAC,GAAS,CAAC,GAAW,CAAC,GAAe,CAAC,EAAS,OAAO,KAC3D,IAAM,EAAU,IAAI,IACpB,OACI,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,IAAU,UAAY,EAAA,QAAO,OAAQ,CAAS,EAC3E,GAAI,EAFR,SAAA,EAII,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,WAAvB,SAAA,CACK,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,EACzD,IACG,EAAA,EAAA,IAAA,CAAC,EAAD,CAAS,GAAI,EAAW,UAAW,EAAA,QAAO,MACrC,SAAA,CACI,CAAA,EAEZ,IAAe,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAW,EAAA,QAAO,YAAc,SAAA,CAAe,CAAA,CACjE,CACJ,CAAA,EAAA,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,CACtD,GAEhB,CA8CA,SAAgB,EAAQ,CAAE,WAAU,OAAM,GAAG,GAAuB,CAChE,GAAM,CAAC,EAAY,IAAA,EAAiB,EAAA,SAAA,CAAmB,CAAC,CAAC,EACnD,GAAA,EAAU,EAAA,QAAA,MACL,CACH,SAAW,IACP,EAAe,GAAY,CAAC,GAAG,EAAS,CAAE,CAAC,MAC9B,EAAe,GAAY,EAAQ,OAAQ,GAAU,IAAU,CAAE,CAAC,EAEvF,GACA,CAAC,CACL,EACM,EAAQ,EAAM,qBAAuB,IAAA,IAAa,EAAM,gBAAkB,IAAA,GAChF,OACI,EAAA,EAAA,IAAA,CAAC,EAAe,SAAhB,CAAyB,MAAO,EAC5B,UAAA,EAAA,EAAA,IAAA,CAAC,UAAD,CACI,kBAAiB,EAAQ,IAAA,GAAY,EAAW,GAChD,oBAAmB,EACnB,GAAI,EAEH,UACI,CAAA,CACY,CAAA,CAEjC"}
+{"version":3,"file":"SectionHeader.cjs","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a heading block is slots (eyebrow, title, description,\n * actions) plus the three switches that decide its semantics: level, align and the\n * heading id. Splitting them would leave the id away from the heading it names.\n */\nimport {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SectionHeader.module.css\";\n\nexport type SectionHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type SectionHeaderAlign = \"start\" | \"center\";\n\n/**\n * Links the nearest `<Section>` to the heading that names it.\n *\n * Two channels, because they answer at different times:\n *\n * - `sectionId` + `claim` work during render, so the link exists in the very\n *   first HTML (`renderToString`, hydration) where no effect runs. The section\n *   owns `sectionId` (from `useId`, identical on server and client) and writes\n *   it to `aria-labelledby` before any child renders; the first titled\n *   `SectionHeader` to call `claim` in render order becomes its owner and, when\n *   it has no explicit `id`, puts `sectionId` on its heading. `claim` is keyed by\n *   the caller's own `useId`, so asking twice (Strict Mode, a re-render) gives\n *   the same answer and never hands the id to a second heading.\n * - `register` works after mount and is the source of truth from then on: it\n *   returns the matching unregister so a heading that unmounts (or changes id)\n *   releases the section instead of leaving `aria-labelledby` pointing at an\n *   element that no longer exists, and the next registered heading takes over.\n */\ninterface SectionContextValue {\n    sectionId: string;\n    claim: (headerKey: string) => boolean;\n    register: (headingId: string) => () => void;\n}\n\nconst SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"id\"> {\n    /** Heading text, rendered as `<h{level}>`. */\n    title?: ReactNode;\n    /** Short label above the title (category, breadcrumbs). */\n    eyebrow?: ReactNode;\n    /** Supporting text rendered below the title. */\n    description?: ReactNode;\n    /** Trailing slot for buttons or menus. */\n    actions?: ReactNode;\n    /** Heading level — semantics only, the look does not change with it. Default `2`. */\n    level?: SectionHeaderLevel;\n    /** Horizontal alignment of the text block. Default `\"start\"`. */\n    align?: SectionHeaderAlign;\n    /** Id of the heading element. Generated with `useId` when absent. */\n    id?: string;\n}\n\n/**\n * Header of a page or of one section of it: eyebrow, title, description and\n * actions, with the same look `Page` uses for its own header.\n *\n * The heading level is a prop because one page needs one `<h1>` and many\n * `<h2>` that look alike; the visual stays the same at every level so the\n * outline is picked by meaning, not by size. Inside a `<Section>` the first\n * titled header takes the section's own id for its heading (unless `id` is\n * given) and registers it, which is what gives the `region` landmark its\n * accessible name — in the server HTML too.\n *\n * @example\n * <Section>\n *     <SectionHeader eyebrow=\"Soluções\" title=\"O que podemos desenvolver\" align=\"center\" />\n *     <p>Conteúdo da seção.</p>\n * </Section>\n */\nexport function SectionHeader({\n    title,\n    eyebrow,\n    description,\n    actions,\n    level = 2,\n    align = \"start\",\n    id,\n    className,\n    ...props\n}: SectionHeaderProps) {\n    const autoId = useId();\n    const section = useContext(SectionContext);\n    const hasTitle = Boolean(title);\n    const ownsSection = section !== null && hasTitle && section.claim(autoId);\n    const headingId = id ?? (ownsSection ? section.sectionId : autoId);\n    const register = section?.register;\n    useLayoutEffect(() => {\n        if (!register || !hasTitle) return undefined;\n        return register(headingId);\n    }, [register, hasTitle, headingId]);\n    if (!title && !eyebrow && !description && !actions) return null;\n    const Heading = `h${level}` as const;\n    return (\n        <header\n            className={cn(styles.header, align === \"center\" && styles.center, className)}\n            {...props}\n        >\n            <div className={styles.headerText}>\n                {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                {title && (\n                    <Heading id={headingId} className={styles.title}>\n                        {title}\n                    </Heading>\n                )}\n                {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n\n/** Surface tone a {@link Section} can take. */\nexport type SectionTone = \"inverse\" | \"default\";\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * `\"inverse\"` paints the section in the brand color and inverts every color\n     * token inside it, by writing `data-tempest-tone=\"inverse\"`. The tokens are\n     * opt-in, because most apps never paint a section in the brand: they come\n     * from `tempest-react-sdk/styles/inverse.css` for the SDK's own blue, or from\n     * `createTheme({ primary, inverse: createInverseSurface })` for yours, each\n     * measured against the fill (text and muted text at 4.5:1 or more, the focus\n     * ring at 3:1 or more). With neither loaded the attribute matches nothing and\n     * the section keeps the page's tokens — legible, not inverted. The prop\n     * exists so the tone is typed: a typo in a hand-written attribute fails\n     * silently, a typo here fails the build.\n     *\n     * `\"default\"` hands a region inside an inverse section back to the page's\n     * tokens — light or dark, whichever the page is on — by writing\n     * `data-tempest-tone=\"default\"`: a white form or price card in a navy hero.\n     * The rules ship with the inverse tokens, so it costs nothing until those are\n     * loaded, and outside an inverse section the tokens it restores are the ones\n     * already there.\n     */\n    tone?: SectionTone;\n}\n\n/**\n * `<section>` that takes its accessible name from the `SectionHeader` inside it.\n *\n * A `<section>` is exposed as a `region` landmark only when it has an\n * accessible name; without one it is an anonymous group and screen-reader\n * landmark navigation skips it. Wiring `aria-labelledby` to the heading id is\n * the same mechanical step on every page, so the section does it: every\n * `SectionHeader` with a `title` below it reaches the section through context\n * (so wrappers in between do not break the link) and the first one names it;\n * when it unmounts, the next one takes over. An explicit `aria-labelledby` or\n * `aria-label` wins over the automatic one, and once mounted with no titled\n * heading the attribute is left off rather than pointing at nothing.\n *\n * The section owns the id (`useId`), so the link is already in the first\n * render — `renderToString` and the HTML a server sends — where no effect runs.\n * The parent's attributes are written before any child renders, so the section\n * cannot know what is below it: it always writes its own id, and the first\n * titled `SectionHeader` in render order puts that id on its heading. Two\n * cases cannot be known on the server, and both are settled on hydration\n * without a mismatch warning: with no titled heading the server attribute is\n * dropped (until then it resolves to nothing, which Chromium 153 exposes as\n * the same anonymous group as no attribute at all), and when that first header\n * has an explicit `id` the attribute moves to it. A consumer that needs the\n * explicit id in the server HTML passes `aria-labelledby` itself.\n *\n * @example\n * <Section>\n *     <SectionHeader title=\"Planos\" />\n *     <PlanGrid />\n * </Section>\n *\n * @example\n * <Section tone=\"inverse\">\n *     <SectionHeader title=\"Comece agora\" />\n *     <Button>Criar conta</Button>\n * </Section>\n */\nexport function Section({ children, tone, ...props }: SectionProps) {\n    const sectionId = useId();\n    const ownerRef = useRef<string | null>(null);\n    const [headingIds, setHeadingIds] = useState<string[] | null>(null);\n    const context = useMemo<SectionContextValue>(\n        () => ({\n            sectionId,\n            claim: (headerKey: string) => {\n                ownerRef.current ??= headerKey;\n                return ownerRef.current === headerKey;\n            },\n            register: (id: string) => {\n                setHeadingIds((current) => [...(current ?? []), id]);\n                return () =>\n                    setHeadingIds((current) => (current ?? []).filter((entry) => entry !== id));\n            },\n        }),\n        [sectionId],\n    );\n    useLayoutEffect(() => {\n        setHeadingIds((current) => current ?? []);\n    }, []);\n    const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n    const labelledBy = headingIds === null ? sectionId : headingIds[0];\n    return (\n        <SectionContext.Provider value={context}>\n            <section\n                aria-labelledby={named ? undefined : labelledBy}\n                data-tempest-tone={tone}\n                {...props}\n            >\n                {children}\n            </section>\n        </SectionContext.Provider>\n    );\n}\n"],"mappings":"oIA6CA,IAAM,GAAA,EAAiB,EAAA,cAAA,CAA0C,IAAI,EAoCrE,SAAgB,EAAc,CAC1B,QACA,UACA,cACA,UACA,QAAQ,EACR,QAAQ,QACR,KACA,YACA,GAAG,GACgB,CACnB,IAAM,GAAA,EAAS,EAAA,MAAA,CAAM,EACf,GAAA,EAAU,EAAA,WAAA,CAAW,CAAc,EACnC,EAAW,EAAQ,EACnB,EAAc,IAAY,MAAQ,GAAY,EAAQ,MAAM,CAAM,EAClE,EAAY,IAAO,EAAc,EAAQ,UAAY,GACrD,EAAW,GAAS,SAK1B,IAJA,EAAA,EAAA,gBAAA,KAAsB,CACd,GAAC,GAAa,EAClB,OAAO,EAAS,CAAS,CAC7B,EAAG,CAAC,EAAU,EAAU,CAAS,CAAC,EAC9B,CAAC,GAAS,CAAC,GAAW,CAAC,GAAe,CAAC,EAAS,OAAO,KAC3D,IAAM,EAAU,IAAI,IACpB,OACI,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,IAAU,UAAY,EAAA,QAAO,OAAQ,CAAS,EAC3E,GAAI,EAFR,SAAA,EAII,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,WAAvB,SAAA,CACK,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,EACzD,IACG,EAAA,EAAA,IAAA,CAAC,EAAD,CAAS,GAAI,EAAW,UAAW,EAAA,QAAO,MACrC,SAAA,CACI,CAAA,EAEZ,IAAe,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAW,EAAA,QAAO,YAAc,SAAA,CAAe,CAAA,CACjE,CACJ,CAAA,EAAA,IAAW,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,CACtD,GAEhB,CAiEA,SAAgB,EAAQ,CAAE,WAAU,OAAM,GAAG,GAAuB,CAChE,IAAM,GAAA,EAAY,EAAA,MAAA,CAAM,EAClB,GAAA,EAAW,EAAA,OAAA,CAAsB,IAAI,EACrC,CAAC,EAAY,IAAA,EAAiB,EAAA,SAAA,CAA0B,IAAI,EAC5D,GAAA,EAAU,EAAA,QAAA,MACL,CACH,YACA,MAAQ,IACJ,EAAS,UAAY,EACd,EAAS,UAAY,GAEhC,SAAW,IACP,EAAe,GAAY,CAAC,GAAI,GAAW,CAAC,EAAI,CAAE,CAAC,MAE/C,EAAe,IAAa,GAAW,CAAC,EAAA,CAAG,OAAQ,GAAU,IAAU,CAAE,CAAC,EAEtF,GACA,CAAC,CAAS,CACd,GACA,EAAA,EAAA,gBAAA,KAAsB,CAClB,EAAe,GAAY,GAAW,CAAC,CAAC,CAC5C,EAAG,CAAC,CAAC,EACL,IAAM,EAAQ,EAAM,qBAAuB,IAAA,IAAa,EAAM,gBAAkB,IAAA,GAC1E,EAAa,IAAe,KAAO,EAAY,EAAW,GAChE,OACI,EAAA,EAAA,IAAA,CAAC,EAAe,SAAhB,CAAyB,MAAO,EAC5B,UAAA,EAAA,EAAA,IAAA,CAAC,UAAD,CACI,kBAAiB,EAAQ,IAAA,GAAY,EACrC,oBAAmB,EACnB,GAAI,EAEH,UACI,CAAA,CACY,CAAA,CAEjC"}

package/dist/components/SectionHeader/SectionHeader.js

@@ -1,51 +1,59 @@
 import { cn as e } from "../../utils/cn.js";
 import t from "./SectionHeader.module.js";
-import { createContext as n, useContext as r, useId as i, useLayoutEffect as a, useMemo as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { createContext as n, useContext as r, useId as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/SectionHeader/SectionHeader.tsx
-var u = n(null);
-function d({ title: n, eyebrow: o, description: s, actions: d, level: f = 2, align: p = "start", id: m, className: h, ...g }) {
-	let _ = i(), v = m ?? _, y = r(u)?.register, b = !!n;
+var d = n(null);
+function f({ title: n, eyebrow: o, description: s, actions: c, level: f = 2, align: p = "start", id: m, className: h, ...g }) {
+	let _ = i(), v = r(d), y = !!n, b = v !== null && y && v.claim(_), x = m ?? (b ? v.sectionId : _), S = v?.register;
 	if (a(() => {
-		if (y && b) return y(v);
+		if (S && y) return S(x);
 	}, [
+		S,
 		y,
-		b,
-		v
-	]), !n && !o && !s && !d) return null;
-	let x = `h${f}`;
-	return /* @__PURE__ */ l("header", {
+		x
+	]), !n && !o && !s && !c) return null;
+	let C = `h${f}`;
+	return /* @__PURE__ */ u("header", {
 		className: e(t.header, p === "center" && t.center, h),
 		...g,
-		children: [/* @__PURE__ */ l("div", {
+		children: [/* @__PURE__ */ u("div", {
 			className: t.headerText,
 			children: [
-				o && /* @__PURE__ */ c("div", {
+				o && /* @__PURE__ */ l("div", {
 					className: t.eyebrow,
 					children: o
 				}),
-				n && /* @__PURE__ */ c(x, {
-					id: v,
+				n && /* @__PURE__ */ l(C, {
+					id: x,
 					className: t.title,
 					children: n
 				}),
-				s && /* @__PURE__ */ c("p", {
+				s && /* @__PURE__ */ l("p", {
 					className: t.description,
 					children: s
 				})
 			]
-		}), d && /* @__PURE__ */ c("div", {
+		}), c && /* @__PURE__ */ l("div", {
 			className: t.actions,
-			children: d
+			children: c
 		})]
 	});
 }
-function f({ children: e, tone: t, ...n }) {
-	let [r, i] = s([]), a = o(() => ({ register: (e) => (i((t) => [...t, e]), () => i((t) => t.filter((t) => t !== e))) }), []), l = n["aria-labelledby"] !== void 0 || n["aria-label"] !== void 0;
-	return /* @__PURE__ */ c(u.Provider, {
-		value: a,
-		children: /* @__PURE__ */ c("section", {
-			"aria-labelledby": l ? void 0 : r[0],
+function p({ children: e, tone: t, ...n }) {
+	let r = i(), u = s(null), [f, p] = c(null), m = o(() => ({
+		sectionId: r,
+		claim: (e) => (u.current ??= e, u.current === e),
+		register: (e) => (p((t) => [...t ?? [], e]), () => p((t) => (t ?? []).filter((t) => t !== e)))
+	}), [r]);
+	a(() => {
+		p((e) => e ?? []);
+	}, []);
+	let h = n["aria-labelledby"] !== void 0 || n["aria-label"] !== void 0, g = f === null ? r : f[0];
+	return /* @__PURE__ */ l(d.Provider, {
+		value: m,
+		children: /* @__PURE__ */ l("section", {
+			"aria-labelledby": h ? void 0 : g,
 			"data-tempest-tone": t,
 			...n,
 			children: e
@@ -53,6 +61,6 @@ function f({ children: e, tone: t, ...n }) {
 	});
 }
 //#endregion
-export { f as Section, d as SectionHeader };
+export { p as Section, f as SectionHeader };
 
 //# sourceMappingURL=SectionHeader.js.map

package/dist/components/SectionHeader/SectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.js","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a heading block is slots (eyebrow, title, description,\n * actions) plus the three switches that decide its semantics: level, align and the\n * heading id. Splitting them would leave the id away from the heading it names.\n */\nimport { createContext, useContext, useId, useLayoutEffect, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SectionHeader.module.css\";\n\nexport type SectionHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type SectionHeaderAlign = \"start\" | \"center\";\n\n/**\n * Lets the nearest `<Section>` learn the id of the heading that names it.\n *\n * `register` returns the matching unregister so a heading that unmounts (or\n * changes id) releases the section instead of leaving `aria-labelledby` pointing\n * at an element that no longer exists.\n */\ninterface SectionContextValue {\n    register: (headingId: string) => () => void;\n}\n\nconst SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"id\"> {\n    /** Heading text, rendered as `<h{level}>`. */\n    title?: ReactNode;\n    /** Short label above the title (category, breadcrumbs). */\n    eyebrow?: ReactNode;\n    /** Supporting text rendered below the title. */\n    description?: ReactNode;\n    /** Trailing slot for buttons or menus. */\n    actions?: ReactNode;\n    /** Heading level — semantics only, the look does not change with it. Default `2`. */\n    level?: SectionHeaderLevel;\n    /** Horizontal alignment of the text block. Default `\"start\"`. */\n    align?: SectionHeaderAlign;\n    /** Id of the heading element. Generated with `useId` when absent. */\n    id?: string;\n}\n\n/**\n * Header of a page or of one section of it: eyebrow, title, description and\n * actions, with the same look `Page` uses for its own header.\n *\n * The heading level is a prop because one page needs one `<h1>` and many\n * `<h2>` that look alike; the visual stays the same at every level so the\n * outline is picked by meaning, not by size. Inside a `<Section>` the heading\n * id is registered with it, which is what gives the `region` landmark its\n * accessible name.\n *\n * @example\n * <Section>\n *     <SectionHeader eyebrow=\"Soluções\" title=\"O que podemos desenvolver\" align=\"center\" />\n *     <p>Conteúdo da seção.</p>\n * </Section>\n */\nexport function SectionHeader({\n    title,\n    eyebrow,\n    description,\n    actions,\n    level = 2,\n    align = \"start\",\n    id,\n    className,\n    ...props\n}: SectionHeaderProps) {\n    const autoId = useId();\n    const headingId = id ?? autoId;\n    const section = useContext(SectionContext);\n    const register = section?.register;\n    const hasTitle = Boolean(title);\n    useLayoutEffect(() => {\n        if (!register || !hasTitle) return undefined;\n        return register(headingId);\n    }, [register, hasTitle, headingId]);\n    if (!title && !eyebrow && !description && !actions) return null;\n    const Heading = `h${level}` as const;\n    return (\n        <header\n            className={cn(styles.header, align === \"center\" && styles.center, className)}\n            {...props}\n        >\n            <div className={styles.headerText}>\n                {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                {title && (\n                    <Heading id={headingId} className={styles.title}>\n                        {title}\n                    </Heading>\n                )}\n                {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n\n/** Surface tone a {@link Section} can take. */\nexport type SectionTone = \"inverse\";\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * `\"inverse\"` paints the section in the brand color and inverts every color\n     * token inside it, by writing `data-tempest-tone=\"inverse\"`. The tokens are\n     * opt-in, because most apps never paint a section in the brand: they come\n     * from `tempest-react-sdk/styles/inverse.css` for the SDK's own blue, or from\n     * `createTheme({ primary, inverse: createInverseSurface })` for yours, each\n     * measured against the fill (text and muted text at 4.5:1 or more, the focus\n     * ring at 3:1 or more). With neither loaded the attribute matches nothing and\n     * the section keeps the page's tokens — legible, not inverted. The prop\n     * exists so the tone is typed: a typo in a hand-written attribute fails\n     * silently, a typo here fails the build.\n     */\n    tone?: SectionTone;\n}\n\n/**\n * `<section>` that takes its accessible name from the `SectionHeader` inside it.\n *\n * A `<section>` is exposed as a `region` landmark only when it has an\n * accessible name; without one it is an anonymous group and screen-reader\n * landmark navigation skips it. Wiring `aria-labelledby` to the heading id is\n * the same mechanical step on every page, so the section does it: every\n * `SectionHeader` with a `title` below it registers its id through context (so\n * wrappers in between do not break the link) and the first one mounted names\n * the section; when it unmounts, the next one takes over. An explicit\n * `aria-labelledby` or `aria-label` wins over the registered one, and with no\n * heading the attribute is left off rather than pointing at nothing.\n *\n * @example\n * <Section>\n *     <SectionHeader title=\"Planos\" />\n *     <PlanGrid />\n * </Section>\n *\n * @example\n * <Section tone=\"inverse\">\n *     <SectionHeader title=\"Comece agora\" />\n *     <Button>Criar conta</Button>\n * </Section>\n */\nexport function Section({ children, tone, ...props }: SectionProps) {\n    const [headingIds, setHeadingIds] = useState<string[]>([]);\n    const context = useMemo<SectionContextValue>(\n        () => ({\n            register: (id: string) => {\n                setHeadingIds((current) => [...current, id]);\n                return () => setHeadingIds((current) => current.filter((entry) => entry !== id));\n            },\n        }),\n        [],\n    );\n    const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n    return (\n        <SectionContext.Provider value={context}>\n            <section\n                aria-labelledby={named ? undefined : headingIds[0]}\n                data-tempest-tone={tone}\n                {...props}\n            >\n                {children}\n            </section>\n        </SectionContext.Provider>\n    );\n}\n"],"mappings":";;;;;AAwBA,IAAM,IAAiB,EAA0C,IAAI;AAmCrE,SAAgB,EAAc,EAC1B,UACA,YACA,gBACA,YACA,WAAQ,GACR,WAAQ,SACR,OACA,cACA,GAAG,KACgB;CACnB,IAAM,IAAS,EAAM,GACf,IAAY,KAAM,GAElB,IADU,EAAW,CACV,CAAA,EAAS,UACpB,IAAW,EAAQ;CAKzB,IAJA,QAAsB;EACd,IAAC,KAAa,GAClB,OAAO,EAAS,CAAS;CAC7B,GAAG;EAAC;EAAU;EAAU;CAAS,CAAC,GAC9B,CAAC,KAAS,CAAC,KAAW,CAAC,KAAe,CAAC,GAAS,OAAO;CAC3D,IAAM,IAAU,IAAI;CACpB,OACI,kBAAC,UAAD;EACI,WAAW,EAAG,EAAO,QAAQ,MAAU,YAAY,EAAO,QAAQ,CAAS;EAC3E,GAAI;EAFR,UAAA,CAII,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA;IACK,KAAW,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU,UAAA;IAAa,CAAA;IACzD,KACG,kBAAC,GAAD;KAAS,IAAI;KAAW,WAAW,EAAO;KACrC,UAAA;IACI,CAAA;IAEZ,KAAe,kBAAC,KAAD;KAAG,WAAW,EAAO;KAAc,UAAA;IAAe,CAAA;GACjE;EACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAU,UAAA;EAAa,CAAA,CACtD;;AAEhB;AA8CA,SAAgB,EAAQ,EAAE,aAAU,SAAM,GAAG,KAAuB;CAChE,IAAM,CAAC,GAAY,KAAiB,EAAmB,CAAC,CAAC,GACnD,IAAU,SACL,EACH,WAAW,OACP,GAAe,MAAY,CAAC,GAAG,GAAS,CAAE,CAAC,SAC9B,GAAe,MAAY,EAAQ,QAAQ,MAAU,MAAU,CAAE,CAAC,GAEvF,IACA,CAAC,CACL,GACM,IAAQ,EAAM,uBAAuB,KAAA,KAAa,EAAM,kBAAkB,KAAA;CAChF,OACI,kBAAC,EAAe,UAAhB;EAAyB,OAAO;EAC5B,UAAA,kBAAC,WAAD;GACI,mBAAiB,IAAQ,KAAA,IAAY,EAAW;GAChD,qBAAmB;GACnB,GAAI;GAEH;EACI,CAAA;CACY,CAAA;AAEjC"}
+{"version":3,"file":"SectionHeader.js","names":[],"sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — a heading block is slots (eyebrow, title, description,\n * actions) plus the three switches that decide its semantics: level, align and the\n * heading id. Splitting them would leave the id away from the heading it names.\n */\nimport {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SectionHeader.module.css\";\n\nexport type SectionHeaderLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type SectionHeaderAlign = \"start\" | \"center\";\n\n/**\n * Links the nearest `<Section>` to the heading that names it.\n *\n * Two channels, because they answer at different times:\n *\n * - `sectionId` + `claim` work during render, so the link exists in the very\n *   first HTML (`renderToString`, hydration) where no effect runs. The section\n *   owns `sectionId` (from `useId`, identical on server and client) and writes\n *   it to `aria-labelledby` before any child renders; the first titled\n *   `SectionHeader` to call `claim` in render order becomes its owner and, when\n *   it has no explicit `id`, puts `sectionId` on its heading. `claim` is keyed by\n *   the caller's own `useId`, so asking twice (Strict Mode, a re-render) gives\n *   the same answer and never hands the id to a second heading.\n * - `register` works after mount and is the source of truth from then on: it\n *   returns the matching unregister so a heading that unmounts (or changes id)\n *   releases the section instead of leaving `aria-labelledby` pointing at an\n *   element that no longer exists, and the next registered heading takes over.\n */\ninterface SectionContextValue {\n    sectionId: string;\n    claim: (headerKey: string) => boolean;\n    register: (headingId: string) => () => void;\n}\n\nconst SectionContext = createContext<SectionContextValue | null>(null);\n\nexport interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\" | \"id\"> {\n    /** Heading text, rendered as `<h{level}>`. */\n    title?: ReactNode;\n    /** Short label above the title (category, breadcrumbs). */\n    eyebrow?: ReactNode;\n    /** Supporting text rendered below the title. */\n    description?: ReactNode;\n    /** Trailing slot for buttons or menus. */\n    actions?: ReactNode;\n    /** Heading level — semantics only, the look does not change with it. Default `2`. */\n    level?: SectionHeaderLevel;\n    /** Horizontal alignment of the text block. Default `\"start\"`. */\n    align?: SectionHeaderAlign;\n    /** Id of the heading element. Generated with `useId` when absent. */\n    id?: string;\n}\n\n/**\n * Header of a page or of one section of it: eyebrow, title, description and\n * actions, with the same look `Page` uses for its own header.\n *\n * The heading level is a prop because one page needs one `<h1>` and many\n * `<h2>` that look alike; the visual stays the same at every level so the\n * outline is picked by meaning, not by size. Inside a `<Section>` the first\n * titled header takes the section's own id for its heading (unless `id` is\n * given) and registers it, which is what gives the `region` landmark its\n * accessible name — in the server HTML too.\n *\n * @example\n * <Section>\n *     <SectionHeader eyebrow=\"Soluções\" title=\"O que podemos desenvolver\" align=\"center\" />\n *     <p>Conteúdo da seção.</p>\n * </Section>\n */\nexport function SectionHeader({\n    title,\n    eyebrow,\n    description,\n    actions,\n    level = 2,\n    align = \"start\",\n    id,\n    className,\n    ...props\n}: SectionHeaderProps) {\n    const autoId = useId();\n    const section = useContext(SectionContext);\n    const hasTitle = Boolean(title);\n    const ownsSection = section !== null && hasTitle && section.claim(autoId);\n    const headingId = id ?? (ownsSection ? section.sectionId : autoId);\n    const register = section?.register;\n    useLayoutEffect(() => {\n        if (!register || !hasTitle) return undefined;\n        return register(headingId);\n    }, [register, hasTitle, headingId]);\n    if (!title && !eyebrow && !description && !actions) return null;\n    const Heading = `h${level}` as const;\n    return (\n        <header\n            className={cn(styles.header, align === \"center\" && styles.center, className)}\n            {...props}\n        >\n            <div className={styles.headerText}>\n                {eyebrow && <div className={styles.eyebrow}>{eyebrow}</div>}\n                {title && (\n                    <Heading id={headingId} className={styles.title}>\n                        {title}\n                    </Heading>\n                )}\n                {description && <p className={styles.description}>{description}</p>}\n            </div>\n            {actions && <div className={styles.actions}>{actions}</div>}\n        </header>\n    );\n}\n\n/** Surface tone a {@link Section} can take. */\nexport type SectionTone = \"inverse\" | \"default\";\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n    /**\n     * `\"inverse\"` paints the section in the brand color and inverts every color\n     * token inside it, by writing `data-tempest-tone=\"inverse\"`. The tokens are\n     * opt-in, because most apps never paint a section in the brand: they come\n     * from `tempest-react-sdk/styles/inverse.css` for the SDK's own blue, or from\n     * `createTheme({ primary, inverse: createInverseSurface })` for yours, each\n     * measured against the fill (text and muted text at 4.5:1 or more, the focus\n     * ring at 3:1 or more). With neither loaded the attribute matches nothing and\n     * the section keeps the page's tokens — legible, not inverted. The prop\n     * exists so the tone is typed: a typo in a hand-written attribute fails\n     * silently, a typo here fails the build.\n     *\n     * `\"default\"` hands a region inside an inverse section back to the page's\n     * tokens — light or dark, whichever the page is on — by writing\n     * `data-tempest-tone=\"default\"`: a white form or price card in a navy hero.\n     * The rules ship with the inverse tokens, so it costs nothing until those are\n     * loaded, and outside an inverse section the tokens it restores are the ones\n     * already there.\n     */\n    tone?: SectionTone;\n}\n\n/**\n * `<section>` that takes its accessible name from the `SectionHeader` inside it.\n *\n * A `<section>` is exposed as a `region` landmark only when it has an\n * accessible name; without one it is an anonymous group and screen-reader\n * landmark navigation skips it. Wiring `aria-labelledby` to the heading id is\n * the same mechanical step on every page, so the section does it: every\n * `SectionHeader` with a `title` below it reaches the section through context\n * (so wrappers in between do not break the link) and the first one names it;\n * when it unmounts, the next one takes over. An explicit `aria-labelledby` or\n * `aria-label` wins over the automatic one, and once mounted with no titled\n * heading the attribute is left off rather than pointing at nothing.\n *\n * The section owns the id (`useId`), so the link is already in the first\n * render — `renderToString` and the HTML a server sends — where no effect runs.\n * The parent's attributes are written before any child renders, so the section\n * cannot know what is below it: it always writes its own id, and the first\n * titled `SectionHeader` in render order puts that id on its heading. Two\n * cases cannot be known on the server, and both are settled on hydration\n * without a mismatch warning: with no titled heading the server attribute is\n * dropped (until then it resolves to nothing, which Chromium 153 exposes as\n * the same anonymous group as no attribute at all), and when that first header\n * has an explicit `id` the attribute moves to it. A consumer that needs the\n * explicit id in the server HTML passes `aria-labelledby` itself.\n *\n * @example\n * <Section>\n *     <SectionHeader title=\"Planos\" />\n *     <PlanGrid />\n * </Section>\n *\n * @example\n * <Section tone=\"inverse\">\n *     <SectionHeader title=\"Comece agora\" />\n *     <Button>Criar conta</Button>\n * </Section>\n */\nexport function Section({ children, tone, ...props }: SectionProps) {\n    const sectionId = useId();\n    const ownerRef = useRef<string | null>(null);\n    const [headingIds, setHeadingIds] = useState<string[] | null>(null);\n    const context = useMemo<SectionContextValue>(\n        () => ({\n            sectionId,\n            claim: (headerKey: string) => {\n                ownerRef.current ??= headerKey;\n                return ownerRef.current === headerKey;\n            },\n            register: (id: string) => {\n                setHeadingIds((current) => [...(current ?? []), id]);\n                return () =>\n                    setHeadingIds((current) => (current ?? []).filter((entry) => entry !== id));\n            },\n        }),\n        [sectionId],\n    );\n    useLayoutEffect(() => {\n        setHeadingIds((current) => current ?? []);\n    }, []);\n    const named = props[\"aria-labelledby\"] !== undefined || props[\"aria-label\"] !== undefined;\n    const labelledBy = headingIds === null ? sectionId : headingIds[0];\n    return (\n        <SectionContext.Provider value={context}>\n            <section\n                aria-labelledby={named ? undefined : labelledBy}\n                data-tempest-tone={tone}\n                {...props}\n            >\n                {children}\n            </section>\n        </SectionContext.Provider>\n    );\n}\n"],"mappings":";;;;;AA6CA,IAAM,IAAiB,EAA0C,IAAI;AAoCrE,SAAgB,EAAc,EAC1B,UACA,YACA,gBACA,YACA,WAAQ,GACR,WAAQ,SACR,OACA,cACA,GAAG,KACgB;CACnB,IAAM,IAAS,EAAM,GACf,IAAU,EAAW,CAAc,GACnC,IAAW,EAAQ,GACnB,IAAc,MAAY,QAAQ,KAAY,EAAQ,MAAM,CAAM,GAClE,IAAY,MAAO,IAAc,EAAQ,YAAY,IACrD,IAAW,GAAS;CAK1B,IAJA,QAAsB;EACd,IAAC,KAAa,GAClB,OAAO,EAAS,CAAS;CAC7B,GAAG;EAAC;EAAU;EAAU;CAAS,CAAC,GAC9B,CAAC,KAAS,CAAC,KAAW,CAAC,KAAe,CAAC,GAAS,OAAO;CAC3D,IAAM,IAAU,IAAI;CACpB,OACI,kBAAC,UAAD;EACI,WAAW,EAAG,EAAO,QAAQ,MAAU,YAAY,EAAO,QAAQ,CAAS;EAC3E,GAAI;EAFR,UAAA,CAII,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA;IACK,KAAW,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU,UAAA;IAAa,CAAA;IACzD,KACG,kBAAC,GAAD;KAAS,IAAI;KAAW,WAAW,EAAO;KACrC,UAAA;IACI,CAAA;IAEZ,KAAe,kBAAC,KAAD;KAAG,WAAW,EAAO;KAAc,UAAA;IAAe,CAAA;GACjE;EACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAU,UAAA;EAAa,CAAA,CACtD;;AAEhB;AAiEA,SAAgB,EAAQ,EAAE,aAAU,SAAM,GAAG,KAAuB;CAChE,IAAM,IAAY,EAAM,GAClB,IAAW,EAAsB,IAAI,GACrC,CAAC,GAAY,KAAiB,EAA0B,IAAI,GAC5D,IAAU,SACL;EACH;EACA,QAAQ,OACJ,EAAS,YAAY,GACd,EAAS,YAAY;EAEhC,WAAW,OACP,GAAe,MAAY,CAAC,GAAI,KAAW,CAAC,GAAI,CAAE,CAAC,SAE/C,GAAe,OAAa,KAAW,CAAC,EAAA,CAAG,QAAQ,MAAU,MAAU,CAAE,CAAC;CAEtF,IACA,CAAC,CAAS,CACd;CACA,QAAsB;EAClB,GAAe,MAAY,KAAW,CAAC,CAAC;CAC5C,GAAG,CAAC,CAAC;CACL,IAAM,IAAQ,EAAM,uBAAuB,KAAA,KAAa,EAAM,kBAAkB,KAAA,GAC1E,IAAa,MAAe,OAAO,IAAY,EAAW;CAChE,OACI,kBAAC,EAAe,UAAhB;EAAyB,OAAO;EAC5B,UAAA,kBAAC,WAAD;GACI,mBAAiB,IAAQ,KAAA,IAAY;GACrC,qBAAmB;GACnB,GAAI;GAEH;EACI,CAAA;CACY,CAAA;AAEjC"}

package/dist/components/Tour/Tour.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.module.cjs","names":[],"sources":["../../../src/components/Tour/Tour.module.css"],"sourcesContent":[".root {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal, 1000);\n    font-family: var(--tempest-font-sans);\n    pointer-events: none;\n}\n\n/*\n * The dimmed area is four rectangles, each one hit-testable, so the page behind is\n * blocked while the highlighted element stays clickable. A single overlay with a\n * `box-shadow` hole looks the same and blocks nothing: a shadow is not hit-tested.\n */\n.backdrop {\n    position: fixed;\n    background-color: var(--tempest-tour-backdrop, rgb(0 0 0 / 55%));\n    pointer-events: auto;\n}\n\n.spotlight {\n    position: fixed;\n    border-radius: var(--tempest-radius-md);\n    box-shadow: 0 0 0 2px var(--tempest-primary);\n    pointer-events: none;\n}\n\n.card {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    width: min(22rem, calc(100vw - 2rem));\n    padding: var(--tempest-space-4);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-lg);\n    color: var(--tempest-text);\n    pointer-events: auto;\n}\n\n.card:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n}\n\n.progress {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-lg);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.close:hover {\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-base);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.body {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    margin-block-start: var(--tempest-space-2);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    margin-inline-start: auto;\n}\n\n.skip {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-text-muted);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.primary,\n.secondary {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.primary {\n    border: none;\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.secondary {\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.primary:focus-visible,\n.secondary:focus-visible,\n.skip:focus-visible,\n.close:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n/* The spotlight ring is decoration; a reader who asked for less motion gets none. */\n@media (prefers-reduced-motion: no-preference) {\n    .spotlight {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out),\n            width var(--tempest-duration-base) var(--tempest-ease-out),\n            height var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n\n    .card {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Tour.module.cjs","names":[],"sources":["../../../src/components/Tour/Tour.module.css"],"sourcesContent":[".root {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal, 1000);\n    font-family: var(--tempest-font-sans);\n    pointer-events: none;\n}\n\n/*\n * The dimmed area is four rectangles, each one hit-testable, so the page behind is\n * blocked while the highlighted element stays clickable. A single overlay with a\n * `box-shadow` hole looks the same and blocks nothing: a shadow is not hit-tested.\n */\n.backdrop {\n    position: fixed;\n    background-color: var(--tempest-tour-backdrop, rgb(0 0 0 / 55%));\n    pointer-events: auto;\n}\n\n.spotlight {\n    position: fixed;\n    border-radius: var(--tempest-radius-md);\n    box-shadow: 0 0 0 2px var(--tempest-primary);\n    pointer-events: none;\n}\n\n.card {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    width: min(22rem, calc(100vw - 2rem));\n    padding: var(--tempest-space-4);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-lg);\n    color: var(--tempest-text);\n    pointer-events: auto;\n}\n\n.card:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n}\n\n.progress {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-lg);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.close:hover {\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-base);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.body {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    margin-block-start: var(--tempest-space-2);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    margin-inline-start: auto;\n}\n\n.skip {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-text-muted);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.primary,\n.secondary {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.primary {\n    border: none;\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.secondary {\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.primary:focus-visible,\n.secondary:focus-visible,\n.skip:focus-visible,\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n/* The spotlight ring is decoration; a reader who asked for less motion gets none. */\n@media (prefers-reduced-motion: no-preference) {\n    .spotlight {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out),\n            width var(--tempest-duration-base) var(--tempest-ease-out),\n            height var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n\n    .card {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n}\n"],"mappings":";"}

package/dist/components/Tour/Tour.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.module.js","names":[],"sources":["../../../src/components/Tour/Tour.module.css"],"sourcesContent":[".root {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal, 1000);\n    font-family: var(--tempest-font-sans);\n    pointer-events: none;\n}\n\n/*\n * The dimmed area is four rectangles, each one hit-testable, so the page behind is\n * blocked while the highlighted element stays clickable. A single overlay with a\n * `box-shadow` hole looks the same and blocks nothing: a shadow is not hit-tested.\n */\n.backdrop {\n    position: fixed;\n    background-color: var(--tempest-tour-backdrop, rgb(0 0 0 / 55%));\n    pointer-events: auto;\n}\n\n.spotlight {\n    position: fixed;\n    border-radius: var(--tempest-radius-md);\n    box-shadow: 0 0 0 2px var(--tempest-primary);\n    pointer-events: none;\n}\n\n.card {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    width: min(22rem, calc(100vw - 2rem));\n    padding: var(--tempest-space-4);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-lg);\n    color: var(--tempest-text);\n    pointer-events: auto;\n}\n\n.card:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n}\n\n.progress {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-lg);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.close:hover {\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-base);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.body {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    margin-block-start: var(--tempest-space-2);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    margin-inline-start: auto;\n}\n\n.skip {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-text-muted);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.primary,\n.secondary {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.primary {\n    border: none;\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.secondary {\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.primary:focus-visible,\n.secondary:focus-visible,\n.skip:focus-visible,\n.close:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n\n/* The spotlight ring is decoration; a reader who asked for less motion gets none. */\n@media (prefers-reduced-motion: no-preference) {\n    .spotlight {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out),\n            width var(--tempest-duration-base) var(--tempest-ease-out),\n            height var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n\n    .card {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Tour.module.js","names":[],"sources":["../../../src/components/Tour/Tour.module.css"],"sourcesContent":[".root {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal, 1000);\n    font-family: var(--tempest-font-sans);\n    pointer-events: none;\n}\n\n/*\n * The dimmed area is four rectangles, each one hit-testable, so the page behind is\n * blocked while the highlighted element stays clickable. A single overlay with a\n * `box-shadow` hole looks the same and blocks nothing: a shadow is not hit-tested.\n */\n.backdrop {\n    position: fixed;\n    background-color: var(--tempest-tour-backdrop, rgb(0 0 0 / 55%));\n    pointer-events: auto;\n}\n\n.spotlight {\n    position: fixed;\n    border-radius: var(--tempest-radius-md);\n    box-shadow: 0 0 0 2px var(--tempest-primary);\n    pointer-events: none;\n}\n\n.card {\n    position: fixed;\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    width: min(22rem, calc(100vw - 2rem));\n    padding: var(--tempest-space-4);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-lg);\n    color: var(--tempest-text);\n    pointer-events: auto;\n}\n\n.card:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n}\n\n.progress {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    height: 1.75rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-lg);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.close:hover {\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.title {\n    margin: 0;\n    font-size: var(--tempest-text-base);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.body {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    margin-block-start: var(--tempest-space-2);\n}\n\n.actions {\n    display: flex;\n    gap: var(--tempest-space-2);\n    margin-inline-start: auto;\n}\n\n.skip {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-text-muted);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n.primary,\n.secondary {\n    padding: var(--tempest-space-2) var(--tempest-space-4);\n    border-radius: var(--tempest-radius-md);\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    cursor: pointer;\n}\n\n.primary {\n    border: none;\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n}\n\n.secondary {\n    border: 1px solid var(--tempest-border);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n}\n\n.primary:focus-visible,\n.secondary:focus-visible,\n.skip:focus-visible,\n.close:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n/* The spotlight ring is decoration; a reader who asked for less motion gets none. */\n@media (prefers-reduced-motion: no-preference) {\n    .spotlight {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out),\n            width var(--tempest-duration-base) var(--tempest-ease-out),\n            height var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n\n    .card {\n        transition:\n            top var(--tempest-duration-base) var(--tempest-ease-out),\n            left var(--tempest-duration-base) var(--tempest-ease-out);\n    }\n}\n"],"mappings":";"}

package/dist/components/Transfer/Transfer.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Transfer.module.cjs","names":[],"sources":["../../../src/components/Transfer/Transfer.module.css"],"sourcesContent":[".wrapper {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n    gap: var(--tempest-space-3);\n    align-items: stretch;\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The move controls sit between the panes in the grid, but come **last** in the\n * DOM: a keyboard reaching the buttons before it has seen what they act on has to\n * go back, and a screen reader reads \"move checked to the right\" with no idea what\n * is checked. Order 2 puts them back in the middle visually.\n */\n.controls {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    order: 2;\n}\n\n.pane {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n    padding: var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n}\n\n.pane:first-of-type {\n    order: 1;\n}\n\n.pane:last-of-type {\n    order: 3;\n}\n\n.paneHeader {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.paneTitle {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.title {\n    margin: 0;\n    overflow: hidden;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.count {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n}\n\n.search {\n    width: 100%;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: inherit;\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.search:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -1px;\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    list-style: none;\n}\n\n.row {\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border-radius: var(--tempest-radius-sm);\n    font-size: var(--tempest-text-sm);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface);\n}\n\n.empty {\n    padding: var(--tempest-space-4) var(--tempest-space-2);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.control {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--tempest-control-height-sm);\n    height: var(--tempest-control-height-sm);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.control:hover:not(:disabled) {\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary);\n}\n\n.control:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 1px;\n}\n\n.control:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * Below the md breakpoint the panes stack and the controls turn horizontal: two\n * 16rem lists side by side on a phone leave each about 150px wide, where a role\n * name wraps to three lines.\n */\n@media (max-width: 640px) {\n    .wrapper {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .controls {\n        flex-direction: row;\n        justify-content: center;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Transfer.module.cjs","names":[],"sources":["../../../src/components/Transfer/Transfer.module.css"],"sourcesContent":[".wrapper {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n    gap: var(--tempest-space-3);\n    align-items: stretch;\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The move controls sit between the panes in the grid, but come **last** in the\n * DOM: a keyboard reaching the buttons before it has seen what they act on has to\n * go back, and a screen reader reads \"move checked to the right\" with no idea what\n * is checked. Order 2 puts them back in the middle visually.\n */\n.controls {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    order: 2;\n}\n\n.pane {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n    padding: var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n}\n\n.pane:first-of-type {\n    order: 1;\n}\n\n.pane:last-of-type {\n    order: 3;\n}\n\n.paneHeader {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.paneTitle {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.title {\n    margin: 0;\n    overflow: hidden;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.count {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n}\n\n.search {\n    width: 100%;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: inherit;\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.search:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: calc(var(--tempest-focus-ring-width) * -1);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    list-style: none;\n}\n\n.row {\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border-radius: var(--tempest-radius-sm);\n    font-size: var(--tempest-text-sm);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface);\n}\n\n.empty {\n    padding: var(--tempest-space-4) var(--tempest-space-2);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.control {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--tempest-control-height-sm);\n    height: var(--tempest-control-height-sm);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.control:hover:not(:disabled) {\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary);\n}\n\n.control:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 1px;\n}\n\n.control:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * Below the md breakpoint the panes stack and the controls turn horizontal: two\n * 16rem lists side by side on a phone leave each about 150px wide, where a role\n * name wraps to three lines.\n */\n@media (max-width: 640px) {\n    .wrapper {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .controls {\n        flex-direction: row;\n        justify-content: center;\n    }\n}\n"],"mappings":";"}

package/dist/components/Transfer/Transfer.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Transfer.module.js","names":[],"sources":["../../../src/components/Transfer/Transfer.module.css"],"sourcesContent":[".wrapper {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n    gap: var(--tempest-space-3);\n    align-items: stretch;\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The move controls sit between the panes in the grid, but come **last** in the\n * DOM: a keyboard reaching the buttons before it has seen what they act on has to\n * go back, and a screen reader reads \"move checked to the right\" with no idea what\n * is checked. Order 2 puts them back in the middle visually.\n */\n.controls {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    order: 2;\n}\n\n.pane {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n    padding: var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n}\n\n.pane:first-of-type {\n    order: 1;\n}\n\n.pane:last-of-type {\n    order: 3;\n}\n\n.paneHeader {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.paneTitle {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.title {\n    margin: 0;\n    overflow: hidden;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.count {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n}\n\n.search {\n    width: 100%;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: inherit;\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.search:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -1px;\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    list-style: none;\n}\n\n.row {\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border-radius: var(--tempest-radius-sm);\n    font-size: var(--tempest-text-sm);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface);\n}\n\n.empty {\n    padding: var(--tempest-space-4) var(--tempest-space-2);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.control {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--tempest-control-height-sm);\n    height: var(--tempest-control-height-sm);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.control:hover:not(:disabled) {\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary);\n}\n\n.control:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 1px;\n}\n\n.control:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * Below the md breakpoint the panes stack and the controls turn horizontal: two\n * 16rem lists side by side on a phone leave each about 150px wide, where a role\n * name wraps to three lines.\n */\n@media (max-width: 640px) {\n    .wrapper {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .controls {\n        flex-direction: row;\n        justify-content: center;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Transfer.module.js","names":[],"sources":["../../../src/components/Transfer/Transfer.module.css"],"sourcesContent":[".wrapper {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n    gap: var(--tempest-space-3);\n    align-items: stretch;\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The move controls sit between the panes in the grid, but come **last** in the\n * DOM: a keyboard reaching the buttons before it has seen what they act on has to\n * go back, and a screen reader reads \"move checked to the right\" with no idea what\n * is checked. Order 2 puts them back in the middle visually.\n */\n.controls {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    order: 2;\n}\n\n.pane {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n    padding: var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n}\n\n.pane:first-of-type {\n    order: 1;\n}\n\n.pane:last-of-type {\n    order: 3;\n}\n\n.paneHeader {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.paneTitle {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    min-width: 0;\n}\n\n.title {\n    margin: 0;\n    overflow: hidden;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.count {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n}\n\n.search {\n    width: 100%;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: inherit;\n    font: inherit;\n    font-size: var(--tempest-text-sm);\n}\n\n.search:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: calc(var(--tempest-focus-ring-width) * -1);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    list-style: none;\n}\n\n.row {\n    padding: var(--tempest-space-1) var(--tempest-space-2);\n    border-radius: var(--tempest-radius-sm);\n    font-size: var(--tempest-text-sm);\n}\n\n.row:hover {\n    background-color: var(--tempest-surface);\n}\n\n.empty {\n    padding: var(--tempest-space-4) var(--tempest-space-2);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.control {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--tempest-control-height-sm);\n    height: var(--tempest-control-height-sm);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n.control:hover:not(:disabled) {\n    border-color: var(--tempest-primary);\n    color: var(--tempest-primary);\n}\n\n.control:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 1px;\n}\n\n.control:disabled {\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n/*\n * Below the md breakpoint the panes stack and the controls turn horizontal: two\n * 16rem lists side by side on a phone leave each about 150px wide, where a role\n * name wraps to three lines.\n */\n@media (max-width: 640px) {\n    .wrapper {\n        grid-template-columns: minmax(0, 1fr);\n    }\n\n    .controls {\n        flex-direction: row;\n        justify-content: center;\n    }\n}\n"],"mappings":";"}

package/dist/components/VirtualTable/VirtualTable.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualTable.module.cjs","names":[],"sources":["../../../src/components/VirtualTable/VirtualTable.module.css"],"sourcesContent":[".scroll {\n    width: 100%;\n    overflow: auto;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-xs);\n}\n\n.table {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    /*\n     * Fixed layout is what keeps columns from jumping mid-scroll: with `auto`,\n     * the browser sizes each column from the rows currently in the DOM, and a\n     * virtualized table swaps those rows out as you scroll.\n     */\n    table-layout: fixed;\n}\n\n.caption {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n}\n\n/*\n * `border-collapse: separate` above exists for this: a sticky `<th>` inside a\n * collapsed table loses its bottom border while scrolling, because the shared\n * border belongs to the cell that scrolled away.\n */\n.head .th {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n\n.th,\n.td {\n    padding: 0 var(--tempest-space-4);\n    text-align: left;\n    border-bottom: 1px solid var(--tempest-border);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.th {\n    padding-block: var(--tempest-space-3);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-semibold);\n    font-size: var(--tempest-text-xs);\n    letter-spacing: var(--tempest-tracking-wider);\n    text-transform: uppercase;\n}\n\n.alignRight {\n    text-align: right;\n}\n\n.alignCenter {\n    text-align: center;\n}\n\n.sortButton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    letter-spacing: inherit;\n    text-transform: inherit;\n    cursor: pointer;\n}\n\n.sortButton:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.sortIndicator {\n    font-size: var(--tempest-text-xs);\n    opacity: 0.55;\n}\n\n.tr.clickable {\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .tr.clickable:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.tr.clickable:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -2px;\n}\n\n.emptyRow {\n    padding: var(--tempest-space-8) var(--tempest-space-4);\n    text-align: center;\n    color: var(--tempest-text-muted);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .tr.clickable {\n        transition: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"VirtualTable.module.cjs","names":[],"sources":["../../../src/components/VirtualTable/VirtualTable.module.css"],"sourcesContent":[".scroll {\n    width: 100%;\n    overflow: auto;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-xs);\n}\n\n.table {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    /*\n     * Fixed layout is what keeps columns from jumping mid-scroll: with `auto`,\n     * the browser sizes each column from the rows currently in the DOM, and a\n     * virtualized table swaps those rows out as you scroll.\n     */\n    table-layout: fixed;\n}\n\n.caption {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n}\n\n/*\n * `border-collapse: separate` above exists for this: a sticky `<th>` inside a\n * collapsed table loses its bottom border while scrolling, because the shared\n * border belongs to the cell that scrolled away.\n */\n.head .th {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n\n.th,\n.td {\n    padding: 0 var(--tempest-space-4);\n    text-align: left;\n    border-bottom: 1px solid var(--tempest-border);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.th {\n    padding-block: var(--tempest-space-3);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-semibold);\n    font-size: var(--tempest-text-xs);\n    letter-spacing: var(--tempest-tracking-wider);\n    text-transform: uppercase;\n}\n\n.alignRight {\n    text-align: right;\n}\n\n.alignCenter {\n    text-align: center;\n}\n\n.sortButton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    letter-spacing: inherit;\n    text-transform: inherit;\n    cursor: pointer;\n}\n\n.sortButton:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n    border-radius: var(--tempest-radius-sm);\n}\n\n.sortIndicator {\n    font-size: var(--tempest-text-xs);\n    opacity: 0.55;\n}\n\n.tr.clickable {\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .tr.clickable:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.tr.clickable:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: calc(var(--tempest-focus-ring-width) * -1);\n}\n\n.emptyRow {\n    padding: var(--tempest-space-8) var(--tempest-space-4);\n    text-align: center;\n    color: var(--tempest-text-muted);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .tr.clickable {\n        transition: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/VirtualTable/VirtualTable.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualTable.module.js","names":[],"sources":["../../../src/components/VirtualTable/VirtualTable.module.css"],"sourcesContent":[".scroll {\n    width: 100%;\n    overflow: auto;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-xs);\n}\n\n.table {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    /*\n     * Fixed layout is what keeps columns from jumping mid-scroll: with `auto`,\n     * the browser sizes each column from the rows currently in the DOM, and a\n     * virtualized table swaps those rows out as you scroll.\n     */\n    table-layout: fixed;\n}\n\n.caption {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n}\n\n/*\n * `border-collapse: separate` above exists for this: a sticky `<th>` inside a\n * collapsed table loses its bottom border while scrolling, because the shared\n * border belongs to the cell that scrolled away.\n */\n.head .th {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n\n.th,\n.td {\n    padding: 0 var(--tempest-space-4);\n    text-align: left;\n    border-bottom: 1px solid var(--tempest-border);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.th {\n    padding-block: var(--tempest-space-3);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-semibold);\n    font-size: var(--tempest-text-xs);\n    letter-spacing: var(--tempest-tracking-wider);\n    text-transform: uppercase;\n}\n\n.alignRight {\n    text-align: right;\n}\n\n.alignCenter {\n    text-align: center;\n}\n\n.sortButton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    letter-spacing: inherit;\n    text-transform: inherit;\n    cursor: pointer;\n}\n\n.sortButton:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.sortIndicator {\n    font-size: var(--tempest-text-xs);\n    opacity: 0.55;\n}\n\n.tr.clickable {\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .tr.clickable:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.tr.clickable:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: -2px;\n}\n\n.emptyRow {\n    padding: var(--tempest-space-8) var(--tempest-space-4);\n    text-align: center;\n    color: var(--tempest-text-muted);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .tr.clickable {\n        transition: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"VirtualTable.module.js","names":[],"sources":["../../../src/components/VirtualTable/VirtualTable.module.css"],"sourcesContent":[".scroll {\n    width: 100%;\n    overflow: auto;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-bg);\n    box-shadow: var(--tempest-shadow-xs);\n}\n\n.table {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    /*\n     * Fixed layout is what keeps columns from jumping mid-scroll: with `auto`,\n     * the browser sizes each column from the rows currently in the DOM, and a\n     * virtualized table swaps those rows out as you scroll.\n     */\n    table-layout: fixed;\n}\n\n.caption {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n}\n\n/*\n * `border-collapse: separate` above exists for this: a sticky `<th>` inside a\n * collapsed table loses its bottom border while scrolling, because the shared\n * border belongs to the cell that scrolled away.\n */\n.head .th {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n\n.th,\n.td {\n    padding: 0 var(--tempest-space-4);\n    text-align: left;\n    border-bottom: 1px solid var(--tempest-border);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.th {\n    padding-block: var(--tempest-space-3);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text-muted);\n    font-weight: var(--tempest-weight-semibold);\n    font-size: var(--tempest-text-xs);\n    letter-spacing: var(--tempest-tracking-wider);\n    text-transform: uppercase;\n}\n\n.alignRight {\n    text-align: right;\n}\n\n.alignCenter {\n    text-align: center;\n}\n\n.sortButton {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    letter-spacing: inherit;\n    text-transform: inherit;\n    cursor: pointer;\n}\n\n.sortButton:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n    border-radius: var(--tempest-radius-sm);\n}\n\n.sortIndicator {\n    font-size: var(--tempest-text-xs);\n    opacity: 0.55;\n}\n\n.tr.clickable {\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .tr.clickable:hover {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.tr.clickable:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: calc(var(--tempest-focus-ring-width) * -1);\n}\n\n.emptyRow {\n    padding: var(--tempest-space-8) var(--tempest-space-4);\n    text-align: center;\n    color: var(--tempest-text-muted);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .tr.clickable {\n        transition: none;\n    }\n}\n"],"mappings":";"}

package/dist/geo/TrajectoryMap.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TrajectoryMap.module.cjs","names":[],"sources":["../../src/geo/TrajectoryMap.module.css"],"sourcesContent":[".map {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: var(--tempest-surface-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    font-family: var(--tempest-font-sans);\n}\n\n.svg {\n    display: block;\n    width: 100%;\n}\n\n.empty,\n.loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n.grid line {\n    stroke: var(--tempest-border);\n    stroke-width: 1;\n    stroke-dasharray: 3 5;\n    opacity: 0.5;\n}\n\n.path {\n    stroke: var(--tempest-primary);\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.start {\n    fill: var(--tempest-success-solid);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.end {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.current {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.pulse {\n    fill: var(--tempest-primary);\n    opacity: 0.25;\n    transform-origin: center;\n    transform-box: fill-box;\n    animation: tempest-geo-pulse 1.8s ease-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .pulse {\n        animation: none;\n    }\n}\n\n@keyframes tempest-geo-pulse {\n    0% {\n        transform: scale(0.6);\n        opacity: 0.35;\n    }\n    100% {\n        transform: scale(1.6);\n        opacity: 0;\n    }\n}\n\n.marker {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.marker[role=\"button\"] {\n    cursor: pointer;\n}\n\n.marker[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-primary-active);\n    stroke-width: 3;\n}\n\n.scale line {\n    stroke: var(--tempest-text);\n    stroke-width: 2;\n}\n\n.scale text {\n    fill: var(--tempest-text);\n    font-size: var(--tempest-text-xs);\n    font-family: var(--tempest-font-sans);\n}\n"],"mappings":";"}
+{"version":3,"file":"TrajectoryMap.module.cjs","names":[],"sources":["../../src/geo/TrajectoryMap.module.css"],"sourcesContent":[".map {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: var(--tempest-surface-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    font-family: var(--tempest-font-sans);\n}\n\n.svg {\n    display: block;\n    width: 100%;\n}\n\n.empty,\n.loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n.grid line {\n    stroke: var(--tempest-border);\n    stroke-width: 1;\n    stroke-dasharray: 3 5;\n    opacity: 0.5;\n}\n\n.path {\n    stroke: var(--tempest-primary);\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.start {\n    fill: var(--tempest-success-solid);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.end {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.current {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.pulse {\n    fill: var(--tempest-primary);\n    opacity: 0.25;\n    transform-origin: center;\n    transform-box: fill-box;\n    animation: tempest-geo-pulse 1.8s ease-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .pulse {\n        animation: none;\n    }\n}\n\n@keyframes tempest-geo-pulse {\n    0% {\n        transform: scale(0.6);\n        opacity: 0.35;\n    }\n    100% {\n        transform: scale(1.6);\n        opacity: 0;\n    }\n}\n\n.marker {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.marker[role=\"button\"] {\n    cursor: pointer;\n}\n\n.marker[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-focus-ring-color);\n    stroke-width: 3;\n}\n\n.scale line {\n    stroke: var(--tempest-text);\n    stroke-width: 2;\n}\n\n.scale text {\n    fill: var(--tempest-text);\n    font-size: var(--tempest-text-xs);\n    font-family: var(--tempest-font-sans);\n}\n"],"mappings":";"}

package/dist/geo/TrajectoryMap.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrajectoryMap.module.js","names":[],"sources":["../../src/geo/TrajectoryMap.module.css"],"sourcesContent":[".map {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: var(--tempest-surface-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    font-family: var(--tempest-font-sans);\n}\n\n.svg {\n    display: block;\n    width: 100%;\n}\n\n.empty,\n.loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n.grid line {\n    stroke: var(--tempest-border);\n    stroke-width: 1;\n    stroke-dasharray: 3 5;\n    opacity: 0.5;\n}\n\n.path {\n    stroke: var(--tempest-primary);\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.start {\n    fill: var(--tempest-success-solid);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.end {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.current {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.pulse {\n    fill: var(--tempest-primary);\n    opacity: 0.25;\n    transform-origin: center;\n    transform-box: fill-box;\n    animation: tempest-geo-pulse 1.8s ease-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .pulse {\n        animation: none;\n    }\n}\n\n@keyframes tempest-geo-pulse {\n    0% {\n        transform: scale(0.6);\n        opacity: 0.35;\n    }\n    100% {\n        transform: scale(1.6);\n        opacity: 0;\n    }\n}\n\n.marker {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.marker[role=\"button\"] {\n    cursor: pointer;\n}\n\n.marker[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-primary-active);\n    stroke-width: 3;\n}\n\n.scale line {\n    stroke: var(--tempest-text);\n    stroke-width: 2;\n}\n\n.scale text {\n    fill: var(--tempest-text);\n    font-size: var(--tempest-text-xs);\n    font-family: var(--tempest-font-sans);\n}\n"],"mappings":";"}
+{"version":3,"file":"TrajectoryMap.module.js","names":[],"sources":["../../src/geo/TrajectoryMap.module.css"],"sourcesContent":[".map {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    background: var(--tempest-surface-2);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    font-family: var(--tempest-font-sans);\n}\n\n.svg {\n    display: block;\n    width: 100%;\n}\n\n.empty,\n.loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n.grid line {\n    stroke: var(--tempest-border);\n    stroke-width: 1;\n    stroke-dasharray: 3 5;\n    opacity: 0.5;\n}\n\n.path {\n    stroke: var(--tempest-primary);\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.start {\n    fill: var(--tempest-success-solid);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.end {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.current {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.pulse {\n    fill: var(--tempest-primary);\n    opacity: 0.25;\n    transform-origin: center;\n    transform-box: fill-box;\n    animation: tempest-geo-pulse 1.8s ease-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .pulse {\n        animation: none;\n    }\n}\n\n@keyframes tempest-geo-pulse {\n    0% {\n        transform: scale(0.6);\n        opacity: 0.35;\n    }\n    100% {\n        transform: scale(1.6);\n        opacity: 0;\n    }\n}\n\n.marker {\n    fill: var(--tempest-primary);\n    stroke: var(--tempest-surface);\n    stroke-width: 2;\n}\n\n.marker[role=\"button\"] {\n    cursor: pointer;\n}\n\n.marker[role=\"button\"]:focus-visible {\n    outline: none;\n    stroke: var(--tempest-focus-ring-color);\n    stroke-width: 3;\n}\n\n.scale line {\n    stroke: var(--tempest-text);\n    stroke-width: 2;\n}\n\n.scale text {\n    fill: var(--tempest-text);\n    font-size: var(--tempest-text-xs);\n    font-family: var(--tempest-font-sans);\n}\n"],"mappings":";"}

package/dist/icons/IconPicker.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.module.cjs","names":[],"sources":["../../src/icons/IconPicker.module.css"],"sourcesContent":[".picker {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-family: var(--tempest-font-sans);\n}\n\n.preview {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    width: 34px;\n    height: 34px;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.input {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    min-height: 34px;\n}\n\n.input:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 1px;\n}\n\n.input[aria-invalid=\"true\"] {\n    border-color: var(--tempest-danger);\n}\n"],"mappings":";"}
+{"version":3,"file":"IconPicker.module.cjs","names":[],"sources":["../../src/icons/IconPicker.module.css"],"sourcesContent":[".picker {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-family: var(--tempest-font-sans);\n}\n\n.preview {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    width: 34px;\n    height: 34px;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.input {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    min-height: 34px;\n}\n\n.input:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 1px;\n}\n\n.input[aria-invalid=\"true\"] {\n    border-color: var(--tempest-danger);\n}\n"],"mappings":";"}

package/dist/icons/IconPicker.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.module.js","names":[],"sources":["../../src/icons/IconPicker.module.css"],"sourcesContent":[".picker {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-family: var(--tempest-font-sans);\n}\n\n.preview {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    width: 34px;\n    height: 34px;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.input {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    min-height: 34px;\n}\n\n.input:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 1px;\n}\n\n.input[aria-invalid=\"true\"] {\n    border-color: var(--tempest-danger);\n}\n"],"mappings":";"}
+{"version":3,"file":"IconPicker.module.js","names":[],"sources":["../../src/icons/IconPicker.module.css"],"sourcesContent":[".picker {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-family: var(--tempest-font-sans);\n}\n\n.preview {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    width: 34px;\n    height: 34px;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n}\n\n.input {\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: var(--tempest-text-sm);\n    min-height: 34px;\n}\n\n.input:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 1px;\n}\n\n.input[aria-invalid=\"true\"] {\n    border-color: var(--tempest-danger);\n}\n"],"mappings":";"}

package/dist/styles/actions.css

@@ -39,7 +39,7 @@ a.tempest_button_2ZuB7:is(:link,:visited,:hover,:active,:focus,:not([href])){col
 .tempest_pill_lx8lt{border-radius:var(--tempest-radius-full)}
 .tempest_fullWidth_36oJT{width:100%}
 .tempest_content_EKXmF{justify-content:center;align-items:center;gap:var(--tempest-control-gap,var(--tempest-space-2));min-width:0;display:inline-flex}
-.tempest_loading_EQAt2 .tempest_hiddenText_hIiJ2{visibility:hidden}
+.tempest_loading_EQAt2 .tempest_hiddenText_hIiJ2{opacity:0;pointer-events:none}
 .tempest_spinner_ZExvW{animation:.8s linear infinite tempest_tempest-spin_UOSVC;position:absolute}
 @keyframes tempest_tempest-spin_UOSVC{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
 .tempest_root_5ZetV{display:inline-flex;position:relative}
@@ -60,7 +60,7 @@ a.tempest_button_2ZuB7:is(:link,:visited,:hover,:active,:focus,:not([href])){col
 @media (prefers-reduced-motion:reduce){.tempest_menu_-RiRW{animation:none}}
 .tempest_fab_U3NIL{justify-content:center;align-items:center;gap:var(--tempest-space-2);cursor:pointer;font-family:var(--tempest-font-sans);font-weight:var(--tempest-weight-semibold);box-shadow:var(--tempest-shadow-lg);transition:background var(--tempest-duration-fast,.12s) var(--tempest-ease-out,ease-out), box-shadow var(--tempest-duration-fast,.12s) var(--tempest-ease-out,ease-out), transform var(--tempest-duration-fast,.12s) var(--tempest-ease-out,ease-out);border:0;display:inline-flex}
 .tempest_fab_U3NIL:active{transform:scale(.96)}
-.tempest_fab_U3NIL:focus-visible{outline:var(--tempest-focus-ring-width,2px) solid var(--tempest-focus-ring-color,var(--tempest-primary));outline-offset:var(--tempest-focus-ring-offset,2px)}
+.tempest_fab_U3NIL:focus-visible{outline:var(--tempest-focus-ring-width,2px) solid var(--tempest-focus-ring-color,currentColor);outline-offset:var(--tempest-focus-ring-offset,2px)}
 .tempest_fab_U3NIL:disabled{opacity:.5;cursor:not-allowed;box-shadow:var(--tempest-shadow-sm)}
 .tempest_primary_8lnHI{background:var(--tempest-primary);color:var(--tempest-primary-foreground)}
 .tempest_primary_8lnHI:hover:not(:disabled){background:var(--tempest-primary-active,var(--tempest-primary))}

package/dist/styles/br.css

@@ -5,7 +5,7 @@
 .tempest_state_JV7Hu{fill:var(--tempest-surface-3);stroke:var(--tempest-border-strong);stroke-width:.75px;stroke-linejoin:round;transition:fill .12s,opacity .12s}
 .tempest_state_JV7Hu[role=button]{cursor:pointer}
 .tempest_state_JV7Hu[role=button]:hover{fill:var(--tempest-primary-soft)}
-.tempest_state_JV7Hu[role=button]:focus-visible{stroke:var(--tempest-primary);stroke-width:1.5px;outline:none}
+.tempest_state_JV7Hu[role=button]:focus-visible{stroke:var(--tempest-focus-ring-color);stroke-width:1.5px;outline:none}
 .tempest_selected_CNxWu{fill:var(--tempest-primary);stroke:var(--tempest-primary-active);stroke-width:1.25px}
 .tempest_selected_CNxWu:hover{fill:var(--tempest-primary-hover)}
 .tempest_label_PK-ES{fill:var(--tempest-text);font-size:10px;font-weight:var(--tempest-weight-medium);pointer-events:none;-webkit-user-select:none;user-select:none}
@@ -15,7 +15,7 @@
 .tempest_marker_5td7B{stroke:var(--tempest-surface);stroke-width:2px}
 .tempest_marker_5td7B[role=button]{cursor:pointer}
 .tempest_marker_5td7B[role=button]:hover{stroke:var(--tempest-primary-active)}
-.tempest_marker_5td7B[role=button]:focus-visible{stroke:var(--tempest-primary);stroke-width:3px;outline:none}
+.tempest_marker_5td7B[role=button]:focus-visible{stroke:var(--tempest-focus-ring-color);stroke-width:3px;outline:none}
 .tempest_zoomReset_IXmak{top:var(--tempest-space-2);right:var(--tempest-space-2);padding:var(--tempest-space-1) var(--tempest-space-2);font-family:var(--tempest-font-sans);font-size:var(--tempest-text-xs);color:var(--tempest-text);background:var(--tempest-surface);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-sm);cursor:pointer;position:absolute}
 .tempest_zoomReset_IXmak:hover{background:var(--tempest-surface-2)}
 .tempest_legend_jti9g{gap:var(--tempest-space-1);padding:var(--tempest-space-2) var(--tempest-space-3);background:var(--tempest-surface);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-md);font-family:var(--tempest-font-sans);font-size:var(--tempest-text-xs);color:var(--tempest-text);flex-direction:column;min-width:160px;display:inline-flex}
@@ -29,7 +29,7 @@
 .tempest_search_iYSqC{font-family:var(--tempest-font-sans);position:relative}
 .tempest_results_-a0Jg{z-index:10;margin:var(--tempest-space-1) 0 0;padding:var(--tempest-space-1);background:var(--tempest-surface);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-md);max-height:260px;box-shadow:var(--tempest-shadow-md,0 4px 12px #0000001f);list-style:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto}
 .tempest_result_D5-no{justify-content:space-between;align-items:center;gap:var(--tempest-space-2);width:100%;padding:var(--tempest-space-2) var(--tempest-space-3);border-radius:var(--tempest-radius-sm);font-size:var(--tempest-text-sm);color:var(--tempest-text);text-align:left;cursor:pointer;background:0 0;border:none;display:flex}
-.tempest_result_D5-no:hover,.tempest_result_D5-no:focus-visible{background:var(--tempest-primary-soft);outline:none}
+.tempest_result_D5-no:hover,.tempest_result_D5-no.tempest_active_qX2ct{background:var(--tempest-primary-soft)}
 .tempest_uf_Rj15X{font-size:var(--tempest-text-xs);color:var(--tempest-text-muted);font-weight:var(--tempest-weight-medium)}
 .tempest_pix_sx91C{align-items:center;gap:var(--tempest-space-3);font-family:var(--tempest-font-sans);flex-direction:column;display:inline-flex}
 .tempest_symbol_tVr1U{padding:var(--tempest-space-2);border-radius:var(--tempest-radius-md);border:1px solid var(--tempest-border);background:#fff}

package/dist/styles/chat.css

@@ -3,7 +3,7 @@
 .tempest_header_KYy5l{padding:var(--tempest-space-3) var(--tempest-space-4);border-bottom:1px solid var(--tempest-border);flex:none}
 .tempest_threadWrapper_LjoF6{flex:auto;min-width:0;min-height:0;display:flex;position:relative}
 .tempest_thread_RqELz{gap:var(--tempest-space-5);min-width:0;min-height:0;padding:var(--tempest-space-4);overscroll-behavior:contain;flex-direction:column;flex:auto;display:flex;overflow-y:auto}
-.tempest_thread_RqELz:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:-2px}
+.tempest_thread_RqELz:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:calc(var(--tempest-focus-ring-width) * -1)}
 .tempest_jump_oBKxQ{right:var(--tempest-space-4);bottom:var(--tempest-space-3);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-full);background-color:var(--tempest-surface);width:2rem;height:2rem;color:var(--tempest-text);box-shadow:var(--tempest-shadow-md);cursor:pointer;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute}
 .tempest_jump_oBKxQ:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:2px}
 @media (pointer:coarse){.tempest_jump_oBKxQ:after{content:"";position:absolute;inset:-6px}}
@@ -54,7 +54,7 @@
 @media (prefers-reduced-motion:reduce){.tempest_actions_SZnxe .tempest_action_YPvQH{transition:none}}
 .tempest_editor_rk4hA{gap:var(--tempest-space-2);flex-direction:column;width:100%;max-width:min(85%,36rem);display:flex}
 .tempest_editField_Z9neJ{width:100%;padding:var(--tempest-space-2) var(--tempest-space-3);border:1px solid var(--tempest-primary);border-radius:var(--tempest-radius-lg);background-color:var(--tempest-bg);color:var(--tempest-text);font:inherit;font-size:var(--tempest-text-sm);line-height:var(--tempest-leading-normal);resize:vertical}
-.tempest_editField_Z9neJ:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:-1px}
+.tempest_editField_Z9neJ:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:calc(var(--tempest-focus-ring-width) * -1)}
 .tempest_editActions_vfC0b{justify-content:flex-end;gap:var(--tempest-space-2);display:flex}
 .tempest_ghost_S1yuC{padding:var(--tempest-space-1) var(--tempest-space-3);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-md);color:var(--tempest-text);font:inherit;font-size:var(--tempest-text-sm);cursor:pointer;background-color:#0000}
 .tempest_primary_wZ-Wu{padding:var(--tempest-space-1) var(--tempest-space-3);border-radius:var(--tempest-radius-md);background-color:var(--tempest-primary);color:var(--tempest-primary-foreground);font:inherit;font-size:var(--tempest-text-sm);font-weight:var(--tempest-weight-medium);cursor:pointer;border:none}
@@ -66,7 +66,7 @@
 .tempest_suggestion_4NYhq:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:2px}
 .tempest_composer_AaB1Q{gap:var(--tempest-space-1);padding:var(--tempest-space-3) var(--tempest-space-4);border-top:1px solid var(--tempest-border);flex-direction:column;flex:none;display:flex}
 .tempest_composerBox_Fz-GG{align-items:flex-end;gap:var(--tempest-space-2);max-width:var(--tempest-ai-chat-width,48rem);width:100%;padding:var(--tempest-space-2);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-lg);background-color:var(--tempest-surface);margin-inline:auto;display:flex}
-.tempest_composerBox_Fz-GG:focus-within{border-color:var(--tempest-primary)}
+.tempest_composerBox_Fz-GG:focus-within{border-color:var(--tempest-primary);box-shadow:0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color)}
 .tempest_field_7m1Pa{min-width:0;padding:var(--tempest-space-1) var(--tempest-space-2);color:inherit;font:inherit;font-size:var(--tempest-text-sm);line-height:var(--tempest-leading-normal);resize:none;background:0 0;border:none;flex:auto}
 .tempest_field_7m1Pa:focus-visible{outline:none}
 .tempest_field_7m1Pa:disabled{color:var(--tempest-text-subtle);cursor:not-allowed}
@@ -80,7 +80,7 @@
 .tempest_panel_xUVw0{min-width:0;min-height:0;height:var(--tempest-chat-height,100%);background-color:var(--tempest-bg);color:var(--tempest-text);font-family:var(--tempest-font-sans);flex-direction:column;display:flex}
 .tempest_header_muoPu{padding:var(--tempest-space-3) var(--tempest-space-4);border-bottom:1px solid var(--tempest-border);flex:none}
 .tempest_thread_-j8yS{gap:var(--tempest-space-3);min-height:0;padding:var(--tempest-space-4);overscroll-behavior:contain;flex-direction:column;flex:auto;display:flex;overflow-y:auto}
-.tempest_thread_-j8yS:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:-2px}
+.tempest_thread_-j8yS:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:calc(var(--tempest-focus-ring-width) * -1)}
 .tempest_day_uLsWA{align-items:center;gap:var(--tempest-space-3);display:flex}
 .tempest_day_uLsWA:before,.tempest_day_uLsWA:after{background-color:var(--tempest-border);content:"";flex:auto;height:1px}
 .tempest_dayLabel_m8rDy{color:var(--tempest-text-subtle);font-size:var(--tempest-text-xs);text-transform:capitalize}
@@ -133,7 +133,7 @@
 .tempest_typing_zdp3O{padding:0 var(--tempest-space-4) var(--tempest-space-2);color:var(--tempest-text-subtle);font-size:var(--tempest-text-xs);flex:none;margin:0}
 .tempest_composer_krOGl{align-items:flex-end;gap:var(--tempest-space-2);padding:var(--tempest-space-3) var(--tempest-space-4);border-top:1px solid var(--tempest-border);flex:none;display:flex}
 .tempest_field_fBY-q{min-width:0;padding:var(--tempest-space-2) var(--tempest-space-3);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-md);background-color:var(--tempest-bg);color:inherit;font:inherit;font-size:var(--tempest-text-sm);line-height:var(--tempest-leading-normal);resize:none;flex:auto}
-.tempest_field_fBY-q:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:-1px}
+.tempest_field_fBY-q:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:calc(var(--tempest-focus-ring-width) * -1)}
 .tempest_field_fBY-q:disabled{background-color:var(--tempest-surface-2);color:var(--tempest-text-subtle);cursor:not-allowed}
 .tempest_composerActions_MYwQx{align-items:center;gap:var(--tempest-space-2);display:flex}
 .tempest_send_NwcaR{padding:var(--tempest-space-2) var(--tempest-space-4);border-radius:var(--tempest-radius-md);background-color:var(--tempest-primary);color:var(--tempest-primary-foreground);font:inherit;font-size:var(--tempest-text-sm);font-weight:var(--tempest-weight-medium);cursor:pointer;border:none}

package/dist/styles/component/AIChat.css

@@ -3,7 +3,7 @@
 .tempest_header_KYy5l{padding:var(--tempest-space-3) var(--tempest-space-4);border-bottom:1px solid var(--tempest-border);flex:none}
 .tempest_threadWrapper_LjoF6{flex:auto;min-width:0;min-height:0;display:flex;position:relative}
 .tempest_thread_RqELz{gap:var(--tempest-space-5);min-width:0;min-height:0;padding:var(--tempest-space-4);overscroll-behavior:contain;flex-direction:column;flex:auto;display:flex;overflow-y:auto}
-.tempest_thread_RqELz:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:-2px}
+.tempest_thread_RqELz:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:calc(var(--tempest-focus-ring-width) * -1)}
 .tempest_jump_oBKxQ{right:var(--tempest-space-4);bottom:var(--tempest-space-3);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-full);background-color:var(--tempest-surface);width:2rem;height:2rem;color:var(--tempest-text);box-shadow:var(--tempest-shadow-md);cursor:pointer;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute}
 .tempest_jump_oBKxQ:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:2px}
 @media (pointer:coarse){.tempest_jump_oBKxQ:after{content:"";position:absolute;inset:-6px}}
@@ -54,7 +54,7 @@
 @media (prefers-reduced-motion:reduce){.tempest_actions_SZnxe .tempest_action_YPvQH{transition:none}}
 .tempest_editor_rk4hA{gap:var(--tempest-space-2);flex-direction:column;width:100%;max-width:min(85%,36rem);display:flex}
 .tempest_editField_Z9neJ{width:100%;padding:var(--tempest-space-2) var(--tempest-space-3);border:1px solid var(--tempest-primary);border-radius:var(--tempest-radius-lg);background-color:var(--tempest-bg);color:var(--tempest-text);font:inherit;font-size:var(--tempest-text-sm);line-height:var(--tempest-leading-normal);resize:vertical}
-.tempest_editField_Z9neJ:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:-1px}
+.tempest_editField_Z9neJ:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:calc(var(--tempest-focus-ring-width) * -1)}
 .tempest_editActions_vfC0b{justify-content:flex-end;gap:var(--tempest-space-2);display:flex}
 .tempest_ghost_S1yuC{padding:var(--tempest-space-1) var(--tempest-space-3);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-md);color:var(--tempest-text);font:inherit;font-size:var(--tempest-text-sm);cursor:pointer;background-color:#0000}
 .tempest_primary_wZ-Wu{padding:var(--tempest-space-1) var(--tempest-space-3);border-radius:var(--tempest-radius-md);background-color:var(--tempest-primary);color:var(--tempest-primary-foreground);font:inherit;font-size:var(--tempest-text-sm);font-weight:var(--tempest-weight-medium);cursor:pointer;border:none}
@@ -66,7 +66,7 @@
 .tempest_suggestion_4NYhq:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:2px}
 .tempest_composer_AaB1Q{gap:var(--tempest-space-1);padding:var(--tempest-space-3) var(--tempest-space-4);border-top:1px solid var(--tempest-border);flex-direction:column;flex:none;display:flex}
 .tempest_composerBox_Fz-GG{align-items:flex-end;gap:var(--tempest-space-2);max-width:var(--tempest-ai-chat-width,48rem);width:100%;padding:var(--tempest-space-2);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-lg);background-color:var(--tempest-surface);margin-inline:auto;display:flex}
-.tempest_composerBox_Fz-GG:focus-within{border-color:var(--tempest-primary)}
+.tempest_composerBox_Fz-GG:focus-within{border-color:var(--tempest-primary);box-shadow:0 0 0 var(--tempest-focus-ring-width) var(--tempest-focus-ring-color)}
 .tempest_field_7m1Pa{min-width:0;padding:var(--tempest-space-1) var(--tempest-space-2);color:inherit;font:inherit;font-size:var(--tempest-text-sm);line-height:var(--tempest-leading-normal);resize:none;background:0 0;border:none;flex:auto}
 .tempest_field_7m1Pa:focus-visible{outline:none}
 .tempest_field_7m1Pa:disabled{color:var(--tempest-text-subtle);cursor:not-allowed}

package/dist/styles/component/AppBar.css

@@ -3,6 +3,7 @@
 .tempest_bar_SHqWS.tempest_centered_S0CCw{grid-template-columns:1fr auto 1fr}
 .tempest_bar_SHqWS.tempest_surface_fusKb{background:var(--tempest-surface);color:var(--tempest-text)}
 .tempest_bar_SHqWS.tempest_primary_QcCyN{background:var(--tempest-primary);color:var(--tempest-primary-foreground)}
+.tempest_bar_SHqWS.tempest_inverse_Icool{background:var(--tempest-bg);color:var(--tempest-text)}
 .tempest_bar_SHqWS.tempest_transparent_uGrsu{color:inherit;background:0 0}
 .tempest_bar_SHqWS.tempest_bordered_5M9FZ{border-bottom:1px solid var(--tempest-border)}
 .tempest_bar_SHqWS.tempest_sticky_DStUO{z-index:30;position:sticky;top:0}

package/dist/styles/component/BrazilMap.css

@@ -5,7 +5,7 @@
 .tempest_state_JV7Hu{fill:var(--tempest-surface-3);stroke:var(--tempest-border-strong);stroke-width:.75px;stroke-linejoin:round;transition:fill .12s,opacity .12s}
 .tempest_state_JV7Hu[role=button]{cursor:pointer}
 .tempest_state_JV7Hu[role=button]:hover{fill:var(--tempest-primary-soft)}
-.tempest_state_JV7Hu[role=button]:focus-visible{stroke:var(--tempest-primary);stroke-width:1.5px;outline:none}
+.tempest_state_JV7Hu[role=button]:focus-visible{stroke:var(--tempest-focus-ring-color);stroke-width:1.5px;outline:none}
 .tempest_selected_CNxWu{fill:var(--tempest-primary);stroke:var(--tempest-primary-active);stroke-width:1.25px}
 .tempest_selected_CNxWu:hover{fill:var(--tempest-primary-hover)}
 .tempest_label_PK-ES{fill:var(--tempest-text);font-size:10px;font-weight:var(--tempest-weight-medium);pointer-events:none;-webkit-user-select:none;user-select:none}
@@ -15,6 +15,6 @@
 .tempest_marker_5td7B{stroke:var(--tempest-surface);stroke-width:2px}
 .tempest_marker_5td7B[role=button]{cursor:pointer}
 .tempest_marker_5td7B[role=button]:hover{stroke:var(--tempest-primary-active)}
-.tempest_marker_5td7B[role=button]:focus-visible{stroke:var(--tempest-primary);stroke-width:3px;outline:none}
+.tempest_marker_5td7B[role=button]:focus-visible{stroke:var(--tempest-focus-ring-color);stroke-width:3px;outline:none}
 .tempest_zoomReset_IXmak{top:var(--tempest-space-2);right:var(--tempest-space-2);padding:var(--tempest-space-1) var(--tempest-space-2);font-family:var(--tempest-font-sans);font-size:var(--tempest-text-xs);color:var(--tempest-text);background:var(--tempest-surface);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-sm);cursor:pointer;position:absolute}
 .tempest_zoomReset_IXmak:hover{background:var(--tempest-surface-2)}

package/dist/styles/component/Button.css

@@ -39,6 +39,6 @@ a.tempest_button_2ZuB7:is(:link,:visited,:hover,:active,:focus,:not([href])){col
 .tempest_pill_lx8lt{border-radius:var(--tempest-radius-full)}
 .tempest_fullWidth_36oJT{width:100%}
 .tempest_content_EKXmF{justify-content:center;align-items:center;gap:var(--tempest-control-gap,var(--tempest-space-2));min-width:0;display:inline-flex}
-.tempest_loading_EQAt2 .tempest_hiddenText_hIiJ2{visibility:hidden}
+.tempest_loading_EQAt2 .tempest_hiddenText_hIiJ2{opacity:0;pointer-events:none}
 .tempest_spinner_ZExvW{animation:.8s linear infinite tempest_tempest-spin_UOSVC;position:absolute}
 @keyframes tempest_tempest-spin_UOSVC{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/dist/styles/component/Carousel.css

@@ -1,17 +1,17 @@
 /* Generated by scripts/split-css.mjs — do not edit. */
 .tempest_root_-w3-j{width:100%;font-family:var(--tempest-font-sans);position:relative}
-.tempest_root_-w3-j:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:2px}
+.tempest_root_-w3-j:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:var(--tempest-focus-ring-offset)}
 .tempest_viewport_n0hzM{border-radius:var(--tempest-radius-lg);overflow:hidden}
 .tempest_track_5PA8h{transition:transform var(--tempest-duration-base) var(--tempest-ease-out);display:flex}
 .tempest_slide_fhfjg{flex:0 0 100%;min-width:0}
 .tempest_arrow_S92Lt{background-color:var(--tempest-bg);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-full);width:2rem;height:2rem;box-shadow:var(--tempest-shadow-md);color:var(--tempest-text);font-size:var(--tempest-text-xl);cursor:pointer;transition:var(--tempest-transition-color);justify-content:center;align-items:center;line-height:1;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}
 @media (hover:hover) and (pointer:fine){.tempest_arrow_S92Lt:hover:not(:disabled){background-color:var(--tempest-surface)}}
-.tempest_arrow_S92Lt:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:2px}
+.tempest_arrow_S92Lt:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:var(--tempest-focus-ring-offset)}
 .tempest_arrow_S92Lt:disabled{opacity:.4;cursor:not-allowed}
 .tempest_prev_X8whU{left:var(--tempest-space-2)}
 .tempest_next_jBRSz{right:var(--tempest-space-2)}
 .tempest_dots_fL3Hr{justify-content:center;align-items:center;gap:var(--tempest-space-2);margin-top:var(--tempest-space-3);display:flex}
 .tempest_dot_vEB56{background-color:var(--tempest-border);border-radius:var(--tempest-radius-full);cursor:pointer;width:.5rem;height:.5rem;transition:var(--tempest-transition-color);border:none;padding:0}
 .tempest_dotActive_OSSUg{background-color:var(--tempest-primary)}
-.tempest_dot_vEB56:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:2px}
+.tempest_dot_vEB56:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:var(--tempest-focus-ring-offset)}
 @media (prefers-reduced-motion:reduce){.tempest_track_5PA8h{transition:none}}