@weasel-js/ui 1.8.0 → 1.8.1

package/dist/chunks/{Badge-CTc9Lkwn.js → Badge-qkV9EqKs.js}

@@ -7,8 +7,12 @@ var e = {
 	success: "statusSuccess",
 	warn: "warning",
 	danger: "error"
+}, t = {
+	solid: "variantSolid",
+	outline: "variantOutline",
+	subtle: "variantSubtle"
 };
 //#endregion
-export { e as t };
+export { e as n, t };
 
-//# sourceMappingURL=Badge-CTc9Lkwn.js.map
+//# sourceMappingURL=Badge-qkV9EqKs.js.map

package/dist/chunks/Badge-qkV9EqKs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-qkV9EqKs.js","names":["BADGE_STATUS_ICONS","BADGE_VARIANT_ICONS"],"sources":["../../src/components/Badge/statusIcons.ts","../../src/components/Badge/variantIcons.ts"],"sourcesContent":["import type { IconName } from '../../icons/paths';\nimport type { BadgeStatus } from './types';\n\n/** The glyph for each status. `custom` has none: its color is the call site's. */\nexport const BADGE_STATUS_ICONS: Readonly<Record<Exclude<BadgeStatus, 'custom'>, IconName>> = {\n  accent: 'statusAccent',\n  neutral: 'statusNeutral',\n  muted: 'statusMuted',\n  info: 'info',\n  success: 'statusSuccess',\n  warn: 'warning',\n  danger: 'error',\n};\n","import type { IconName } from '../../icons/paths';\nimport type { BadgeVariant } from './types';\n\n/** The glyph for each variant, for a picker that shows them. */\nexport const BADGE_VARIANT_ICONS: Readonly<Record<BadgeVariant, IconName>> = {\n  solid: 'variantSolid',\n  outline: 'variantOutline',\n  subtle: 'variantSubtle',\n};\n"],"mappings":";AAIA,IAAaA,IAAiF;CAC5F,QAAQ;CACR,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,MAAM;CACN,QAAQ;AACV,GCRaC,IAAgE;CAC3E,OAAO;CACP,SAAS;CACT,QAAQ;AACV"}

package/dist/chunks/{Button-XB-T75YL.js → Button-CQA-K1g9.js}

@@ -1,23 +1,23 @@
 import { t as e } from "./stance-BFQpS_fL.js";
-import { r as t, t as n } from "./segmentTooltip-CGxCOWNz.js";
+import { r as t, t as n } from "./segmentTooltip-8VBPNgEc.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
 var o = {
-	button: "_button_1ymjn_3",
-	size_sm: "_size_sm_1ymjn_110",
-	size_md: "_size_md_1ymjn_111",
-	iconOnly: "_iconOnly_1ymjn_113",
-	variant_primary: "_variant_primary_1ymjn_121",
-	variant_secondary: "_variant_secondary_1ymjn_168",
-	variant_ghost: "_variant_ghost_1ymjn_203",
-	pressed: "_pressed_1ymjn_210",
-	variant_link: "_variant_link_1ymjn_219",
-	label: "_label_1ymjn_244",
-	fullWidth: "_fullWidth_1ymjn_260",
-	loading: "_loading_1ymjn_261",
-	iconSlot: "_iconSlot_1ymjn_265",
-	spinner: "_spinner_1ymjn_279",
-	"wzl-btn-spin": "_wzl-btn-spin_1ymjn_1"
+	button: "_button_awkt9_3",
+	size_sm: "_size_sm_awkt9_110",
+	size_md: "_size_md_awkt9_111",
+	iconOnly: "_iconOnly_awkt9_113",
+	variant_primary: "_variant_primary_awkt9_121",
+	variant_secondary: "_variant_secondary_awkt9_170",
+	variant_ghost: "_variant_ghost_awkt9_205",
+	pressed: "_pressed_awkt9_212",
+	variant_link: "_variant_link_awkt9_221",
+	label: "_label_awkt9_246",
+	fullWidth: "_fullWidth_awkt9_262",
+	loading: "_loading_awkt9_263",
+	iconSlot: "_iconSlot_awkt9_267",
+	spinner: "_spinner_awkt9_281",
+	"wzl-btn-spin": "_wzl-btn-spin_awkt9_1"
 };
 //#endregion
 //#region src/components/Button/Button.tsx
@@ -108,4 +108,4 @@ var c = a(function(a, c) {
 //#endregion
 export { c as t };
 
-//# sourceMappingURL=Button-XB-T75YL.js.map
+//# sourceMappingURL=Button-CQA-K1g9.js.map

package/dist/chunks/Button-CQA-K1g9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-CQA-K1g9.js","names":["s","useStance","segmentTooltipContent","SegmentTooltip","Button_module_default","Spinner","Button","forwardRef","props","cls","variant","size","fullWidth","pressed","iconOnly","loading","className","showLeading","leadingIcon","stanced","children","style","status","ariaLabel","trailingIcon"],"sources":["../../src/components/Button/Button.module.css","../../src/components/Button/Button.tsx"],"sourcesContent":["/* Aqua-glass button. Every visual parameter is exposed as a CSS custom\n   property so the Button Lab can override per-instance via inline style. */\n.button {\n  /* ---- Tunables (with Aqua-biased defaults) ---- */\n  /* Corner radius = 10% of the button's height (the shorter axis on every\n     realistic button shape). Using calc against --btn-height keeps the\n     corners circular rather than elliptical, which a % value would\n     otherwise produce on a wide-but-short pill. */\n  --btn-radius:       calc(var(--btn-height) * 0.1);\n  --btn-fontweight:   var(--wzl-font-weight-medium);\n  --btn-fontsize:     var(--wzl-font-size);\n  --btn-height:       var(--wzl-control-h);\n  --btn-padx:         var(--wzl-space-6);\n\n  /* Body gradient — alpha-laced top, opaque bottom. Percentages are\n     \"color-mix accent ratio\" so 45% = 45% accent + 55% transparent. */\n  --btn-top-alpha:     45%;\n  --btn-upper-alpha:   70%;\n  --btn-equator:       52%;   /* vertical position of the bright-to-deep transition */\n  --btn-equator-spread: 12%;  /* half-width of the equator transition band */\n  --btn-equator-tint:  95%;   /* accent vs white at equator */\n  --btn-base-tint:     70%;   /* accent vs black at base */\n  --btn-blur:          6px;\n  --btn-saturate:      1.3;\n\n  /* Specular gloss (::before) */\n  --btn-gloss-top:     0.42;\n  --btn-gloss-mid:     0.12;\n  --btn-gloss-bottom:  50%;   /* inset from bottom — 50% = upper hemisphere */\n\n  /* 3D shadows */\n  --btn-rim:          0.22;\n  --btn-drop-near:    0.30;\n  --btn-drop-far:     0.18;\n  --btn-inset-hi:     0.42;\n  --btn-inset-lo:     0.3;\n\n  /* Text — main shadow + a second engraving shadow you can angle.\n     `inset-x` / `inset-y` are pre-projected offsets from `inset-angle` so\n     the lab can drive them with a single slider. */\n  --btn-text-shadow:    0.35;\n  --btn-text-inset:     0.55;\n  --btn-text-inset-x:   0px;\n  --btn-text-inset-y:   1px;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--wzl-space-3);\n  border: none;\n  border-radius: var(--btn-radius);\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--btn-fontweight);\n  font-style: normal;\n  font-size: var(--btn-fontsize);\n  height: var(--btn-height);\n  padding: 0 var(--btn-padx);\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  isolation: isolate;\n  overflow: hidden;\n  transition: filter var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast), transform 80ms;\n}\n\n/* Specular gloss — covers the upper hemisphere of the pill with a bright\n   white sheen that fades to nothing by the equator. The single detail that\n   sells the glass-cylinder illusion. */\n.button::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom) 1px;\n  /* Top corners hug the button's outline; bottom corners are flat so the\n     gloss terminates in a straight line at the equator rather than two\n     little arcs that read as `)(` brackets at smaller radii. */\n  border-top-left-radius: var(--btn-radius);\n  border-top-right-radius: var(--btn-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.button > * {\n  position: relative;\n  z-index: 2;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---------- Sizes — set defaults for the custom props ---------- */\n\n.size_sm { --btn-height: var(--wzl-control-h-sm); --btn-padx: var(--wzl-space-4); --btn-fontsize: var(--wzl-font-size-sm); }\n.size_md { --btn-height: var(--wzl-control-h); --btn-padx: var(--wzl-space-6); --btn-fontsize: var(--wzl-font-size); }\n\n.iconOnly.size_sm { width: var(--wzl-control-h-sm); --btn-padx: 0; }\n.iconOnly.size_md { width: var(--wzl-control-h); --btn-padx: 0; }\n\n/* ---------- Variants ---------- */\n\n/* Primary: tinted aqua glass — body uses --wzl-accent. The upper / equator\n   / lower stops are positioned around --btn-equator so dragging the equator\n   shifts the entire transition zone as one block. */\n.variant_primary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha), transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint), white) var(--btn-equator),\n    var(--wzl-accent) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg-on-accent);\n  --wzl-fg-muted: var(--wzl-fg-muted-on-accent);\n  --wzl-fg-subtle: var(--wzl-fg-subtle-on-accent);\n  /* Main shadow below for legibility, then a second engraving shadow at a\n     configurable angle (defaults below) — a near-black, lower-alpha stamp\n     that sits underneath the glyphs and reads as recessed type. */\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, var(--btn-text-inset)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near)),\n    0 3px 6px rgba(0, 0, 0, var(--btn-drop-far));\n}\n\n.variant_primary:hover:not(:disabled) {\n  filter: brightness(1.08) saturate(1.06);\n}\n\n.variant_primary:active:not(:disabled) {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) 80%, black) 0%,\n    color-mix(in srgb, var(--wzl-accent) 95%, black) 50%,\n    color-mix(in srgb, var(--wzl-accent) 60%, white) 100%\n  );\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.35),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.06));\n  transform: translateY(0.5px);\n}\n.variant_primary:active::before { opacity: 0.3; }\n\n/* Secondary: neutral glass — drained of color. */\n.variant_secondary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-fg) 25%, transparent) 0%,\n    color-mix(in srgb, var(--wzl-fg) 10%, transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-surface-raised) 90%, white) var(--btn-equator),\n    var(--wzl-surface-raised) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-surface-sunken) 80%, black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.7)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, calc(var(--btn-text-inset) * 0.7));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, calc(var(--btn-inset-hi) * 0.5)),\n    inset 0 -1px 2px rgba(0, 0, 0, calc(var(--btn-inset-lo) * 0.83)),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.03)),\n    0 1px 2px rgba(0, 0, 0, calc(var(--btn-drop-near) * 0.93)),\n    0 3px 6px rgba(0, 0, 0, calc(var(--btn-drop-far) * 0.89));\n}\n\n.variant_secondary:hover:not(:disabled) { filter: brightness(1.1); }\n\n.variant_secondary:active:not(:disabled) {\n  background: linear-gradient(180deg, var(--wzl-surface-sunken) 0%, var(--wzl-surface-raised) 100%);\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.4),\n    0 0 0 1px rgba(0, 0, 0, 0.3);\n  transform: translateY(0.5px);\n}\n.variant_secondary:active::before { opacity: 0.2; }\n\n/* Ghost: silhouette only — no glass body, no gloss. */\n.variant_ghost {\n  background: transparent;\n  color: var(--wzl-fg);\n  box-shadow: none;\n}\n.variant_ghost::before { display: none; }\n\n.variant_ghost:hover:not(:disabled):not(.pressed) {\n  background: var(--wzl-surface-hover);\n}\n\n.variant_ghost:active:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n}\n\n/* Link: text only, sized by the surrounding text rather than the control scale. */\n.variant_link {\n  display: inline;\n  height: auto;\n  padding: 0;\n  border-radius: var(--wzl-radius-sm);\n  background: transparent;\n  box-shadow: none;\n  text-shadow: none;\n  font: inherit;\n  line-height: inherit;\n  text-align: start;\n  overflow: visible;\n  /* A peer tone or a stance's accent paints over the status. */\n  color: var(--_s-accent, var(--btn-link-fg, var(--wzl-accent-fg)));\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n.variant_link[data-status='neutral'] { --btn-link-fg: var(--wzl-fg); }\n.variant_link[data-status='muted']   { --btn-link-fg: var(--wzl-fg-muted); }\n.variant_link[data-status='accent']  { --btn-link-fg: var(--wzl-accent-fg); }\n.variant_link[data-status='success'] { --btn-link-fg: var(--wzl-success); }\n.variant_link[data-status='warn']    { --btn-link-fg: var(--wzl-warning); }\n.variant_link[data-status='danger']  { --btn-link-fg: var(--wzl-danger); }\n\n.variant_link::before { display: none; }\n.variant_link .label { display: inline; }\n\n.variant_link:hover:not(:disabled) {\n  text-decoration-thickness: 2px;\n}\n\n/* ---------- Modifiers ---------- */\n\n.pressed:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n  color: var(--wzl-fg);\n  box-shadow: inset 0 1px 2px rgb(0 0 0 / 18%);\n}\n\n.variant_primary.pressed:not(:disabled) { filter: brightness(0.92); }\n\n.fullWidth { width: 100%; }\n.loading .label { opacity: 0.7; }\n\n/* ---------- Slots ---------- */\n\n.iconSlot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n}\n\n.size_sm .iconSlot > svg { width: 12px; height: 12px; }\n.size_md .iconSlot > svg { width: 14px; height: 14px; }\n\n.label { display: inline-block; }\n\n/* ---------- Spinner ---------- */\n\n.spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  animation: wzl-btn-spin 0.7s linear infinite;\n}\n\n@keyframes wzl-btn-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* BEGIN GENERATED stance rules: button — `npm run gen:stances`, do not edit. */\n\n.button {\n  --wzl-tone: initial;\n}\n\n.button {\n  --_s-accent: var(--wzl-tone);\n}\n\n.button[data-stance='scope'] {\n  --_s-accent: var(--wzl-stance-scope-accent, var(--wzl-tone));\n}\n\n.button[data-stance='aside'] {\n  --_s-accent: var(--wzl-stance-aside-accent, var(--wzl-tone));\n}\n\n.button[data-stance='advanced'] {\n  --_s-accent: var(--wzl-stance-advanced-accent, var(--wzl-tone));\n}\n\n.button[data-stance='debug'] {\n  --_s-accent: var(--wzl-stance-debug-accent, var(--wzl-tone));\n}\n\n.button[data-stance='danger'] {\n  --_s-accent: var(--wzl-stance-danger-accent, var(--wzl-tone));\n}\n\n.button[data-stance='notice'] {\n  --_s-accent: var(--wzl-stance-notice-accent, var(--wzl-tone));\n}\n\n.button[data-stance='important'] {\n  --_s-accent: var(--wzl-stance-important-accent, var(--wzl-tone));\n}\n\n.button[data-stance='preview'] {\n  --_s-accent: var(--wzl-stance-preview-accent, var(--wzl-tone));\n}\n\n.button[data-tone] {\n  --wzl-accent: var(--_s-accent);\n  --wzl-accent-base: var(--_s-accent);\n  --wzl-accent-strong: color-mix(in oklab, var(--_s-accent) 70%, var(--wzl-fg));\n  --wzl-accent-soft: color-mix(in oklab, var(--_s-accent) 45%, var(--wzl-surface));\n  --wzl-accent-hover: var(--wzl-accent-strong);\n  --wzl-accent-fg: var(--wzl-accent-strong);\n  --wzl-focus-ring: var(--wzl-accent-strong);\n}\n\n/* END GENERATED stance rules: button */\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './Button.module.css';\nimport { SegmentTooltip, segmentTooltipContent, type SegmentTooltipFields } from '../segmentTooltip';\nimport { type StanceProps, useStance } from '../stance';\n\n/** Visual weight of a button. Defaults to `secondary`. `link` drops the\n *  control box entirely and reads as a hyperlink in running text -- for an\n *  in-page navigation that is still a button, not an `<a href>`. */\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'link';\n/** Text color of a `link` button — the same set as `Code`'s statuses. */\nexport type ButtonStatus = 'neutral' | 'muted' | 'accent' | 'success' | 'warn' | 'danger';\n/** Button height and type scale. */\nexport type ButtonSize = 'sm' | 'md';\n\ntype ButtonBase = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** Text color of the `link` variant, which is `accent` unless told\n   *  otherwise. The boxed variants carry their weight in their fill and\n   *  ignore it. A peer `tone`, or a stance's accent, paints over it. */\n  status?: ButtonStatus;\n  /** A button that stays down: renders `aria-pressed` and holds the active\n   *  treatment while it is on. For a control that reports a state rather than\n   *  firing an action -- a panel toggle, a mode switch. Left off, the button\n   *  announces no pressed state at all, which is what an action button wants. */\n  pressed?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  fullWidth?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  className?: string;\n  style?: ButtonHTMLAttributes<HTMLButtonElement>['style'];\n  children?: ReactNode;\n  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];\n} & StanceProps & SegmentTooltipFields;\n\ntype ButtonRegular = ButtonBase & {\n  iconOnly?: false;\n  ariaLabel?: string;\n};\n\ntype ButtonIconOnly = ButtonBase & {\n  iconOnly: true;\n  ariaLabel: string;\n};\n\n/**\n * Props for {@link Button}. Setting `iconOnly` makes `ariaLabel` required,\n * since an icon-only button has no text for a screen reader to announce.\n */\nexport type ButtonProps = ButtonRegular | ButtonIconOnly;\n\nfunction Spinner(): ReactNode {\n  return (\n    <span className={s.spinner} aria-hidden=\"true\">\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\">\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeOpacity=\"0.25\"\n        />\n        <path\n          d=\"M 8 2 A 6 6 0 0 1 14 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </span>\n  );\n}\n\n/**\n * Standard button. `loading` swaps the leading icon for a spinner, marks the\n * button `aria-busy`, and leaves the label in place; it does not disable the\n * button, so pass `disabled` too if the click should be blocked.\n *\n * `shortcut` adds a kit tooltip reading `Name (⌘S)`, named by `ariaLabel` or\n * string children, the way `ToolButton` and `ButtonBar` items show theirs;\n * `tooltip` replaces that text with any content.\n *\n * `ref` forwards to the underlying `<button>`.\n */\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {\n    variant = 'secondary',\n    size = 'md',\n    status,\n    stance,\n    tone,\n    pressed,\n    disabled,\n    loading,\n    leadingIcon,\n    trailingIcon,\n    fullWidth,\n    iconOnly,\n    ariaLabel,\n    type = 'button',\n    className,\n    style,\n    children,\n    onClick,\n    shortcut,\n    tooltip,\n  } = props;\n\n  const cls = [\n    s.button,\n    s[`variant_${variant}`],\n    s[`size_${size}`],\n    fullWidth && s.fullWidth,\n    pressed && s.pressed,\n    iconOnly && s.iconOnly,\n    loading && s.loading,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showLeading = !iconOnly && (loading || leadingIcon);\n  const stanced = useStance({ stance, tone });\n\n  return (\n    <SegmentTooltip\n      content={segmentTooltipContent({ tooltip, shortcut, ariaLabel, label: children })}\n      disabled={disabled}\n    >\n      <button\n        ref={ref}\n        type={type}\n        className={cls}\n        data-stance={stanced['data-stance']}\n        data-tone={stanced['data-tone']}\n        style={stanced.style || style ? { ...stanced.style, ...style } : undefined}\n        disabled={disabled}\n        aria-busy={loading ? true : undefined}\n        aria-pressed={pressed}\n        data-status={status}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {showLeading && (\n          <span className={s.iconSlot}>{loading ? <Spinner /> : leadingIcon}</span>\n        )}\n        {iconOnly ? (\n          loading ? <Spinner /> : <span className={s.iconSlot}>{children}</span>\n        ) : (\n          children !== undefined && <span className={s.label}>{children}</span>\n        )}\n        {!iconOnly && trailingIcon && (\n          <span className={s.iconSlot}>{trailingIcon}</span>\n        )}\n      </button>\n    </SegmentTooltip>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;ACsDA,SAASK,IAAqB;CAC5B,OACE,kBAAC,QAAD;EAAM,WAAWL,EAAE;EAAS,eAAY;EACtC,UAAA,kBAAC,OAAD;GAAK,SAAQ;GAAY,OAAM;GAAK,QAAO;GAA3C,UAAA,CACE,kBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;GACf,CAAA,GACD,kBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;GACf,CAAA,CACE;;CACD,CAAA;AAEV;AAaA,IAAaM,IAASC,EAAW,SAC/B,GACA,GACA;CACA,IAAM,EACJ,aAAU,aACV,UAAO,MACP,WACA,WACA,SACA,YACA,aACA,YACA,gBACA,iBACA,cACA,aACA,cACA,UAAO,UACP,cACA,UACA,aACA,YACA,aACA,eACEC,GAEEC,IAAM;EACVT,EAAE;EACFA,EAAE,WAAWU;EACbV,EAAE,QAAQW;EACVC,KAAaZ,EAAE;EACfa,KAAWb,EAAE;EACbc,KAAYd,EAAE;EACde,KAAWf,EAAE;EACbgB;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAELC,IAAc,CAACH,MAAaC,KAAWG,IACvCC,IAAUlB,EAAU;EAAE;EAAQ;CAAK,CAAC;CAE1C,OACE,kBAACE,GAAD;EACE,SAASD,EAAsB;GAAE;GAAS;GAAU;GAAW,OAAOkB;EAAS,CAAC;EACtE;EAEV,UAAA,kBAAC,UAAD;GACO;GACC;GACN,WAAWX;GACX,eAAaU,EAAQ;GACrB,aAAWA,EAAQ;GACnB,OAAOA,EAAQ,SAASE,IAAQ;IAAE,GAAGF,EAAQ;IAAO,GAAGE;GAAM,IAAI,KAAA;GACvD;GACV,aAAWN,IAAU,KAAO,KAAA;GAC5B,gBAAcF;GACd,eAAaS;GACb,cAAYC;GACH;GAZX,UAAA;IAcGN,KACC,kBAAC,QAAD;KAAM,WAAWjB,EAAE;KAAW,UAAAe,IAAU,kBAACV,GAAD,CAAU,CAAA,IAAIa;IAAkB,CAAA;IAEzEJ,IACCC,IAAU,kBAACV,GAAD,CAAU,CAAA,IAAI,kBAAC,QAAD;KAAM,WAAWL,EAAE;KAAW;IAAe,CAAA,IAErEoB,MAAa,KAAA,KAAa,kBAAC,QAAD;KAAM,WAAWpB,EAAE;KAAQ;IAAe,CAAA;IAErE,CAACc,KAAYU,KACZ,kBAAC,QAAD;KAAM,WAAWxB,EAAE;KAAW,UAAAwB;IAAmB,CAAA;GAE7C;;CACM,CAAA;AAEpB,CAAC"}

package/dist/chunks/Button-KF-qSGtA.js

@@ -0,0 +1,11 @@
+//#region src/components/Button/variantIcons.ts
+var e = {
+	primary: "variantSolid",
+	secondary: "variantOutline",
+	ghost: "variantGhost",
+	link: "variantLink"
+};
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=Button-KF-qSGtA.js.map

package/dist/chunks/Button-KF-qSGtA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-KF-qSGtA.js","names":["BUTTON_VARIANT_ICONS"],"sources":["../../src/components/Button/variantIcons.ts"],"sourcesContent":["import type { IconName } from '../../icons/paths';\nimport type { ButtonVariant } from './Button';\n\n/** The glyph for each variant, for a picker that shows them. */\nexport const BUTTON_VARIANT_ICONS: Readonly<Record<ButtonVariant, IconName>> = {\n  primary: 'variantSolid',\n  secondary: 'variantOutline',\n  ghost: 'variantGhost',\n  link: 'variantLink',\n};\n"],"mappings":";AAIA,IAAaA,IAAkE;CAC7E,SAAS;CACT,WAAW;CACX,OAAO;CACP,MAAM;AACR"}

package/dist/chunks/{ButtonBar-CIMKPPRS.js → ButtonBar-B-cYuoem.js}

@@ -1,6 +1,6 @@
-import { r as e, t } from "./segmentTooltip-CGxCOWNz.js";
+import { r as e, t } from "./segmentTooltip-8VBPNgEc.js";
 import { t as n } from "./useRovingTabIndex-D7u22Ia_.js";
-import { t as r } from "./segmentedControl.module-BzGXUL5G.js";
+import { t as r } from "./segmentedControl.module-62qjNWJk.js";
 import { jsx as i } from "react/jsx-runtime";
 import "react";
 //#region src/components/ButtonBar/ButtonBar.tsx
@@ -39,6 +39,12 @@ function a(a) {
 	});
 }
 //#endregion
-export { a as t };
+//#region src/components/ButtonBar/variantIcons.ts
+var o = {
+	default: "variantSegmented",
+	minimal: "variantSegmentedMinimal"
+};
+//#endregion
+export { a as n, o as t };
 
-//# sourceMappingURL=ButtonBar-CIMKPPRS.js.map
+//# sourceMappingURL=ButtonBar-B-cYuoem.js.map

package/dist/chunks/ButtonBar-B-cYuoem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBar-B-cYuoem.js","names":["s","segmentTooltipContent","useRovingTabIndex","segmentedControl_module_default","ButtonBar","props","fire","item","items","index","roving","style","height","rootCls","size","variant","className","ariaLabel","SegmentTooltip","i","BUTTON_BAR_VARIANT_ICONS"],"sources":["../../src/components/ButtonBar/ButtonBar.tsx","../../src/components/ButtonBar/variantIcons.ts"],"sourcesContent":["import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from '../segmentedControl.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\nimport { SegmentTooltip, segmentTooltipContent, type SegmentTooltipFields } from '../segmentTooltip';\n\n/**\n * One button in an {@link ButtonBar}. `value` is only a React key; the item\n * carries no selected state.\n */\nexport type ButtonBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n  onAction: () => void;\n} & SegmentTooltipFields;\n\n/** Segment height and type scale for an {@link ButtonBar}. */\nexport type ButtonBarSize = 'sm' | 'md';\n/** Visual treatment of an {@link ButtonBar}. */\nexport type ButtonBarVariant = 'default' | 'minimal';\n\n/** Props for {@link ButtonBar}. */\nexport type ButtonBarProps<V extends string | number = string> = {\n  items: readonly ButtonBarItem<V>[];\n  ariaLabel?: string;\n  className?: string;\n  height?: number;\n  size?: ButtonBarSize;\n  variant?: ButtonBarVariant;\n};\n\n/**\n * Segmented strip of momentary buttons — each press fires and nothing stays\n * selected. Shares the look and the arrow-key navigation of `ToggleBar` and\n * `OptionsBar`.\n *\n * This is a plain callback bar. For buttons driven by the kit's actions\n * registry, use `ActionBar` instead.\n */\nexport function ButtonBar<V extends string | number = string>(props: ButtonBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n\n  const fire = (index: number) => {\n    const item = items[index];\n    if (item.disabled) return;\n    item.onAction();\n  };\n\n  const roving = useRovingTabIndex({ itemSelector: `.${s.segment}`, onActivate: fire });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--tb-h' as string]: `${height}px` } as CSSProperties)\n    : undefined;\n\n  const rootCls = [\n    s.root,\n    size && s[`size_${size}`],\n    variant && s[`variant_${variant}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      ref={roving.rootRef}\n      onKeyDown={roving.onKeyDown}\n      className={rootCls}\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => (\n        <SegmentTooltip key={item.value} content={segmentTooltipContent(item)} disabled={item.disabled}>\n          <button\n            type=\"button\"\n            aria-label={item.ariaLabel}\n            disabled={item.disabled}\n            className={s.segment}\n            onClick={() => fire(i)}\n          >\n            {item.label}\n          </button>\n        </SegmentTooltip>\n      ))}\n    </div>\n  );\n}\n","import type { IconName } from '../../icons/paths';\nimport type { ButtonBarVariant } from './ButtonBar';\n\n/** The glyph for each variant, for a picker that shows them. */\nexport const BUTTON_BAR_VARIANT_ICONS: Readonly<Record<ButtonBarVariant, IconName>> = {\n  default: 'variantSegmented',\n  minimal: 'variantSegmentedMinimal',\n};\n"],"mappings":";;;;;;AAwCA,SAAgBI,EAA8C,GAAwC;CACpG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAYC,GAEzDC,KAAQ,MAAkB;EAC9B,IAAMC,IAAOC,EAAMC;EACnB,AAAIF,EAAK,YACTA,EAAK,SAAS;CAChB,GAEMG,IAASR,EAAkB;EAAE,cAAc,IAAIF,EAAE;EAAW,YAAYM;CAAK,CAAC,GAE9EK,IAAmCC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,UAAqB,GAAGA,EAAO,IAAI,GAGrCC,IAAU;EACdb,EAAE;EACFc,KAAQd,EAAE,QAAQc;EAClBC,KAAWf,EAAE,WAAWe;EACxBC;CACF,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE1B,OACE,kBAAC,OAAD;EACE,KAAKN,EAAO;EACZ,WAAWA,EAAO;EAClB,WAAWG;EACX,MAAK;EACL,cAAYI;EACL;EAEN,UAAAT,EAAM,KAAK,GAAM,MAChB,kBAACU,GAAD;GAAiC,SAASjB,EAAsBM,CAAI;GAAG,UAAUA,EAAK;GACpF,UAAA,kBAAC,UAAD;IACE,MAAK;IACL,cAAYA,EAAK;IACjB,UAAUA,EAAK;IACf,WAAWP,EAAE;IACb,eAAeM,EAAKa,CAAC;IAEpB,UAAAZ,EAAK;GACA,CAAA;EACM,GAVKA,EAAK,KAUV,CACjB;CACE,CAAA;AAET;;;AClFA,IAAaa,IAAyE;CACpF,SAAS;CACT,SAAS;AACX"}

package/dist/chunks/{Callout-DpTO3fkb.js → Callout-VyYDIP7w.js}

@@ -1,6 +1,6 @@
-import { i as e } from "./portalHost-CE70wLzo.js";
+import { i as e } from "./portalHost-RUQPxIoW.js";
 import { t } from "./stance-BFQpS_fL.js";
-import { t as n } from "./CloseButton-wb7Or5Eg.js";
+import { t as n } from "./CloseButton-CKarkTT9.js";
 import { useLatest as r } from "@weasel-js/core";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 import { useCallback as s, useEffect as c, useId as l, useRef as u } from "react";
@@ -22,21 +22,21 @@ function v(f) {
 	let { children: v, className: y, title: b, footer: x, stance: S = "notice", tone: C, modal: w = !1, showCloseButton: T, onDismiss: E, triggerRef: D, anchorRect: O, placement: k = "top", offset: A = 12, maxHeight: j = 400, onOpenChange: M, shouldCloseOnInteractOutside: N, "aria-label": P, "aria-labelledby": F, portalContainer: I, ...L } = f, R = u(null), z = t({
 		stance: S,
 		tone: C
-	}), { anchor: B, portalProps: V } = e(I), H = T ?? !w, U = r(E), W = u((e) => {
-		e.key === "Escape" && U.current?.();
-	}), G = u(null), K = s((e) => {
-		G.current?.removeEventListener("keydown", W.current), G.current = e, e?.addEventListener("keydown", W.current);
-	}, []), q = l(), J = O !== void 0;
+	}), { anchor: B, portalProps: V, ready: H } = e(I), U = T ?? !w, W = r(E), G = u((e) => {
+		e.key === "Escape" && W.current?.();
+	}), K = u(null), q = s((e) => {
+		K.current?.removeEventListener("keydown", G.current), K.current = e, e?.addEventListener("keydown", G.current);
+	}, []), J = l(), Y = O !== void 0;
 	c(() => {
-		J && typeof window < "u" && window.dispatchEvent(new Event("resize"));
+		Y && typeof window < "u" && window.dispatchEvent(new Event("resize"));
 	}, [
-		J,
+		Y,
 		O?.x,
 		O?.y,
 		O?.width,
 		O?.height
 	]);
-	let Y = w && b !== void 0 ? q : F, X = w ? P : void 0;
+	let X = w && b !== void 0 ? J : F, Z = w ? P : void 0;
 	return /* @__PURE__ */ o(i, { children: [
 		B,
 		O !== void 0 && g(/* @__PURE__ */ a("span", {
@@ -51,7 +51,7 @@ function v(f) {
 				height: O.height
 			}
 		}), document.body),
-		/* @__PURE__ */ o(h, {
+		H && /* @__PURE__ */ o(h, {
 			...L,
 			triggerRef: O === void 0 ? D : R,
 			isNonModal: !w,
@@ -60,8 +60,8 @@ function v(f) {
 			maxHeight: j,
 			onOpenChange: M,
 			shouldCloseOnInteractOutside: N ?? (w ? () => !1 : void 0),
-			"aria-label": X,
-			"aria-labelledby": Y,
+			"aria-label": Z,
+			"aria-labelledby": X,
 			className: [_.popover, y].filter(Boolean).join(" "),
 			...z,
 			"data-weasel-overlay": "",
@@ -80,16 +80,16 @@ function v(f) {
 				className: _.dialog,
 				"aria-label": P,
 				"aria-labelledby": F,
-				ref: K,
+				ref: q,
 				children: ({ close: e }) => /* @__PURE__ */ o(i, { children: [
-					(b !== void 0 || H) && /* @__PURE__ */ o("header", {
+					(b !== void 0 || U) && /* @__PURE__ */ o("header", {
 						className: _.header,
 						children: [b !== void 0 && /* @__PURE__ */ a(p, {
-							id: q,
+							id: J,
 							slot: "title",
 							className: _.title,
 							children: b
-						}), H && /* @__PURE__ */ a(n, {
+						}), U && /* @__PURE__ */ a(n, {
 							ariaLabel: "Close callout",
 							onClick: () => {
 								e(), M?.(!1), E?.();
@@ -112,4 +112,4 @@ function v(f) {
 //#endregion
 export { f as n, v as t };
 
-//# sourceMappingURL=Callout-DpTO3fkb.js.map
+//# sourceMappingURL=Callout-VyYDIP7w.js.map

package/dist/chunks/Callout-VyYDIP7w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout-VyYDIP7w.js","names":["_Fragment","s","RACPopover","RACDialog","useOverlayPortal","CloseButton","DialogTrigger$1","Callout_module_default","Callout","ariaLabel","ariaLabelledby","rest","props","anchorRef","useRef","stanced","useStance","portalAnchor","portalContainer","showClose","showCloseButton","modal","onDismissRef","useLatest","onDismiss","escapeListener","listeningTo","dialogRef","useCallback","node","titleId","useId","hasAnchorRect","anchorRect","popoverAriaLabelledby","title","popoverAriaLabel","Fragment","createPortal","ready","Popover","triggerRef","shouldCloseOnInteractOutside","className","portalProps","OverlayArrow","Dialog","Heading","close","onOpenChange","footer"],"sources":["../../src/components/Callout/Callout.module.css","../../src/components/Callout/Callout.tsx"],"sourcesContent":[".anchor {\n  position: fixed;\n  pointer-events: none;\n}\n\n.popover {\n  /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n  z-index: 1200;\n  background: var(--_s-fill);\n  border: var(--_s-border-width) var(--_s-border-style) var(--_s-border-color);\n  border-radius: var(--_s-radius);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  max-width: 320px;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.popover[data-entering],\n.popover[data-exiting] {\n  opacity: 0;\n}\n\n/* BEGIN GENERATED stance rules: callout — `npm run gen:stances`, do not edit. */\n\n.popover {\n  --wzl-tone: initial;\n}\n\n.popover {\n  --_s-surface: var(--wzl-surface);\n  --_s-border-color: var(--wzl-accent-strong);\n  --_s-border-style: solid;\n  --_s-border-width: 1px;\n  --_s-radius: var(--wzl-radius-md);\n  --_s-tone-mix: var(--wzl-panel-tone-mix);\n  --_s-tone: var(--wzl-tone, var(--_s-surface));\n  --_s-accent: var(--wzl-tone);\n  --_s-title-font: var(--wzl-font-ui);\n  --_s-title-weight: var(--wzl-font-weight-bold);\n  --_s-title-size: var(--wzl-font-size);\n  --_s-title-case: none;\n  --_s-title-tracking: normal;\n  --_s-title-color: var(--wzl-fg);\n}\n\n.popover[data-stance='scope'] {\n  --_s-surface: var(--wzl-stance-scope-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-scope-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-scope-border-style, solid);\n  --_s-border-width: var(--wzl-stance-scope-border-width, 1px);\n  --_s-radius: var(--wzl-stance-scope-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-scope-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-scope-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-scope-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-scope-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-scope-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-scope-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-scope-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-scope-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-scope-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='aside'] {\n  --_s-surface: var(--wzl-stance-aside-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-aside-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-aside-border-style, solid);\n  --_s-border-width: var(--wzl-stance-aside-border-width, 1px);\n  --_s-radius: var(--wzl-stance-aside-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-aside-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-aside-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-aside-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-aside-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-aside-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-aside-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-aside-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-aside-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-aside-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='advanced'] {\n  --_s-surface: var(--wzl-stance-advanced-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-advanced-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-advanced-border-style, solid);\n  --_s-border-width: var(--wzl-stance-advanced-border-width, 1px);\n  --_s-radius: var(--wzl-stance-advanced-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-advanced-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-advanced-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-advanced-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-advanced-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-advanced-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-advanced-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-advanced-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-advanced-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-advanced-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='debug'] {\n  --_s-surface: var(--wzl-stance-debug-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-debug-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-debug-border-style, solid);\n  --_s-border-width: var(--wzl-stance-debug-border-width, 1px);\n  --_s-radius: var(--wzl-stance-debug-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-debug-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-debug-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-debug-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-debug-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-debug-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-debug-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-debug-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-debug-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-debug-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='danger'] {\n  --_s-surface: var(--wzl-stance-danger-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-danger-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-danger-border-style, solid);\n  --_s-border-width: var(--wzl-stance-danger-border-width, 1px);\n  --_s-radius: var(--wzl-stance-danger-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-danger-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-danger-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-danger-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-danger-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-danger-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-danger-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-danger-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-danger-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-danger-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='notice'] {\n  --_s-surface: var(--wzl-stance-notice-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-notice-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-notice-border-style, solid);\n  --_s-border-width: var(--wzl-stance-notice-border-width, 1px);\n  --_s-radius: var(--wzl-stance-notice-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-notice-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-notice-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-notice-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-notice-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-notice-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-notice-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-notice-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-notice-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-notice-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='important'] {\n  --_s-surface: var(--wzl-stance-important-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-important-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-important-border-style, solid);\n  --_s-border-width: var(--wzl-stance-important-border-width, 1px);\n  --_s-radius: var(--wzl-stance-important-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-important-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-important-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-important-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-important-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-important-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-important-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-important-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-important-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-important-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='preview'] {\n  --_s-surface: var(--wzl-stance-preview-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-preview-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-preview-border-style, solid);\n  --_s-border-width: var(--wzl-stance-preview-border-width, 1px);\n  --_s-radius: var(--wzl-stance-preview-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-preview-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-preview-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-preview-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-preview-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-preview-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-preview-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-preview-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-preview-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-preview-title-color, var(--wzl-fg));\n}\n\n.popover {\n  --_s-fill: var(--_s-surface);\n}\n\n.popover[data-tone],\n.popover[data-stance] {\n  --_s-fill: color-mix(in oklab, var(--_s-tone) var(--_s-tone-mix), var(--_s-surface));\n}\n\n.popover[data-tone] {\n  --wzl-surface-sunken: oklch(from var(--_s-fill) calc(l - 0.06) c h);\n}\n\n.popover[data-tone] {\n  --wzl-accent: var(--_s-accent);\n  --wzl-accent-base: var(--_s-accent);\n  --wzl-accent-strong: color-mix(in oklab, var(--_s-accent) 70%, var(--wzl-fg));\n  --wzl-accent-soft: color-mix(in oklab, var(--_s-accent) 45%, var(--wzl-surface));\n  --wzl-accent-hover: var(--wzl-accent-strong);\n  --wzl-accent-fg: var(--wzl-accent-strong);\n  --wzl-focus-ring: var(--wzl-accent-strong);\n}\n\n/* END GENERATED stance rules: callout */\n\n.arrow svg {\n  display: block;\n  fill: var(--_s-fill);\n  stroke: var(--_s-border-color);\n  stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n  transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n  transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n  transform: rotate(90deg);\n}\n\n.dialog {\n  outline: none;\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  padding: var(--wzl-space-5) var(--wzl-space-6) 0;\n}\n\n.title {\n  margin: 0;\n  flex: 1;\n  font-family: var(--_s-title-font);\n  font-size: var(--_s-title-size);\n  font-weight: var(--_s-title-weight);\n  text-transform: var(--_s-title-case);\n  letter-spacing: var(--_s-title-tracking);\n  color: var(--_s-title-color);\n}\n\n.body {\n  padding: var(--wzl-space-4) var(--wzl-space-6) var(--wzl-space-5);\n  font-size: var(--wzl-font-size);\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--wzl-space-4);\n  padding: 0 var(--wzl-space-6) var(--wzl-space-5);\n}\n","import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useLatest } from '@weasel-js/core';\nimport {\n  DialogTrigger,\n  Popover as RACPopover,\n  OverlayArrow,\n  Dialog as RACDialog,\n  Heading,\n  type PopoverProps as RACPopoverProps,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps, type WithoutPortalTarget } from '../../overlays/portalHost';\nimport { CloseButton } from '../CloseButton';\nimport { type StanceProps, useStance } from '../stance';\nimport s from './Callout.module.css';\n\n/**\n * Composition wrapper for press-to-open callouts:\n * `<CalloutTrigger><Pressable>…</Pressable><Callout>…</Callout></CalloutTrigger>`.\n * Re-exported RAC DialogTrigger — non-RAC trigger elements must be wrapped\n * in `<Pressable>` from react-aria-components.\n * In composed mode, put `defaultOpen` on `CalloutTrigger`, not `Callout` —\n * RAC detaches to local open state on the trigger, not the popover.\n */\nexport { DialogTrigger as CalloutTrigger };\n\n/** Props for {@link Callout}, on top of React Aria's `Popover` props. */\nexport type CalloutProps = Omit<\n  WithoutPortalTarget<RACPopoverProps>,\n  'children' | 'className' | 'isNonModal' | 'triggerRef'\n> &\n  OverlayPortalProps &\n  StanceProps & {\n  children?: ReactNode;\n  className?: string;\n  /** Optional heading rendered above the body. */\n  title?: ReactNode;\n  /** Footer slot — typically action buttons. */\n  footer?: ReactNode;\n  /**\n   * `true` — blocks interaction with the rest of the app until dismissed;\n   * inner dialog is `role=\"alertdialog\"`. `false` (default) — non-blocking:\n   * the app stays interactive; Esc / outside click / close button dismiss.\n   */\n  modal?: boolean;\n  /**\n   * Show the close button. Defaults to `!modal`. In programmatic\n   * `triggerRef`/`anchorRect` modes the close button needs controlled open\n   * (`isOpen` + `onOpenChange`); with only `defaultOpen` it has no open-state\n   * setter to call and cannot close.\n   */\n  showCloseButton?: boolean;\n  /**\n   * The user asked for this callout to go away — the close button or Escape.\n   *\n   * Distinct from `onOpenChange`, which a non-modal popover *also* fires when\n   * interaction or focus merely leaves it. On a canvas that's every click on\n   * the artwork, so a consumer that pins `isOpen` and treats `onOpenChange`\n   * as dismissal retires messages nobody read. Use this instead: it fires\n   * only on a deliberate act, and never on incidental focus loss.\n   */\n  onDismiss?: () => void;\n  /** Anchor to an arbitrary element (programmatic use, with `isOpen`). */\n  triggerRef?: RefObject<Element | null>;\n  /**\n   * Anchor to a client-coordinate rect — e.g. a scene node's on-screen box.\n   * The callout re-anchors whenever this rect changes, so a consumer that\n   * recomputes it on pan, zoom, or scene edits keeps the arrow on its target.\n   * Takes precedence over `triggerRef`.\n   */\n    anchorRect?: { x: number; y: number; width: number; height: number };\n  };\n\n/**\n * Anchored callout with an arrow pointing at its source — a trigger\n * element, an arbitrary `triggerRef`, or a client-space `anchorRect`.\n * Wraps React Aria Popover + Dialog; positioning, collision flipping,\n * dismissal, and focus behavior come from the underlying primitives.\n */\nexport function Callout(props: CalloutProps) {\n  const {\n    children,\n    className,\n    title,\n    footer,\n    stance = 'notice',\n    tone,\n    modal = false,\n    showCloseButton,\n    onDismiss,\n    triggerRef,\n    anchorRect,\n    placement = 'top',\n    offset = 12,\n    maxHeight = 400,\n    onOpenChange,\n    shouldCloseOnInteractOutside,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    portalContainer,\n    ...rest\n  } = props;\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const stanced = useStance({ stance, tone });\n  const { anchor: portalAnchor, portalProps, ready } = useOverlayPortal(portalContainer);\n  const showClose = showCloseButton ?? !modal;\n  // Escape is a dismissal like the close button is. It can't ride on a React `onKeyDown`:\n  // RAC's Dialog runs its props through filterDOMProps, which drops handlers\n  // it doesn't know, so the listener goes on the section itself. RAC's own\n  // Escape handling is untouched — this only adds the signal.\n  const onDismissRef = useLatest(onDismiss);\n  const escapeListener = useRef((e: KeyboardEvent) => {\n    if (e.key === 'Escape') onDismissRef.current?.();\n  });\n  const listeningTo = useRef<HTMLElement | null>(null);\n  const dialogRef = useCallback((node: HTMLElement | null) => {\n    listeningTo.current?.removeEventListener('keydown', escapeListener.current);\n    listeningTo.current = node;\n    node?.addEventListener('keydown', escapeListener.current);\n  }, []);\n  const titleId = useId();\n  // RAC positions on open and recomputes on scroll, resize, and a\n  // ResizeObserver on the anchor — none of which fire when `anchorRect` is\n  // merely *translated*, as it is when a consumer tracks a scene node across a\n  // pan. (Zoom happens to work, since scaling also changes the anchor's size.)\n  // Nudging RAC's own resize listener is the supported way to make it\n  // recompute; there's no public updatePosition on Popover.\n  const hasAnchorRect = anchorRect !== undefined;\n  useEffect(() => {\n    if (!hasAnchorRect || typeof window === 'undefined') return;\n    window.dispatchEvent(new Event('resize'));\n  }, [hasAnchorRect, anchorRect?.x, anchorRect?.y, anchorRect?.width, anchorRect?.height]);\n  // RAC's popover role-heuristic misses alertdialog; label the outer role\n  // it stamps. Upstream: react-spectrum Popover.mjs querySelector('[role=dialog]').\n  const popoverAriaLabelledby =\n    modal && title !== undefined ? titleId : ariaLabelledby;\n  const popoverAriaLabel = modal ? ariaLabel : undefined;\n  return (\n    <>\n      {portalAnchor}\n      {/* Harmless while closed — RAC reads the ref only when the popover is open. */}\n      {anchorRect !== undefined &&\n        createPortal(\n          <span\n            ref={anchorRef}\n            data-callout-anchor=\"\"\n            className={s.anchor}\n            aria-hidden=\"true\"\n            // Dynamic geometry — inline style is the mechanism here, not styling.\n            style={{\n              left: anchorRect.x,\n              top: anchorRect.y,\n              width: anchorRect.width,\n              height: anchorRect.height,\n            }}\n          />,\n          document.body,\n        )}\n      {ready && (\n        <RACPopover\n          {...rest}\n          triggerRef={anchorRect !== undefined ? anchorRef : triggerRef}\n          isNonModal={!modal}\n          placement={placement}\n          offset={offset}\n          maxHeight={maxHeight}\n          onOpenChange={onOpenChange}\n          shouldCloseOnInteractOutside={\n            shouldCloseOnInteractOutside ?? (modal ? () => false : undefined)\n          }\n          aria-label={popoverAriaLabel}\n          aria-labelledby={popoverAriaLabelledby}\n          className={[s.popover, className].filter(Boolean).join(' ')}\n          {...stanced}\n          data-weasel-overlay=\"\"\n          {...portalProps}\n        >\n          <OverlayArrow className={s.arrow}>\n            <svg width={12} height={12} viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n              <path d=\"M0 0 L6 6 L12 0\" />\n            </svg>\n          </OverlayArrow>\n          <RACDialog\n            role={modal ? 'alertdialog' : 'dialog'}\n            className={s.dialog}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            ref={dialogRef}\n          >\n            {({ close }) => (\n              <>\n                {(title !== undefined || showClose) && (\n                  <header className={s.header}>\n                    {title !== undefined && (\n                      <Heading id={titleId} slot=\"title\" className={s.title}>\n                        {title}\n                      </Heading>\n                    )}\n                    {showClose && (\n                      <CloseButton\n                        ariaLabel=\"Close callout\"\n                        onClick={() => {\n                          // `close()` resolves OverlayTriggerStateContext, only\n                          // provided by DialogTrigger (composed mode). In\n                          // triggerRef/anchorRect modes there is no such\n                          // context, so `close()` is a no-op there — the\n                          // controlled-open fallback below does the work.\n                          close();\n                          onOpenChange?.(false);\n                          onDismiss?.();\n                        }}\n                      />\n                    )}\n                  </header>\n                )}\n                <div className={s.body}>{children}</div>\n                {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n              </>\n            )}\n          </RACDialog>\n        </RACPopover>\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{CloseButton-wb7Or5Eg.js → CloseButton-CKarkTT9.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./Icon-DPRUIo3G.js";
-import { t } from "./segmentTooltip-CGxCOWNz.js";
+import { t as e } from "./Icon-BfqYtAX5.js";
+import { t } from "./segmentTooltip-8VBPNgEc.js";
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
 var i = { close: "_close_1xm1r_3" }, a = r(function({ ariaLabel: r, onClick: a, tooltip: o, disabled: s, className: c }, l) {
@@ -23,4 +23,4 @@ var i = { close: "_close_1xm1r_3" }, a = r(function({ ariaLabel: r, onClick: a,
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=CloseButton-wb7Or5Eg.js.map
+//# sourceMappingURL=CloseButton-CKarkTT9.js.map

package/dist/chunks/{CloseButton-wb7Or5Eg.js.map → CloseButton-CKarkTT9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CloseButton-wb7Or5Eg.js","names":["s","Icon","CloseButton_module_default","CloseButton","forwardRef","SegmentTooltip","tooltip","className","ariaLabel"],"sources":["../../src/components/CloseButton/CloseButton.module.css","../../src/components/CloseButton/CloseButton.tsx"],"sourcesContent":["/* Sets its own height: a host's control-height default for bare buttons\n   (labkit's) would otherwise stretch the square. */\n.close {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--wzl-icon-button-size);\n  height: var(--wzl-icon-button-size);\n  padding: 0;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n}\n\n.close:hover:not(:disabled) {\n  background: var(--wzl-surface-hover);\n  border-color: transparent;\n  color: var(--wzl-fg);\n}\n\n.close:active:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n}\n\n.close:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.close:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { Icon } from '../../icons/Icon';\nimport { SegmentTooltip } from '../segmentTooltip';\nimport s from './CloseButton.module.css';\n\n/** Props for {@link CloseButton}. */\nexport interface CloseButtonProps {\n  /** Accessible name — what the press closes or removes: `Close dialog`,\n   *  `Remove Glow`. Required, since the button shows only a glyph. */\n  ariaLabel: string;\n  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];\n  /** Kit tooltip content. None by default. */\n  tooltip?: ReactNode;\n  disabled?: boolean;\n  className?: string;\n}\n\n/**\n * The kit's close / dismiss / remove button: the `close` glyph at chrome size\n * in a square `--wzl-icon-button-size` target. Kit components that dismiss a\n * surface or remove a row draw their × with this.\n *\n * `ref` forwards to the underlying `<button>`.\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  { ariaLabel, onClick, tooltip, disabled, className }: CloseButtonProps,\n  ref: Ref<HTMLButtonElement>,\n) {\n  return (\n    <SegmentTooltip content={tooltip} disabled={disabled}>\n      <button\n        ref={ref}\n        type=\"button\"\n        className={className ? `${s.close} ${className}` : s.close}\n        aria-label={ariaLabel}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <Icon name=\"close\" size={16} />\n      </button>\n    </SegmentTooltip>\n  );\n});\n"],"mappings":";;;;qCCwBaG,IAAcC,EAAW,SACpC,EAAE,cAAW,YAAS,YAAS,aAAU,gBACzC,GACA;CACA,OACE,kBAACC,GAAD;EAAgB,SAASC;EAAmB;EAC1C,UAAA,kBAAC,UAAD;GACO;GACL,MAAK;GACL,WAAWC,IAAY,GAAGP,EAAE,MAAM,GAAGO,MAAcP,EAAE;GACrD,cAAYQ;GACF;GACD;GAET,UAAA,kBAACP,GAAD;IAAM,MAAK;IAAQ,MAAM;GAAK,CAAA;EACxB,CAAA;CACM,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"CloseButton-CKarkTT9.js","names":["s","Icon","CloseButton_module_default","CloseButton","forwardRef","SegmentTooltip","tooltip","className","ariaLabel"],"sources":["../../src/components/CloseButton/CloseButton.module.css","../../src/components/CloseButton/CloseButton.tsx"],"sourcesContent":["/* Sets its own height: a host's control-height default for bare buttons\n   (labkit's) would otherwise stretch the square. */\n.close {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--wzl-icon-button-size);\n  height: var(--wzl-icon-button-size);\n  padding: 0;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n}\n\n.close:hover:not(:disabled) {\n  background: var(--wzl-surface-hover);\n  border-color: transparent;\n  color: var(--wzl-fg);\n}\n\n.close:active:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n}\n\n.close:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.close:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { Icon } from '../../icons/Icon';\nimport { SegmentTooltip } from '../segmentTooltip';\nimport s from './CloseButton.module.css';\n\n/** Props for {@link CloseButton}. */\nexport interface CloseButtonProps {\n  /** Accessible name — what the press closes or removes: `Close dialog`,\n   *  `Remove Glow`. Required, since the button shows only a glyph. */\n  ariaLabel: string;\n  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];\n  /** Kit tooltip content. None by default. */\n  tooltip?: ReactNode;\n  disabled?: boolean;\n  className?: string;\n}\n\n/**\n * The kit's close / dismiss / remove button: the `close` glyph at chrome size\n * in a square `--wzl-icon-button-size` target. Kit components that dismiss a\n * surface or remove a row draw their × with this.\n *\n * `ref` forwards to the underlying `<button>`.\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  { ariaLabel, onClick, tooltip, disabled, className }: CloseButtonProps,\n  ref: Ref<HTMLButtonElement>,\n) {\n  return (\n    <SegmentTooltip content={tooltip} disabled={disabled}>\n      <button\n        ref={ref}\n        type=\"button\"\n        className={className ? `${s.close} ${className}` : s.close}\n        aria-label={ariaLabel}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <Icon name=\"close\" size={16} />\n      </button>\n    </SegmentTooltip>\n  );\n});\n"],"mappings":";;;;qCCwBaG,IAAcC,EAAW,SACpC,EAAE,cAAW,YAAS,YAAS,aAAU,gBACzC,GACA;CACA,OACE,kBAACC,GAAD;EAAgB,SAASC;EAAmB;EAC1C,UAAA,kBAAC,UAAD;GACO;GACL,MAAK;GACL,WAAWC,IAAY,GAAGP,EAAE,MAAM,GAAGO,MAAcP,EAAE;GACrD,cAAYQ;GACF;GACD;GAET,UAAA,kBAACP,GAAD;IAAM,MAAK;IAAQ,MAAM;GAAK,CAAA;EACxB,CAAA;CACM,CAAA;AAEpB,CAAC"}

package/dist/chunks/{Code-AsKpgnv6.js → Code-ChwKP1V0.js}

@@ -19,6 +19,12 @@ function r({ children: r, status: i = "neutral", stance: a, tone: o, variant: s
 	});
 }
 //#endregion
-export { r as t };
+//#region src/components/Code/variantIcons.ts
+var i = {
+	subtle: "variantSubtle",
+	plain: "variantPlain"
+};
+//#endregion
+export { r as n, i as t };
 
-//# sourceMappingURL=Code-AsKpgnv6.js.map
+//# sourceMappingURL=Code-ChwKP1V0.js.map

package/dist/chunks/Code-ChwKP1V0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code-ChwKP1V0.js","names":["s","useStance","Code_module_default","Code","stanced","className","status","variant","size","CODE_VARIANT_ICONS"],"sources":["../../src/components/Code/Code.module.css","../../src/components/Code/Code.tsx","../../src/components/Code/variantIcons.ts"],"sourcesContent":[".code {\n  --code-status-fg: var(--wzl-fg);\n  /* A peer tone or a stance's accent paints over the status. */\n  --code-fg: var(--_s-accent, var(--code-status-fg));\n  display: inline;\n  padding: 0 var(--wzl-space-2);\n  border-radius: var(--wzl-radius-sm);\n  background: color-mix(in oklab, var(--code-fg) 12%, transparent);\n  color: var(--code-fg);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--code-font-size, 90%);\n  line-height: inherit;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n\n.code[data-status='muted']   { --code-status-fg: var(--wzl-fg-muted); }\n.code[data-status='accent']  { --code-status-fg: var(--wzl-accent-fg); }\n.code[data-status='success'] { --code-status-fg: var(--wzl-success); }\n.code[data-status='warn']    { --code-status-fg: var(--wzl-warning); }\n.code[data-status='danger']  { --code-status-fg: var(--wzl-danger); }\n\n.code[data-variant='plain'] {\n  padding: 0;\n  background: transparent;\n}\n\n.code[data-size='xs'] { --code-font-size: var(--wzl-font-size-xs); }\n.code[data-size='sm'] { --code-font-size: var(--wzl-font-size-sm); }\n.code[data-size='md'] { --code-font-size: var(--wzl-font-size); }\n\n/* BEGIN GENERATED stance rules: code — `npm run gen:stances`, do not edit. */\n\n.code {\n  --wzl-tone: initial;\n}\n\n.code {\n  --_s-accent: var(--wzl-tone);\n}\n\n.code[data-stance='scope'] {\n  --_s-accent: var(--wzl-stance-scope-accent, var(--wzl-tone));\n}\n\n.code[data-stance='aside'] {\n  --_s-accent: var(--wzl-stance-aside-accent, var(--wzl-tone));\n}\n\n.code[data-stance='advanced'] {\n  --_s-accent: var(--wzl-stance-advanced-accent, var(--wzl-tone));\n}\n\n.code[data-stance='debug'] {\n  --_s-accent: var(--wzl-stance-debug-accent, var(--wzl-tone));\n}\n\n.code[data-stance='danger'] {\n  --_s-accent: var(--wzl-stance-danger-accent, var(--wzl-tone));\n}\n\n.code[data-stance='notice'] {\n  --_s-accent: var(--wzl-stance-notice-accent, var(--wzl-tone));\n}\n\n.code[data-stance='important'] {\n  --_s-accent: var(--wzl-stance-important-accent, var(--wzl-tone));\n}\n\n.code[data-stance='preview'] {\n  --_s-accent: var(--wzl-stance-preview-accent, var(--wzl-tone));\n}\n\n.code[data-tone] {\n  --wzl-accent: var(--_s-accent);\n  --wzl-accent-base: var(--_s-accent);\n  --wzl-accent-strong: color-mix(in oklab, var(--_s-accent) 70%, var(--wzl-fg));\n  --wzl-accent-soft: color-mix(in oklab, var(--_s-accent) 45%, var(--wzl-surface));\n  --wzl-accent-hover: var(--wzl-accent-strong);\n  --wzl-accent-fg: var(--wzl-accent-strong);\n  --wzl-focus-ring: var(--wzl-accent-strong);\n}\n\n/* END GENERATED stance rules: code */\n","import type { ReactNode } from 'react';\nimport s from './Code.module.css';\nimport { type StanceProps, useStance } from '../stance';\n\n/** Status color of a {@link Code} span. `success` and `danger` double as the\n *  added and removed sides of a diff. */\nexport type CodeStatus = 'neutral' | 'muted' | 'accent' | 'success' | 'warn' | 'danger';\n/** `subtle` sets the text on a tinted chip; `plain` is colored monospace text alone. */\nexport type CodeVariant = 'subtle' | 'plain';\n/** Pins the type to a theme step. Left unset, the span sizes itself from the\n *  surrounding text. */\nexport type CodeSize = 'xs' | 'sm' | 'md';\n\n/** Props for {@link Code}. */\nexport interface CodeProps extends StanceProps {\n  children: ReactNode;\n  /** The status the text reports. A peer `tone`, or a stance's accent, paints over it. */\n  status?: CodeStatus;\n  variant?: CodeVariant;\n  size?: CodeSize;\n  className?: string;\n  title?: string;\n}\n\n/**\n * An inline run of literal text — an identifier, a type, a key path — set in\n * the monospace face inside a `<code>` element. Unlike {@link Badge}, which\n * labels, it quotes: the text keeps its case and wraps anywhere, so a long\n * type signature breaks across lines with the chip following each fragment.\n */\nexport function Code({\n  children,\n  status = 'neutral',\n  stance,\n  tone,\n  variant = 'subtle',\n  size,\n  className,\n  title,\n}: CodeProps) {\n  const stanced = useStance({ stance, tone });\n  return (\n    <code\n      className={className ? `${s.code} ${className}` : s.code}\n      {...stanced}\n      data-status={status}\n      data-variant={variant}\n      data-size={size}\n      title={title}\n    >\n      {children}\n    </code>\n  );\n}\n","import type { IconName } from '../../icons/paths';\nimport type { CodeVariant } from './Code';\n\n/** The glyph for each variant, for a picker that shows them. */\nexport const CODE_VARIANT_ICONS: Readonly<Record<CodeVariant, IconName>> = {\n  subtle: 'variantSubtle',\n  plain: 'variantPlain',\n};\n"],"mappings":";;;;;AC8BA,SAAgBG,EAAK,EACnB,aACA,YAAS,WACT,WACA,SACA,aAAU,UACV,SACA,cACA,YACY;CACZ,IAAMC,IAAUH,EAAU;EAAE;EAAQ;CAAK,CAAC;CAC1C,OACE,kBAAC,QAAD;EACE,WAAWI,IAAY,GAAGL,EAAE,KAAK,GAAGK,MAAcL,EAAE;EACpD,GAAII;EACJ,eAAaE;EACb,gBAAcC;EACd,aAAWC;EACJ;EAEN;CACG,CAAA;AAEV;;;ACjDA,IAAaC,IAA8D;CACzE,QAAQ;CACR,OAAO;AACT"}

package/dist/chunks/{ColorModeControl-DET6Itwq.js → ColorModeControl-CH9PmDlT.js}

@@ -1,24 +1,24 @@
-import { $ as e, Q as t, Z as n } from "./icons-CofIOTiI.js";
-import { t as r } from "./ToggleBar-BZ4Gk1IU.js";
+import { et as e, nt as t, tt as n } from "./icons-B_fPKEis.js";
+import { t as r } from "./ToggleBar-CfYbMK3x.js";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/components/ColorModeControl/ColorModeControl.tsx
 function a(r) {
 	return [
 		{
 			value: "auto",
-			label: /* @__PURE__ */ i(n, { size: r }),
+			label: /* @__PURE__ */ i(e, { size: r }),
 			ariaLabel: "Auto",
 			tooltip: "Auto — follow the system"
 		},
 		{
 			value: "light",
-			label: /* @__PURE__ */ i(e, { size: r }),
+			label: /* @__PURE__ */ i(t, { size: r }),
 			ariaLabel: "Light",
 			tooltip: "Light"
 		},
 		{
 			value: "dark",
-			label: /* @__PURE__ */ i(t, { size: r }),
+			label: /* @__PURE__ */ i(n, { size: r }),
 			ariaLabel: "Dark",
 			tooltip: "Dark"
 		}
@@ -44,4 +44,4 @@ function s({ value: e, onChange: t, ariaLabel: n = "Color mode", size: a, varian
 //#endregion
 export { s as t };
 
-//# sourceMappingURL=ColorModeControl-DET6Itwq.js.map
+//# sourceMappingURL=ColorModeControl-CH9PmDlT.js.map

package/dist/chunks/{ColorModeControl-DET6Itwq.js.map → ColorModeControl-CH9PmDlT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ColorModeControl-DET6Itwq.js","names":["ModeLightIcon","ModeDarkIcon","ModeAutoIcon","ToggleBar","items","glyph","ITEMS","ColorModeControl","size","next","onChange"],"sources":["../../src/components/ColorModeControl/ColorModeControl.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { ColorModePreference } from '@weasel-js/theme';\nimport { ModeAutoIcon, ModeDarkIcon, ModeLightIcon } from '../../icons';\nimport { ToggleBar, type ToggleBarItem, type ToggleBarSize, type ToggleBarVariant } from '../ToggleBar/ToggleBar';\n\n/** Props for {@link ColorModeControl}. */\nexport interface ColorModeControlProps {\n  value: ColorModePreference;\n  onChange: (next: ColorModePreference) => void;\n  /** Accessible name of the group. Defaults to `'Color mode'`. */\n  ariaLabel?: string;\n  size?: ToggleBarSize;\n  variant?: ToggleBarVariant;\n  className?: string;\n}\n\nfunction items(glyph: number): ToggleBarItem<ColorModePreference>[] {\n  return [\n    { value: 'auto', label: <ModeAutoIcon size={glyph} />, ariaLabel: 'Auto', tooltip: 'Auto — follow the system' },\n    { value: 'light', label: <ModeLightIcon size={glyph} />, ariaLabel: 'Light', tooltip: 'Light' },\n    { value: 'dark', label: <ModeDarkIcon size={glyph} />, ariaLabel: 'Dark', tooltip: 'Dark' },\n  ];\n}\n\nconst ITEMS = { sm: items(12), md: items(14) };\n\n/**\n * The Auto / Light / Dark choice, as a three-way radiogroup of mode glyphs.\n * Controlled: pair it with `useColorModePreference` from\n * `@weasel-js/theme/react` and put the hook's resolved `mode` in the\n * `ThemeProvider` selection.\n */\nexport function ColorModeControl({\n  value,\n  onChange,\n  ariaLabel = 'Color mode',\n  size,\n  variant,\n  className,\n}: ColorModeControlProps): ReactElement {\n  return (\n    <ToggleBar\n      items={ITEMS[size ?? 'md']}\n      value={value}\n      onChange={(next) => {\n        if (next) onChange(next);\n      }}\n      ariaLabel={ariaLabel}\n      size={size}\n      variant={variant}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;;AAgBA,SAASI,EAAM,GAAqD;CAClE,OAAO;EACL;GAAE,OAAO;GAAQ,OAAO,kBAACF,GAAD,EAAc,MAAMG,EAAQ,CAAA;GAAG,WAAW;GAAQ,SAAS;EAA2B;EAC9G;GAAE,OAAO;GAAS,OAAO,kBAACL,GAAD,EAAe,MAAMK,EAAQ,CAAA;GAAG,WAAW;GAAS,SAAS;EAAQ;EAC9F;GAAE,OAAO;GAAQ,OAAO,kBAACJ,GAAD,EAAc,MAAMI,EAAQ,CAAA;GAAG,WAAW;GAAQ,SAAS;EAAO;CAC5F;AACF;AAEA,IAAMC,IAAQ;CAAE,IAAIF,EAAM,EAAE;CAAG,IAAIA,EAAM,EAAE;AAAE;AAQ7C,SAAgBG,EAAiB,EAC/B,UACA,aACA,eAAY,cACZ,SACA,YACA,gBACsC;CACtC,OACE,kBAACJ,GAAD;EACE,OAAOG,EAAME,KAAQ;EACd;EACP,WAAW,MAAS;GAClB,AAAIC,KAAMC,EAASD,CAAI;EACzB;EACW;EACL;EACG;EACE;CACZ,CAAA;AAEL"}
+{"version":3,"file":"ColorModeControl-CH9PmDlT.js","names":["ModeAutoIcon","ModeLightIcon","ModeDarkIcon","ToggleBar","items","glyph","ITEMS","ColorModeControl","size","next","onChange"],"sources":["../../src/components/ColorModeControl/ColorModeControl.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { ColorModePreference } from '@weasel-js/theme';\nimport { ModeAutoIcon, ModeDarkIcon, ModeLightIcon } from '../../icons';\nimport { ToggleBar, type ToggleBarItem, type ToggleBarSize, type ToggleBarVariant } from '../ToggleBar/ToggleBar';\n\n/** Props for {@link ColorModeControl}. */\nexport interface ColorModeControlProps {\n  value: ColorModePreference;\n  onChange: (next: ColorModePreference) => void;\n  /** Accessible name of the group. Defaults to `'Color mode'`. */\n  ariaLabel?: string;\n  size?: ToggleBarSize;\n  variant?: ToggleBarVariant;\n  className?: string;\n}\n\nfunction items(glyph: number): ToggleBarItem<ColorModePreference>[] {\n  return [\n    { value: 'auto', label: <ModeAutoIcon size={glyph} />, ariaLabel: 'Auto', tooltip: 'Auto — follow the system' },\n    { value: 'light', label: <ModeLightIcon size={glyph} />, ariaLabel: 'Light', tooltip: 'Light' },\n    { value: 'dark', label: <ModeDarkIcon size={glyph} />, ariaLabel: 'Dark', tooltip: 'Dark' },\n  ];\n}\n\nconst ITEMS = { sm: items(12), md: items(14) };\n\n/**\n * The Auto / Light / Dark choice, as a three-way radiogroup of mode glyphs.\n * Controlled: pair it with `useColorModePreference` from\n * `@weasel-js/theme/react` and put the hook's resolved `mode` in the\n * `ThemeProvider` selection.\n */\nexport function ColorModeControl({\n  value,\n  onChange,\n  ariaLabel = 'Color mode',\n  size,\n  variant,\n  className,\n}: ColorModeControlProps): ReactElement {\n  return (\n    <ToggleBar\n      items={ITEMS[size ?? 'md']}\n      value={value}\n      onChange={(next) => {\n        if (next) onChange(next);\n      }}\n      ariaLabel={ariaLabel}\n      size={size}\n      variant={variant}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;;AAgBA,SAASI,EAAM,GAAqD;CAClE,OAAO;EACL;GAAE,OAAO;GAAQ,OAAO,kBAACJ,GAAD,EAAc,MAAMK,EAAQ,CAAA;GAAG,WAAW;GAAQ,SAAS;EAA2B;EAC9G;GAAE,OAAO;GAAS,OAAO,kBAACJ,GAAD,EAAe,MAAMI,EAAQ,CAAA;GAAG,WAAW;GAAS,SAAS;EAAQ;EAC9F;GAAE,OAAO;GAAQ,OAAO,kBAACH,GAAD,EAAc,MAAMG,EAAQ,CAAA;GAAG,WAAW;GAAQ,SAAS;EAAO;CAC5F;AACF;AAEA,IAAMC,IAAQ;CAAE,IAAIF,EAAM,EAAE;CAAG,IAAIA,EAAM,EAAE;AAAE;AAQ7C,SAAgBG,EAAiB,EAC/B,UACA,aACA,eAAY,cACZ,SACA,YACA,gBACsC;CACtC,OACE,kBAACJ,GAAD;EACE,OAAOG,EAAME,KAAQ;EACd;EACP,WAAW,MAAS;GAClB,AAAIC,KAAMC,EAASD,CAAI;EACzB;EACW;EACL;EACG;EACE;CACZ,CAAA;AAEL"}

package/dist/chunks/{ComboBox-DKln_mOd.js → ComboBox-BMj_IKBj.js}

@@ -1,4 +1,4 @@
-import { i as e } from "./portalHost-CE70wLzo.js";
+import { i as e } from "./portalHost-RUQPxIoW.js";
 import { t } from "./field.module-B27pWv0i.js";
 import { t as n } from "./listbox.module-BcdVJMbm.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
@@ -16,7 +16,7 @@ var v = {
 	sizer: "_sizer_gus0o_121 _sizer_18u60_4"
 }, y = () => !0;
 function b(a) {
-	let { label: o, orientation: s = "stacked", description: c, errorMessage: u, placeholder: f, options: h, children: b, selectedKey: w, defaultSelectedKey: T, onSelectionChange: E, emptyLabel: D = "No matches", errorLabel: O = "Couldn't load options", filter: k = "contains", isLoading: A, loadError: j = null, onCommit: M, width: N = "fill", className: P, portalContainer: F, ...I } = a, { anchor: L, portalProps: R } = e(F);
+	let { label: o, orientation: s = "stacked", description: c, errorMessage: u, placeholder: f, options: h, children: b, selectedKey: w, defaultSelectedKey: T, onSelectionChange: E, emptyLabel: D = "No matches", errorLabel: O = "Couldn't load options", filter: k = "contains", isLoading: A, loadError: j = null, onCommit: M, width: N = "fill", className: P, portalContainer: F, ...I } = a, { anchor: L, portalProps: R, ready: z } = e(F);
 	return /* @__PURE__ */ i(l, {
 		...I,
 		defaultFilter: k === "none" ? y : k === "contains" ? void 0 : k,
@@ -64,7 +64,7 @@ function b(a) {
 				className: `${t.error} ${t.below}`,
 				children: u
 			}),
-			/* @__PURE__ */ r(g, {
+			z && /* @__PURE__ */ r(g, {
 				className: v.popover,
 				"data-weasel-overlay": "",
 				...R,
@@ -135,4 +135,4 @@ function C({ className: e, ...t }) {
 //#endregion
 export { C as n, b as t };
 
-//# sourceMappingURL=ComboBox-DKln_mOd.js.map
+//# sourceMappingURL=ComboBox-BMj_IKBj.js.map

package/dist/chunks/ComboBox-BMj_IKBj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox-BMj_IKBj.js","names":["ComboBox","RACComboBox","f","s","RACPopover","RACListBox","listbox","RACInput","RACButton","RACListBoxItem","useOverlayPortal","listbox_module_default","ComboBox_module_default","admitEverything","ComboBox$1","rest","props","portalContainer","ComboBox","filter","onSelectionChange","k","onCommit","field_module_default","width","orientation","className","anchor","label","Label","ComboBoxFrame","placeholder","optionLabels","options","children","l","i","description","Text","FieldError","errorMessage","ready","Popover","portalProps","ListBox","loadError","emptyLabel","errorLabel","ComboBoxItem","o","state","useContext","ComboBoxStateContext","Input","isLoading","onCommitText","text","Button","Children","isValidElement","c","ListBoxItem"],"sources":["../../src/components/ComboBox/ComboBox.module.css","../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":[".frame {\n  display: flex;\n  align-items: stretch;\n  overflow: hidden;\n}\n\n.frame input {\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n/* A request is out: the rows on screen are the previous query's, so mark them\n   stale rather than clearing the list out from under the arrow keys. */\n.frame:has(input[aria-busy='true'])::after {\n  content: '';\n  align-self: center;\n  flex: none;\n  width: 10px;\n  height: 10px;\n  margin-right: var(--wzl-space-2);\n  border: 1.5px solid var(--wzl-fg-subtle);\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: spin 700ms linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .frame:has(input[aria-busy='true'])::after {\n    animation: none;\n    border-top-color: var(--wzl-fg-subtle);\n    opacity: 0.5;\n  }\n}\n\n.openButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--wzl-icon-button-size);\n  background: transparent;\n  border: none;\n  border-left: 1px solid var(--wzl-border);\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n}\n\n.openButton[data-hovered]:not([data-disabled]) {\n  color: var(--wzl-fg);\n}\n\n.openButton svg {\n  width: 10px;\n  height: 10px;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  outline: none;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  padding: var(--wzl-space-2) var(--wzl-space-4);\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  outline: none;\n}\n\n.option[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.option[data-selected] {\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.empty {\n  padding: var(--wzl-space-3) var(--wzl-space-4);\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n}\n\n.error {\n  padding: var(--wzl-space-3) var(--wzl-space-4);\n  color: var(--wzl-danger);\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* `width='fit'`: a hidden stack of every option label shares the input's grid\n   cell, so the field is wide enough for whichever option is chosen and takes\n   no more of the row than that. */\n.fit .frame {\n  display: grid;\n  grid-template-columns: auto auto;\n  width: fit-content;\n  max-width: 100%;\n}\n\n/* `width: 0` keeps the input's 20-character intrinsic width out of the track\n   sizing — the sizer is what the column measures — and `min-width` then\n   stretches it back across whatever that came to. */\n.fit .frame input {\n  grid-area: 1 / 1;\n  width: 0;\n  min-width: 100%;\n}\n\n.fit .sizer {\n  grid-area: 1 / 1;\n}\n\n.fit .openButton {\n  grid-area: 1 / 2;\n}\n\n.sizer {\n  composes: sizer from '../sizer.module.css';\n  padding: 0 var(--wzl-field-pad-x);\n}\n","import { Children, isValidElement, useContext, type KeyboardEvent, type ReactNode } from 'react';\nimport {\n  ComboBox as RACComboBox,\n  ComboBoxStateContext,\n  Label,\n  Input as RACInput,\n  Button as RACButton,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport type { FieldOrientation } from '../Field/Field';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport f from '../field.module.css';\nimport listbox from '../listbox.module.css';\nimport s from './ComboBox.module.css';\n\n/**\n * One option in a {@link ComboBox}'s `options` list. `textValue` is the\n * plain-text form used for filtering and screen readers, needed only when\n * `label` isn't a bare string.\n */\nexport type ComboBoxOption = {\n  value: string;\n  label: ReactNode;\n  textValue?: string;\n  isDisabled?: boolean;\n};\n\ntype Key = string | number;\n\n/**\n * How the typed text narrows the options.\n *\n * `'contains'` is a locale-aware substring match over each option's text.\n * `'none'` shows every option given — what a list a server already filtered\n * and ranked needs, since a second pass would drop rows that do not contain\n * the query and reorder whatever survived.\n */\nexport type ComboBoxFilter = 'contains' | 'none' | ((textValue: string, inputValue: string) => boolean);\n\n/** What the user committed: an option they picked, or text they typed. */\nexport type ComboBoxCommit<T extends Key = string> =\n  | { source: 'option'; key: T }\n  | { source: 'text'; text: string };\n\nconst admitEverything = () => true;\n\n/**\n * Props for {@link ComboBox}, on top of React Aria's `ComboBox` props, with\n * the selection key narrowed to the option value type.\n */\nexport type ComboBoxProps<T extends Key = string> = Omit<RACComboBoxProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  /**\n   * `'stacked'` (the default) puts the label above the field; `'row'` sets it\n   * beside the field at its own width, with any description or error on a\n   * line below. Same vocabulary as {@link Field}'s `orientation`.\n   */\n  orientation?: FieldOrientation;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  options?: ReadonlyArray<ComboBoxOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T | null) => void;\n  emptyLabel?: ReactNode;\n  /** Shown in place of `emptyLabel` while `loadError` is set. */\n  errorLabel?: ReactNode;\n  /**\n   * How typed text narrows `options`. Defaults to `'contains'`. `'none'` also\n   * keeps the popover open on an empty collection: a list the kit does not\n   * filter can arrive empty from a server mid-query, and without that the\n   * popover closes and `emptyLabel` is never seen.\n   */\n  filter?: ComboBoxFilter;\n  /** Marks the options as out of date while the next set is being fetched. */\n  isLoading?: boolean;\n  /** A failed load, shown as `errorLabel` rather than as an empty corpus. */\n  loadError?: unknown | null;\n  /**\n   * Fires when the user commits — Enter on the active option, a click on one,\n   * or Enter on text matching none of them when `allowsCustomValue` is set.\n   * Empty text commits nothing.\n   */\n  onCommit?: (commit: ComboBoxCommit<T>) => void;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the combo box sits\n   * in. `'fit'` sizes the input to its widest option, so it neither swallows a\n   * toolbar's slack nor cuts a selection off once one is made.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n} & OverlayPortalProps;\n\n/**\n * Filterable single-select wrapping React Aria's ComboBox. The user can\n * type to filter; selection commits to `onSelectionChange`. When no value\n * is in the input, selection clears (key becomes null).\n */\nexport function ComboBox<T extends Key = string>(props: ComboBoxProps<T>) {\n  const {\n    label,\n    orientation = 'stacked',\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    emptyLabel = 'No matches',\n    errorLabel = \"Couldn't load options\",\n    filter = 'contains',\n    isLoading,\n    loadError = null,\n    onCommit,\n    width = 'fill',\n    className,\n    portalContainer,\n    ...rest\n  } = props;\n\n  const { anchor, portalProps, ready } = useOverlayPortal(portalContainer);\n\n  return (\n    <RACComboBox\n      {...rest}\n      // 'contains' leaves this unset so React Aria uses its own locale-aware\n      // match rather than a reimplementation of it.\n      defaultFilter={filter === 'none' ? admitEverything : filter === 'contains' ? undefined : filter}\n      allowsEmptyCollection={rest.allowsEmptyCollection ?? filter === 'none'}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={(k) => {\n        onSelectionChange?.(k as T | null);\n        if (k !== null) onCommit?.({ source: 'option', key: k as T });\n      }}\n      className={[\n        f.field,\n        f.control,\n        width === 'fit' && `${f.fit} ${s.fit}`,\n        orientation === 'row' && f.row,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {anchor}\n      {label !== undefined && <Label className={f.label}>{label}</Label>}\n      <ComboBoxFrame\n        placeholder={placeholder}\n        isLoading={isLoading}\n        onCommitText={onCommit && ((text) => onCommit({ source: 'text', text }))}\n      >\n        {width === 'fit' && (\n          <span className={s.sizer} aria-hidden=\"true\">\n            {placeholder !== undefined && <span>{placeholder}</span>}\n            {optionLabels(options, children).map((l, i) => (\n              <span key={i}>{l}</span>\n            ))}\n          </span>\n        )}\n      </ComboBoxFrame>\n      {description !== undefined && (\n        <Text slot=\"description\" className={`${f.hint} ${f.below}`}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={`${f.error} ${f.below}`}>{errorMessage}</FieldError>\n      {ready && (\n        <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n          <RACListBox\n            className={`${listbox.surface} ${listbox.list}`}\n            renderEmptyState={() =>\n              loadError !== null ? (\n                <div className={s.error} role=\"alert\">{errorLabel}</div>\n              ) : (\n                <div className={s.empty}>{emptyLabel}</div>\n              )\n            }\n          >\n            {options !== undefined\n              ? options.map((o) => (\n                  <ComboBoxItem key={String(o.value)} id={o.value} textValue={o.textValue} isDisabled={o.isDisabled}>\n                    {o.label}\n                  </ComboBoxItem>\n                ))\n              : children}\n          </RACListBox>\n        </RACPopover>\n      )}\n    </RACComboBox>\n  );\n}\n\n/**\n * The input and its trigger. Split out so it can read `ComboBoxStateContext`,\n * which only exists below `RACComboBox`.\n */\nfunction ComboBoxFrame({\n  placeholder,\n  isLoading,\n  onCommitText,\n  children,\n}: {\n  placeholder?: string;\n  isLoading?: boolean;\n  onCommitText?: (text: string) => void;\n  children?: ReactNode;\n}) {\n  const state = useContext(ComboBoxStateContext);\n\n  // Capture, not bubble: React Aria's own Enter handler runs on the way up and\n  // clears the focused key, so by then there is no way to tell an option\n  // commit from a text one.\n  const onKeyDownCapture = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key !== 'Enter' || e.nativeEvent.isComposing) return;\n    if (state?.isOpen && state.selectionManager.focusedKey != null) return;\n    const text = e.currentTarget.value;\n    if (text !== '') onCommitText?.(text);\n  };\n\n  return (\n    <div className={`${f.frame} ${s.frame}`}>\n      <RACInput\n        placeholder={placeholder}\n        aria-busy={isLoading || undefined}\n        onKeyDownCapture={onCommitText ? onKeyDownCapture : undefined}\n      />\n      {children}\n      <RACButton className={s.openButton} aria-label=\"Show options\">\n        <svg viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n          <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </RACButton>\n    </div>\n  );\n}\n\n/**\n * The labels a `width='fit'` input measures itself against. In the children\n * form the label sits one element deep, inside a `ComboBoxItem`.\n */\nfunction optionLabels(\n  options: ReadonlyArray<ComboBoxOption> | undefined,\n  children: ReactNode,\n): ReactNode[] {\n  if (options !== undefined) return options.map((o) => o.label);\n  return Children.toArray(children).map((c) =>\n    isValidElement<{ children?: ReactNode }>(c) ? c.props.children : c,\n  );\n}\n\n/** Props for {@link ComboBoxItem}, on top of React Aria's `ListBoxItem` props. */\nexport type ComboBoxItemProps = Omit<RACListBoxItemProps, 'className'> & {\n  className?: string;\n};\n\n/** One row in a {@link ComboBox}'s filtered list. */\nexport function ComboBoxItem({ className, ...rest }: ComboBoxItemProps) {\n  return <RACListBoxItem {...rest} className={[s.option, className].filter(Boolean).join(' ')} />;\n}\n"],"mappings":"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"}

package/dist/chunks/{DataGrid-B6IS9vUk.js → DataGrid-CjiVKoaA.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./useReorderDragList-CStYKjHl.js";
+import { n as e } from "./useReorderDragList-DnqqvRGK.js";
 import { t } from "./Disclosure-CpWt87nO.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Fragment as a, useId as o, useMemo as s, useState as c } from "react";
@@ -154,4 +154,4 @@ function f(u) {
 //#endregion
 export { f as t };
 
-//# sourceMappingURL=DataGrid-B6IS9vUk.js.map
+//# sourceMappingURL=DataGrid-CjiVKoaA.js.map