neba 1.16.1 → 1.16.2

package/dist/internal/notch.d.ts

@@ -0,0 +1,80 @@
+import type * as React from 'react';
+import type { NebaDensity, NebaSize, NebaVariant } from '../types.js';
+interface NotchGeometry {
+    size: NebaSize;
+    density: NebaDensity;
+    variant: NebaVariant;
+    /**
+     * How far the first line of text sits below the shell's inner edge, for a
+     * shell whose text starts at the top rather than in the middle — a textarea.
+     */
+    firstLine?: string;
+}
+export interface NotchFrameProps extends NotchGeometry {
+    label: React.ReactNode;
+    /** `classNames.label`, for anything in it that changes the label's width. */
+    labelClassName?: string;
+    /** For a frame the notch sits in, which then answers the hover and focus. */
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * The shell and the width of its label, in one cell.
+ *
+ * A label above a field is in the column the field stretches to, so a Select
+ * whose options are all one short word is still as wide as its name. On the
+ * edge the label is absolutely positioned and widens nothing, and the same
+ * Select cut its own name short. The sizer is that name again at the size it
+ * is drawn on the edge, with the corners and the gap on each side of it, laid
+ * out at no height in the same grid cell as the shell — so the cell, and the
+ * shell stretched across it, are never narrower than the notch needs.
+ *
+ * A string is drawn as generated content off `data-sample`, for
+ * `WidthSizer`'s reason: it reserves the same width and leaves nothing for a
+ * `getByText` to find twice. Only a label that is not a string is rendered a
+ * second time.
+ *
+ * It also carries the geometry every piece inside it reads, once.
+ */
+export declare function NotchFrame({ label, labelClassName, className, children, ...geometry }: NotchFrameProps): React.JSX.Element;
+export interface FieldNotchProps {
+    label: React.ReactNode;
+    variant: NebaVariant;
+    disabled: boolean;
+    readOnly: boolean;
+    /**
+     * The label comes down into the field while it is empty and idle. Only for
+     * `float`, and only when nothing is drawn where it would rest.
+     */
+    rests: boolean;
+    /**
+     * The field is empty, for a component that knows it and has no control that
+     * can say so itself — a multiple Combobox, whose chips are not an input.
+     * Everything else leaves this out: an input says it through
+     * `:placeholder-shown` and a trigger through `data-placeholder`, both of
+     * which are right before any script has run.
+     */
+    empty?: boolean;
+    /**
+     * The notch sits beside the shell, in the frame, rather than inside it —
+     * a Select's, whose shell is a `<button>`. It then starts at the frame's
+     * edge instead of over the shell's border.
+     */
+    beside?: boolean;
+    /** `classNames.label`. */
+    labelClassName?: string;
+    labelId?: string;
+    htmlFor?: string;
+}
+/**
+ * The edge and the label, inside a `NotchFrame`, as the last child of whatever
+ * holds the control.
+ *
+ * It has to come after the control: a resting label reads the control's
+ * emptiness through `~`, which only looks forward. And it has to be a child of
+ * the element whose hover and focus the edge answers to, which is the shell
+ * for every field but a Select — whose shell is a `<button>`, and a `<label>`
+ * cannot go inside one.
+ */
+export declare function FieldNotch({ label, variant, disabled, readOnly, rests, empty, beside, labelClassName, labelId, htmlFor }: FieldNotchProps): React.JSX.Element;
+export {};

package/dist/internal/notch.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Field as n}from"@base-ui/react/field";import{cx as s,metaTextValues as t,paddingXValues as r}from"./styles.js";const i={xs:"0.1875rem",sm:"0.1875rem",md:"0.25rem",lg:"0.25rem",xl:"0.3125rem"},l={xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1rem",xl:"1.125rem"},m={xs:{size:"0.6875rem",leading:"0.875rem"},sm:{size:"0.75rem",leading:"1rem"},md:{size:"0.8125rem",leading:"1.25rem"},lg:{size:"0.9375rem",leading:"1.375rem"},xl:{size:"1.0625rem",leading:"1.625rem"}};function d({size:e,density:a,variant:n,firstLine:s}){const d="outline"===n?"1px":"0px",o=`var(--neba-radius-${e})`,c=i[e],b=m[e];return{"--n-notch-r":o,"--n-notch-gap":c,"--n-float-size":t[e],"--n-float-leading":l[e],"--n-rest-size":b.size,"--n-rest-leading":b.leading,"--n-rest-top":void 0===s?`calc(50% - ${b.leading} / 2)`:`calc(${d} + ${s})`,"--n-rest-x":`calc(${d} + ${r[a][e]} - ${o} - ${c})`}}export function NotchFrame({label:n,labelClassName:t,className:r,children:i,...l}){return a("span",{className:s("neba-notch-frame",r),style:d(l),children:[i,e("span","string"==typeof n?{"aria-hidden":"true","data-sample":n,className:s("neba-notch-sizer font-medium",t)}:{"aria-hidden":"true",className:s("neba-notch-sizer font-medium",t),children:n})]})}export function FieldNotch({label:t,variant:r,disabled:i,readOnly:l,rests:m,empty:d,beside:o=!1,labelClassName:c,labelId:b,htmlFor:h}){return a("span",{className:s("neba-notch",m&&"neba-notch-float"),"data-variant":r,"data-state":i?"disabled":l?"read-only":void 0,"data-empty":d||void 0,style:o||"outline"!==r?void 0:{"--n-notch-inset":"-1px"},children:[e("span",{className:"neba-notch-start"}),e("span",{className:"neba-notch-gap"}),e("span",{className:"neba-notch-end"}),e(n.Label,{...void 0===b?void 0:{id:b},...void 0===h?void 0:{htmlFor:h},className:s("neba-notch-label font-medium",i?"text-(--neba-disabled-fg)":"text-[var(--n-label-ink,var(--neba-fg))]",c),children:t})]})}

package/dist/internal/picker.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaColor, NebaElevation, NebaSize, NebaStyleProps } from '../types.js';
+import type { NebaColor, NebaElevation, NebaLabelPlacement, NebaSize, NebaStyleProps } from '../types.js';
 /**
  * The shell all four pickers wear: a field-shaped trigger with a popup hanging
  * off it.
@@ -42,8 +42,16 @@ export declare const pickerPopupClasses: string;
 export declare const popupPaddingClasses: Record<NebaSize, string>;
 export interface PickerShellProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'defaultValue'> {
     elevation?: NebaElevation;
-    /** Label above the trigger. */
+    /** The control's name. */
     label?: React.ReactNode;
+    /**
+     * Where the label is drawn: above the trigger, in a notch cut into its top
+     * edge, or inside it until something is chosen or the popup is open. The
+     * glyph a picker draws at its start keeps a `float` label in the notch; pass
+     * `startIcon={false}` to give it somewhere to rest.
+     * @default 'top'
+     */
+    labelPlacement?: NebaLabelPlacement;
     /** Helper text below it. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the control invalid. */
@@ -104,7 +112,7 @@ interface InternalShellProps extends PickerShellProps {
  * and the way `invalid` re-points the whole colour family at `danger` so the
  * edge, the ring and the message turn over together.
  */
-export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, clearLabel, hiddenValues, sideOffset, popupClassName, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
+export declare function PickerShell({ variant, size, color, density, elevation, label, labelPlacement, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, clearLabel, hiddenValues, sideOffset, popupClassName, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
 /**
  * The row of shortcuts under a picker's panel.
  *

package/dist/internal/picker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{Field as i}from"@base-ui/react/field";import{Popover as a}from"@base-ui/react/popover";import{CloseIcon as t}from"./icons.js";import{WidthSizer as r}from"./sizer.js";import{chipRemoveClasses as o,controlTextLeadingClasses as s,cx as d,disabledClasses as c,fieldFocusTransitionClasses as p,fieldHeightClasses as u,fieldReadOnlyClasses as m,fieldRestClasses as f,fieldRingClasses as b,gapClasses as h,iconClasses as x,metaTextClasses as v,paddingXClasses as g,popupFadeClasses as N,radiusClasses as y,stackGapClasses as w,surfaceClasses as P,surfaceSlots as $,transitionClasses as j}from"./styles.js";import{fieldSpotlightSlot as C,glowClasses as k,trackPointer as z}from"./glow.js";import{useFieldsetDisabled as I}from"./fieldset.js";export function popupSlots(e,n){return{...$(e,n),"--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)`}}const O=["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,p,b,x].join(" ");export const pickerPopupClasses=[P,"border bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",N].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:p="outline",size:b="md",color:x="primary",density:N="default",elevation:P=0,label:j,description:q,error:F,invalid:R,startIcon:S,fullWidth:D=!1,disabled:E,readOnly:L=!1,required:B=!1,id:M,className:T,style:V,display:W,samples:A,empty:G,clearable:H=!1,onClear:J,open:K,onOpenChange:Q,clearLabel:U,hiddenValues:X,sideOffset:Y=6,popupClassName:Z,children:_,triggerRef:ee,...ne}){const le=I(E),ie=l.useId(),ae=M??`${ie}-trigger`,te=`${ie}-label`,re=`${ie}-description`,oe=`${ie}-error`,se=null!=F&&!1!==F&&""!==F,de=R??se,ce=de?"danger":x,pe=le||L,ue=d(q?re:null,se?oe:null)||void 0;return n(i.Root,{disabled:le,invalid:de,className:d("relative flex-col align-top",w[b],D?"flex w-full":"inline-flex",T),style:{...$(ce,P),...pe?void 0:C,...V},...ne,children:[j?e(i.Label,{id:te,htmlFor:ae,className:d(v[b],"font-medium",le?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:j}):null,n(a.Root,{open:K,onOpenChange:e=>Q(e),children:[n("span",{onPointerMove:z(void 0,!pe),className:d(O,u[b],s[b],y[b],h[b],g[N][b],le?c[p]:L?m[p]:`${f[p]} ${k}`),children:[n(a.Trigger,{id:ae,ref:ee,disabled:le,"aria-labelledby":j?`${te} ${ae}`:void 0,"aria-describedby":ue,"aria-required":B||void 0,"aria-invalid":de||void 0,className:d("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",h[b],"[outline:none]",pe?"cursor-default":"cursor-pointer"),children:[S?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)",children:S}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:d("w-full truncate",G?"text-(--neba-muted-fg)":"text-(--neba-fg)"),children:W}),e(r,{samples:A??[]})]})]}),!H||G||pe?null:e("button",{type:"button","aria-label":U,className:d(o,"text-(--neba-muted-fg)"),onClick:e=>{e.stopPropagation(),J()},children:e(t,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:Y,align:"start",children:e(a.Popup,{initialFocus:!1,className:d(pickerPopupClasses,y[b],popupPaddingClasses[b],s[b],Z),style:popupSlots(ce,3),children:_})})})]}),q?e(i.Description,{id:re,className:d(v[b],"text-(--neba-muted-fg)"),children:q}):null,se?e(i.Error,{id:oe,match:!0,className:d(v[b],"text-(--n-accent)"),children:F}):null,X?.map((n,l)=>e("input",{type:"hidden",name:n.name,value:n.value,disabled:le},l)),B&&!pe?e("input",{"aria-hidden":"true",tabIndex:-1,required:!0,value:G?"":"chosen",onChange:()=>{},onInvalid:()=>document.getElementById(ae)?.focus(),className:"pointer-events-none absolute start-0 bottom-0 size-px overflow-hidden opacity-0 [clip-path:inset(50%)]"}):null]})}export function PickerFooter({size:n,children:l}){return e("div",{className:d("flex items-center justify-end border-t pt-1.5","[border-color:var(--n-line)]",h[n]),children:l})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--n-line)"})}
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{Field as n}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{CloseIcon as i}from"./icons.js";import{WidthSizer as r}from"./sizer.js";import{chipRemoveClasses as o,controlTextLeadingClasses as s,cx as d,disabledClasses as c,fieldFocusTransitionClasses as p,fieldHeightClasses as u,fieldReadOnlyClasses as m,fieldRestClasses as f,fieldRingClasses as b,fieldSheetClasses as h,fieldSheetDisabledClasses as v,fieldSheetReadOnlyClasses as x,gapClasses as g,hasContent as y,iconClasses as N,metaTextClasses as $,paddingXClasses as P,popupFadeClasses as j,radiusClasses as w,readOnlyFilterClasses as C,stackGapClasses as k,surfaceClasses as z,surfaceSlots as I,transitionClasses as O}from"./styles.js";import{fieldSpotlightSlot as F,glowClasses as q,trackPointer as R}from"./glow.js";import{useFieldsetDisabled as S}from"./fieldset.js";import{FieldNotch as D,NotchFrame as E}from"./notch.js";export function popupSlots(e,l){return{...I(e,l),"--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)`}}const L=["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",O,p,N].join(" ");export const pickerPopupClasses=[z,"border bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",j].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:p="outline",size:N="md",color:j="primary",density:z="default",elevation:O=0,label:B,labelPlacement:M="top",description:T,error:V,invalid:W,startIcon:A,fullWidth:G=!1,disabled:H,readOnly:J=!1,required:K=!1,id:Q,className:U,style:X,display:Y,samples:Z,empty:_,clearable:ee=!1,onClear:le,open:ae,onOpenChange:ne,clearLabel:te,hiddenValues:ie,sideOffset:re=6,popupClassName:oe,children:se,triggerRef:de,...ce}){const pe=S(H),ue=a.useId(),me=Q??`${ue}-trigger`,fe=`${ue}-label`,be=`${ue}-description`,he=`${ue}-error`,ve=null!=V&&!1!==V&&""!==V,xe=W??ve,ge=xe?"danger":j,ye=pe||J,Ne=d(T?be:null,ve?he:null)||void 0,$e="top"!==M&&y(B),Pe=$e&&"float"===M&&!y(A),je=l("span",{onPointerMove:R(void 0,!ye),className:d(L,u[N],s[N],w[N],g[N],P[z][N],$e?"":b,pe?($e?v:c)[p]:J?$e?`${x[p]} ${C}`:m[p]:`${($e?h:f)[p]} ${q}`),children:[l(t.Trigger,{id:me,ref:de,disabled:pe,"aria-labelledby":B?`${fe} ${me}`:void 0,"aria-describedby":Ne,"aria-required":K||void 0,"aria-invalid":xe||void 0,"data-placeholder":_||void 0,className:d("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",g[N],"[outline:none]",ye?"cursor-default":"cursor-pointer",Pe?"neba-float-control":""),children:[A?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)",children:A}):null,l("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{"data-placeholder":_||void 0,className:d("w-full truncate",_?"text-(--neba-muted-fg)":"text-(--neba-fg)"),children:Y}),e(r,{samples:Pe?[...Z??[],B]:Z??[]})]})]}),!ee||_||ye?null:e("button",{type:"button","aria-label":te,className:d(o,"text-(--neba-muted-fg)"),onClick:e=>{e.stopPropagation(),le()},children:e(i,{})}),$e?e(D,{label:B,variant:p,disabled:pe,readOnly:J,rests:Pe,labelId:fe,htmlFor:me}):null]});return l(n.Root,{disabled:pe,invalid:xe,className:d("relative flex-col align-top",k[N],G?"flex w-full":"inline-flex",U),style:{...I(ge,O),...ye?void 0:F,...X},...ce,children:[B&&!$e?e(n.Label,{id:fe,htmlFor:me,className:d($[N],"font-medium",pe?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:B}):null,l(t.Root,{open:ae,onOpenChange:e=>ne(e),children:[$e?e(E,{label:B,size:N,density:z,variant:p,children:je}):je,e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:re,align:"start",children:e(t.Popup,{initialFocus:!1,className:d(pickerPopupClasses,w[N],popupPaddingClasses[N],s[N],oe),style:popupSlots(ge,3),children:se})})})]}),T?e(n.Description,{id:be,className:d($[N],"text-(--neba-muted-fg)"),children:T}):null,ve?e(n.Error,{id:he,match:!0,className:d($[N],"text-(--n-accent)"),children:V}):null,ie?.map((l,a)=>e("input",{type:"hidden",name:l.name,value:l.value,disabled:pe},a)),K&&!ye?e("input",{"aria-hidden":"true",tabIndex:-1,required:!0,value:_?"":"chosen",onChange:()=>{},onInvalid:()=>document.getElementById(me)?.focus(),className:"pointer-events-none absolute start-0 bottom-0 size-px overflow-hidden opacity-0 [clip-path:inset(50%)]"}):null]})}export function PickerFooter({size:l,children:a}){return e("div",{className:d("flex items-center justify-end border-t pt-1.5","[border-color:var(--n-line)]",g[l]),children:a})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--n-line)"})}

package/dist/internal/styles.d.ts

@@ -547,6 +547,30 @@ export declare const fieldReadOnlyClasses: Record<NebaVariant, string>;
  * you click; a read-only field is still something you select text out of.
  */
 export declare const readOnlyFilterClasses = "[filter:saturate(0.55)]";
+/**
+ * The field shells again with the edge taken off, for a field whose label
+ * stands on that edge — a `labelPlacement` of `notch` or `float`.
+ *
+ * The label needs a gap in the border, in the plate's top light and in the
+ * focus ring at once, and none of the three can be cut; `internal/notch.tsx`
+ * draws all of them instead, in pieces around the label. What the shell keeps
+ * is the sheet: the fill and its hover and focus steps, the blur and the grain,
+ * and the elevation, which is a shadow under the shell rather than a line along
+ * its edge.
+ *
+ * `outline` keeps its `border` and makes it transparent, so the box is the size
+ * it is with the label on top and nothing inside it moves between the two.
+ */
+export declare const fieldSheetClasses: Record<NebaVariant, string>;
+/**
+ * `fieldReadOnlyClasses` without the edge, and without the desaturation: that
+ * goes on whichever element holds the notch, with `readOnlyFilterClasses`, so
+ * the edge drains with the sheet. It is the shell on every field but a Select,
+ * whose notch sits beside its trigger rather than in it.
+ */
+export declare const fieldSheetReadOnlyClasses: Record<NebaVariant, string>;
+/** `disabledClasses` without the edge. Only `outline` draws one to take off. */
+export declare const fieldSheetDisabledClasses: Record<NebaVariant, string>;
 /**
  * The numbered square a source is cited by.
  *

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 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 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 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,n){const t="solid"===n;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":t?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":t?"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)"].join(" "),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)]"].join(" "),text:["text-(--neba-fg) bg-transparent","hover:bg-(--n-soft)","focus-within:bg-(--n-soft-hover)","focus-within:hover:bg-(--n-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:[surfaceClasses,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]"].join(" "),outline:[surfaceClasses,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]"].join(" "),text:"text-(--neba-fg) bg-transparent [filter:saturate(0.55)]"};export const readOnlyFilterClasses="[filter:saturate(0.55)]";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 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,t){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 t.percentOf*a/100;case"em":return a*n(t.relativeTo);default:return a*n("undefined"==typeof document?null:document.documentElement)}}function n(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 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 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 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,n){const t="solid"===n;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":t?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":t?"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)"].join(" "),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)]"].join(" "),text:["text-(--neba-fg) bg-transparent","hover:bg-(--n-soft)","focus-within:bg-(--n-soft-hover)","focus-within:hover:bg-(--n-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:[surfaceClasses,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]"].join(" "),outline:[surfaceClasses,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]"].join(" "),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 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,t){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 t.percentOf*a/100;case"em":return a*n(t.relativeTo);default:return a*n("undefined"==typeof document?null:document.documentElement)}}function n(e){return e&&"undefined"!=typeof getComputedStyle&&parseFloat(getComputedStyle(e).fontSize)||16}export function cx(...e){return e.filter(Boolean).join(" ")}