neba 1.9.0 → 1.10.0

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,12 +1,19 @@
 import * as React from 'react';
 import { Checkbox as BaseUICheckbox } from '@base-ui/react/checkbox';
-import type { NebaColor, NebaSize } from '../../types.js';
+import type { NebaColor, NebaFieldSlot, NebaSize, NebaSlots } from '../../types.js';
 /**
  * Base UI's own props, minus the ones this component owns: `className` and
  * `style` land on the field wrapper rather than on the tick, and `render` would
  * replace the tick with something that is no longer a checkbox.
  */
 type BaseCheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUICheckbox.Root>, 'className' | 'style' | 'render' | 'children'>;
+/**
+ * The parts a Checkbox draws behind its root.
+ *
+ * `control` is the tick itself — the bordered box that fills when checked — and
+ * `indicator` is the mark inside it.
+ */
+export type CheckboxSlot = NebaFieldSlot | 'indicator';
 export interface CheckboxProps extends BaseCheckboxProps {
     /** @default 'md' */
     size?: NebaSize;
@@ -25,6 +32,11 @@ export interface CheckboxProps extends BaseCheckboxProps {
     invalid?: boolean;
     /** Class names for the field wrapper, not for the tick itself. */
     className?: string;
+    /**
+     * Class names for the parts behind that wrapper — the tick is
+     * `classNames.control`.
+     */
+    classNames?: NebaSlots<CheckboxSlot>;
     style?: React.CSSProperties;
 }
 /**

package/dist/components/checkbox/Checkbox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Checkbox as r}from"@base-ui/react/checkbox";import{Field as i}from"@base-ui/react/field";import{controlTextClasses as t,cx as l,hitAreaClasses as o,metaTextClasses as s,surfaceClasses as c,tickRadiusClasses as d,tickRowLeadingClasses as b,tickSizeClasses as h,transitionClasses as f}from"../../internal/styles.js";const m=["relative inline-flex shrink-0 items-center justify-center border",o,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),u=[c,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)","data-[indeterminate]:bg-(--n-fill) data-[indeterminate]:text-(--n-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),v=[c,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),p=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)]","text-(--neba-disabled-fg) shadow-none","data-[checked]:bg-(--neba-disabled-bg)","data-[indeterminate]:bg-(--neba-disabled-bg)"].join(" ");function g(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function x(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const Checkbox=/*@__PURE__*/a.forwardRef(function({size:a="md",color:o="primary",label:c,description:f,error:k,invalid:j,disabled:N=!1,readOnly:$=!1,className:y,style:w,...z},C){const L=null!=k&&!1!==k&&""!==k,R=j??L,B=R?"danger":o,M={"--n-fill":`var(--neba-${B}-fill)`,"--n-fill-hover":`var(--neba-${B}-fill-hover)`,"--n-on-solid":`var(--neba-${B}-on-solid)`,"--n-accent":`var(--neba-${B}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${B}-line)`,"--n-line-hover":`var(--neba-${B}-line-hover)`,"--n-ring":`var(--neba-${B}-ring)`},O=[m,h[a],d[a],N?p:$?v:u].join(" ");return n(i.Root,{disabled:N,invalid:R,className:l("inline-flex flex-col gap-1 align-top",y??""),style:{...M,...w},children:[n("div",{className:`flex items-start gap-2 ${t[a]} ${b}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(r.Root,{ref:C,className:O,disabled:N,readOnly:$,...z,children:e(r.Indicator,{className:"flex size-[70%] items-center justify-center",children:z.indeterminate?e(x,{}):e(g,{})})})}),c||f?n("span",{className:"flex min-w-0 flex-col gap-0.5",children:[c?e(i.Label,{className:["leading-[1.4]",N?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:c}):null,f?e(i.Description,{className:`${s[a]} text-(--neba-muted-fg)`,children:f}):null]}):null]}),e(i.Error,L?{match:!0,className:`${s[a]} text-(--n-accent)`,children:k}:{className:`${s[a]} text-(--n-accent)`})]})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{Checkbox as a}from"@base-ui/react/checkbox";import{Field as i}from"@base-ui/react/field";import{controlTextClasses as t,cx as l,hitAreaClasses as o,metaTextClasses as s,surfaceClasses as c,tickRadiusClasses as d,tickRowLeadingClasses as b,tickSizeClasses as h,transitionClasses as f}from"../../internal/styles.js";const m=["relative inline-flex shrink-0 items-center justify-center border",o,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),u=[c,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)","data-[indeterminate]:bg-(--n-fill) data-[indeterminate]:text-(--n-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),p=[c,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),v=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)]","text-(--neba-disabled-fg) shadow-none","data-[checked]:bg-(--neba-disabled-bg)","data-[indeterminate]:bg-(--neba-disabled-bg)"].join(" ");function g(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function x(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const Checkbox=/*@__PURE__*/r.forwardRef(function({size:r="md",color:o="primary",label:c,description:f,error:k,invalid:N,disabled:j=!1,readOnly:$=!1,className:y,classNames:w,style:z,...C},L){const R=null!=k&&!1!==k&&""!==k,B=N??R,M=B?"danger":o,O={"--n-fill":`var(--neba-${M}-fill)`,"--n-fill-hover":`var(--neba-${M}-fill-hover)`,"--n-on-solid":`var(--neba-${M}-on-solid)`,"--n-accent":`var(--neba-${M}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${M}-line)`,"--n-line-hover":`var(--neba-${M}-line-hover)`,"--n-ring":`var(--neba-${M}-ring)`},W=[m,h[r],d[r],j?v:$?p:u].join(" ");return n(i.Root,{disabled:j,invalid:B,className:l("inline-flex flex-col gap-1 align-top",y??""),style:{...O,...z},children:[n("div",{className:`flex items-start gap-2 ${t[r]} ${b}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(a.Root,{ref:L,className:l(W,w?.control),disabled:j,readOnly:$,...C,children:e(a.Indicator,{className:l("flex size-[70%] items-center justify-center",w?.indicator),children:C.indeterminate?e(x,{}):e(g,{})})})}),c||f?n("span",{className:"flex min-w-0 flex-col gap-0.5",children:[c?e(i.Label,{className:l("leading-[1.4]",j?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",w?.label),children:c}):null,f?e(i.Description,{className:l(s[r],"text-(--neba-muted-fg)",w?.description),children:f}):null]}):null]}),e(i.Error,R?{match:!0,className:l(s[r],"text-(--n-accent)",w?.error),children:k}:{className:l(s[r],"text-(--n-accent)",w?.error)})]})});

package/dist/components/combobox/Combobox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
 /**
  * What a Combobox's value may be — the same two types a [Select](../select)
  * submits, and for the same reason: a form control's value is what a form
@@ -25,6 +25,15 @@ export interface ComboboxOption {
 }
 /** One value, or an array of them, depending on `multiple`. */
 type Selection<Multiple extends boolean | undefined> = Multiple extends true ? ComboboxValue[] : ComboboxValue | null;
+/**
+ * The parts a Combobox draws behind its root.
+ *
+ * `shell` is the framed box, `control` the `<input>` the reader types into, and
+ * `chip` one of the tokens a multiple-selection combobox puts in front of it.
+ * `popup` and `item` are portalled, so nothing written against the root reaches
+ * them.
+ */
+export type ComboboxSlot = NebaFieldSlot | 'shell' | 'chip' | 'popup' | 'item';
 export interface ComboboxProps<Multiple extends boolean | undefined = false> extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
     /**
      * The options, as data — the same shape Select takes, and for the same
@@ -120,6 +129,12 @@ export interface ComboboxProps<Multiple extends boolean | undefined = false> ext
     /** A ref to the text input the user types into. */
     inputRef?: React.Ref<HTMLInputElement>;
     id?: string;
+    /**
+     * Class names for the parts behind the root. `className` is the root — the
+     * column holding the label, the shell and the two lines under it — so the
+     * `<input>` itself is `classNames.control`.
+     */
+    classNames?: NebaSlots<ComboboxSlot>;
 }
 /**
  * A field you can type into and also choose from.
@@ -139,5 +154,5 @@ export interface ComboboxProps<Multiple extends boolean | undefined = false> ext
  * navigation across both the list and the chips, and the hidden input that
  * makes the whole thing submit with a form.
  */
-export declare function Combobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, locale, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, clearLabel, removeLabel, inputRef, id, className, style, ...props }: ComboboxProps<Multiple>): React.JSX.Element;
+export declare function Combobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, locale, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, clearLabel, removeLabel, inputRef, id, className, classNames, style, ...props }: ComboboxProps<Multiple>): React.JSX.Element;
 export {};

package/dist/components/combobox/Combobox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip.js";import{actionMessages as r,comboboxMessages as s,fillMessage as o,useMessages as c}from"../../internal/i18n.js";import{CheckIcon as d,ChevronIcon as m,CloseIcon as u,PlusIcon as p}from"../../internal/icons.js";import{chipRemoveClasses as h,controlHeightClasses as b,controlTextLeadingClasses as f,cx as g,disabledClasses as x,fieldReadOnlyClasses as v,fieldRestClasses as y,focusWithinRingClasses as w,gapClasses as N,hasContent as C,iconClasses as j,metaTextClasses as L,paddingXClasses as $,radiusClasses as I,stackGapClasses as S,surfaceClasses as O,surfaceSlots as V,transitionClasses as _}from"../../internal/styles.js";const z=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",_,"focus-within:[transition-duration:0ms]",w,j].join(" "),A={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},M=[O,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),k=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",_,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" "),R=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function T(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox({variant:w="outline",size:j="md",color:O="primary",density:_="default",elevation:q=0,items:E,multiple:F,value:P,defaultValue:D,onValueChange:G,onInputValueChange:H,allowCustom:W=!0,customLabel:B,clearable:J=!1,locale:K,emptyMessage:Q,limit:U,placeholder:X,label:Y,description:Z,error:ee,invalid:ae,startIcon:le,fullWidth:te=!1,disabled:ne=!1,readOnly:ie=!1,required:re=!1,name:se,open:oe,defaultOpen:ce,onOpenChange:de,clearLabel:me,removeLabel:ue,inputRef:pe,id:he,className:be,style:fe,...ge}){const xe=c(s,K),ve=c(r,K),ye=ue??(e=>o(xe.remove,{label:e})),we=C(ee),Ne=ae??we,Ce=Ne?"danger":O,je=!0===F,Le=l.useMemo(()=>E.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[E]),[$e,Ie]=l.useState(()=>T(D)),Se=void 0===P?$e:T(P),[Oe,Ve]=l.useState(""),_e=l.useMemo(()=>new Map(Le.map(e=>[e.value,e])),[Le]),ze=l.useCallback(e=>_e.get(e)??{value:e,label:String(e),custom:!0},[_e]),Ae=Oe.trim(),Me=Ae.toLocaleLowerCase(),ke=""===Ae||Le.some(e=>e.label.toLocaleLowerCase()===Me||String(e.value).toLocaleLowerCase()===Me)||Se.some(e=>String(e).toLocaleLowerCase()===Me),Re=!W||ie||ne||ke?null:Ae,Te=l.useMemo(()=>null===Re?Le:[...Le,{value:Re,label:Re,custom:!0}],[Le,Re]),qe=je?Se.map(ze):Se.length>0?ze(Se[0]):null;const Ee=$[_][j],Fe=[z,f[j],I[j],N[j],je?A[j]:b[j],`${Ee} pe-1.5`,ne?x[w]:ie?v[w]:y[w]].join(" "),Pe=["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].join(" "),De=a=>e(t.Input,{ref:pe,placeholder:X,className:je?`${Pe} min-w-16 ${a?"ms-1.5":""}`:Pe});return a(n.Root,{disabled:ne,invalid:Ne,className:g("flex-col align-top",S[j],te?"flex w-full":"inline-flex",be??""),style:{...V(Ce,q),...fe},...ge,children:[Y?e(n.Label,{className:[L[j],"font-medium",ne?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:Y}):null,a(t.Root,{id:he,name:se,items:Te,multiple:je,value:qe,onValueChange:e=>{!function(e){void 0===P&&Ie(e),G?.(je?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Ve(e),H?.(e)},open:oe,defaultOpen:ce,onOpenChange:e=>de?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:U,disabled:ne,readOnly:ie,required:re,children:[a(t.InputGroup,{className:Fe,children:[le?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:le}):null,je?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:n=>a(l.Fragment,{children:[n.map(a=>e(t.Chip,{render:e(i,{variant:"outline",size:j,color:Ce,density:"compact",disabled:ne,endIcon:ie||ne?null:e(t.ChipRemove,{"aria-label":ye(a.label),className:h,children:e(u,{})})}),children:a.label},String(a.value))),De(n.length>0)]})})}):De(!1),J&&!ie?e(t.Clear,{"aria-label":me??ve.clear,className:R,children:e(u,{})}):null,e(t.Trigger,{"aria-label":"string"==typeof Y?void 0:"Open",className:R,children:e(t.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(m,{})})})]}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,children:a(t.Popup,{className:`${M} ${I[j]} ${f[j]}`,style:V(Ce,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:Q??xe.empty}),e(t.List,{children:n=>e(t.Item,{value:n,disabled:n.disabled,className:k,children:n.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(p,{})}),e("span",{className:"truncate",children:B?B(n.label):`Add “${n.label}”`})]}):a(l.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(d,{})}),e("span",{className:"truncate",children:n.label})]})},`${n.custom?"custom:":""}${String(n.value)}`)})]})})})]}),Z?e(n.Description,{className:`${L[j]} text-(--neba-muted-fg)`,children:Z}):null,e(n.Error,we?{match:!0,className:`${L[j]} text-(--n-accent)`,children:ee}:{className:`${L[j]} text-(--n-accent)`})]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip.js";import{actionMessages as r,comboboxMessages as s,fillMessage as o,useMessages as c}from"../../internal/i18n.js";import{CheckIcon as d,ChevronIcon as m,CloseIcon as u,PlusIcon as p}from"../../internal/icons.js";import{chipRemoveClasses as h,controlHeightClasses as b,controlTextLeadingClasses as f,cx as g,disabledClasses as x,fieldReadOnlyClasses as v,fieldRestClasses as y,focusWithinRingClasses as N,gapClasses as w,hasContent as C,iconClasses as j,metaTextClasses as L,paddingXClasses as I,radiusClasses as S,stackGapClasses as O,surfaceClasses as V,surfaceSlots as _,transitionClasses as z}from"../../internal/styles.js";const $=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",z,"focus-within:[transition-duration:0ms]",N,j].join(" "),A={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},M=[V,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),k=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",z,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" "),R=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function T(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox({variant:N="outline",size:j="md",color:V="primary",density:z="default",elevation:q=0,items:E,multiple:F,value:P,defaultValue:B,onValueChange:D,onInputValueChange:G,allowCustom:H=!0,customLabel:W,clearable:J=!1,locale:K,emptyMessage:Q,limit:U,placeholder:X,label:Y,description:Z,error:ee,invalid:ae,startIcon:le,fullWidth:te=!1,disabled:ne=!1,readOnly:ie=!1,required:re=!1,name:se,open:oe,defaultOpen:ce,onOpenChange:de,clearLabel:me,removeLabel:ue,inputRef:pe,id:he,className:be,classNames:fe,style:ge,...xe}){const ve=c(s,K),ye=c(r,K),Ne=ue??(e=>o(ve.remove,{label:e})),we=C(ee),Ce=ae??we,je=Ce?"danger":V,Le=!0===F,Ie=l.useMemo(()=>E.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[E]),[Se,Oe]=l.useState(()=>T(B)),Ve=void 0===P?Se:T(P),[_e,ze]=l.useState(""),$e=l.useMemo(()=>new Map(Ie.map(e=>[e.value,e])),[Ie]),Ae=l.useCallback(e=>$e.get(e)??{value:e,label:String(e),custom:!0},[$e]),Me=_e.trim(),ke=Me.toLocaleLowerCase(),Re=""===Me||Ie.some(e=>e.label.toLocaleLowerCase()===ke||String(e.value).toLocaleLowerCase()===ke)||Ve.some(e=>String(e).toLocaleLowerCase()===ke),Te=!H||ie||ne||Re?null:Me,qe=l.useMemo(()=>null===Te?Ie:[...Ie,{value:Te,label:Te,custom:!0}],[Ie,Te]),Ee=Le?Ve.map(Ae):Ve.length>0?Ae(Ve[0]):null;const Fe=I[z][j],Pe=[$,f[j],S[j],w[j],Le?A[j]:b[j],`${Fe} pe-1.5`,ne?x[N]:ie?v[N]:y[N],fe?.shell].filter(Boolean).join(" "),Be=["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",fe?.control].filter(Boolean).join(" "),De=a=>e(t.Input,{ref:pe,placeholder:X,className:Le?`${Be} min-w-16 ${a?"ms-1.5":""}`:Be});return a(n.Root,{disabled:ne,invalid:Ce,className:g("flex-col align-top",O[j],te?"flex w-full":"inline-flex",be??""),style:{..._(je,q),...ge},...xe,children:[Y?e(n.Label,{className:g(L[j],"font-medium",ne?"text-(--neba-disabled-fg)":"text-(--neba-fg)",fe?.label),children:Y}):null,a(t.Root,{id:he,name:se,items:qe,multiple:Le,value:Ee,onValueChange:e=>{!function(e){void 0===P&&Oe(e),D?.(Le?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{ze(e),G?.(e)},open:oe,defaultOpen:ce,onOpenChange:e=>de?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:U,disabled:ne,readOnly:ie,required:re,children:[a(t.InputGroup,{className:Pe,children:[le?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:le}):null,Le?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:n=>a(l.Fragment,{children:[n.map(a=>e(t.Chip,{render:e(i,{variant:"outline",size:j,color:je,density:"compact",disabled:ne,className:fe?.chip,endIcon:ie||ne?null:e(t.ChipRemove,{"aria-label":Ne(a.label),className:h,children:e(u,{})})}),children:a.label},String(a.value))),De(n.length>0)]})})}):De(!1),J&&!ie?e(t.Clear,{"aria-label":me??ye.clear,className:R,children:e(u,{})}):null,e(t.Trigger,{"aria-label":"string"==typeof Y?void 0:"Open",className:R,children:e(t.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(m,{})})})]}),e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,children:a(t.Popup,{className:g(M,S[j],f[j],fe?.popup),style:_(je,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:Q??ve.empty}),e(t.List,{children:n=>e(t.Item,{value:n,disabled:n.disabled,className:g(k,fe?.item),children:n.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(p,{})}),e("span",{className:"truncate",children:W?W(n.label):`Add “${n.label}”`})]}):a(l.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(d,{})}),e("span",{className:"truncate",children:n.label})]})},`${n.custom?"custom:":""}${String(n.value)}`)})]})})})]}),Z?e(n.Description,{className:g(L[j],"text-(--neba-muted-fg)",fe?.description),children:Z}):null,e(n.Error,we?{match:!0,className:g(L[j],"text-(--n-accent)",fe?.error),children:ee}:{className:g(L[j],"text-(--n-accent)",fe?.error)})]})}

package/dist/components/command-palette/CommandPalette.d.ts

@@ -1,5 +1,15 @@
 import * as React from 'react';
-import type { NebaStyleProps } from '../../types.js';
+import type { NebaSlots, NebaStyleProps } from '../../types.js';
+/**
+ * The parts a CommandPalette draws around its sheet.
+ *
+ * `className` is the sheet — the panel the search field and the rows sit on.
+ * `backdrop` and `viewport` render outside it and have no other way in.
+ *
+ * `group` is one heading between the rows, not the rows under it: a group is
+ * named by its first item's `group`, and the rows themselves are `item`.
+ */
+export type CommandPaletteSlot = 'backdrop' | 'viewport' | 'input' | 'list' | 'group' | 'item' | 'empty';
 /** One thing the palette can do. */
 export interface CommandItem {
     /** What identifies the command. */
@@ -69,6 +79,13 @@ export interface CommandPaletteProps extends Pick<NebaStyleProps, 'size' | 'colo
     emptyMessage?: React.ReactNode;
     /** The accessible name of the dialog, which has no visible title. */
     label?: string;
+    /** Class names for the sheet. */
+    className?: string;
+    /**
+     * Class names for the parts around it. `className` is the sheet, so the scrim
+     * behind it is `classNames.backdrop`.
+     */
+    classNames?: NebaSlots<CommandPaletteSlot>;
 }
 /**
  * Everything an application can do, behind one field.
@@ -85,4 +102,4 @@ export interface CommandPaletteProps extends Pick<NebaStyleProps, 'size' | 'colo
  * its Dialog owns the sheet, the scrim, the focus trap and returning the focus
  * to wherever the reader was.
  */
-export declare function CommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, locale, placeholder, emptyMessage, label, size, color, density }: CommandPaletteProps): React.JSX.Element;
+export declare function CommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, locale, placeholder, emptyMessage, label, size, color, density, className, classNames }: CommandPaletteProps): React.JSX.Element;

package/dist/components/command-palette/CommandPalette.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as l}from"@base-ui/react/dialog";import{Shortcut as r}from"../shortcut/Shortcut.js";import{commandMessages as o,useMessages as s}from"../../internal/i18n.js";import{searchHaystack as i,searchText as c}from"../../internal/search.js";import{controlTextLeadingClasses as d,cx as m,hasContent as p,metaTextClasses as u,radiusClasses as h,surfaceClasses as x,surfaceSlots as f,toLength as b}from"../../internal/styles.js";const g=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y=[x,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},w={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},N={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},j={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},k=["flex cursor-pointer items-center gap-3 select-none","[transition:background-color_var(--neba-duration)_var(--neba-ease)]","data-[highlighted]:bg-(--n-soft) data-[highlighted]:text-(--n-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)"].join(" ");function C(e){return i([e.label,e.group,...e.keywords??[]])}export function CommandPalette({items:i,open:x,defaultOpen:K=!1,onOpenChange:S,onSelect:$,shortcut:_="Mod+K",width:z,maxHeight:L=320,locale:E,placeholder:M,emptyMessage:O,label:P,size:V="md",color:D="primary",density:F="default"}){const H=s(o,E),[I,R]=a.useState(K),[A,B]=a.useState(""),T=x??I,W=a.useCallback(e=>{void 0===x&&R(e),S?.(e)},[x,S]);a.useEffect(()=>{if(!1===_)return;const e=e=>{(function(e,t){const a=t.toLowerCase().split("+"),n=a[a.length-1],l=new Set(a.slice(0,-1)),r=/mac|iphone|ipad/i.test("undefined"==typeof navigator?"":navigator.platform||navigator.userAgent)?e.metaKey:e.ctrlKey;return!(l.has("mod")!==r||l.has("shift")!==e.shiftKey||l.has("alt")!==e.altKey||!l.has("mod")&&l.has("ctrl")!==e.ctrlKey||!l.has("mod")&&l.has("meta")!==e.metaKey||e.key.toLowerCase()!==n)})(e,_)&&(e.preventDefault(),W(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[_,W]);const q=a.useMemo(()=>i.map(C),[i]),G=a.useMemo(()=>{const e=c(A);return""===e?i:i.filter((t,a)=>q[a].includes(e))},[i,q,A]),J=b(z),Q=b(L);return e(l.Root,{open:T,onOpenChange:e=>{e||B(""),W(e)},children:t(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${g}`}),e(l.Viewport,{className:"neba-portal fixed inset-0 z-50 flex justify-center p-4 pt-[12vh]",children:e(l.Popup,{"aria-label":P??H.label,className:m(y,h[V],d[V],void 0===J?v[V]:"","self-start"),style:{...f(D,3),...void 0===J?null:{maxWidth:J}},children:t(n.Root,{open:!0,mode:"list",items:G,filter:null,value:A,onValueChange:e=>B(e),itemToStringValue:e=>e.label,children:[e("div",{className:`flex shrink-0 items-center border-b [border-color:var(--n-line)] ${j[V]}`,children:e(n.Input,{autoFocus:!0,placeholder:M??H.search,className:["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit [outline:none]","placeholder:text-(--neba-muted-fg) caret-(--n-accent)",w[V]].join(" ")})}),e(n.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:Q},children:(l,o)=>t(a.Fragment,{children:[l.group&&l.group!==G[o-1]?.group?e("div",{role:"presentation",className:`${j[V]} pt-2 pb-1 font-medium text-(--neba-muted-fg) ${u[V]}`,children:l.group}):null,t(n.Item,{index:o,value:l,disabled:l.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),$?.(e),W(!1))})(l),className:[k,h[V],j[V],N["compact"===F?"xs":V]].join(" "),children:[p(l.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:l.icon}):null,t("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:l.label}),p(l.description)?e("span",{className:`truncate text-(--neba-muted-fg) ${u[V]}`,children:l.description}):null]}),l.shortcut?e(r,{size:"xs",keys:l.shortcut,className:"shrink-0"}):null]})]},l.value)}),e(n.Empty,{className:`${j[V]} py-6 text-center text-(--neba-muted-fg) ${u[V]}`,children:O??H.empty})]})})})]})})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as l}from"@base-ui/react/dialog";import{Shortcut as r}from"../shortcut/Shortcut.js";import{commandMessages as s,useMessages as o}from"../../internal/i18n.js";import{searchHaystack as i,searchText as c}from"../../internal/search.js";import{controlTextLeadingClasses as d,cx as m,hasContent as p,metaTextClasses as u,radiusClasses as h,surfaceClasses as x,surfaceSlots as f,toLength as b}from"../../internal/styles.js";const g=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y=[x,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},w={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},N={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},k={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},j=["flex cursor-pointer items-center gap-3 select-none","[transition:background-color_var(--neba-duration)_var(--neba-ease)]","data-[highlighted]:bg-(--n-soft) data-[highlighted]:text-(--n-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)"].join(" ");function C(e){return i([e.label,e.group,...e.keywords??[]])}export function CommandPalette({items:i,open:x,defaultOpen:K=!1,onOpenChange:S,onSelect:_,shortcut:z="Mod+K",width:L,maxHeight:E=320,locale:M,placeholder:O,emptyMessage:P,label:V,size:D="md",color:F="primary",density:H="default",className:I,classNames:R}){const $=o(s,M),[A,B]=a.useState(K),[T,W]=a.useState(""),q=x??A,G=a.useCallback(e=>{void 0===x&&B(e),S?.(e)},[x,S]);a.useEffect(()=>{if(!1===z)return;const e=e=>{(function(e,t){const a=t.toLowerCase().split("+"),n=a[a.length-1],l=new Set(a.slice(0,-1)),r=/mac|iphone|ipad/i.test("undefined"==typeof navigator?"":navigator.platform||navigator.userAgent)?e.metaKey:e.ctrlKey;return!(l.has("mod")!==r||l.has("shift")!==e.shiftKey||l.has("alt")!==e.altKey||!l.has("mod")&&l.has("ctrl")!==e.ctrlKey||!l.has("mod")&&l.has("meta")!==e.metaKey||e.key.toLowerCase()!==n)})(e,z)&&(e.preventDefault(),G(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[z,G]);const J=a.useMemo(()=>i.map(C),[i]),Q=a.useMemo(()=>{const e=c(T);return""===e?i:i.filter((t,a)=>J[a].includes(e))},[i,J,T]),U=b(L),X=b(E);return e(l.Root,{open:q,onOpenChange:e=>{e||W(""),G(e)},children:t(l.Portal,{children:[e(l.Backdrop,{className:m("neba-portal",g,R?.backdrop)}),e(l.Viewport,{className:m("neba-portal fixed inset-0 z-50 flex justify-center p-4 pt-[12vh]",R?.viewport),children:e(l.Popup,{"aria-label":V??$.label,className:m(y,h[D],d[D],void 0===U?v[D]:"","self-start",I),style:{...f(F,3),...void 0===U?null:{maxWidth:U}},children:t(n.Root,{open:!0,mode:"list",items:Q,filter:null,value:T,onValueChange:e=>W(e),itemToStringValue:e=>e.label,children:[e("div",{className:`flex shrink-0 items-center border-b [border-color:var(--n-line)] ${k[D]}`,children:e(n.Input,{autoFocus:!0,placeholder:O??$.search,className:m("min-w-0 flex-1 bg-transparent [font:inherit] text-inherit [outline:none]","placeholder:text-(--neba-muted-fg) caret-(--n-accent)",w[D],R?.input)})}),e(n.List,{className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",R?.list),style:{maxHeight:X},children:(l,s)=>t(a.Fragment,{children:[l.group&&l.group!==Q[s-1]?.group?e("div",{role:"presentation",className:m(k[D],"pt-2 pb-1 font-medium text-(--neba-muted-fg)",u[D],R?.group),children:l.group}):null,t(n.Item,{index:s,value:l,disabled:l.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),_?.(e),G(!1))})(l),className:m(j,h[D],k[D],N["compact"===H?"xs":D],R?.item),children:[p(l.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:l.icon}):null,t("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:l.label}),p(l.description)?e("span",{className:`truncate text-(--neba-muted-fg) ${u[D]}`,children:l.description}):null]}),l.shortcut?e(r,{size:"xs",keys:l.shortcut,className:"shrink-0"}):null]})]},l.value)}),e(n.Empty,{className:m(k[D],"py-6 text-center text-(--neba-muted-fg)",u[D],R?.empty),children:P??$.empty})]})})})]})})}

package/dist/components/dialog/Dialog.d.ts

@@ -1,6 +1,18 @@
 import * as React from 'react';
 import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
-import type { NebaStyleProps } from '../../types.js';
+import type { NebaSlots, NebaStyleProps } from '../../types.js';
+/**
+ * The parts a Dialog draws around its popup.
+ *
+ * `className` is the popup — the sheet itself — which is the one element a
+ * caller means by "the dialog". Everything named here sits either outside it
+ * (`backdrop`, `viewport`) or inside it (the rest).
+ *
+ * The first two are the ones that could not be reached any other way: both
+ * render at the end of `<body>`, outside the popup, so no selector written
+ * against the sheet finds them.
+ */
+export type DialogSlot = 'backdrop' | 'viewport' | 'title' | 'description' | 'close' | 'body' | 'actions';
 /**
  * A dialog takes `size`, `color` and `density` and stops there.
  *
@@ -85,6 +97,11 @@ export interface DialogProps extends Pick<NebaStyleProps, 'size' | 'color' | 'de
      * @default true
      */
     dismissible?: boolean;
+    /**
+     * Class names for the parts around the popup. `className` is the popup — the
+     * sheet — so the scrim behind it is `classNames.backdrop`.
+     */
+    classNames?: NebaSlots<DialogSlot>;
     /** The body. */
     children?: React.ReactNode;
 }
@@ -114,4 +131,4 @@ export declare const DialogClose: React.ForwardRefExoticComponent<Omit<import("@
  * the header and the actions stay put while only the body scrolls, which is why
  * `dividers` matters more here than on a Card.
  */
-export declare function Dialog({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, locale, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, style, children, ...props }: DialogProps): React.JSX.Element;
+export declare function Dialog({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, locale, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: DialogProps): React.JSX.Element;

package/dist/components/dialog/Dialog.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as i}from"../box/Box.js";import{actionMessages as o,useMessages as r}from"../../internal/i18n.js";import{CloseIcon as s}from"../../internal/icons.js";import{cx as t,hasContent as c,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as u,sheetSectionGapClasses as p,sheetTitleClasses as x,surfaceClasses as b,surfaceSlots as h}from"../../internal/styles.js";const g={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},v=[b,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog({size:b="md",color:j="primary",density:$="default",open:_,defaultOpen:N,onOpenChange:k,trigger:C,title:z,description:D,actions:O,dividers:P=!1,showClose:B=!0,locale:T,closeLabel:W,width:L,fullWidth:R=!0,fullScreen:S=!1,modal:V=!0,dismissible:q=!0,className:A,style:E,children:F,...G}){const H=r(o,T),I=n[$][b],J=i[$][b],K=P?`${I} ${J}`:I,M=c(z)||c(D),Q=c(O);return a(l.Root,{open:_,defaultOpen:N,modal:V,disablePointerDismissal:!q,onOpenChange:(e,a)=>{q||e||"escape-key"!==a.reason?k?.(e):a.cancel()},children:[C?e(l.Trigger,{render:C}):null,a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${y}`}),e(l.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",S?"items-stretch":"items-center p-4"].join(" "),children:a(l.Popup,{className:t(v,f[b],S?"h-full max-w-none rounded-none":`max-h-full ${m[b]} ${void 0===L?g[b]:""}`,S||R?"":"w-auto",P?"":`${J} ${p[b]}`,A??""),style:{...h(j,3),...void 0===L?null:{maxWidth:"number"==typeof L?`${L}px`:L},...E},...G,children:[M||B?a("div",{className:`flex shrink-0 items-start gap-3 ${K}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${u[b]}`,children:[c(z)?e(l.Title,{className:`font-semibold ${x[b]} m-0`,children:z}):null,c(D)?e(l.Description,{className:`m-0 text-(--neba-muted-fg) ${d[b]}`,children:D}):null]}),B?e(l.Close,{"aria-label":W??H.close,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_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"].join(" "),children:e(s,{})}):null]}):null,c(F)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",K,P&&(M||B)?w:"",P?"":"py-1 -my-1"),children:F}):null,Q?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",K,P?w:""),children:O}):null]})})]})]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as i}from"../box/Box.js";import{actionMessages as o,useMessages as r}from"../../internal/i18n.js";import{CloseIcon as s}from"../../internal/icons.js";import{cx as t,hasContent as c,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as p,sheetHeaderGapClasses as f,sheetSectionGapClasses as u,sheetTitleClasses as b,surfaceClasses as x,surfaceSlots as h}from"../../internal/styles.js";const v={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},g=[x,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),y=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog({size:x="md",color:j="primary",density:N="default",open:_,defaultOpen:k,onOpenChange:$,trigger:C,title:z,description:D,actions:O,dividers:P=!1,showClose:B=!0,locale:T,closeLabel:W,width:L,fullWidth:R=!0,fullScreen:S=!1,modal:V=!0,dismissible:q=!0,className:A,classNames:E,style:F,children:G,...H}){const I=r(o,T),J=n[N][x],K=i[N][x],M=P?`${J} ${K}`:J,Q=c(z)||c(D),U=c(O);return a(l.Root,{open:_,defaultOpen:k,modal:V,disablePointerDismissal:!q,onOpenChange:(e,a)=>{q||e||"escape-key"!==a.reason?$?.(e):a.cancel()},children:[C?e(l.Trigger,{render:C}):null,a(l.Portal,{children:[e(l.Backdrop,{className:t("neba-portal",y,E?.backdrop)}),e(l.Viewport,{className:t("neba-portal fixed inset-0 z-50 flex justify-center",S?"items-stretch":"items-center p-4",E?.viewport),children:a(l.Popup,{className:t(g,p[x],S?"h-full max-w-none rounded-none":`max-h-full ${m[x]} ${void 0===L?v[x]:""}`,S||R?"":"w-auto",P?"":`${K} ${u[x]}`,A??""),style:{...h(j,3),...void 0===L?null:{maxWidth:"number"==typeof L?`${L}px`:L},...F},...H,children:[Q||B?a("div",{className:`flex shrink-0 items-start gap-3 ${M}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${f[x]}`,children:[c(z)?e(l.Title,{className:t("font-semibold",b[x],"m-0",E?.title),children:z}):null,c(D)?e(l.Description,{className:t("m-0 text-(--neba-muted-fg)",d[x],E?.description),children:D}):null]}),B?e(l.Close,{"aria-label":W??I.close,className:t("flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_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",E?.close),children:e(s,{})}):null]}):null,c(G)?e("div",{className:t("min-h-0 flex-1 overflow-y-auto overscroll-contain",M,P&&(Q||B)?w:"",P?"":"py-1 -my-1",E?.body),children:G}):null,U?e("div",{className:t("flex shrink-0 flex-wrap items-center justify-end gap-2",M,P?w:"",E?.actions),children:O}):null]})})]})]})}

package/dist/components/number-field/NumberField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *
@@ -14,6 +14,15 @@ import type { NebaElevation, NebaStyleProps } from '../../types.js';
  * nobody hits.
  */
 export type NumberFieldSteppers = 'end' | 'split' | 'none';
+/**
+ * The parts a NumberField draws behind its root.
+ *
+ * `shell` is the framed box, `control` the `<input>` inside it, and `stepper`
+ * both of the two buttons — they are one slot rather than an `increment` and a
+ * `decrement`, because a pair of steppers that do not match is not a thing
+ * anyone is trying to build.
+ */
+export type NumberFieldSlot = NebaFieldSlot | 'shell' | 'stepper';
 export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
     /**
      * Drop shadow depth. `0` (the default) is flat — a field is a well, not a
@@ -99,6 +108,12 @@ export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPr
     /** Placeholder shown while the field is empty. */
     placeholder?: string;
     id?: string;
+    /**
+     * Class names for the parts behind the root. `className` is the root — the
+     * column holding the label, the shell and the two lines under it — so the
+     * `<input>` itself is `classNames.control`.
+     */
+    classNames?: NebaSlots<NumberFieldSlot>;
 }
 /**
  * A field that only holds a number.
@@ -114,4 +129,4 @@ export interface NumberFieldProps extends NebaStyleProps, Omit<React.ComponentPr
  * clamping, the press-and-hold repeat on the steppers, and the hidden input
  * that submits with a form.
  */
-export declare function NumberField({ variant, size, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, style, ...props }: NumberFieldProps): React.JSX.Element;
+export declare function NumberField({ variant, size, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, classNames, style, ...props }: NumberFieldProps): React.JSX.Element;

package/dist/components/number-field/NumberField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{numberMessages as l,useMessages as i}from"../../internal/i18n.js";import{MinusIcon as r,PlusIcon as s}from"../../internal/icons.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as m,fieldReadOnlyClasses as u,fieldRestClasses as p,focusWithinRingClasses as f,gapClasses as b,hasContent as h,iconClasses as x,metaTextClasses as g,paddingXClasses as v,radiusClasses as N,stackGapClasses as j,surfaceSlots as w,transitionClasses as y}from"../../internal/styles.js";const k=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",y,"focus-within:[transition-duration:0ms]",f,x].join(" "),S=["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-accent)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export function NumberField({variant:f="outline",size:x="md",color:y="primary",density:_="default",elevation:V=0,value:C,defaultValue:I,onValueChange:O,onValueCommitted:$,min:z,max:L,step:W,largeStep:q,smallStep:D,snapOnStep:F,allowWheelScrub:R=!1,format:B,locale:E,steppers:G="end",incrementLabel:A,decrementLabel:H,label:J,description:K,error:M,invalid:P,startIcon:Q,endIcon:T,fullWidth:U=!1,disabled:X=!1,readOnly:Y=!1,required:Z=!1,name:ee,placeholder:ne,id:te,className:ae,style:le,...ie}){const re=i(l,"string"==typeof E?E:void 0),se=h(M),oe=P??se,ce=oe?"danger":y,de=v[_][x],me={end:`${de} pe-1`,split:"px-1",none:de},ue=e(t.Decrement,{"aria-label":H??re.decrease,className:S,children:e(r,{})}),pe=e(t.Increment,{"aria-label":A??re.increase,className:S,children:e(s,{})}),fe="none"!==G&&!Y;return n(a.Root,{disabled:X,invalid:oe,className:d("flex-col align-top",j[x],U?"flex w-full":"inline-flex",ae??""),style:{...w(ce,V),...le},...ie,children:[J?e(a.Label,{className:[g[x],"font-medium",X?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:J}):null,e(t.Root,{id:te,name:ee,className:"contents",value:C,defaultValue:I,onValueChange:e=>O?.(e),onValueCommitted:e=>$?.(e),min:z,max:L,step:W,largeStep:q,smallStep:D,snapOnStep:F,allowWheelScrub:R,format:B,locale:E,disabled:X,readOnly:Y,required:Z,children:n(t.Group,{className:[k,o[x],c[x],N[x],b[x],fe?me[G]:de,X?m[f]:Y?u[f]:p[f]].join(" "),children:[fe&&"split"===G?ue:null,Q?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:Q}):null,e(t.Input,{placeholder:ne,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===G&&fe?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),T?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:T}):null,fe&&"end"===G?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[ue,pe]}):null,fe&&"split"===G?pe:null]})}),K?e(a.Description,{className:`${g[x]} text-(--neba-muted-fg)`,children:K}):null,e(a.Error,se?{match:!0,className:`${g[x]} text-(--n-accent)`,children:M}:{className:`${g[x]} text-(--n-accent)`})]})}
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{NumberField as t}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{numberMessages as l,useMessages as r}from"../../internal/i18n.js";import{MinusIcon as i,PlusIcon as s}from"../../internal/icons.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as m,fieldReadOnlyClasses as u,fieldRestClasses as p,focusWithinRingClasses as f,gapClasses as b,hasContent as h,iconClasses as x,metaTextClasses as g,paddingXClasses as v,radiusClasses as N,stackGapClasses as j,surfaceSlots as w,transitionClasses as y}from"../../internal/styles.js";const k=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",y,"focus-within:[transition-duration:0ms]",f,x].join(" "),S=["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","active:[transition-duration:0ms]","hover:bg-(--n-soft) hover:text-(--n-accent)","active:bg-(--n-soft-press)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:bg-transparent disabled:text-(--neba-disabled-fg)"].join(" ");export function NumberField({variant:f="outline",size:x="md",color:y="primary",density:_="default",elevation:V=0,value:C,defaultValue:I,onValueChange:O,onValueCommitted:z,min:L,max:W,step:q,largeStep:D,smallStep:F,snapOnStep:R,allowWheelScrub:B=!1,format:E,locale:G,steppers:$="end",incrementLabel:A,decrementLabel:H,label:J,description:K,error:M,invalid:P,startIcon:Q,endIcon:T,fullWidth:U=!1,disabled:X=!1,readOnly:Y=!1,required:Z=!1,name:ee,placeholder:ne,id:te,className:ae,classNames:le,style:re,...ie}){const se=r(l,"string"==typeof G?G:void 0),oe=h(M),ce=P??oe,de=ce?"danger":y,me=v[_][x],ue={end:`${me} pe-1`,split:"px-1",none:me},pe=e(t.Decrement,{"aria-label":H??se.decrease,className:d(S,le?.stepper),children:e(i,{})}),fe=e(t.Increment,{"aria-label":A??se.increase,className:d(S,le?.stepper),children:e(s,{})}),be="none"!==$&&!Y;return n(a.Root,{disabled:X,invalid:ce,className:d("flex-col align-top",j[x],U?"flex w-full":"inline-flex",ae??""),style:{...w(de,V),...re},...ie,children:[J?e(a.Label,{className:d(g[x],"font-medium",X?"text-(--neba-disabled-fg)":"text-(--neba-fg)",le?.label),children:J}):null,e(t.Root,{id:te,name:ee,className:"contents",value:C,defaultValue:I,onValueChange:e=>O?.(e),onValueCommitted:e=>z?.(e),min:L,max:W,step:q,largeStep:D,smallStep:F,snapOnStep:R,allowWheelScrub:B,format:E,locale:G,disabled:X,readOnly:Y,required:Z,children:n(t.Group,{className:d(k,o[x],c[x],N[x],b[x],be?ue[$]:me,X?m[f]:Y?u[f]:p[f],le?.shell),children:[be&&"split"===$?pe:null,Q?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:Q}):null,e(t.Input,{placeholder:ne,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===$&&be?"text-center":"","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed",le?.control].filter(Boolean).join(" ")}),T?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:T}):null,be&&"end"===$?n("span",{className:"flex shrink-0 items-center gap-0.5",children:[pe,fe]}):null,be&&"split"===$?fe:null]})}),K?e(a.Description,{className:d(g[x],"text-(--neba-muted-fg)",le?.description),children:K}):null,e(a.Error,oe?{match:!0,className:d(g[x],"text-(--n-accent)",le?.error),children:M}:{className:d(g[x],"text-(--n-accent)",le?.error)})]})}

package/dist/components/radio-group/RadioGroup.d.ts

@@ -1,7 +1,18 @@
 import * as React from 'react';
 import { Radio as BaseUIRadio } from '@base-ui/react/radio';
 import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group';
-import type { NebaColor, NebaOrientation, NebaSize } from '../../types.js';
+import type { NebaColor, NebaFieldSlot, NebaOrientation, NebaSize, NebaSlots } from '../../types.js';
+/**
+ * The parts a RadioGroup draws behind its root. `control` is the element that
+ * holds the options — the one carrying the row or column direction — and not
+ * any single Radio, which has slots of its own.
+ */
+export type RadioGroupSlot = NebaFieldSlot;
+/**
+ * The parts one Radio draws. There is no `error`: a validity message belongs to
+ * the question, and the question is the group.
+ */
+export type RadioSlot = Exclude<NebaFieldSlot, 'error'> | 'indicator';
 export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseUIRadioGroup>, 'className' | 'style' | 'render'> {
     /** @default 'md' */
     size?: NebaSize;
@@ -23,6 +34,11 @@ export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typ
     /** Forces the invalid state without a message. Defaults to `!!error`. */
     invalid?: boolean;
     className?: string;
+    /**
+     * Class names for the parts behind the root. The element holding the options
+     * is `classNames.control`; a single option is styled on the Radio itself.
+     */
+    classNames?: NebaSlots<RadioGroupSlot>;
     style?: React.CSSProperties;
 }
 export interface RadioProps extends Omit<React.ComponentPropsWithoutRef<typeof BaseUIRadio.Root>, 'className' | 'style' | 'render' | 'children'> {
@@ -31,6 +47,11 @@ export interface RadioProps extends Omit<React.ComponentPropsWithoutRef<typeof B
     /** Helper text under the label. */
     description?: React.ReactNode;
     className?: string;
+    /**
+     * Class names for the parts behind the root — the dot is
+     * `classNames.control`.
+     */
+    classNames?: NebaSlots<RadioSlot>;
     style?: React.CSSProperties;
 }
 /**

package/dist/components/radio-group/RadioGroup.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as o}from"@base-ui/react/field";import{controlTextClasses as i,cx as t,hitAreaClasses as s,metaTextClasses as c,surfaceClasses as d,tickDotClasses as b,tickRowLeadingClasses as f,tickSizeClasses as h,transitionClasses as m}from"../../internal/styles.js";const u=/*@__PURE__*/r.createContext({size:"md",color:"primary",readOnly:!1}),p=["relative inline-flex shrink-0 items-center justify-center rounded-full border",s,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),v=[d,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),x=[d,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),g=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" ");export const Radio=/*@__PURE__*/r.forwardRef(function({label:l,description:s,disabled:d=!1,className:m,style:N,...y},$){const j=r.useContext(u),k=y.readOnly??j.readOnly;return e(o.Root,{disabled:d,className:t("flex flex-col",m??""),style:N,children:a("div",{className:`flex items-start gap-2 ${i[j.size]} ${f}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:$,className:[p,h[j.size],d?g:k?x:v].join(" "),disabled:d,...y,children:e(n.Indicator,{className:`rounded-full bg-current ${b[j.size]}`})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(o.Label,{className:["leading-[1.4]",d?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:l}):null,s?e(o.Description,{className:`${c[j.size]} text-(--neba-muted-fg)`,children:s}):null]}):null]})})});export const RadioGroup=/*@__PURE__*/r.forwardRef(function({size:n="md",color:i="primary",orientation:s="vertical",label:d,description:b,error:f,invalid:h,disabled:m=!1,readOnly:p=!1,className:v,style:x,children:g,...N},y){const $=null!=f&&!1!==f&&""!==f,j=h??$,k=j?"danger":i,R={"--n-fill":`var(--neba-${k}-fill)`,"--n-fill-hover":`var(--neba-${k}-fill-hover)`,"--n-on-solid":`var(--neba-${k}-on-solid)`,"--n-accent":`var(--neba-${k}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${k}-line)`,"--n-line-hover":`var(--neba-${k}-line-hover)`,"--n-ring":`var(--neba-${k}-ring)`},w=r.useMemo(()=>({size:n,color:k,readOnly:p}),[n,k,p]);return e(u.Provider,{value:w,children:a(o.Root,{disabled:m,invalid:j,className:t("flex flex-col gap-1.5",v??""),style:{...R,...x},children:[d?e(o.Label,{className:[c[n],"font-medium",m?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:d}):null,b?e(o.Description,{className:`${c[n]} text-(--neba-muted-fg)`,children:b}):null,e(l,{ref:y,disabled:m,readOnly:p,className:["flex","horizontal"===s?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2"].join(" "),...N,children:g}),e(o.Error,$?{match:!0,className:`${c[n]} text-(--n-accent)`,children:f}:{className:`${c[n]} text-(--n-accent)`})]})})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as n}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as o}from"@base-ui/react/field";import{controlTextClasses as i,cx as t,hitAreaClasses as s,metaTextClasses as c,surfaceClasses as d,tickDotClasses as b,tickRowLeadingClasses as f,tickSizeClasses as m,transitionClasses as h}from"../../internal/styles.js";const p=/*@__PURE__*/r.createContext({size:"md",color:"primary",readOnly:!1}),u=["relative inline-flex shrink-0 items-center justify-center rounded-full border",s,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),v=[d,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),x=[d,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),g=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" ");export const Radio=/*@__PURE__*/r.forwardRef(function({label:l,description:s,disabled:d=!1,className:h,classNames:N,style:y,...k},j){const R=r.useContext(p),$=k.readOnly??R.readOnly;return e(o.Root,{disabled:d,className:t("flex flex-col",h??""),style:y,children:a("div",{className:`flex items-start gap-2 ${i[R.size]} ${f}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:j,className:t(u,m[R.size],d?g:$?x:v,N?.control),disabled:d,...k,children:e(n.Indicator,{className:t("rounded-full bg-current",b[R.size],N?.indicator)})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(o.Label,{className:t("leading-[1.4]",d?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",N?.label),children:l}):null,s?e(o.Description,{className:t(c[R.size],"text-(--neba-muted-fg)",N?.description),children:s}):null]}):null]})})});export const RadioGroup=/*@__PURE__*/r.forwardRef(function({size:n="md",color:i="primary",orientation:s="vertical",label:d,description:b,error:f,invalid:m,disabled:h=!1,readOnly:u=!1,className:v,classNames:x,style:g,children:N,...y},k){const j=null!=f&&!1!==f&&""!==f,R=m??j,$=R?"danger":i,w={"--n-fill":`var(--neba-${$}-fill)`,"--n-fill-hover":`var(--neba-${$}-fill-hover)`,"--n-on-solid":`var(--neba-${$}-on-solid)`,"--n-accent":`var(--neba-${$}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${$}-line)`,"--n-line-hover":`var(--neba-${$}-line-hover)`,"--n-ring":`var(--neba-${$}-ring)`},z=r.useMemo(()=>({size:n,color:$,readOnly:u}),[n,$,u]);return e(p.Provider,{value:z,children:a(o.Root,{disabled:h,invalid:R,className:t("flex flex-col gap-1.5",v??""),style:{...w,...g},children:[d?e(o.Label,{className:t(c[n],"font-medium",h?"text-(--neba-disabled-fg)":"text-(--neba-fg)",x?.label),children:d}):null,b?e(o.Description,{className:t(c[n],"text-(--neba-muted-fg)",x?.description),children:b}):null,e(l,{ref:k,disabled:h,readOnly:u,className:t("flex","horizontal"===s?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",x?.control),...y,children:N}),e(o.Error,j?{match:!0,className:t(c[n],"text-(--n-accent)",x?.error),children:f}:{className:t(c[n],"text-(--n-accent)",x?.error)})]})})});

package/dist/components/select/Select.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaElevation, NebaStyleProps } from '../../types.js';
+import type { NebaElevation, NebaFieldSlot, NebaSlots, NebaStyleProps } from '../../types.js';
 /**
  * What a Select's value may be.
  *
@@ -18,6 +18,15 @@ export interface SelectOption {
     /** Unavailable, but still listed — the option exists, it just cannot be picked. */
     disabled?: boolean;
 }
+/**
+ * The parts a Select draws behind its root.
+ *
+ * `control` is the trigger — the box the reader presses, which is a TextField's
+ * shell to the pixel and is styled as one. `popup` and `item` are portalled, so
+ * they render at the end of `<body>` and a descendant selector written against
+ * the root will not reach them; these are the only way in.
+ */
+export type SelectSlot = NebaFieldSlot | 'popup' | 'item';
 export interface SelectProps extends NebaStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
     /**
      * The options, as data. There is no `<Select.Option>` to compose: what a
@@ -59,6 +68,12 @@ export interface SelectProps extends NebaStyleProps, Omit<React.ComponentPropsWi
     /** Identifies the field when a form is submitted. */
     name?: string;
     id?: string;
+    /**
+     * Class names for the parts behind the root. `className` is the root — the
+     * column holding the label, the trigger and the two lines under it — and the
+     * trigger itself is `classNames.control`.
+     */
+    classNames?: NebaSlots<SelectSlot>;
 }
 /**
  * One value chosen from a list of them.

package/dist/components/select/Select.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as l}from"@base-ui/react/select";import{Field as n}from"@base-ui/react/field";import{CheckIcon as r,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as s}from"../../internal/sizer.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as m,fieldReadOnlyClasses as u,fieldRestClasses as h,focusWithinRingClasses as f,gapClasses as p,hasContent as b,iconClasses as g,metaTextClasses as x,paddingXClasses as v,radiusClasses as N,stackGapClasses as j,surfaceClasses as w,surfaceSlots as y,transitionClasses as I}from"../../internal/styles.js";const $=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",I,"focus-within:[transition-duration:0ms]",f,g].join(" "),S=[w,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),V=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",I,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" ");export const Select=/*@__PURE__*/t.forwardRef(function({variant:f="outline",size:g="md",color:w="primary",density:I="default",elevation:z=0,items:k,value:O,defaultValue:P,onValueChange:R,placeholder:T,label:q,description:C,error:M,invalid:W,startIcon:_,fullWidth:D=!1,disabled:E=!1,readOnly:L=!1,required:A=!1,name:B,id:F,className:G,style:H,...J},K){const Q=null!=M&&!1!==M&&""!==M,U=W??Q,X=U?"danger":w,Y=t.useMemo(()=>k.map(e=>({label:e.label??String(e.value),value:e.value})),[k]),Z=t.useMemo(()=>[...k.map(e=>e.label??String(e.value)),...b(T)?[T]:[]],[k,T]);return a(n.Root,{disabled:E,invalid:U,className:d("flex-col align-top",j[g],D?"flex w-full":"inline-flex",G??""),style:{...y(X,z),...H},...J,children:[q?e(n.Label,{className:[x[g],"font-medium",E?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:q}):null,a(l.Root,{id:F,name:B,items:Y,value:O,defaultValue:P,onValueChange:e=>R?.(e),disabled:E,readOnly:L,required:A,children:[a(l.Trigger,{ref:K,className:[$,o[g],c[g],N[g],p[g],v[I][g],E?m[f]:L?`${u[f]} cursor-default`:h[f]].join(" "),children:[_?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:_}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(l.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:T}),e(s,{samples:Z})]}),e(l.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(l.Popup,{className:`${S} ${N[g]} ${c[g]}`,style:y(X,3),children:k.map(t=>a(l.Item,{value:t.value,disabled:t.disabled,className:V,children:[e(l.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(l.ItemText,{className:"truncate",children:t.label??String(t.value)})]},String(t.value)))})})})]}),C?e(n.Description,{className:`${x[g]} text-(--neba-muted-fg)`,children:C}):null,e(n.Error,Q?{match:!0,className:`${x[g]} text-(--n-accent)`,children:M}:{className:`${x[g]} text-(--n-accent)`})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as l}from"@base-ui/react/select";import{Field as n}from"@base-ui/react/field";import{CheckIcon as r,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as s}from"../../internal/sizer.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as m,fieldReadOnlyClasses as u,fieldRestClasses as h,focusWithinRingClasses as f,gapClasses as p,hasContent as b,iconClasses as g,metaTextClasses as x,paddingXClasses as v,radiusClasses as N,stackGapClasses as w,surfaceClasses as j,surfaceSlots as y,transitionClasses as I}from"../../internal/styles.js";const S=["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",I,"focus-within:[transition-duration:0ms]",f,g].join(" "),V=[j,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),z=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",I,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" ");export const Select=/*@__PURE__*/t.forwardRef(function({variant:f="outline",size:g="md",color:j="primary",density:I="default",elevation:k=0,items:O,value:P,defaultValue:R,onValueChange:T,placeholder:q,label:C,description:M,error:W,invalid:_,startIcon:D,fullWidth:E=!1,disabled:L=!1,readOnly:$=!1,required:A=!1,name:B,id:F,className:G,classNames:H,style:J,...K},Q){const U=null!=W&&!1!==W&&""!==W,X=_??U,Y=X?"danger":j,Z=t.useMemo(()=>O.map(e=>({label:e.label??String(e.value),value:e.value})),[O]),ee=t.useMemo(()=>[...O.map(e=>e.label??String(e.value)),...b(q)?[q]:[]],[O,q]);return a(n.Root,{disabled:L,invalid:X,className:d("flex-col align-top",w[g],E?"flex w-full":"inline-flex",G??""),style:{...y(Y,k),...J},...K,children:[C?e(n.Label,{className:d(x[g],"font-medium",L?"text-(--neba-disabled-fg)":"text-(--neba-fg)",H?.label),children:C}):null,a(l.Root,{id:F,name:B,items:Z,value:P,defaultValue:R,onValueChange:e=>T?.(e),disabled:L,readOnly:$,required:A,children:[a(l.Trigger,{ref:Q,className:d(S,o[g],c[g],N[g],p[g],v[I][g],L?m[f]:$?`${u[f]} cursor-default`:h[f],H?.control),children:[D?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:D}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(l.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--neba-muted-fg)"].join(" "),placeholder:q}),e(s,{samples:ee})]}),e(l.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(l.Popup,{className:d(V,N[g],c[g],H?.popup),style:y(Y,3),children:O.map(t=>a(l.Item,{value:t.value,disabled:t.disabled,className:d(z,H?.item),children:[e(l.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(l.ItemText,{className:"truncate",children:t.label??String(t.value)})]},String(t.value)))})})})]}),M?e(n.Description,{className:d(x[g],"text-(--neba-muted-fg)",H?.description),children:M}):null,e(n.Error,U?{match:!0,className:d(x[g],"text-(--n-accent)",H?.error),children:W}:{className:d(x[g],"text-(--n-accent)",H?.error)})]})});

package/dist/components/switch/Switch.d.ts

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import { Switch as BaseUISwitch } from '@base-ui/react/switch';
-import type { NebaColor, NebaSize } from '../../types.js';
+import type { NebaColor, NebaFieldSlot, NebaSize, NebaSlots } from '../../types.js';
 /** Which side of the track the label sits on. */
 export type SwitchLabelPlacement = 'start' | 'end';
 type BaseSwitchProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISwitch.Root>, 'className' | 'style' | 'render' | 'children'>;
+/**
+ * The parts a Switch draws behind its root.
+ *
+ * `control` is the track — the pill that fills when the switch is on — and
+ * `thumb` is the disc that travels across it.
+ */
+export type SwitchSlot = NebaFieldSlot | 'thumb';
 export interface SwitchProps extends BaseSwitchProps {
     /** @default 'md' */
     size?: NebaSize;
@@ -26,6 +33,11 @@ export interface SwitchProps extends BaseSwitchProps {
     labelPlacement?: SwitchLabelPlacement;
     /** Class names for the field wrapper, not for the track. */
     className?: string;
+    /**
+     * Class names for the parts behind that wrapper — the track is
+     * `classNames.control`.
+     */
+    classNames?: NebaSlots<SwitchSlot>;
     style?: React.CSSProperties;
 }
 /**

package/dist/components/switch/Switch.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Switch as l}from"@base-ui/react/switch";import{Field as t}from"@base-ui/react/field";import{controlTextClasses as o,cx as i,hitAreaClasses as c,metaTextClasses as s,surfaceClasses as d,tickRowLeadingClasses as b}from"../../internal/styles.js";const h={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},f={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[calc(100%-1.625rem)]"},m=["relative inline-flex shrink-0 border",c,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","rounded-full","[transition-property:background-color,border-color,box-shadow]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),u=[d,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),v=[d,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]"].join(" "),p=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),g=["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-(--neba-surface)","[box-shadow:var(--neba-shadow-1)]","[transition:left_var(--neba-duration)_var(--neba-ease)]"].join(" ");export const Switch=/*@__PURE__*/n.forwardRef(function({size:n="md",color:c="primary",label:d,description:x,error:w,invalid:k,labelPlacement:$="end",disabled:j=!1,readOnly:N=!1,className:y,style:_,...R},O){const S=null!=w&&!1!==w&&""!==w,q=k??S,z=q?"danger":c,D={"--n-fill":`var(--neba-${z}-fill)`,"--n-fill-hover":`var(--neba-${z}-fill-hover)`,"--n-accent":`var(--neba-${z}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${z}-line)`,"--n-line-hover":`var(--neba-${z}-line-hover)`,"--n-ring":`var(--neba-${z}-ring)`},E=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:O,className:[m,h[n],j?p:N?v:u].join(" "),disabled:j,readOnly:N,...R,children:e(l.Thumb,{className:`${g} ${f[n]}`})})}),F=d||x?a("span",{className:i("flex min-w-0 flex-col gap-0.5","start"===$?"flex-1":""),children:[d?e(t.Label,{className:["leading-[1.4]",j?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:d}):null,x?e(t.Description,{className:`${s[n]} text-(--neba-muted-fg)`,children:x}):null]}):null;return a(t.Root,{disabled:j,invalid:q,className:i("inline-flex flex-col gap-1 align-top",y??""),style:{...D,..._},children:[e("div",{className:`flex items-start gap-2.5 ${o[n]} ${b}`,children:a(r,"start"===$?{children:[F,E]}:{children:[E,F]})}),e(t.Error,S?{match:!0,className:`${s[n]} text-(--n-accent)`,children:w}:{className:`${s[n]} text-(--n-accent)`})]})});
+"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{Switch as l}from"@base-ui/react/switch";import{Field as t}from"@base-ui/react/field";import{controlTextClasses as o,cx as i,hitAreaClasses as c,metaTextClasses as s,surfaceClasses as d,tickRowLeadingClasses as b}from"../../internal/styles.js";const h={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},f={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[calc(100%-1.625rem)]"},m=["relative inline-flex shrink-0 border",c,"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","rounded-full","[transition-property:background-color,border-color,box-shadow]","[transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),u=[d,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)"].join(" "),v=[d,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:[border-color:transparent]"].join(" "),p=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)] shadow-none","data-[checked]:bg-(--neba-disabled-bg)"].join(" "),g=["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-(--neba-surface)","[box-shadow:var(--neba-shadow-1)]","[transition:left_var(--neba-duration)_var(--neba-ease)]"].join(" ");export const Switch=/*@__PURE__*/n.forwardRef(function({size:n="md",color:c="primary",label:d,description:x,error:w,invalid:k,labelPlacement:N="end",disabled:j=!1,readOnly:y=!1,className:$,classNames:_,style:R,...O},S){const q=null!=w&&!1!==w&&""!==w,z=k??q,D=z?"danger":c,E={"--n-fill":`var(--neba-${D}-fill)`,"--n-fill-hover":`var(--neba-${D}-fill-hover)`,"--n-accent":`var(--neba-${D}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${D}-line)`,"--n-line-hover":`var(--neba-${D}-line-hover)`,"--n-ring":`var(--neba-${D}-ring)`},F=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:S,className:i(m,h[n],j?p:y?v:u,_?.control),disabled:j,readOnly:y,...O,children:e(l.Thumb,{className:i(g,f[n],_?.thumb)})})}),L=d||x?a("span",{className:i("flex min-w-0 flex-col gap-0.5","start"===N?"flex-1":""),children:[d?e(t.Label,{className:i("leading-[1.4]",j?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)",_?.label),children:d}):null,x?e(t.Description,{className:i(s[n],"text-(--neba-muted-fg)",_?.description),children:x}):null]}):null;return a(t.Root,{disabled:j,invalid:z,className:i("inline-flex flex-col gap-1 align-top",$??""),style:{...E,...R},children:[e("div",{className:`flex items-start gap-2.5 ${o[n]} ${b}`,children:a(r,"start"===N?{children:[L,F]}:{children:[F,L]})}),e(t.Error,q?{match:!0,className:i(s[n],"text-(--n-accent)",_?.error),children:w}:{className:i(s[n],"text-(--n-accent)",_?.error)})]})});

package/dist/components/table/Table.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type BoxProps } from '../box/Box.js';
-import type { NebaAlign } from '../../types.js';
+import type { NebaAlign, NebaSlots } from '../../types.js';
 /** Which edge the text in a column lines up against. */
 export type TableAlign = NebaAlign;
 /**
@@ -38,6 +38,20 @@ export interface TableColumn<Row> {
      */
     render?: (row: Row, index: number) => React.ReactNode;
 }
+/**
+ * The parts a Table draws behind its root.
+ *
+ * `className` is the sheet — the Box that scrolls horizontally — and everything
+ * tabular is behind it, starting with the `<table>` itself.
+ *
+ * One caveat, and it is the whole reason the note above `cellStyle` exists: a
+ * cell's padding, alignment and background are written as **inline styles**,
+ * because `.vp-doc td` and `.prose td` outrank any one-class utility. A class
+ * handed to `headCell`, `cell` or `empty` can add anything the component does
+ * not already set inline — a colour, a font, a border — but to change one of
+ * those three it has to be an important one (`p-4!`).
+ */
+export type TableSlot = 'table' | 'caption' | 'head' | 'headCell' | 'body' | 'row' | 'cell' | 'empty';
 export interface TableProps<Row> extends Omit<BoxProps, 'padded' | 'children' | 'render' | 'title'> {
     /** The columns, in the order they appear. */
     headers: readonly TableColumn<Row>[];
@@ -79,6 +93,11 @@ export interface TableProps<Row> extends Omit<BoxProps, 'padded' | 'children' |
     stickyHeader?: boolean;
     /** Makes rows activatable. Also turns on the hover treatment. */
     onRowClick?: (row: Row, index: number) => void;
+    /**
+     * Class names for the parts behind the root. `className` is the sheet the
+     * table scrolls inside; the `<table>` itself is `classNames.table`.
+     */
+    classNames?: NebaSlots<TableSlot>;
 }
 /**
  * A grid of data.
@@ -88,4 +107,4 @@ export interface TableProps<Row> extends Omit<BoxProps, 'padded' | 'children' |
  * might sit next to. What Table adds is the part that is genuinely tabular: the
  * columns, the rows, and the fact that the two cannot drift apart.
  */
-export declare function Table<Row>({ headers, items, getRowKey, caption, locale, empty, striped, hoverable, stickyHeader, onRowClick, size, density, className, ...boxProps }: TableProps<Row>): React.JSX.Element;
+export declare function Table<Row>({ headers, items, getRowKey, caption, locale, empty, striped, hoverable, stickyHeader, onRowClick, size, density, className, classNames, ...boxProps }: TableProps<Row>): React.JSX.Element;

package/dist/components/table/Table.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as r}from"../box/Box.js";import{tableMessages as n,useMessages as l}from"../../internal/i18n.js";import{controlTextLeadingClasses as a,cx as o,metaTextClasses as s,paddingXValues as i}from"../../internal/styles.js";const d={default:{xs:"0.25rem",sm:"0.375rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"}},c=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),m=["cursor-pointer [outline:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),p={borderTop:"1px solid var(--n-line)",backgroundColor:"var(--n-row)"};export function Table({headers:u,items:h,getRowKey:y,caption:b,locale:x,empty:g,striped:f=!1,hoverable:v=!1,stickyHeader:w=!1,onRowClick:k,size:j="md",density:N="default",className:$,...C}){const A=l(n,x),_=i[N][j],z=d[N][j],T=Boolean(k),B=v||T,D={padding:`${z} ${_}`},K={...D,backgroundColor:"var(--n-panel-press)"};return e(r,{size:j,density:N,padded:!1,className:o("overflow-x-auto",$??""),...C,children:t("table",{className:`w-full text-start ${a[j]} text-(--neba-fg)`,style:{borderCollapse:"collapse"},children:[b?e("caption",{className:`${s[j]} text-(--neba-muted-fg)`,style:{...D,textAlign:"start"},children:b}):null,e("colgroup",{children:u.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:u.map(t=>e("th",{scope:"col",className:o("font-semibold whitespace-nowrap text-(--neba-muted-fg)",w?"sticky top-0 z-10 [backdrop-filter:var(--neba-blur)]":""),style:{...K,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{children:0===h.length?e("tr",{className:c,style:p,children:e("td",{colSpan:u.length,className:"text-(--neba-muted-fg)",style:{padding:`2rem ${_}`,textAlign:"center"},children:g??A.empty})}):h.map((t,r)=>e("tr",{className:o(c,f&&r%2==1?"[--n-row:var(--n-panel-hover)]":"",B?"hover:[--n-row:var(--n-soft)]":"",T?m:""),style:p,tabIndex:T?0:void 0,onClick:k?()=>k(t,r):void 0,onKeyDown:k?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),k(t,r)))}:void 0,children:u.map(n=>e("td",{style:{...D,textAlign:n.align??"start"},children:n.render?n.render(t,r):t[n.key]},n.key))},y?y(t,r):r))})]})})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as r}from"../box/Box.js";import{tableMessages as a,useMessages as l}from"../../internal/i18n.js";import{controlTextLeadingClasses as n,cx as o,metaTextClasses as s,paddingXValues as i}from"../../internal/styles.js";const d={default:{xs:"0.25rem",sm:"0.375rem",md:"0.625rem",lg:"0.75rem",xl:"0.875rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.625rem"}},c=["[--n-row:transparent]","[transition:background-color_var(--neba-duration)_var(--neba-ease)]"].join(" "),m=["cursor-pointer [outline:none]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]"].join(" "),p={borderTop:"1px solid var(--n-line)",backgroundColor:"var(--n-row)"};export function Table({headers:h,items:y,getRowKey:b,caption:u,locale:x,empty:g,striped:f=!1,hoverable:v=!1,stickyHeader:w=!1,onRowClick:k,size:N="md",density:j="default",className:C,classNames:A,...$}){const _=l(a,x),z=i[j][N],T=d[j][N],B=Boolean(k),D=v||B,K={padding:`${T} ${z}`},R={...K,backgroundColor:"var(--n-panel-press)"};return e(r,{size:N,density:j,padded:!1,className:o("overflow-x-auto",C??""),...$,children:t("table",{className:o("w-full text-start",n[N],"text-(--neba-fg)",A?.table),style:{borderCollapse:"collapse"},children:[u?e("caption",{className:o(s[N],"text-(--neba-muted-fg)",A?.caption),style:{...K,textAlign:"start"},children:u}):null,e("colgroup",{children:h.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{className:A?.head,children:e("tr",{children:h.map(t=>e("th",{scope:"col",className:o("font-semibold whitespace-nowrap text-(--neba-muted-fg)",w?"sticky top-0 z-10 [backdrop-filter:var(--neba-blur)]":"",A?.headCell),style:{...R,textAlign:t.align??"start"},children:t.label??t.key},t.key))})}),e("tbody",{className:A?.body,children:0===y.length?e("tr",{className:o(c,A?.row),style:p,children:e("td",{colSpan:h.length,className:o("text-(--neba-muted-fg)",A?.empty),style:{padding:`2rem ${z}`,textAlign:"center"},children:g??_.empty})}):y.map((t,r)=>e("tr",{className:o(c,f&&r%2==1?"[--n-row:var(--n-panel-hover)]":"",D?"hover:[--n-row:var(--n-soft)]":"",B?m:"",A?.row),style:p,tabIndex:B?0:void 0,onClick:k?()=>k(t,r):void 0,onKeyDown:k?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),k(t,r)))}:void 0,children:h.map(a=>e("td",{className:A?.cell,style:{...K,textAlign:a.align??"start"},children:a.render?a.render(t,r):t[a.key]},a.key))},b?b(t,r):r))})]})})}