neba 1.18.0 → 1.19.0

package/dist/internal/styles.d.ts

@@ -22,7 +22,7 @@
  * Chip before anything imported them.
  */
 import type * as React from 'react';
-import type { NebaColor, NebaDensity, NebaElevation, NebaSize, NebaVariant } from '../types.js';
+import type { NebaColor, NebaDensity, NebaElevation, NebaOrientation, NebaSize, NebaVariant } from '../types.js';
 /**
  * Corner radius. ~45% of the control height at every step, held just short of
  * the 50% that would make it a pill.
@@ -274,6 +274,18 @@ export declare const sheetBodyClasses: Record<NebaSize, string>;
 export declare const sheetHeaderGapClasses: Record<NebaSize, string>;
 /** Between a sheet's sections, when there are no dividers to separate them. */
 export declare const sheetSectionGapClasses: Record<NebaSize, string>;
+/**
+ * Between the options of a RadioGroup or a CheckboxGroup, when no `spacing`
+ * says otherwise.
+ *
+ * A column stands on the ladder above, the one a Form and a Fieldset put
+ * between their fields, so at `md` an option is as far from the next as a
+ * field is: a column of checkboxes and a column of text fields set side by side
+ * keep one rhythm. A row keeps a wider step along it, because a label has to
+ * end visibly before the next box starts, and puts its wrapped lines on the
+ * column's step.
+ */
+export declare const optionGapClasses: Record<NebaOrientation, Record<NebaSize, string>>;
 /**
  * The frosted surface: a translucent fill over a blurred backdrop, a tile of
  * noise blended into it for tooth, and an angled sheen. The blur makes it a
@@ -452,6 +464,12 @@ export declare function clampClasses(lines: number): string;
 export declare function clampSlot(lines: number | undefined): React.CSSProperties | undefined;
 /** Icons track their label rather than carrying a size of their own. */
 export declare const iconClasses = "[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";
+/**
+ * A Select's trigger: a TextField's shell, to the pixel. Here rather than in
+ * `Select.tsx` because a DataTable's rows-per-page control draws the closed
+ * Select before the Select's own chunk arrives, and the two must not drift.
+ */
+export declare const selectTriggerClasses: string;
 /**
  * A Base UI **Collapsible** panel: Collapsible itself, and the three agent
  * components built on the same primitive.
@@ -671,6 +689,14 @@ export declare function hasContent(node: React.ReactNode): boolean;
  * length.
  */
 export declare function toLength(value: number | string | undefined): string | undefined;
+/**
+ * Which of the four units a length is written in, or `undefined` for a string
+ * `toPixels` would not read. The same test `toPixels` makes, without converting:
+ * converting a `rem` reads the root's font size, which is a style read, and a
+ * render that only needs to know *whether* something is a length has no reason
+ * to make one.
+ */
+export declare function lengthUnit(value: string): 'px' | 'rem' | 'em' | '%' | undefined;
 /**
  * The other direction: a CSS length a caller wrote, as the number a drag can do
  * arithmetic on.

package/dist/internal/styles.js

@@ -1 +1 @@
-export const radiusClasses={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"};export const controlHeightClasses={xs:"h-5.5",sm:"h-6.5",md:"h-8",lg:"h-10",xl:"h-12"};export const fieldHeightClasses={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"};export const controlHeightValues={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"};export const measureWidths={xs:"30rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};export function measureValue(e){return"number"==typeof e?`${e}px`:measureWidths[e]??e}export const controlSquareClasses={xs:"w-5.5",sm:"w-6.5",md:"w-8",lg:"w-10",xl:"w-12"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.75rem]",md:"text-[0.8125rem]",lg:"text-[0.9375rem]",xl:"text-[1.0625rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[0.875rem]",sm:"text-[0.75rem]/[1rem]",md:"text-[0.8125rem]/[1.25rem]",lg:"text-[0.9375rem]/[1.375rem]",xl:"text-[1.0625rem]/[1.625rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const metaTextValues={xs:"0.625rem",sm:"0.6875rem",md:"0.75rem",lg:"0.8125rem",xl:"0.875rem"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-1.5",sm:"size-1.5",md:"size-2",lg:"size-2",xl:"size-2.5"};export const tickRowLeadingClasses="leading-[1.4]";export const hitAreaClasses="neba-hit";export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"};export const stackGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetTitleHeadingClasses="neba-title [&.neba-title_:where(h1,h2,h3,h4,h5,h6):not([class])]:[font:inherit] [&.neba-title_:where(h1,h2,h3,h4,h5,h6):not([class])]:m-0 [:where(&)_:where(h1,h2,h3,h4,h5,h6)]:[font:inherit] [:where(&)_:where(h1,h2,h3,h4,h5,h6)]:m-0";export const headingTitleClasses={xs:"[&.neba-heading]:text-[0.75rem]/[1rem]",sm:"[&.neba-heading]:text-[0.8125rem]/[1.125rem]",md:"[&.neba-heading]:text-[0.9375rem]/[1.25rem]",lg:"[&.neba-heading]:text-[1.0625rem]/[1.5rem]",xl:"[&.neba-heading]:text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const surfaceClasses="[background-image:var(--neba-grain),var(--neba-sheen)] [background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]";export const ringRestClasses="[outline:0_solid_transparent]";export const transitionClasses=`${ringRestClasses} [transition-property:background-color,border-color,box-shadow,color,outline-color] [transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration),var(--neba-duration),var(--neba-duration)] [transition-timing-function:var(--neba-ease)]`;export const pressTransitionClasses="active:[transition-duration:0ms]";export const popupFadeStateClasses="data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";export const popupFadeClasses="[transition:opacity_var(--neba-duration)_var(--neba-ease)] "+popupFadeStateClasses;export const focusRingClasses=`${ringRestClasses} outline-offset-2 focus-visible:[outline:2px_solid_var(--n-ring)]`;export const insetRingClasses=`${ringRestClasses} outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]`;export const focusWithinRingClasses=`${ringRestClasses} outline-offset-2 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] supports-[not_selector(:has(*))]:focus-within:[outline:2px_solid_var(--n-ring)]`;export const fieldRingClasses=`${ringRestClasses} outline-offset-0 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)]`;export const fieldFocusTransitionClasses="focus-within:[transition-duration:var(--neba-duration)]";export function clampClasses(e){return e>1?"line-clamp-(--n-lines)":"truncate"}export function clampSlot(e){return void 0!==e&&e>1?{"--n-lines":Math.floor(e)}:void 0}export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";const e="[transition:height_var(--neba-duration)_var(--neba-ease)] motion-reduce:[transition-duration:0ms] data-[starting-style]:h-0 data-[ending-style]:h-0";export const collapsiblePanelClasses=`h-(--collapsible-panel-height) overflow-hidden ${e}`;export const accordionPanelClasses=`h-(--accordion-panel-height) overflow-hidden ${e}`;export const disclosureTriggerClasses="group/disclosure";export const disclosureChevronClasses="flex h-[1lh] shrink-0 items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] group-data-[panel-open]/disclosure:rotate-180";export const preformattedClasses="m-0 overflow-auto rounded-(--neba-radius-sm) bg-(--neba-groove) p-2 font-mono text-[0.9em]/[1.5] whitespace-pre";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(e,s,t){const n="solid"===t;return{"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":`var(--neba-${e}-panel)`,"--n-panel-hover":`var(--neba-${e}-panel-hover)`,"--n-panel-press":`var(--neba-${e}-panel-press)`,"--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-glow":n?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":n?"var(--neba-flash-on-fill)":`var(--neba-${e}-soft-press)`,"--n-elev":`var(--neba-shadow-${s})`,"--n-elev-hover":`var(--neba-shadow-${Math.min(s+1,4)})`,"--n-elev-press":`var(--neba-shadow-${Math.max(s-1,0)})`}}export function surfaceSlots(e,s){return{"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-panel-press":"var(--neba-panel-press)","--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-elev":`var(--neba-shadow-${s})`}}export const tintPlateClasses="neba-tint-plate";export const disabledClasses={solid:"cursor-not-allowed bg-(--neba-disabled-bg) text-(--neba-disabled-fg) shadow-none",outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:var(--neba-disabled-border)] shadow-none",text:"cursor-not-allowed bg-transparent text-(--neba-disabled-fg) shadow-none"};export const fieldRestClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev),var(--neba-plate-solid)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)] hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] focus-within:bg-(--n-panel-hover) focus-within:[border-color:var(--n-ring)] focus-within:hover:[border-color:var(--n-ring)]`,text:"text-(--neba-fg) bg-transparent hover:bg-(--n-soft) focus-within:bg-(--n-soft-hover) focus-within:hover:bg-(--n-soft-hover)"};export const fieldReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]`,text:"text-(--neba-fg) bg-transparent [filter:saturate(0.55)]"};export const readOnlyFilterClasses="[filter:saturate(0.55)]";export const fieldSheetClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-hover) focus-within:bg-(--n-panel-hover)`,text:fieldRestClasses.text};export const fieldSheetReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel)`,text:"text-(--neba-fg) bg-transparent"};export const fieldSheetDisabledClasses={solid:disabledClasses.solid,outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:transparent] shadow-none",text:disabledClasses.text};export const citationMarkClasses="inline-flex shrink-0 items-center justify-center rounded-[0.3em] min-w-[1.5em] px-[0.35em] py-[0.05em] bg-(--n-soft) text-[0.8em]/[1.6] font-semibold text-(--n-on-tint) tabular-nums";export const chipRemoveClasses="relative ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full size-[1.15em] cursor-pointer opacity-70 neba-hit [transition:opacity_var(--neba-duration)_var(--neba-ease)] hover:opacity-100 focus-visible:opacity-100 focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1 disabled:cursor-not-allowed";export const sheetCloseClasses="relative flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center rounded-full text-(--neba-muted-fg) neba-hit [&_svg]:size-[1.1em] [&_svg]:shrink-0 [transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)] hover:bg-(--n-soft) hover:text-(--neba-fg) focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2";export function hasContent(e){return null!=e&&!1!==e&&""!==e}export function toLength(e){if(null!=e)return"number"==typeof e?`${e}px`:e}const s=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/;export function toPixels(e,n){const r=s.exec(e);if(!r)return;const a=Number(r[1]);if(!Number.isNaN(a))switch(r[2]){case"px":return a;case"%":return n.percentOf*a/100;case"em":return a*t(n.relativeTo);default:return a*t("undefined"==typeof document?null:document.documentElement)}}function t(e){return e&&"undefined"!=typeof getComputedStyle&&parseFloat(getComputedStyle(e).fontSize)||16}export function cx(...e){return e.filter(Boolean).join(" ")}
+export const radiusClasses={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"};export const controlHeightClasses={xs:"h-5.5",sm:"h-6.5",md:"h-8",lg:"h-10",xl:"h-12"};export const fieldHeightClasses={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"};export const controlHeightValues={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"};export const measureWidths={xs:"30rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};export function measureValue(e){return"number"==typeof e?`${e}px`:measureWidths[e]??e}export const controlSquareClasses={xs:"w-5.5",sm:"w-6.5",md:"w-8",lg:"w-10",xl:"w-12"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.75rem]",md:"text-[0.8125rem]",lg:"text-[0.9375rem]",xl:"text-[1.0625rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[0.875rem]",sm:"text-[0.75rem]/[1rem]",md:"text-[0.8125rem]/[1.25rem]",lg:"text-[0.9375rem]/[1.375rem]",xl:"text-[1.0625rem]/[1.625rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const metaTextValues={xs:"0.625rem",sm:"0.6875rem",md:"0.75rem",lg:"0.8125rem",xl:"0.875rem"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-1.5",sm:"size-1.5",md:"size-2",lg:"size-2",xl:"size-2.5"};export const tickRowLeadingClasses="leading-[1.4]";export const hitAreaClasses="neba-hit";export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"};export const stackGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetTitleHeadingClasses="neba-title [&.neba-title_:where(h1,h2,h3,h4,h5,h6):not([class])]:[font:inherit] [&.neba-title_:where(h1,h2,h3,h4,h5,h6):not([class])]:m-0 [:where(&)_:where(h1,h2,h3,h4,h5,h6)]:[font:inherit] [:where(&)_:where(h1,h2,h3,h4,h5,h6)]:m-0";export const headingTitleClasses={xs:"[&.neba-heading]:text-[0.75rem]/[1rem]",sm:"[&.neba-heading]:text-[0.8125rem]/[1.125rem]",md:"[&.neba-heading]:text-[0.9375rem]/[1.25rem]",lg:"[&.neba-heading]:text-[1.0625rem]/[1.5rem]",xl:"[&.neba-heading]:text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const optionGapClasses={vertical:sheetSectionGapClasses,horizontal:{xs:"gap-x-5 gap-y-1.5",sm:"gap-x-5 gap-y-2",md:"gap-x-5 gap-y-3",lg:"gap-x-5 gap-y-3.5",xl:"gap-x-5 gap-y-4"}};export const surfaceClasses="[background-image:var(--neba-grain),var(--neba-sheen)] [background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]";export const ringRestClasses="[outline:0_solid_transparent]";export const transitionClasses=`${ringRestClasses} [transition-property:background-color,border-color,box-shadow,color,outline-color] [transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration),var(--neba-duration),var(--neba-duration)] [transition-timing-function:var(--neba-ease)]`;export const pressTransitionClasses="active:[transition-duration:0ms]";export const popupFadeStateClasses="data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";export const popupFadeClasses="[transition:opacity_var(--neba-duration)_var(--neba-ease)] "+popupFadeStateClasses;export const focusRingClasses=`${ringRestClasses} outline-offset-2 focus-visible:[outline:2px_solid_var(--n-ring)]`;export const insetRingClasses=`${ringRestClasses} outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]`;export const focusWithinRingClasses=`${ringRestClasses} outline-offset-2 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] supports-[not_selector(:has(*))]:focus-within:[outline:2px_solid_var(--n-ring)]`;export const fieldRingClasses=`${ringRestClasses} outline-offset-0 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)]`;export const fieldFocusTransitionClasses="focus-within:[transition-duration:var(--neba-duration)]";export function clampClasses(e){return e>1?"line-clamp-(--n-lines)":"truncate"}export function clampSlot(e){return void 0!==e&&e>1?{"--n-lines":Math.floor(e)}:void 0}export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const selectTriggerClasses=`group relative flex w-full cursor-pointer items-center select-none [-webkit-tap-highlight-color:transparent] [touch-action:manipulation] ${transitionClasses} ${fieldFocusTransitionClasses} ${iconClasses}`;const e="[transition:height_var(--neba-duration)_var(--neba-ease)] motion-reduce:[transition-duration:0ms] data-[starting-style]:h-0 data-[ending-style]:h-0";export const collapsiblePanelClasses=`h-(--collapsible-panel-height) overflow-hidden ${e}`;export const accordionPanelClasses=`h-(--accordion-panel-height) overflow-hidden ${e}`;export const disclosureTriggerClasses="group/disclosure";export const disclosureChevronClasses="flex h-[1lh] shrink-0 items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] group-data-[panel-open]/disclosure:rotate-180";export const preformattedClasses="m-0 overflow-auto rounded-(--neba-radius-sm) bg-(--neba-groove) p-2 font-mono text-[0.9em]/[1.5] whitespace-pre";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(e,s,t){const n="solid"===t;return{"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":`var(--neba-${e}-panel)`,"--n-panel-hover":`var(--neba-${e}-panel-hover)`,"--n-panel-press":`var(--neba-${e}-panel-press)`,"--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-glow":n?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":n?"var(--neba-flash-on-fill)":`var(--neba-${e}-soft-press)`,"--n-elev":`var(--neba-shadow-${s})`,"--n-elev-hover":`var(--neba-shadow-${Math.min(s+1,4)})`,"--n-elev-press":`var(--neba-shadow-${Math.max(s-1,0)})`}}export function surfaceSlots(e,s){return{"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-panel-press":"var(--neba-panel-press)","--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-elev":`var(--neba-shadow-${s})`}}export const tintPlateClasses="neba-tint-plate";export const disabledClasses={solid:"cursor-not-allowed bg-(--neba-disabled-bg) text-(--neba-disabled-fg) shadow-none",outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:var(--neba-disabled-border)] shadow-none",text:"cursor-not-allowed bg-transparent text-(--neba-disabled-fg) shadow-none"};export const fieldRestClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev),var(--neba-plate-solid)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)] hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] focus-within:bg-(--n-panel-hover) focus-within:[border-color:var(--n-ring)] focus-within:hover:[border-color:var(--n-ring)]`,text:"text-(--neba-fg) bg-transparent hover:bg-(--n-soft) focus-within:bg-(--n-soft-hover) focus-within:hover:bg-(--n-soft-hover)"};export const fieldReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]`,text:"text-(--neba-fg) bg-transparent [filter:saturate(0.55)]"};export const readOnlyFilterClasses="[filter:saturate(0.55)]";export const fieldSheetClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-hover) focus-within:bg-(--n-panel-hover)`,text:fieldRestClasses.text};export const fieldSheetReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel)`,text:"text-(--neba-fg) bg-transparent"};export const fieldSheetDisabledClasses={solid:disabledClasses.solid,outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:transparent] shadow-none",text:disabledClasses.text};export const citationMarkClasses="inline-flex shrink-0 items-center justify-center rounded-[0.3em] min-w-[1.5em] px-[0.35em] py-[0.05em] bg-(--n-soft) text-[0.8em]/[1.6] font-semibold text-(--n-on-tint) tabular-nums";export const chipRemoveClasses="relative ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full size-[1.15em] cursor-pointer opacity-70 neba-hit [transition:opacity_var(--neba-duration)_var(--neba-ease)] hover:opacity-100 focus-visible:opacity-100 focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1 disabled:cursor-not-allowed";export const sheetCloseClasses="relative flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center rounded-full text-(--neba-muted-fg) neba-hit [&_svg]:size-[1.1em] [&_svg]:shrink-0 [transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)] hover:bg-(--n-soft) hover:text-(--neba-fg) focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2";export function hasContent(e){return null!=e&&!1!==e&&""!==e}export function toLength(e){if(null!=e)return"number"==typeof e?`${e}px`:e}const s=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/;export function lengthUnit(e){const t=s.exec(e);if(t&&!Number.isNaN(Number(t[1])))return t[2]}export function toPixels(e,n){const r=s.exec(e);if(!r)return;const a=Number(r[1]);if(!Number.isNaN(a))switch(r[2]){case"px":return a;case"%":return n.percentOf*a/100;case"em":return a*t(n.relativeTo);default:return a*t("undefined"==typeof document?null:document.documentElement)}}function t(e){return e&&"undefined"!=typeof getComputedStyle&&parseFloat(getComputedStyle(e).fontSize)||16}export function cx(...e){return e.filter(Boolean).join(" ")}

package/dist/internal/tile.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Keeps a sliding tile on the item it marks while the items change under it.
+ *
+ * A SegmentedButton and a FloatingBottomNavigation draw one tile behind the
+ * current item and measure that item to place it. A value change is a render
+ * of the component and is measured there. What is not is a change to the items
+ * themselves: a label that grew, a font that arrived, the set reordered by its
+ * caller. Both components used to catch those by measuring again whenever their
+ * `children` changed identity, which is every render of whatever is above them,
+ * and every one of those measurements laid the page out to read four offsets
+ * that had not moved.
+ *
+ * So the items are watched instead, and nothing is measured unless something
+ * happened to them:
+ *
+ * - **The root's size**, with no animation. That is the container moving under
+ *   a tile that was already in the right place, and a tile that slides there
+ *   lags behind a window being dragged.
+ * - **Each item's size**, animated, as a label change always was.
+ * - **The set itself**, through a `MutationObserver` on the root: an item added,
+ *   removed or moved, and the attribute that marks the current one moving to
+ *   another node, which is what a reorder of unkeyed items looks like.
+ *
+ * The root is observed before any item, and that order is load-bearing. One
+ * `ResizeObserver` delivers its entries in the order its targets were added,
+ * so when a resize of the root resizes the items with it, the instant
+ * placement lands first and the animated ones that follow find the tile
+ * already there. The other way round, the animated one starts a transition and
+ * the instant one, asking for the same box, cannot stop it.
+ *
+ * `items` selects every item and `current` names the attribute on the current
+ * one. Returns what stops all three.
+ */
+export declare function watchTile(root: HTMLElement, items: string, current: string, measure: (animate: boolean) => void): () => void;

package/dist/internal/tile.js

@@ -0,0 +1 @@
+import{observeResize as e}from"./observe.js";export function watchTile(t,o,r,s){const n=e(t,()=>s(!1)),c=new Map,i=()=>{const r=new Set(t.querySelectorAll(o));for(const[e,t]of c)r.has(e)||(t(),c.delete(e));for(const t of r)c.has(t)||c.set(t,e(t,()=>s(!0)))};i();const a=new MutationObserver(()=>{i(),s(!0)});return a.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[r]}),()=>{n(),a.disconnect();for(const e of c.values())e();c.clear()}}

package/dist/internal/wheel.d.ts

@@ -18,7 +18,11 @@
  * Held only where there is a strip to hold it. A bar that fits in its box takes
  * nothing at all, which is what makes it safe to leave on: three tabs in a row
  * are not a scroll container as far as the reader is concerned, and must not
- * behave like one.
+ * behave like one. And it takes no listener either, which is what
+ * `bindAxisWheelWhileOverflowing` is for: a wheel listener that can cancel the
+ * scroll makes the browser ask the page's main thread before it scrolls
+ * anything under it, so every tab bar on a page held up the page's own scroll
+ * while the pointer crossed it, whether the bar could scroll or not.
  *
  * Two gestures are deliberately left alone. A wheel held with Ctrl is a zoom. A
  * trackpad swiping sideways is already travel along the strip, and the browser
@@ -36,3 +40,22 @@
  * if the page does not answer it as well.
  */
 export declare function bindAxisWheel(el: HTMLElement): () => void;
+/** What `bindAxisWheelWhileOverflowing` hands back. */
+export interface AxisWheelBinding {
+    /** Measures the strip again, and takes or drops the wheel to match. */
+    check: () => void;
+    /** The teardown. */
+    stop: () => void;
+}
+/**
+ * `bindAxisWheel`, attached only while the strip overflows along its width —
+ * the one case its handler acts on, measured the same way.
+ *
+ * `check` is for the caller to run whenever it measures the strip anyway: on a
+ * scroll, a resize, a change in what it holds. The strip also checks when a
+ * pointer arrives over it, because a label can grow without resizing anything
+ * an observer is watching, and a wheel can only reach the strip through a
+ * pointer that is over it. The reads come first and nothing is written, so a
+ * caller can run it ahead of its own writes without forcing a layout.
+ */
+export declare function bindAxisWheelWhileOverflowing(el: HTMLElement): AxisWheelBinding;

package/dist/internal/wheel.js

@@ -1 +1 @@
-export function bindAxisWheel(e){const t=t=>{if(t.defaultPrevented)return;if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;if(e.scrollWidth-e.clientWidth<=1)return;const r=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,l=t.deltaY*r;if(!l)return;t.preventDefault();const n="rtl"===getComputedStyle(e).direction;e.scrollBy({left:n?-l:l,behavior:"auto"})};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)}
+export function bindAxisWheel(e){const t=t=>{if(t.defaultPrevented)return;if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;if(e.scrollWidth-e.clientWidth<=1)return;const n=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,l=t.deltaY*n;if(!l)return;t.preventDefault();const r="rtl"===getComputedStyle(e).direction;e.scrollBy({left:r?-l:l,behavior:"auto"})};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)}export function bindAxisWheelWhileOverflowing(e){let t=null;const n=()=>{const n=e.scrollWidth-e.clientWidth>1;n&&!t?t=bindAxisWheel(e):!n&&t&&(t(),t=null)};return e.addEventListener("pointerenter",n),n(),{check:n,stop(){e.removeEventListener("pointerenter",n),t?.(),t=null}}}