plass-ui 1.3.0 → 1.5.0

package/dist/components/line-chart/PlLineChart.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import { type ChartMarkers } from '../../internal/chart-line.js';
+import type { PlassChartCurve, PlassChartValueLabels } from '../../types.js';
+export interface PlLineChartProps extends CartesianChartProps {
+    /**
+     * How the line gets from one point to the next.
+     *
+     * - `linear` — straight segments. The default, and the only one that claims
+     *   nothing the data did not say.
+     * - `smooth` — a monotone cubic. Curved, but it will not dip below a value
+     *   that both of its neighbours are above; a plain spline would.
+     * - `step` — held at each value until the next one. What a rate, a tier or a
+     *   setting actually did between two readings, rather than a diagonal
+     *   pretending it drifted.
+     * @default 'linear'
+     */
+    curve?: PlassChartCurve;
+    /**
+     * Dots on the points.
+     *
+     * `auto` — the default — draws them while there are few enough points for a
+     * dot to mean something, and stops at fourteen. Whatever this says, the point
+     * under the pointer always gets one: that is what tells the reader which
+     * column the tooltip is about.
+     * @default 'auto'
+     */
+    markers?: ChartMarkers;
+    /**
+     * Fades the line from a paler step of its own hue at the start to the full
+     * colour at the end, so the recent end of a long series is the loud one.
+     * @default false
+     */
+    gradient?: boolean;
+    /**
+     * Draws the line straight through a `null` instead of breaking at it.
+     *
+     * Off, and it should stay off unless the gap is an artefact of how the data
+     * was collected. A bridged gap is a number the chart made up.
+     * @default false
+     */
+    connectNulls?: boolean;
+    /**
+     * Which values are written on the line. `last` is the one to reach for — it
+     * names where each series ended up, which is the question a line chart is
+     * usually being asked.
+     * @default 'none'
+     */
+    valueLabels?: PlassChartValueLabels;
+    /**
+     * Stacks the series, each line riding on the total of the ones below it.
+     *
+     * Rare on a line chart and worth thinking twice about: the reader can follow
+     * the bottom series and the top total, and nothing in between. An
+     * [`PlAreaChart`](./area-chart) is the shape that makes stacking legible.
+     * @default false
+     */
+    stacked?: boolean;
+}
+/**
+ * A value against time, or against anything else with an order to it.
+ *
+ * The line is the mark that says *change*: it claims the space between two
+ * points is a journey rather than two separate facts, which is true of a
+ * temperature and false of four product categories. Reach for a
+ * [`PlBarChart`](./bar-chart) when the categories could be shuffled without losing
+ * anything.
+ *
+ * Everything around the line — the axes, the grid, the crosshair, the legend,
+ * the tooltip and the table a screen reader gets instead of the picture — comes
+ * from the shared frame, which is what makes a PlLineChart and a PlBarChart on one
+ * dashboard read as one drawing rather than two.
+ */
+export declare function PlLineChart({ curve, markers, gradient, connectNulls, valueLabels, stacked, ...props }: PlLineChartProps): React.JSX.Element;

package/dist/components/line-chart/PlLineChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as n}from"../../internal/chart-line.js";export function PlLineChart({curve:a="linear",markers:c="auto",gradient:i=!1,connectNulls:o=!1,valueLabels:l="none",stacked:s=!1,...m}){const u=r.useId().replace(/:/g,"");return e(t,{...m,stacked:s,inset:!0,includeZero:!1,headroom:"none"===l?0:10,children:r=>e(n,{context:r,curve:a,filled:!1,stacked:s,markers:c,valueLabels:l,connectNulls:o,gradient:i,idPrefix:u})})}

package/dist/components/line-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { PlLineChart } from './PlLineChart.js';
+export type { PlLineChartProps } from './PlLineChart.js';

package/dist/components/line-chart/index.js

@@ -0,0 +1 @@
+export{PlLineChart}from"./PlLineChart.js";

package/dist/components/menu/PlMenu.d.ts

@@ -65,8 +65,14 @@ export interface PlMenuItemProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /** Renders the row as a real `<a>`. A menu of links has to be links. */
     href?: string;
-    /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
+    /**
+     * Where the link opens — `_blank` and the rest. Ignored without `href`.
+     * Anything other than this tab also gets `noopener noreferrer` merged into
+     * its `rel`.
+     */
     target?: string;
+    /** The link's `rel`. Ignored without `href`. */
+    rel?: string;
     /** Content before the label — an icon, a swatch, a check. */
     startIcon?: React.ReactNode;
     /** Content after the label, before any `shortcut`. */
@@ -99,7 +105,10 @@ export interface PlMenuSubmenuProps {
     label?: React.ReactNode;
     startIcon?: React.ReactNode;
     disabled?: boolean;
-    /** Which edge of the parent row it opens against. @default 'right' */
+    /**
+     * Which edge of the parent row it opens against. Left out, the end of the line:
+     * the right, or the left under RTL.
+     */
     side?: PlassSide;
     /** Distance from the parent menu, in pixels. @default 4 */
     sideOffset?: number;
@@ -115,7 +124,7 @@ export interface PlMenuGroupProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'startIcon' | 'onClick'> {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
@@ -136,7 +145,7 @@ export interface PlMenuRadioGroupProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'startIcon' | 'onClick'> {
     /** What this row sets the group to. */
     value: string | number;
     /** @default false */
@@ -151,7 +160,7 @@ export type PlMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
  * links that are not links cannot be opened in a new tab, cannot be copied, and
  * tells a screen reader the wrong thing about every one of them.
  */
-export declare function PlMenuItem({ onClick, href, target, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuItemProps): React.JSX.Element;
+export declare function PlMenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuItemProps): React.JSX.Element;
 /** A row that ticks. The tick lands in the same slot a `startIcon` would. */
 export declare function PlMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */

package/dist/components/menu/PlMenu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Menu as t}from"@base-ui/react/menu";import{ContextMenu as o}from"@base-ui/react/context-menu";import{MenuContext as r}from"../../internal/menu.js";import{CheckIcon as i,ChevronIcon as c,DotIcon as d}from"../../internal/icons.js";import{controlTextLeadingClasses as p,cx as u,gapClasses as m,glassClasses as h,hasContent as x,iconClasses as f,metaTextClasses as y,radiusClasses as g,surfaceSlots as b,transitionClasses as C}from"../../internal/styles.js";const N=/* @__PURE__ */[h,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},k={xs:g.xs,sm:g.xs,md:g.sm,lg:g.sm,xl:g.md};function rowClasses(e,s,l,n){return u("relative flex w-full cursor-pointer items-center select-none",l?"text-(--p-accent)":"text-(--plass-fg)",v[s][e],k[e],m[e],p[e],C,f,"data-[highlighted]:bg-(--p-soft-hover)","data-[popup-open]:bg-(--p-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]",n)}const w="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function shortcutClasses(e){return u("ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums",y[e])}function RowBody({children:l,description:n,size:a}){return x(n)?s("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:u("truncate text-(--plass-muted-fg)",y[a]),children:n})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function PlMenuItem({onClick:a,href:o,target:i,startIcon:c,endIcon:d,shortcut:p,description:m,color:h,closeOnClick:f=!0,disabled:y=!1,label:g,children:C,className:N,style:v}){const{size:k,density:z}=n.useContext(r),O=s(l,{children:[x(c)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:c}):null,e(RowBody,{description:m,size:k,children:C}),x(d)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:d}):null,x(p)?e("span",{className:shortcutClasses(k),children:p}):null]}),P=h?b(h,0):void 0,I=P||v?{...P,...v}:void 0;return void 0!==o?e(t.LinkItem,{href:o,target:i,label:g,closeOnClick:f,onClick:a,className:rowClasses(k,z,Boolean(h),N),style:I,children:O}):e(t.Item,{disabled:y,label:g,closeOnClick:f,onClick:a,className:rowClasses(k,z,Boolean(h),N),style:I,children:O})}export function PlMenuCheckboxItem({checked:l,defaultChecked:a,onCheckedChange:o,endIcon:c,shortcut:d,description:p,color:m,closeOnClick:h=!1,disabled:f=!1,label:y,children:g,className:C,style:N}){const{size:v,density:k}=n.useContext(r),z=m?b(m,0):void 0;return s(t.CheckboxItem,{checked:l,defaultChecked:a,onCheckedChange:e=>o?.(e),disabled:f,label:y,closeOnClick:h,className:rowClasses(v,k,Boolean(m),C),style:z||N?{...z,...N}:void 0,children:[e("span",{className:u(w,"text-(--p-accent)"),children:e(t.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(i,{})})}),e(RowBody,{description:p,size:v,children:g}),x(c)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:c}):null,x(d)?e("span",{className:shortcutClasses(v),children:d}):null]})}export function PlMenuRadioGroup({value:s,defaultValue:l,onValueChange:n,disabled:a=!1,children:o,className:r,style:i}){return e(t.RadioGroup,{value:s,defaultValue:l,onValueChange:e=>n?.(e),disabled:a,className:r,style:i,children:o})}export function PlMenuRadioItem({value:l,endIcon:a,shortcut:o,description:i,color:c,closeOnClick:p=!1,disabled:m=!1,label:h,children:f,className:y,style:g}){const{size:C,density:N}=n.useContext(r),v=c?b(c,0):void 0;return s(t.RadioItem,{value:l,disabled:m,label:h,closeOnClick:p,className:rowClasses(C,N,Boolean(c),y),style:v||g?{...v,...g}:void 0,children:[e("span",{className:u(w,"text-(--p-accent)"),children:e(t.RadioItemIndicator,{className:"flex items-center justify-center",children:e(d,{})})}),e(RowBody,{description:i,size:C,children:f}),x(a)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:a}):null,x(o)?e("span",{className:shortcutClasses(C),children:o}):null]})}export function PlMenuGroup({label:l,children:a,className:o,style:i}){const{size:c,density:d}=n.useContext(r);return s(t.Group,{className:o,style:i,children:[x(l)?e(t.GroupLabel,{className:u(v[d][c],y[c],"font-semibold tracking-wide text-(--plass-muted-fg) uppercase"),children:l}):null,a]})}export function PlMenuSeparator({className:s,...l}){return e(t.Separator,{className:u("-mx-1 my-1 h-px bg-(--plass-divider)",s),...l})}export function PlMenuSubmenu({label:l,startIcon:a,disabled:o=!1,side:i="right",sideOffset:d=4,children:m,className:h,style:f}){const{size:y,density:C,color:v}=n.useContext(r);return s(t.SubmenuRoot,{children:[s(t.SubmenuTrigger,{disabled:o,className:rowClasses(y,C,!1),children:[x(a)?e("span",{className:u(w,"text-(--plass-muted-fg)"),children:a}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:u(w,"text-(--plass-muted-fg) -rotate-90"),children:e(c,{})})]}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:i,sideOffset:d,align:"start",children:e(t.Popup,{className:u(N,g[y],p[y],h),style:{...b(v,3),...f},children:m})})})]})}export function PlMenu({size:l,color:o,density:i,trigger:c,open:d,defaultOpen:m,onOpenChange:h,side:x="bottom",align:f="start",sideOffset:y=6,modal:C=!0,openOnHover:v=!1,loopFocus:k=!0,disabled:w=!1,className:z,style:O,children:P}){const I=a(),M=l??I.size??"md",R=o??I.color??"primary",j=i??I.density??"default",B=n.useMemo(()=>({size:M,color:R,density:j}),[M,R,j]);return e(r.Provider,{value:B,children:s(t.Root,{open:d,defaultOpen:m,onOpenChange:e=>h?.(e),modal:C,loopFocus:k,disabled:w,children:[c?e(t.Trigger,{render:c,openOnHover:v,disabled:w}):null,e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:x,align:f,sideOffset:y,children:e(t.Popup,{className:u(N,g[M],p[M],z),style:{...b(R,3),...O},children:P})})})]})})}export function PlContextMenu({size:l,color:t,density:i,content:c,children:d,open:m,defaultOpen:h,onOpenChange:x,loopFocus:f=!0,disabled:y=!1,className:C,style:v}){const k=a(),w=l??k.size??"md",z=t??k.color??"primary",O=i??k.density??"default",P=n.useMemo(()=>({size:w,color:z,density:O}),[w,z,O]);return e(r.Provider,{value:P,children:s(o.Root,{open:m,defaultOpen:h,onOpenChange:e=>x?.(e),loopFocus:f,disabled:y,children:[e(o.Trigger,{children:d}),e(o.Portal,{children:e(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",children:e(o.Popup,{className:u(N,g[w],p[w],C),style:{...b(z,3),...v},children:c})})})]})})}
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as o}from"@base-ui/react/context-menu";import{safeRel as r}from"../../internal/link.js";import{MenuContext as i}from"../../internal/menu.js";import{CheckIcon as c,ChevronIcon as d,DotIcon as p}from"../../internal/icons.js";import{controlTextLeadingClasses as u,cx as m,forcedHighlightedClasses as h,gapClasses as f,glassClasses as x,hasContent as y,iconClasses as g,metaTextClasses as b,radiusClasses as C,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const k=/* @__PURE__ */[x,"max-h-[min(24rem,var(--available-height))] min-w-40 overflow-y-auto overscroll-contain","border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w={default:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-2",xl:"px-3.5 py-2.5"},compact:{xs:"px-1 py-0.5",sm:"px-1.5 py-0.5",md:"px-2 py-1",lg:"px-2.5 py-1",xl:"px-3 py-1.5"}},z={xs:C.xs,sm:C.xs,md:C.sm,lg:C.sm,xl:C.md};function rowClasses(e,s,l,n){return m("relative flex w-full cursor-pointer items-center select-none",l?"text-(--p-accent)":"text-(--plass-fg)",w[s][e],z[e],f[e],u[e],v,g,"data-[highlighted]:bg-(--p-soft-hover)",h,"data-[popup-open]:bg-(--p-soft)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]",n)}const O="flex h-[1lh] w-[1.2em] shrink-0 items-center justify-center";function shortcutClasses(e){return m("ms-2 shrink-0 text-(--plass-muted-fg) tabular-nums",b[e])}function RowBody({children:l,description:n,size:t}){return y(n)?s("span",{className:"flex min-w-0 flex-1 flex-col text-start",children:[e("span",{className:"truncate",children:l}),e("span",{className:m("truncate text-(--plass-muted-fg)",b[t]),children:n})]}):e("span",{className:"min-w-0 flex-1 truncate text-start",children:l})}export function PlMenuItem({onClick:t,href:o,target:c,rel:d,startIcon:p,endIcon:u,shortcut:h,description:f,color:x,closeOnClick:g=!0,disabled:b=!1,label:C,children:v,className:k,style:w}){const{size:z,density:P}=n.useContext(i),I=s(l,{children:[y(p)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:p}):null,e(RowBody,{description:f,size:z,children:v}),y(u)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:u}):null,y(h)?e("span",{className:shortcutClasses(z),children:h}):null]}),M=x?N(x,0):void 0,j=M||w?{...M,...w}:void 0;return void 0===o||b?e(a.Item,{disabled:b,label:C,closeOnClick:g,onClick:t,className:rowClasses(z,P,Boolean(x),k),style:j,children:I}):e(a.LinkItem,{href:o,target:c,rel:r(c,d),label:C,closeOnClick:g,onClick:t,className:rowClasses(z,P,Boolean(x),k),style:j,children:I})}export function PlMenuCheckboxItem({checked:l,defaultChecked:t,onCheckedChange:o,endIcon:r,shortcut:d,description:p,color:u,closeOnClick:h=!1,disabled:f=!1,label:x,children:g,className:b,style:C}){const{size:v,density:k}=n.useContext(i),w=u?N(u,0):void 0;return s(a.CheckboxItem,{checked:l,defaultChecked:t,onCheckedChange:e=>o?.(e),disabled:f,label:x,closeOnClick:h,className:rowClasses(v,k,Boolean(u),b),style:w||C?{...w,...C}:void 0,children:[e("span",{className:m(O,"text-(--p-accent)"),children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(c,{})})}),e(RowBody,{description:p,size:v,children:g}),y(r)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:r}):null,y(d)?e("span",{className:shortcutClasses(v),children:d}):null]})}export function PlMenuRadioGroup({value:s,defaultValue:l,onValueChange:n,disabled:t=!1,children:o,className:r,style:i}){return e(a.RadioGroup,{value:s,defaultValue:l,onValueChange:e=>n?.(e),disabled:t,className:r,style:i,children:o})}export function PlMenuRadioItem({value:l,endIcon:t,shortcut:o,description:r,color:c,closeOnClick:d=!1,disabled:u=!1,label:h,children:f,className:x,style:g}){const{size:b,density:C}=n.useContext(i),v=c?N(c,0):void 0;return s(a.RadioItem,{value:l,disabled:u,label:h,closeOnClick:d,className:rowClasses(b,C,Boolean(c),x),style:v||g?{...v,...g}:void 0,children:[e("span",{className:m(O,"text-(--p-accent)"),children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e(p,{})})}),e(RowBody,{description:r,size:b,children:f}),y(t)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:t}):null,y(o)?e("span",{className:shortcutClasses(b),children:o}):null]})}export function PlMenuGroup({label:l,children:t,className:o,style:r}){const{size:c,density:d}=n.useContext(i);return s(a.Group,{className:o,style:r,children:[y(l)?e(a.GroupLabel,{className:m(w[d][c],b[c],"font-semibold tracking-wide text-(--plass-muted-fg) uppercase"),children:l}):null,t]})}export function PlMenuSeparator({className:s,...l}){return e(a.Separator,{className:m("-mx-1 my-1 h-px bg-(--plass-divider)",s),...l})}export function PlMenuSubmenu({label:l,startIcon:t,disabled:o=!1,side:r,sideOffset:c=4,children:p,className:h,style:f}){const{size:x,density:g,color:b}=n.useContext(i);return s(a.SubmenuRoot,{children:[s(a.SubmenuTrigger,{disabled:o,className:rowClasses(x,g,!1),children:[y(t)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:t}):null,e("span",{className:"min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:m(O,"text-(--plass-muted-fg) -rotate-90 rtl:rotate-90"),children:e(d,{})})]}),e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:r??"inline-end",sideOffset:c,align:"start",children:e(a.Popup,{className:m(k,C[x],u[x],h),style:{...N(b,3),...f},children:p})})})]})}export function PlMenu({size:l,color:o,density:r,trigger:c,open:d,defaultOpen:p,onOpenChange:h,side:f="bottom",align:x="start",sideOffset:y=6,modal:g=!0,openOnHover:b=!1,loopFocus:v=!0,disabled:w=!1,className:z,style:O,children:P}){const I=t(),M=l??I.size??"md",j=o??I.color??"primary",R=r??I.density??"default",B=n.useMemo(()=>({size:M,color:j,density:R}),[M,j,R]);return e(i.Provider,{value:B,children:s(a.Root,{open:d,defaultOpen:p,onOpenChange:e=>h?.(e),modal:g,loopFocus:v,disabled:w,children:[c?e(a.Trigger,{render:c,openOnHover:b,disabled:w}):null,e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:f,align:x,sideOffset:y,children:e(a.Popup,{className:m(k,C[M],u[M],z),style:{...N(j,3),...O},children:P})})})]})})}export function PlContextMenu({size:l,color:a,density:r,content:c,children:d,open:p,defaultOpen:h,onOpenChange:f,loopFocus:x=!0,disabled:y=!1,className:g,style:b}){const v=t(),w=l??v.size??"md",z=a??v.color??"primary",O=r??v.density??"default",P=n.useMemo(()=>({size:w,color:z,density:O}),[w,z,O]);return e(i.Provider,{value:P,children:s(o.Root,{open:p,defaultOpen:h,onOpenChange:e=>f?.(e),loopFocus:x,disabled:y,children:[e(o.Trigger,{children:d}),e(o.Portal,{children:e(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",children:e(o.Popup,{className:m(k,C[w],u[w],g),style:{...N(z,3),...b},children:c})})})]})})}

package/dist/components/meter/PlMeter.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize, PlassThreshold } from '../../types.js';
+/**
+ * Where a band starts, and what the bar is made of from there up.
+ *
+ * The library's own `PlassThreshold` under the name this component shipped it
+ * as. A gauge reads the same bands, so the shape moved to `src/types.ts` and
+ * this stayed as the name a caller already imports.
+ */
+export type PlMeterThreshold = PlassThreshold;
+export interface PlMeterProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * How much there is.
+     *
+     * **Required, and that is the whole difference from a `PlProgressLinear`.** A
+     * meter reports a quantity that is already known — disk used, seats taken,
+     * how full a battery is — so there is no indeterminate case for it to have a
+     * default for. A bar with nothing to report is not a meter; it is a bar that
+     * should not have been drawn yet.
+     */
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** A name for what is being measured. Read out with the value. */
+    label?: React.ReactNode;
+    /**
+     * Shows the value as text beside the bar. A percentage of the range unless
+     * `format` says otherwise.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * How the value is written when it is shown — `Intl.NumberFormat` options, so
+     * bytes, currencies and plain counts all work. Without it the value is a
+     * percentage of `min`…`max`, which is the only formatting that holds for a
+     * range nobody described.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Bands that change the bar's family as the value climbs.
+     *
+     * The band with the highest `from` at or below the value wins, and `color` is
+     * what the bar is made of below all of them. Order does not matter; the list
+     * is read, not walked.
+     *
+     * This is the prop a meter exists for: a quota bar that is `primary` at a
+     * third full, `warning` at three quarters and `danger` at ninety percent
+     * says something a fixed colour cannot. The number is still written out by
+     * `showValue`, because a band is a second way of saying it and never the
+     * only one.
+     */
+    thresholds?: readonly PlMeterThreshold[];
+    /** Thickness of the groove. Nothing else on a meter has a size. */
+    size?: PlassSize;
+    /** The family the bar takes where no threshold applies. @default 'primary' */
+    color?: PlassColor;
+}
+/**
+ * A quantity inside a range, drawn as a bar.
+ *
+ * It looks like a [PlProgressLinear](./progress-linear) and it is not one, and
+ * the difference is worth stating because it decides which to reach for.
+ * **Progress is something advancing; a meter is something already known.** Disk
+ * used, seats taken, a password's strength, how full a battery is — none of
+ * them is going anywhere on its own, and none of them has an indeterminate
+ * state. So `value` is required here, there is no sweep, and the role a screen
+ * reader is given is `meter` rather than `progressbar`.
+ *
+ * `thresholds` is the prop it exists for. A quota bar that turns amber at three
+ * quarters and red at ninety percent says something a fixed colour cannot, and
+ * the colour is derived from the value rather than chosen by the caller at the
+ * moment they happened to be looking.
+ *
+ * Base UI owns the semantics — the role, the range attributes, `aria-valuetext`
+ * and the formatting — and it computes the fill width too, so what is left here
+ * is the material: the groove is `--plass-track` and the fill is the family's
+ * gradient, both the same as a progress bar's. One material, two meanings. The
+ * fill travels on `width` because a gradient cannot be transitioned and a
+ * length can.
+ */
+export declare const PlMeter: React.ForwardRefExoticComponent<PlMeterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/meter/PlMeter.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as r from"react";import{Meter as s}from"@base-ui/react/meter";import{useDefaults as a}from"../../internal/defaults.js";import{barThicknessClasses as t,fillClasses as o,fillTransitionClasses as m,progressSlots as n,trackClasses as i}from"../../internal/progress.js";import{cx as c,metaTextClasses as f,stackGapClasses as u}from"../../internal/styles.js";import{bandColor as d}from"../../internal/threshold.js";export const PlMeter=/* @__PURE__ */r.forwardRef(function PlMeter({value:r,min:p=0,max:h=100,label:x,showValue:j=!1,format:w,thresholds:N,size:b,color:y,className:v,style:g,...k},z){const M=a(),P=b??M.size??"md",R=y??M.color??"primary";return l(s.Root,{ref:z,value:r,min:p,max:h,format:w,locale:M.locale,className:c("flex w-full flex-col",u[P],v),style:{...n(d(r,R,N)),...g},...k,children:[x||j?l("div",{className:c("flex items-baseline gap-2",x?"justify-between":"justify-end",f[P]),children:[x?e(s.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:x}):null,j?e(s.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)"}):null]}):null,e(s.Track,{className:c("relative w-full overflow-hidden rounded-full",i,t[P]),children:e(s.Indicator,{className:c("rounded-full",o,m)})})]})});

package/dist/components/meter/index.d.ts

@@ -0,0 +1,2 @@
+export { PlMeter } from './PlMeter.js';
+export type { PlMeterProps, PlMeterThreshold } from './PlMeter.js';

package/dist/components/meter/index.js

@@ -0,0 +1 @@
+export{PlMeter}from"./PlMeter.js";

package/dist/components/mockup/PlMockup.d.ts

@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlMockupBezel, PlMockupDevice, PlMockupFinish, PlMockupHardware, PlMockupNotch, PlMockupOrientation, PlMockupOs, PlMockupResolution } from '../../internal/mockup.js';
+import type { PlassColor, PlassElevation, PlassSize } from '../../types.js';
+export type { PlMockupBezel, PlMockupDevice, PlMockupFinish, PlMockupHardware, PlMockupNotch, PlMockupOrientation, PlMockupOs, PlMockupResolution } from '../../internal/mockup.js';
+export interface PlMockupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which machine this is a picture of. The one prop with no default: a mockup
+     * that has not said what it is a mockup of has not said anything.
+     */
+    device: PlMockupDevice;
+    /**
+     * The system whose chrome is drawn on the screen. A desktop runs `macos`,
+     * `windows` or `linux`; a tablet runs `ipados` or `android`; a phone runs `ios`
+     * or `android`. Anything else falls back to the device's own default —
+     * `macos`, `ipados` and `ios` respectively.
+     */
+    os?: PlMockupOs;
+    /**
+     * What holds a desktop screen up: a stand under it, or a keyboard in front of
+     * it. Ignored on a tablet and a phone, which hold themselves up.
+     * @default 'monitor'
+     */
+    hardware?: PlMockupHardware;
+    /**
+     * How big the device is, on a five-step ladder of real resolutions per device
+     * — from a 320-wide phone to a 430-wide one, from a 1024-wide desktop to a
+     * 1920-wide one.
+     *
+     * As on Box, `size` here does not set a height or a type scale. What it sets
+     * is the resolution of the screen, which is the only thing about a device
+     * there is to scale. `resolution` overrides it outright.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * The screen's logical resolution in CSS pixels, when none of the five steps
+     * is the machine you mean. This is the viewport the content is laid out
+     * against, not the panel's physical pixel count.
+     */
+    resolution?: PlMockupResolution;
+    /**
+     * Which way a handheld is held. Landscape turns the screen, the bezel and the
+     * cut-out together. Ignored on a desktop, whose stand does not turn with it.
+     * @default 'portrait'
+     */
+    orientation?: PlMockupOrientation;
+    /**
+     * How much hardware there is around the screen. `none` is not a thinner
+     * bezel — it is no hardware at all, leaving the screen on its own with its
+     * corners cut, which is what a mockup that only wants the viewport asks for.
+     * `thick` is an older device: narrow sides, a forehead and a chin.
+     * @default 'standard'
+     */
+    bezel?: PlMockupBezel;
+    /**
+     * What the hardware is made of. Fixed colours rather than theme tokens — a
+     * graphite phone stays graphite on a page switched to dark.
+     * @default 'graphite'
+     */
+    finish?: PlMockupFinish;
+    /**
+     * The camera cut-out. Hardware rather than chrome, so it is drawn whether or
+     * not `systemUi` is on. Defaults to what the device would have: a dynamic
+     * island on an iOS phone, a punch hole on an Android one, nothing anywhere
+     * else.
+     */
+    notch?: PlMockupNotch;
+    /**
+     * Draws the system's own bars — a status bar and a home indicator, a menu bar
+     * and a dock, a taskbar. Each one takes its own space rather than covering the
+     * content, so turning it off gives the screen back to `children` rather than
+     * uncovering anything.
+     * @default true
+     */
+    systemUi?: boolean;
+    /**
+     * Whether content taller than the screen scrolls. Off, it is clipped, which is
+     * what a still picture of a device wants.
+     * @default false
+     */
+    scroll?: boolean;
+    /**
+     * What is behind the content: any CSS `background` value — a colour, a
+     * gradient, a `url()`.
+     * @default the page's own surface colour
+     */
+    wallpaper?: string;
+    /**
+     * The clock in the status bar or the taskbar, and the only text the chrome
+     * draws. A string rather than a `Date`, because a mockup's clock is a prop of
+     * the picture and reading the real one would differ between the server that
+     * renders the page and the browser that hydrates it.
+     * @default '9:41'
+     */
+    time?: string;
+    /**
+     * The rendered width of the whole device on the page — a number in pixels or
+     * any CSS length. The device is laid out at its own resolution and then scaled
+     * to whatever this comes to, so the content inside is genuinely a screen's
+     * worth rather than a page's worth shrunk.
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * The rendered height. Given on its own it decides the size and the width
+     * follows the device's proportion, which is what a mockup in a row of fixed
+     * height wants.
+     */
+    height?: number | string;
+    /** Reaches the accent in the chrome — a dock's first icon, a taskbar's. */
+    color?: PlassColor;
+    /**
+     * How far off the page the device sits. Drawn as a silhouette rather than a
+     * box, so the shadow follows a lid on a neck on a foot, and it does not shrink
+     * with the device.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Renders something other than a `<div>`: `render={<figure />}`. */
+    render?: useRender.RenderProp;
+    /** What is on the screen. */
+    children?: React.ReactNode;
+}
+/**
+ * A device with a screen you can put anything on: a phone, a tablet, a monitor
+ * or a laptop, with the system's own bars drawn on it.
+ *
+ * The screen is a viewport at the device's own resolution — a `md` phone is 390
+ * by 844 CSS pixels — and the whole device is then scaled once to whatever room
+ * it has been given. So the content inside is laid out against a screen rather
+ * than against the page: a 390-pixel column wraps where it would wrap on a
+ * phone, and the mockup can be 200 pixels wide on the page without the content
+ * knowing.
+ *
+ * That scale is a `transform`, and it is the one place in the library where one
+ * is used. The rule it is an exception to is about controls, where a scale
+ * resamples a label under the pointer that is pressing it. Nothing here is
+ * pressed and the scale never changes on an interaction: it is set once from the
+ * space available, which is the only way to draw a 1440-pixel desktop in a
+ * paragraph's width at all.
+ *
+ * The screen is also a container (`plass-screen`), so content inside can answer
+ * to the device's width with a container query rather than to the window's.
+ */
+export declare const PlMockup: React.ForwardRefExoticComponent<PlMockupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/mockup/PlMockup.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{useRender as a}from"@base-ui/react/use-render";import{PlMockupCutout as s,defaultNotch as l,elevationFilters as o,finishSlots as h,mockupChrome as d,mockupMetrics as n,resolveOs as c,shellClasses as u}from"../../internal/mockup.js";import{cx as p,surfaceSlots as m}from"../../internal/styles.js";import{usePlElementSize as f}from"../../hooks/usePlElementSize.js";import{useDefaults as g}from"../../internal/defaults.js";export const PlMockup=/* @__PURE__ */r.forwardRef(function PlMockup(v,w){const{device:b,os:x,hardware:y="monitor",size:k,resolution:N,orientation:z="portrait",bezel:R="standard",finish:$="graphite",notch:j,systemUi:M=!0,scroll:P=!1,wallpaper:H,time:W="9:41",width:S,height:B,color:C,elevation:E=0,render:F,className:I,style:T,children:U,...q}=v,A=g(),D=k??A.size??"md",G=C??A.color??"primary",J=c(b,x),K=j??l(b,J),L="desktop"!==b&&"landscape"===z,O=n({device:b,size:D,resolution:N,orientation:z,bezel:R,hardware:y}),{screen:Q,frame:V,body:X,stand:Y,base:Z}=O,_=r.useRef(null),ee=f(_),te=null===ee||ee.width<=0||ee.height<=0?null:Math.min(ee.width/V.width,ee.height/V.height),ie=r.useCallback(e=>{_.current=e,"function"==typeof w?w(e):w&&(w.current=e)},[w]),re=M?d({os:J,notch:K,landscape:L,time:W}):{},ae="none"===R,se=t("div",{className:"plass-mockup-screen relative flex flex-col overflow-hidden",style:{width:Q.width,height:Q.height,borderRadius:O.screenRadius,background:H??"var(--plass-surface)",boxShadow:ae?void 0:"inset 0 0 0 1px var(--p-shell-shade)"},children:[re.top?.node,t("div",{className:"flex min-h-0 flex-1",children:[re.start?.node,e("div",{className:"min-w-0 flex-1 "+(P?"overflow-auto":"overflow-hidden"),style:{containerType:"size",containerName:"plass-screen"},children:U})]}),re.bottom?.node,e(s,{notch:K,screen:Q,landscape:L})]}),le=p("plass-mockup relative block",I??"");return a({render:F,ref:ie,props:{className:le,style:{...m(G,E),...h[$],width:S??(void 0===B?"100%":"auto"),height:B??"auto",aspectRatio:`${V.width} / ${V.height}`,filter:o[E],...T},children:e("div",{className:"absolute inset-0 flex items-center justify-center",style:{visibility:null===te?"hidden":void 0},children:t("div",{className:"flex shrink-0 flex-col items-center",style:{width:V.width,height:V.height,transform:`scale(${te??1})`},children:[e("div",{className:ae?"":u,style:{width:X.width,height:X.height,borderRadius:O.frameRadius,paddingBlock:`${O.bezel.top}px ${O.bezel.bottom}px`,paddingInline:O.bezel.x},children:se}),Y?t(i,{children:[e("div",{"aria-hidden":"true",style:{width:Y.neckWidth,height:Y.neckHeight,background:"var(--p-shell-shade)",clipPath:"polygon(16% 0, 84% 0, 100% 100%, 0 100%)"}}),e("div",{"aria-hidden":"true",className:u,style:{width:Y.footWidth,height:Y.footHeight,borderRadius:Y.footHeight/2}})]}):null,Z?e("div",{"aria-hidden":"true",className:`relative ${u}`,style:{width:Z.width,height:Z.height,borderRadius:`0 0 ${Math.round(.55*Z.height)}px ${Math.round(.55*Z.height)}px`,clipPath:"polygon(0 0, 100% 0, 98.5% 100%, 1.5% 100%)"},children:e("div",{className:"absolute inset-x-0 top-0 mx-auto",style:{width:Z.lipWidth,height:Math.round(.34*Z.height),borderRadius:`0 0 ${Math.round(.2*Z.height)}px ${Math.round(.2*Z.height)}px`,background:"var(--p-shell-shade)"}})}):null]})}),...q}})});

package/dist/components/mockup/index.d.ts

@@ -0,0 +1,2 @@
+export { PlMockup } from './PlMockup.js';
+export type { PlMockupBezel, PlMockupDevice, PlMockupFinish, PlMockupHardware, PlMockupNotch, PlMockupOrientation, PlMockupOs, PlMockupProps, PlMockupResolution } from './PlMockup.js';

package/dist/components/mockup/index.js

@@ -0,0 +1 @@
+export{PlMockup}from"./PlMockup.js";

package/dist/components/modal/PlModal.d.ts

@@ -111,4 +111,4 @@ export declare const PlModalClose: 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 PlCard.
  */
-export declare function PlModal({ size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: PlModalProps): React.JSX.Element;
+export declare function PlModal({ size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel: closeLabelProp, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: PlModalProps): React.JSX.Element;

package/dist/components/modal/PlModal.js

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

package/dist/components/navigation-menu/PlNavigationMenu.d.ts

@@ -48,6 +48,12 @@ export interface PlNavigationMenuItemProps {
     value?: string;
     /** Unavailable. The word stays in the row and opens nothing. */
     disabled?: boolean;
+    /**
+     * The page the reader is on. A link item is marked `aria-current="page"` and
+     * drawn in the accent, so the row says where the reader is as well as where
+     * they can go. Ignored on an item that opens a panel.
+     */
+    active?: boolean;
     /** How many columns the panel lays its links out in. @default 1 */
     columns?: number;
     /** The panel's contents — usually `PlNavigationMenuLink`s. */
@@ -84,7 +90,7 @@ export declare const PlNavigationMenuLink: React.ForwardRefExoticComponent<PlNav
  * is a link, and the difference is not cosmetic — the second is announced as a
  * destination and the first as something that expands.
  */
-export declare function PlNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, columns, children, className, style }: PlNavigationMenuItemProps): React.ReactElement;
+export declare function PlNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, active, columns, children, className, style }: PlNavigationMenuItemProps): React.ReactElement;
 /**
  * A site's navigation: a row of destinations, some of which open a panel of
  * more of them.

package/dist/components/navigation-menu/PlNavigationMenu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as s}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{NavigationMenu as l}from"@base-ui/react/navigation-menu";import{ChevronIcon as r}from"../../internal/icons.js";import{safeRel as i}from"../../internal/link.js";import{controlHeightClasses as o,controlTextClasses as d,controlTextLeadingClasses as c,cx as p,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as x,paddingXClasses as y,radiusClasses as N,surfaceSlots as b,transitionClasses as w}from"../../internal/styles.js";const j=/* @__PURE__ */t.createContext({size:"md",density:"default"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),z=/* @__PURE__ */[h,"relative border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none] overflow-hidden","[transition:opacity_var(--plass-duration)_var(--plass-ease),width_var(--plass-duration)_var(--plass-ease),height_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",w,v,"hover:bg-(--p-soft)",m].join(" "),_={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */t.forwardRef(function PlNavigationMenuLink({href:s,title:n,description:r,startIcon:i,className:o,children:d,...u},m){const{size:h,density:v}=t.useContext(j);return a(l.Link,{ref:m,href:s,className:p(k,N[h],f[h],y[v][h],"py-2",o),...u,children:[g(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:p("font-medium",c[h]),children:n}),g(r)?e("span",{className:p("text-(--plass-muted-fg)",x[h]),children:r}):null,d]})]})});export function PlNavigationMenuItem({label:n,href:c,target:u,rel:m,startIcon:h,value:v,disabled:x=!1,columns:b=1,children:w,className:z,style:k}){const{size:C,density:M}=t.useContext(j),I=void 0!==c&&!g(w),L=p(P,o[C],d[C],f[C],y[M][C],N[C],z);return e(l.Item,{value:v,children:I?a(l.Link,{href:c,target:u,rel:i(u,m),className:L,style:k,children:[g(h)?h:null,n]}):a(s,{children:[a(l.Trigger,{disabled:x,className:L,style:k,children:[g(h)?h:null,n,e(l.Icon,{className:"flex items-center [transition:rotate_var(--plass-duration)_var(--plass-ease)] data-[popup-open]:rotate-180",children:e(r,{})})]}),e(l.Content,{className:p("grid gap-1",_[C]),style:b>1?{gridTemplateColumns:`repeat(${b}, minmax(0, 1fr))`}:void 0,children:w})]})})}export const PlNavigationMenu=/* @__PURE__ */t.forwardRef(function PlNavigationMenu({size:s,color:r,density:i,orientation:o="horizontal",value:d,defaultValue:c,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:x,children:y,...w},P){const k=n(),_=s??k.size??"md",C=r??k.color??"primary",M=i??k.density??"default",I=t.useMemo(()=>({size:_,density:M}),[_,M]);return e(j.Provider,{value:I,children:a(l.Root,{ref:P,orientation:o,value:d,defaultValue:c,onValueChange:e=>u?.(e),delay:m,closeDelay:h,className:v,style:{...b(C,3),...x},...w,children:[e(l.List,{className:p("flex items-center","vertical"===o?"flex-col items-stretch":"flex-row",f[_]),children:y}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:g,collisionPadding:12,children:e(l.Popup,{className:p(z,N[_]),children:e(l.Viewport,{})})})})]})})});
+"use client";import{jsx as e,jsxs as a,Fragment as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as n}from"../../internal/defaults.js";import{NavigationMenu as r}from"@base-ui/react/navigation-menu";import{ChevronIcon as l}from"../../internal/icons.js";import{safeRel as i}from"../../internal/link.js";import{controlHeightClasses as o,controlTextClasses as c,controlTextLeadingClasses as d,cx as p,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as x,paddingXClasses as y,radiusClasses as N,surfaceSlots as b,transitionClasses as w}from"../../internal/styles.js";const j=/* @__PURE__ */s.createContext({size:"md",density:"default"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","aria-[current=page]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),z=/* @__PURE__ */[h,"relative border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none] overflow-hidden","[transition:opacity_var(--plass-duration)_var(--plass-ease),width_var(--plass-duration)_var(--plass-ease),height_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",w,v,"hover:bg-(--p-soft)",m].join(" "),_={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */s.forwardRef(function PlNavigationMenuLink({href:t,title:n,description:l,startIcon:o,className:c,children:u,target:m,rel:h,...v},b){const{size:w,density:P}=s.useContext(j);return a(r.Link,{ref:b,href:t,target:m,rel:i(m,h),className:p(k,N[w],f[w],y[P][w],"py-2",c),...v,children:[g(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null,a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:p("font-medium",d[w]),children:n}),g(l)?e("span",{className:p("text-(--plass-muted-fg)",x[w]),children:l}):null,u]})]})});export function PlNavigationMenuItem({label:n,href:d,target:u,rel:m,startIcon:h,value:v,disabled:x=!1,active:b=!1,columns:w=1,children:z,className:k,style:C}){const{size:M,density:I}=s.useContext(j),L=void 0!==d&&!g(z),V=p(P,o[M],c[M],f[M],y[I][M],N[M],k);return e(r.Item,{value:v,children:L?a(r.Link,{href:d,target:u,rel:i(u,m),"aria-current":b?"page":void 0,className:V,style:C,children:[g(h)?h:null,n]}):a(t,{children:[a(r.Trigger,{disabled:x,className:V,style:C,children:[g(h)?h:null,n,e(r.Icon,{className:"flex items-center [transition:rotate_var(--plass-duration)_var(--plass-ease)] data-[popup-open]:rotate-180",children:e(l,{})})]}),e(r.Content,{className:p("grid gap-1",_[M]),style:w>1?{gridTemplateColumns:`repeat(${w}, minmax(0, 1fr))`}:void 0,children:z})]})})}export const PlNavigationMenu=/* @__PURE__ */s.forwardRef(function PlNavigationMenu({size:t,color:l,density:i,orientation:o="horizontal",value:c,defaultValue:d,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:x,children:y,...w},P){const k=n(),_=t??k.size??"md",C=l??k.color??"primary",M=i??k.density??"default",I=s.useMemo(()=>({size:_,density:M}),[_,M]);return e(j.Provider,{value:I,children:a(r.Root,{ref:P,orientation:o,value:c,defaultValue:d,onValueChange:e=>u?.(e),delay:m,closeDelay:h,className:v,style:{...b(C,3),...x},...w,children:[e(r.List,{className:p("flex items-center","vertical"===o?"flex-col items-stretch":"flex-row",f[_]),children:y}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:g,collisionPadding:12,children:e(r.Popup,{className:p(z,N[_]),children:e(r.Viewport,{})})})})]})})});

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

@@ -141,4 +141,4 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
  * clamping, the press-and-hold repeat on the steppers, and the hidden input that
  * submits with a form.
  */
-export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;
+export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;

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

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

package/dist/components/otp-field/PlOtpField.d.ts

@@ -75,6 +75,12 @@ export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPr
     readOnly?: boolean;
     /** Puts the caret in the first slot on mount. @default false */
     autoFocus?: boolean;
+    /**
+     * What each slot is called after the field's label, given its place in the
+     * row and the length. Never drawn.
+     * @default `Character {n} of {length}`, from the label pack
+     */
+    slotLabel?: (index: number, count: number) => string;
 }
 /**
  * A row of one-character slots: a PIN, a texted verification code, an invite