plass-ui 1.7.0 → 1.8.1

package/dist/components/list/PlList.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlListProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a list is a sheet lying flat, not a
      * key resting on one.
@@ -52,6 +54,15 @@ export interface PlListItemProps extends Omit<React.ComponentPropsWithoutRef<'li
     selected?: boolean;
     /** Unavailable. The light goes out, the same way it does everywhere else. */
     disabled?: boolean;
+    /**
+     * Renders the row's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, as on `PlTextLink`.
+     *
+     * Giving one makes the row a link, as an `href` does, and an `href` on the
+     * element wins over the row's own. A disabled row goes nowhere, so it does
+     * not use it.
+     */
+    render?: useRender.RenderProp;
     /** The label. */
     children?: React.ReactNode;
 }
@@ -73,10 +84,12 @@ export declare const PlList: React.ForwardRefExoticComponent<PlListProps & React
  * One row.
  *
  * The shell is always an `<li>`. What changes is what is inside it: a plain run
- * of content, or — when `onClick` or `href` is given — a real `<button>` or
- * `<a>` wrapping that content, with `action` sitting outside it as a separate
- * control. This is the same shape a `PlChip` uses, for the same two reasons: a
- * `<span>` carrying a click handler is invisible to a keyboard, and a
- * `<button>` inside a `<button>` is markup the browser silently un-nests.
+ * of content, or — when `onClick`, `href` or `render` is given — a real
+ * `<button>` or `<a>` wrapping that content, with `action` sitting outside it
+ * as a separate control. This is the same shape a `PlChip` uses, for the same
+ * two reasons: a `<span>` carrying a click handler is invisible to a keyboard,
+ * and a `<button>` inside a `<button>` is markup the browser silently un-nests.
+ * A disabled row keeps its element: the `<a>` loses its address and the
+ * `<button>` takes `disabled`.
  */
 export declare const PlListItem: React.ForwardRefExoticComponent<PlListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/PlList.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as a}from"@base-ui/react/use-render";import{focusRingClasses as i,gapClasses as n,glassClasses as o,hasContent as d,iconClasses as c,metaTextClasses as p,paddingXClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const g=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),v={solid:/* @__PURE__ */[o,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[o,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},y={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},b=m,N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l,color:i,density:n,elevation:o=0,dividers:d=!1,render:c,className:p,style:m,children:x,...y},b){const N=t(),j=l??N.size??"md",w=i??N.color??"primary",k=n??N.density??"default",z=r.useMemo(()=>({size:j,density:k,dividers:d}),[j,k,d]),C=["m-0 flex list-none flex-col",f[j],v[s],h,d?"overflow-hidden p-0 [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",p??""].filter(Boolean).join(" "),P=a({render:c,ref:b,props:{role:"list",className:C,style:{...u(w,o),...m},children:x,...y}});return e(g.Provider,{value:z,children:P})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:a,description:o,action:m,href:f,selected:u=!1,disabled:v=!1,className:j,children:w,onClick:k,...z},C){const{size:P,density:B,dividers:I}=r.useContext(g),L=Boolean(k||f)&&!v,$=b[B][P],R=["flex min-w-0 flex-1 items-center text-start",$,y[B][P],n[P],x[P],h,c,I?"":N[P],v?"cursor-not-allowed opacity-50 saturate-[0.35]":u?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",L?`cursor-pointer ${i}`:"",L&&!u?"hover:bg-(--p-soft)":"",L&&u?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),F=s(l,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(w)?e("span",{className:"truncate",children:w}):null,d(o)?e("span",{className:`truncate text-(--plass-muted-fg) ${p[P]}`,children:o}):null]}),d(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:a}):null]});return s("li",{ref:C,className:["flex w-full items-center",j??""].filter(Boolean).join(" "),...z,children:[L&&f?e("a",{href:f,className:R,"aria-current":u?"page":void 0,onClick:k,children:F}):L?e("button",{type:"button",className:R,"aria-current":!!u||void 0,onClick:k,children:F}):e("div",{className:R,"aria-disabled":v||void 0,children:F}),d(m)?e("div",{className:`flex shrink-0 items-center ${$}`,children:m}):null]})});
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as a}from"@base-ui/react/use-render";import{focusRingClasses as i,gapClasses as n,glassClasses as o,hasContent as d,iconClasses as c,metaTextClasses as p,paddingXClasses as m,radiusClasses as f,sheetBodyClasses as x,surfaceSlots as u,transitionClasses as h}from"../../internal/styles.js";const v=/* @__PURE__ */r.createContext({size:"md",density:"default",dividers:!1}),g={solid:/* @__PURE__ */[o,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[o,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"},y={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},b=m,N={xs:f.xs,sm:f.xs,md:f.sm,lg:f.sm,xl:f.md};export const PlList=/* @__PURE__ */r.forwardRef(function PlList({variant:s="glass",size:l,color:i,density:n,elevation:o=0,dividers:d=!1,render:c,className:p,style:m,children:x,...y},b){const N=t(),j=l??N.size??"md",w=i??N.color??"primary",k=n??N.density??"default",z=r.useMemo(()=>({size:j,density:k,dividers:d}),[j,k,d]),B=["m-0 flex list-none flex-col",f[j],g[s],h,d?"overflow-hidden p-0 [&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]":"p-1",p??""].filter(Boolean).join(" "),C=a({render:c,ref:b,props:{role:"list",className:B,style:{...u(w,o),...m},children:x,...y}});return e(v.Provider,{value:z,children:C})});export const PlListItem=/* @__PURE__ */r.forwardRef(function PlListItem({startIcon:t,endIcon:o,description:m,action:f,href:u,selected:g=!1,disabled:j=!1,render:w,className:k,children:z,onClick:B,...C},P){const{size:I,density:L,dividers:$}=r.useContext(v),R=Boolean(u||w),F=(R||Boolean(B))&&!j,M=b[L][I],q=["flex min-w-0 flex-1 items-center text-start",M,y[L][I],n[I],x[I],h,c,$?"":N[I],j?"cursor-not-allowed opacity-50 saturate-[0.35]":g?"bg-(--p-soft-press) font-medium text-(--p-accent)":"",F?`cursor-pointer ${i}`:"",F&&!g?"hover:bg-(--p-soft)":"",F&&g?"hover:bg-(--p-soft-press)":""].filter(Boolean).join(" "),A=s(l,{children:[d(t)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:t}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(z)?e("span",{className:"truncate",children:z}):null,d(m)?e("span",{className:`truncate text-(--plass-muted-fg) ${p[I]}`,children:m}):null]}),d(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:o}):null]}),D=a({render:j?e("a",{}):w??e("a",{}),enabled:R,props:{href:j?void 0:u,role:j?"link":void 0,"aria-disabled":j||void 0,className:q,"aria-current":g&&!j?"page":void 0,onClick:j?void 0:B,children:A}});return s("li",{ref:P,className:["flex w-full items-center",k??""].filter(Boolean).join(" "),...C,children:[D||(B?e("button",{type:"button",className:q,disabled:j,"aria-current":!(!g||j)||void 0,onClick:B,children:A}):e("div",{className:q,"aria-disabled":j||void 0,children:A})),d(f)?e("div",{className:`flex shrink-0 items-center ${M}`,children:f}):null]})});

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Menu as BaseUIMenu } from '@base-ui/react/menu';
+import type { useRender } from '@base-ui/react/use-render';
 import type { PlassAlign, PlassColor, PlassSide, PlassStyleProps } from '../../types.js';
 /**
  * A menu takes `size`, `color` and `density` and stops there.
@@ -73,6 +75,16 @@ export interface PlMenuItemProps {
     target?: string;
     /** The link's `rel`. Ignored without `href`. */
     rel?: string;
+    /**
+     * Renders the row's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, handed to its link row.
+     *
+     * Giving one makes the row a link, as an `href` does, and an `href` on the
+     * element wins over the row's own. The row's role, its highlight and the
+     * arrow keys stay Base UI's. A disabled row is not a link, so it does not use
+     * it.
+     */
+    render?: useRender.RenderProp<BaseUIMenu.LinkItem.State>;
     /** Content before the label — an icon, a swatch, a check. */
     startIcon?: React.ReactNode;
     /** Content after the label, before any `shortcut`. */
@@ -124,7 +136,7 @@ export interface PlMenuGroupProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'startIcon' | 'onClick'> {
+export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'render' | 'startIcon' | 'onClick'> {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
@@ -145,7 +157,7 @@ export interface PlMenuRadioGroupProps {
     className?: string;
     style?: React.CSSProperties;
 }
-export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'startIcon' | 'onClick'> {
+export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'rel' | 'render' | 'startIcon' | 'onClick'> {
     /** What this row sets the group to. */
     value: string | number;
     /** @default false */
@@ -155,12 +167,12 @@ export type PlMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
 /**
  * One row of a menu.
  *
- * Renders a real `<a>` when it is given an `href` and Base UI's own item
- * otherwise — the same split `PlListItem` makes, for the same reason. A menu of
- * 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.
+ * Renders a real `<a>` when it is given an `href` or a `render` and Base UI's
+ * own item otherwise — the same split `PlListItem` makes, for the same reason.
+ * A menu of 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, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuItemProps): React.JSX.Element;
+export declare function PlMenuItem({ onClick, href, target, rel, render, 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 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)]","motion-reduce:[transition-duration:0ms]","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})})})]})})}
+"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)]","motion-reduce:[transition-duration:0ms]","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,render:p,startIcon:u,endIcon:h,shortcut:f,description:x,color:g,closeOnClick:b=!0,disabled:C=!1,label:v,children:k,className:w,style:z}){const{size:P,density:I}=n.useContext(i),M=s(l,{children:[y(u)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:u}):null,e(RowBody,{description:x,size:P,children:k}),y(h)?e("span",{className:m(O,"text-(--plass-muted-fg)"),children:h}):null,y(f)?e("span",{className:shortcutClasses(P),children:f}):null]}),j=g?N(g,0):void 0,R=j||z?{...j,...z}:void 0;return void 0===o&&void 0===p||C?e(a.Item,{disabled:C,label:v,closeOnClick:b,onClick:t,className:rowClasses(P,I,Boolean(g),w),style:R,children:M}):e(a.LinkItem,{render:p,href:o,target:c,rel:r(c,d),label:v,closeOnClick:b,onClick:t,className:rowClasses(P,I,Boolean(g),w),style:R,children:M})}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/menubar/PlMenubar.js

@@ -1 +1 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Menubar as r}from"@base-ui/react/menubar";import{PlMenu as n}from"../menu/PlMenu.js";import{MenuContext as a}from"../../internal/menu.js";import{controlTextClasses as i,cx as l,gapClasses as c,hasContent as p,iconClasses as d,paddingXClasses as u,radiusClasses as m,transitionClasses as f}from"../../internal/styles.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,d,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:o,startIcon:r,disabled:d=!1,children:f,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(a);return t(n,{size:g,color:y,density:j,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:l(h,b[g],i[g],c[g],u["default"===j?"compact":j][g],m[g],v),style:x,children:[p(r)?r:null,o]}),children:f})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e,color:n,density:i,orientation:p="horizontal",modal:d=!0,loopFocus:u=!0,disabled:m=!1,className:f,style:b,children:h,...v},x){const g=o(),y=e??g.size??"md",j=n??g.color??"primary",M=i??g.density??"default",w=s.useMemo(()=>({size:y,color:j,density:M}),[y,j,M]);return t(a.Provider,{value:w,children:t(r,{ref:x,orientation:p,modal:d,loopFocus:u,disabled:m,className:l("flex items-center","vertical"===p?"flex-col items-stretch":"flex-row",c[y],f),style:{"--p-soft":`var(--plass-${j}-soft)`,"--p-soft-hover":`var(--plass-${j}-soft-hover)`,"--p-accent":`var(--plass-${j}-accent)`,"--p-ring":`var(--plass-${j}-ring)`,...b},...v,children:h})})});
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Menubar as r}from"@base-ui/react/menubar";import{PlMenu as n}from"../menu/PlMenu.js";import{MenuContext as a}from"../../internal/menu.js";import{controlTextClasses as i,cx as l,gapClasses as c,hasContent as p,iconClasses as d,paddingXClasses as u,radiusClasses as m,transitionClasses as f}from"../../internal/styles.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center p-0","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,d,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:o,startIcon:r,disabled:d=!1,children:f,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(a);return t(n,{size:g,color:y,density:j,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:l(h,b[g],i[g],c[g],u["default"===j?"compact":j][g],m[g],v),style:x,children:[p(r)?r:null,o]}),children:f})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e,color:n,density:i,orientation:p="horizontal",modal:d=!0,loopFocus:u=!0,disabled:m=!1,className:f,style:b,children:h,...v},x){const g=o(),y=e??g.size??"md",j=n??g.color??"primary",M=i??g.density??"default",w=s.useMemo(()=>({size:y,color:j,density:M}),[y,j,M]);return t(a.Provider,{value:w,children:t(r,{ref:x,orientation:p,modal:d,loopFocus:u,disabled:m,className:l("flex items-center","vertical"===p?"flex-col items-stretch":"flex-row",c[y],f),style:{"--p-soft":`var(--plass-${j}-soft)`,"--p-soft-hover":`var(--plass-${j}-soft-hover)`,"--p-accent":`var(--plass-${j}-accent)`,"--p-ring":`var(--plass-${j}-ring)`,...b},...v,children:h})})});

package/dist/components/meter/PlMeter.js

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

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

@@ -101,9 +101,10 @@ export interface PlMockupProps extends Omit<React.ComponentPropsWithoutRef<'div'
      * worth rather than a page's worth shrunk.
      *
      * A number, with `height` left out or a number too, is a size known on the
-     * server, so a server-rendered page has the device in its first HTML. Any
-     * other length is measured in the browser first, and the device is hidden
-     * until it has been.
+     * server, and the device is drawn at that scale in the first HTML. With any
+     * other length the stylesheet works the scale out from the box until the
+     * browser has measured it, so a server-rendered page has the device in its
+     * first HTML either way.
      * @default '100%'
      */
     width?: number | string;

package/dist/components/mockup/PlMockup.js

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

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

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { NavigationMenu as BaseUINavigationMenu } from '@base-ui/react/navigation-menu';
+import type { useRender } from '@base-ui/react/use-render';
 import type { PlassOrientation, PlassStyleProps } from '../../types.js';
 export interface PlNavigationMenuProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
     /**
@@ -21,7 +23,7 @@ export interface PlNavigationMenuProps extends Pick<PlassStyleProps, 'size' | 'c
     /** The items. */
     children?: React.ReactNode;
 }
-export interface PlNavigationMenuItemProps {
+interface PlNavigationMenuItemBaseProps {
     /** The word in the row. */
     label: React.ReactNode;
     /**
@@ -46,7 +48,11 @@ export interface PlNavigationMenuItemProps {
      * uncontrolled one — Base UI gives each item an identity of its own.
      */
     value?: string;
-    /** Unavailable. The word stays in the row and opens nothing. */
+    /**
+     * Unavailable. The word stays in the row, dimmed, and opens nothing or goes
+     * nowhere: a link item loses its `href` and its `render`. It is announced as
+     * unavailable, and neither the arrow keys nor Tab stop on it.
+     */
     disabled?: boolean;
     /**
      * The page the reader is on. A link item is marked `aria-current="page"` and
@@ -56,13 +62,41 @@ export interface PlNavigationMenuItemProps {
     active?: boolean;
     /** How many columns the panel lays its links out in. @default 1 */
     columns?: number;
-    /** The panel's contents — usually `PlNavigationMenuLink`s. */
-    children?: React.ReactNode;
     /** Classes on the word in the row, alongside the component's own. */
     className?: string;
     /** Inline styles on that word. */
     style?: React.CSSProperties;
 }
+/** An item that goes somewhere: an `href`, a `render`, or both, and no panel. */
+interface PlNavigationMenuItemLinkProps extends PlNavigationMenuItemBaseProps {
+    /**
+     * Renders the item's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, handed to its link part.
+     *
+     * Giving one makes the item a link, as an `href` does, and an `href` on the
+     * element wins over the item's own, as on `PlTextLink`. The arrow keys that
+     * move along the row stay Base UI's. A disabled item leaves it out.
+     */
+    render?: useRender.RenderProp<BaseUINavigationMenu.Link.State>;
+    /** A link has no panel. */
+    children?: undefined;
+}
+/** An item that opens a panel. */
+interface PlNavigationMenuItemPanelProps extends PlNavigationMenuItemBaseProps {
+    /** The panel's contents — usually `PlNavigationMenuLink`s. */
+    children?: React.ReactNode;
+    /** Not on an item that opens a panel, which is a trigger rather than a link. */
+    render?: undefined;
+}
+/**
+ * The props of a `PlNavigationMenuItem`.
+ *
+ * A union, so that `render` cannot be given to an item that opens a panel. That
+ * item is a trigger, and a router's `Link` in its place would be a link that
+ * expands, which is neither of the two things a row's word can be. A call
+ * without `render` is the same as before.
+ */
+export type PlNavigationMenuItemProps = PlNavigationMenuItemLinkProps | PlNavigationMenuItemPanelProps;
 export interface PlNavigationMenuLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'title'> {
     /** Where it goes. */
     href: string;
@@ -72,6 +106,14 @@ export interface PlNavigationMenuLinkProps extends Omit<React.ComponentPropsWith
     description?: React.ReactNode;
     /** A glyph before the title. */
     startIcon?: React.ReactNode;
+    /**
+     * Renders the link as something other than an `<a>`: the `Link` a router
+     * brings. Base UI's own escape hatch, handed to its link part.
+     *
+     * An `href` on the element wins over the one above, as on `PlTextLink`, and
+     * the arrow keys that move between the links stay Base UI's.
+     */
+    render?: useRender.RenderProp<BaseUINavigationMenu.Link.State>;
 }
 /**
  * One row inside a panel: where it goes, what it is called, and a line saying
@@ -86,11 +128,12 @@ export declare const PlNavigationMenuLink: React.ForwardRefExoticComponent<PlNav
 /**
  * One word in the row, and what opens under it.
  *
- * With children it is a trigger and a panel; with an `href` and nothing else it
- * is a link, and the difference is not cosmetic — the second is announced as a
- * destination and the first as something that expands.
+ * With children it is a trigger and a panel; with an `href` or a `render` and
+ * nothing else it is a link, and the difference is not cosmetic — the second is
+ * announced as a destination and the first as something that expands. A
+ * `render` reaching a trigger from a caller the type did not check is ignored.
  */
-export declare function PlNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, active, columns, children, className, style }: PlNavigationMenuItemProps): React.ReactElement;
+export declare function PlNavigationMenuItem({ label, href, target, rel, render, 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.
@@ -108,3 +151,4 @@ export declare function PlNavigationMenuItem({ label, href, target, rel, startIc
  * rather than three.
  */
 export declare const PlNavigationMenu: React.ForwardRefExoticComponent<PlNavigationMenuProps & React.RefAttributes<HTMLElement>>;
+export {};

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

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as o}from"../../internal/icons.js";import{safeRel as s}from"../../internal/link.js";import{controlHeightClasses as l,controlTextClasses as p,controlTextLeadingClasses as c,cx as d,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as y,metaTextClasses as v,paddingXClasses as b,radiusClasses as x,surfaceSlots as w,transitionClasses as N}from"../../internal/styles.js";const j=/* @__PURE__ */n.createContext({size:"md",density:"default",orientation:"horizontal"}),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]",N,y,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(" "),F=/* @__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","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),z=/* @__PURE__ */["[transition-property:opacity,width,height]","in-data-[instant]:[transition-property:opacity]"].join(" "),C=/* @__PURE__ */["plass-portal z-(--plass-z-portal) [outline:none]","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]"].join(" "),S=/* @__PURE__ */["[transition-property:top,left,right,bottom]","motion-reduce:[transition-property:none] data-[instant]:[transition-property:none]"].join(" "),k=/* @__PURE__ */new Set(["width","height","top","left","right","bottom"]),M=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",N,y,"hover:bg-(--p-soft)",m].join(" "),A={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */n.forwardRef(function PlNavigationMenuLink({href:a,title:r,description:o,startIcon:l,className:p,children:u,target:m,rel:h,...y},w){const{size:N,density:P}=n.useContext(j);return t(i.Link,{ref:w,href:a,target:m,rel:s(m,h),className:d(M,x[N],f[N],b[P][N],"py-2",p),...y,children:[g(l)?e("span",{className:d("flex h-[1lh] shrink-0 items-center",c[N]),children:l}):null,t("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:d("font-medium",c[N]),children:r}),g(o)?e("span",{className:d("text-(--plass-muted-fg)",v[N]),children:o}):null,u]})]})});export function PlNavigationMenuItem({label:r,href:c,target:u,rel:m,startIcon:h,value:y,disabled:v=!1,active:w=!1,columns:N=1,children:F,className:z,style:C}){const{size:S,density:k,orientation:M}=n.useContext(j),L=void 0!==c&&!g(F),R=d(P,"vertical"===M&&"w-full",l[S],p[S],f[S],b[k][S],x[S],z);return e(i.Item,{value:y,children:L?t(i.Link,{href:c,target:u,rel:s(u,m),"aria-current":w?"page":void 0,className:R,style:C,children:[g(h)?h:null,r]}):t(a,{children:[t(i.Trigger,{disabled:v,className:R,style:C,children:[g(h)?h:null,r,e(i.Icon,{className:d("flex items-center","vertical"===M?"-rotate-90 rtl:rotate-90":"[transition:rotate_var(--plass-duration)_var(--plass-ease)] motion-reduce:[transition-duration:0ms] data-[popup-open]:rotate-180"),children:e(o,{})})]}),e(i.Content,{keepMounted:!0,className:d("grid w-max max-w-[calc(var(--available-width)-2px)] gap-1 [&[hidden]]:hidden",A[S]),style:N>1?{gridTemplateColumns:`repeat(${N}, minmax(0, 1fr))`}:void 0,children:F})]})})}export const PlNavigationMenu=/* @__PURE__ */n.forwardRef(function PlNavigationMenu({size:a,color:o,density:s,orientation:l="horizontal",value:p,defaultValue:c,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:y,style:v,children:b,...N},P){const M=r(),A=a??M.size??"md",L=o??M.color??"primary",R=s??M.density??"default",V=n.useMemo(()=>({size:A,density:R,orientation:l}),[A,R,l]),[I,O]=n.useState(c??null),T=void 0!==p?p:I,[W,q]=n.useState(T),[E,$]=n.useState(!1);W!==T&&(q(T),$(null!==T&&null!==W));const[D,_]=n.useState(null),[B,G]=n.useState(null),H=n.useRef(null),J=n.useCallback(()=>{const e=H.current;if(!D||!e||!B)return;const t=getComputedStyle(B),a=Number.parseFloat(t.width),n=Number.parseFloat(t.height);if(!(a>0&&n>0))return;const r=getComputedStyle(e),i=Number.parseFloat(r.borderLeftWidth)+Number.parseFloat(r.borderRightWidth),o=Number.parseFloat(r.borderTopWidth)+Number.parseFloat(r.borderBottomWidth);D.style.setProperty("--p-panel-w",`${a+i}px`),D.style.setProperty("--p-panel-h",`${n+o}px`)},[D,B]);return n.useLayoutEffect(()=>{null!==T&&J()},[T,J]),n.useEffect(()=>{if(!B||"undefined"==typeof ResizeObserver)return;let e=0;const t=new ResizeObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(J)});return t.observe(B),()=>{cancelAnimationFrame(e),t.disconnect()}},[B,J]),n.useEffect(()=>{const e=H.current;if(!E||!D||!e)return;const t=[D,e];let a=0;const settle=()=>{for(const e of t)getComputedStyle(e).getPropertyValue("width");t.some(e=>e.getAnimations().some(e=>e instanceof CSSTransition&&k.has(e.transitionProperty)&&"finished"!==e.playState))?a=requestAnimationFrame(settle):$(!1)};return a=requestAnimationFrame(settle),()=>{cancelAnimationFrame(a)}},[E,D]),e(j.Provider,{value:V,children:t(i.Root,{ref:P,orientation:l,value:p,defaultValue:c,onValueChange:e=>{void 0===p&&O(e),u?.(e)},delay:m,closeDelay:h,className:y,style:{...w(L,3),...v},...N,children:[e(i.List,{className:d("m-0 flex list-none items-center p-0","vertical"===l?"flex-col items-stretch":"flex-row",f[A]),children:b}),e(i.Portal,{keepMounted:!0,children:e(i.Positioner,{ref:_,className:d(C,E?S:"[transition-property:none]"),side:"vertical"===l?"inline-end":"bottom",align:"vertical"===l?"start":"center",sideOffset:g,collisionPadding:12,children:e(i.Popup,{ref:H,className:d(F,E?z:"[transition-property:opacity]",x[A]),children:e(i.Viewport,{ref:G,className:"w-max"})})})})]})})});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as o}from"../../internal/icons.js";import{safeRel as s}from"../../internal/link.js";import{controlHeightClasses as l,controlTextClasses as d,controlTextLeadingClasses as p,cx as c,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as y,paddingXClasses as b,radiusClasses as x,surfaceSlots as w,transitionClasses as N}from"../../internal/styles.js";const j=/* @__PURE__ */n.createContext({size:"md",density:"default",orientation:"horizontal"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center p-0","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",N,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(" "),F=/* @__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","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["[transition-property:opacity,width,height]","in-data-[instant]:[transition-property:opacity]"].join(" "),z=/* @__PURE__ */["plass-portal z-(--plass-z-portal) [outline:none]","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]"].join(" "),C=/* @__PURE__ */["[transition-property:top,left,right,bottom]","motion-reduce:[transition-property:none] data-[instant]:[transition-property:none]"].join(" "),S=/* @__PURE__ */new Set(["width","height","top","left","right","bottom"]),M=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",N,v,"hover:bg-(--p-soft)",m].join(" "),A={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */n.forwardRef(function PlNavigationMenuLink({href:a,title:r,description:o,startIcon:l,className:d,children:u,target:m,rel:h,render:v,...w},N){const{size:P,density:F}=n.useContext(j);return t(i.Link,{ref:N,render:v,href:a,target:m,rel:s(m,h),className:c(M,x[P],f[P],b[F][P],"py-2",d),...w,children:[g(l)?e("span",{className:c("flex h-[1lh] shrink-0 items-center",p[P]),children:l}):null,t("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:c("font-medium",p[P]),children:r}),g(o)?e("span",{className:c("text-(--plass-muted-fg)",y[P]),children:o}):null,u]})]})});export function PlNavigationMenuItem({label:r,href:p,target:u,rel:m,render:h,startIcon:v,value:y,disabled:w=!1,active:N=!1,columns:F=1,children:k,className:z,style:C}){const{size:S,density:M,orientation:L}=n.useContext(j),R=(void 0!==p||void 0!==h)&&!g(k),I=c(P,"vertical"===L&&"w-full",l[S],d[S],f[S],b[M][S],x[S],z);return e(i.Item,{value:y,children:R?t(i.Link,{render:w?void 0:h,href:w?void 0:p,target:u,rel:s(u,m),"aria-current":N?"page":void 0,role:w?"link":void 0,"aria-disabled":w||void 0,"data-disabled":w?"":void 0,className:I,style:C,children:[g(v)?v:null,r]}):t(a,{children:[t(i.Trigger,{disabled:w,...w?{tabIndex:-1}:{},className:I,style:C,children:[g(v)?v:null,r,e(i.Icon,{className:c("flex items-center","vertical"===L?"-rotate-90 rtl:rotate-90":"[transition:rotate_var(--plass-duration)_var(--plass-ease)] motion-reduce:[transition-duration:0ms] data-[popup-open]:rotate-180"),children:e(o,{})})]}),e(i.Content,{keepMounted:!0,className:c("grid w-max max-w-[calc(var(--available-width)-2px)] gap-1 [&[hidden]]:hidden",A[S]),style:F>1?{gridTemplateColumns:`repeat(${F}, minmax(0, 1fr))`}:void 0,children:k})]})})}export const PlNavigationMenu=/* @__PURE__ */n.forwardRef(function PlNavigationMenu({size:a,color:o,density:s,orientation:l="horizontal",value:d,defaultValue:p,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:y,children:b,...N},P){const M=r(),A=a??M.size??"md",L=o??M.color??"primary",R=s??M.density??"default",I=n.useMemo(()=>({size:A,density:R,orientation:l}),[A,R,l]),[V,O]=n.useState(p??null),T=void 0!==d?d:V,[W,q]=n.useState(T),[E,$]=n.useState(!1);W!==T&&(q(T),$(null!==T&&null!==W));const[D,_]=n.useState(null),[B,G]=n.useState(null),H=n.useRef(null),J=n.useCallback(()=>{const e=H.current;if(!D||!e||!B)return;const t=getComputedStyle(B),a=Number.parseFloat(t.width),n=Number.parseFloat(t.height);if(!(a>0&&n>0))return;const r=getComputedStyle(e),i=Number.parseFloat(r.borderLeftWidth)+Number.parseFloat(r.borderRightWidth),o=Number.parseFloat(r.borderTopWidth)+Number.parseFloat(r.borderBottomWidth);D.style.setProperty("--p-panel-w",`${a+i}px`),D.style.setProperty("--p-panel-h",`${n+o}px`)},[D,B]);return n.useLayoutEffect(()=>{null!==T&&J()},[T,J]),n.useEffect(()=>{if(!B||"undefined"==typeof ResizeObserver)return;let e=0;const t=new ResizeObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(J)});return t.observe(B),()=>{cancelAnimationFrame(e),t.disconnect()}},[B,J]),n.useEffect(()=>{const e=H.current;if(!E||!D||!e)return;const t=[D,e];let a=0;const settle=()=>{for(const e of t)getComputedStyle(e).getPropertyValue("width");t.some(e=>e.getAnimations().some(e=>e instanceof CSSTransition&&S.has(e.transitionProperty)&&"finished"!==e.playState))?a=requestAnimationFrame(settle):$(!1)};return a=requestAnimationFrame(settle),()=>{cancelAnimationFrame(a)}},[E,D]),e(j.Provider,{value:I,children:t(i.Root,{ref:P,orientation:l,value:d,defaultValue:p,onValueChange:e=>{void 0===d&&O(e),u?.(e)},delay:m,closeDelay:h,className:v,style:{...w(L,3),...y},...N,children:[e(i.List,{className:c("m-0 flex list-none items-center p-0","vertical"===l?"flex-col items-stretch":"flex-row",f[A]),children:b}),e(i.Portal,{keepMounted:!0,children:e(i.Positioner,{ref:_,className:c(z,E?C:"[transition-property:none]"),side:"vertical"===l?"inline-end":"bottom",align:"vertical"===l?"start":"center",sideOffset:g,collisionPadding:12,children:e(i.Popup,{ref:H,className:c(F,E?k:"[transition-property:opacity]",x[A]),children:e(i.Viewport,{ref:G,className:"w-max"})})})})]})})});

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

@@ -15,6 +15,8 @@ import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassFieldLabe
  */
 export type PlNumberFieldSteppers = 'end' | 'split' | 'none';
 export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
     /**
@@ -151,4 +153,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: incrementLabelProp, decrementLabel: decrementLabelProp, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, endIcon, fullWidth, disabled: disabledProp, 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, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, endIcon, fullWidth, disabled: disabledProp, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...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{useDisabled as t}from"../../internal/form.js";import{useDefaults as a}from"../../internal/defaults.js";import{ownsPress as n}from"../../internal/focusable.js";import{useLabels as r}from"../../internal/labels.js";import{NumberField as s}from"@base-ui/react/number-field";import{Field as i}from"@base-ui/react/field";import{MinusIcon as o,PlusIcon as c}from"../../internal/icons.js";import{hotKeyHandler as d}from"../../internal/keys.js";import{useFieldLight as m}from"../../internal/glow.js";import{FieldNotch as p,floatControlClassName as u,notchShellStyle as f,resolveNotch as h}from"../../internal/notch.js";import{controlHeightClasses as b,controlTextLeadingClasses as g,cx as x,disabledClasses as v,fieldDescriptionClasses as y,fieldReadOnlyClasses as j,fieldRestClasses as N,fieldSlots as w,focusRingClasses as k,focusWithinRingClasses as S,gapClasses as _,hasContent as V,iconClasses as z,metaTextClasses as D,paddingXClasses as O,radiusClasses as C,stackGapClasses as I,transitionClasses as P}from"../../internal/styles.js";const q=/* @__PURE__ */["relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",P,z].join(" "),B=S,L=/* @__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)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) enabled:hover:text-(--p-accent)","active:bg-(--p-soft-press)",k,"disabled:cursor-not-allowed disabled:bg-transparent"].join(" ");export function PlNumberField({variant:k="glass",size:S,color:z,density:P,elevation:W=0,value:F,defaultValue:K,onValueChange:R,onValueCommitted:T,min:E,max:G,step:$,largeStep:A,smallStep:H,snapOnStep:J,allowWheelScrub:M=!1,format:Q,locale:U,steppers:X="end",incrementLabel:Y,decrementLabel:Z,label:ee,labelPlacement:le,description:te,error:ae,invalid:ne,startIcon:re,endIcon:se,fullWidth:ie=!1,disabled:oe=!1,readOnly:ce=!1,required:de=!1,name:me,placeholder:pe,id:ue,className:fe,hotKeys:he,classNames:be,style:ge,...xe}){const ve=a(),ye=t(oe),je=r(),Ne=Y??je.increase,we=Z??je.decrease,ke=U??ve.locale,Se=S??ve.size??"md",_e=z??ve.color??"primary",Ve=P??ve.density??"default",ze=le??ve.labelPlacement??"top",De="none"!==X&&!ce,{notched:Oe,float:Ce}=h(ze,ee,V(re)||De&&"split"===X),Ie=V(ae),Pe=ne??Ie,qe=Pe?"danger":_e,Be=!ye&&!ce,Le=m(Be),We=O[Ve][Se],Fe={end:`${We} pe-1`,split:"px-1",none:We},Ke=x(L,!ye&&"disabled:opacity-50"),Re=e(s.Decrement,{"aria-label":we,className:Ke,children:e(o,{})}),Te=e(s.Increment,{"aria-label":Ne,className:Ke,children:e(c,{})}),Ee=e(i.Label,{className:x(D[Se],"font-semibold",ye?"text-(--plass-muted-fg)":"text-(--plass-fg)",be?.label),children:ee});return l(i.Root,{disabled:ye,invalid:Pe,className:["flex-col align-top",I[Se],ie?"flex w-full":"inline-flex",fe??""].filter(Boolean).join(" "),style:{...w(qe,W),...ge},...xe,children:[V(ee)&&!Oe?Ee:null,e(s.Root,{id:ue,name:me,className:"contents",value:F,defaultValue:K,onValueChange:e=>R?.(e),onValueCommitted:e=>T?.(e),min:E,max:G,step:$,largeStep:A,smallStep:H,snapOnStep:J,allowWheelScrub:M,format:Q,locale:ke,disabled:ye,readOnly:ce,required:de,children:e(p,{notched:Oe,size:Se,density:Ve,variant:k,disabled:ye,readOnly:ce,float:Ce,label:Ee,children:l(s.Group,{style:Oe?f:void 0,...Le,onPointerDown:e=>{const l=e.currentTarget.querySelector('input:not([type="hidden"])');ye||n(e.target,e.currentTarget,l)||(e.preventDefault(),l?.focus())},className:[q,Oe?"":B,b[Se],g[Se],C[Se],_[Se],De?Fe[X]:We,ye?v[k]:ce?j[k]:N[k],Be?"plass-glow":"",be?.control].filter(Boolean).join(" "),children:[De&&"split"===X?Re:null,re?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:re}):null,e(s.Input,{placeholder:Ce?pe||" ":pe,onKeyDown:d(he,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===X&&De?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",Ce?u:""].filter(Boolean).join(" ")}),se?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:se}):null,De&&"end"===X?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[Re,Te]}):null,De&&"split"===X?Te:null]})})}),te?e(i.Description,{className:x(y(Se),be?.description),children:te}):null,e(i.Error,Ie?{match:!0,className:x(D[Se],"text-(--p-accent)",be?.error),children:ae}:{className:x(D[Se],"text-(--p-accent)",be?.error)})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{controlNaming as t,useDisabled as a}from"../../internal/form.js";import{useDefaults as n,useLocale as r}from"../../internal/defaults.js";import{ownsPress as s}from"../../internal/focusable.js";import{useLabels as i}from"../../internal/labels.js";import{NumberField as o}from"@base-ui/react/number-field";import{Field as c}from"@base-ui/react/field";import{MinusIcon as d,PlusIcon as m}from"../../internal/icons.js";import{hotKeyHandler as p}from"../../internal/keys.js";import{useFieldLight as u}from"../../internal/glow.js";import{FieldNotch as f,floatControlClassName as h,notchShellStyle as b,resolveNotch as g}from"../../internal/notch.js";import{controlHeightClasses as x,controlTextLeadingClasses as v,cx as y,disabledClasses as j,fieldDescriptionClasses as N,fieldReadOnlyClasses as w,fieldRestClasses as k,fieldSlots as S,focusRingClasses as _,focusWithinRingClasses as V,gapClasses as z,hasContent as D,iconClasses as O,metaTextClasses as C,paddingXClasses as I,radiusClasses as P,stackGapClasses as q,transitionClasses as B}from"../../internal/styles.js";const L=/* @__PURE__ */["relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",B,O].join(" "),W=V,F=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center p-0","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)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) enabled:hover:text-(--p-accent)","active:bg-(--p-soft-press)",_,"disabled:cursor-not-allowed disabled:bg-transparent"].join(" ");export function PlNumberField({variant:_="glass",size:V,color:O,density:B,elevation:K=0,value:R,defaultValue:T,onValueChange:E,onValueCommitted:G,min:$,max:A,step:H,largeStep:J,smallStep:M,snapOnStep:Q,allowWheelScrub:U=!1,format:X,locale:Y,steppers:Z="end",incrementLabel:ee,decrementLabel:le,label:te,labelPlacement:ae,description:ne,error:re,invalid:se,startIcon:ie,endIcon:oe,fullWidth:ce=!1,disabled:de=!1,readOnly:me=!1,required:pe=!1,name:ue,placeholder:fe,id:he,className:be,hotKeys:ge,classNames:xe,style:ve,"aria-label":ye,"aria-labelledby":je,...Ne}){const we=n(),ke=a(de),Se=i(),_e=ee??Se.increase,Ve=le??Se.decrease,ze=r(Y),De=V??we.size??"md",Oe=O??we.color??"primary",Ce=B??we.density??"default",Ie=ae??we.labelPlacement??"top",Pe="none"!==Z&&!me,{notched:qe,float:Be}=g(Ie,te,D(ie)||Pe&&"split"===Z),Le=D(re),We=se??Le,Fe=We?"danger":Oe,Ke=!ke&&!me,Re=u(Ke),Te=I[Ce][De],Ee={end:`${Te} pe-1`,split:"px-1",none:Te},Ge=y(F,!ke&&"disabled:opacity-50"),$e=e(o.Decrement,{"aria-label":Ve,className:Ge,children:e(d,{})}),Ae=e(o.Increment,{"aria-label":_e,className:Ge,children:e(m,{})}),He=e(c.Label,{className:y(C[De],"font-semibold",ke?"text-(--plass-muted-fg)":"text-(--plass-fg)",xe?.label),children:te});return l(c.Root,{disabled:ke,invalid:We,className:["flex-col align-top",q[De],ce?"flex w-full":"inline-flex",be??""].filter(Boolean).join(" "),style:{...S(Fe,K),...ve},...Ne,children:[D(te)&&!qe?He:null,e(o.Root,{id:he,name:ue,className:"contents",value:R,defaultValue:T,onValueChange:e=>E?.(e),onValueCommitted:e=>G?.(e),min:$,max:A,step:H,largeStep:J,smallStep:M,snapOnStep:Q,allowWheelScrub:U,format:X,locale:ze,disabled:ke,readOnly:me,required:pe,children:e(f,{notched:qe,size:De,density:Ce,variant:_,disabled:ke,readOnly:me,float:Be,label:He,children:l(o.Group,{style:qe?b:void 0,...Re,onPointerDown:e=>{const l=e.currentTarget.querySelector('input:not([type="hidden"])');ke||s(e.target,e.currentTarget,l)||(e.preventDefault(),l?.focus())},className:[L,qe?"":W,x[De],v[De],P[De],z[De],Pe?Ee[Z]:Te,ke?j[_]:me?w[_]:k[_],Ke?"plass-glow":"",xe?.control].filter(Boolean).join(" "),children:[Pe&&"split"===Z?$e:null,ie?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:ie}):null,e(o.Input,{placeholder:Be?fe||" ":fe,...t(ye,je),onKeyDown:p(ge,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent p-0 [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===Z&&Pe?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",Be?h:""].filter(Boolean).join(" ")}),oe?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:oe}):null,Pe&&"end"===Z?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[$e,Ae]}):null,Pe&&"split"===Z?Ae:null]})})}),ne?e(c.Description,{className:y(N(De),xe?.description),children:ne}):null,e(c.Error,Le?{match:!0,className:y(C[De],"text-(--p-accent)",xe?.error),children:re}:{className:y(C[De],"text-(--p-accent)",xe?.error)})]})}

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

@@ -9,6 +9,8 @@ import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProp
  */
 export type PlOtpCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
 export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
     /**

package/dist/components/otp-field/PlOtpField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{Field as s}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{hotKeyHandler as i}from"../../internal/keys.js";import{cx as m,disabledClasses as d,fieldDescriptionClasses as c,fieldReadOnlyClasses as u,fieldRestClasses as p,hasContent as f,metaTextClasses as h,stackGapClasses as x,surfaceSlots as g,transitionClasses as b}from"../../internal/styles.js";const y={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},v={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},N={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},j={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},$={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */l.forwardRef(function PlOtpField({variant:w="glass",size:V,color:F,density:C,elevation:I=0,length:M=6,charset:O="numeric",mask:S=!1,groupSize:k,separator:z="–",value:R,defaultValue:q,onValueChange:A,onComplete:D,onValueInvalid:K,autoSubmit:L=!1,label:P,description:_,error:E,invalid:T,name:B,required:G=!1,disabled:H=!1,readOnly:J=!1,autoFocus:Q=!1,slotLabel:U,className:W,hotKeys:X,classNames:Y,style:Z,...ee},ae){const le=r(),te=t(H),re=n(),ne=U??re.otpSlot,se=l.useId(),oe=V??le.size??"md",ie=F??le.color??"primary",me=C??le.density??"default",de=Math.min(12,Math.max(2,Math.round(M))),ce=f(E),ue=T??ce,pe=ue?"danger":ie,fe=m("text-center font-medium [font-family:inherit]",y[oe],N[oe],v[oe],b,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]",te?d[w]:J?u[w]:p[w]),he=k&&k>0?Math.round(k):0;return a(s.Root,{disabled:te,invalid:ue,className:m("inline-flex flex-col align-top",x[oe],W),style:{...g(pe,I),...Z},children:[f(P)?e(s.Label,{className:m(h[oe],"font-semibold",te?"text-(--plass-muted-fg)":"text-(--plass-fg)",Y?.label),children:e("span",{id:`${se}-label`,children:P})}):null,e(o.Root,{ref:ae,onKeyDown:i(X,void 0),length:de,validationType:$[O],mask:S,name:B,required:G,disabled:te,readOnly:J,autoSubmit:L,value:R,defaultValue:q,onValueChange:e=>A?.(e),onValueComplete:e=>D?.(e),onValueInvalid:e=>K?.(e),className:m("flex items-center",j[me][oe],Y?.control),...ee,children:Array.from({length:de},(t,r)=>a(l.Fragment,{children:[he>0&&r>0&&r%he===0?e("span",{"aria-hidden":"true",className:m("select-none px-0.5 text-(--plass-muted-fg)",N[oe]),children:z}):null,e(o.Input,{className:fe,autoFocus:Q&&0===r,"aria-labelledby":f(P)?`${se}-label ${se}-${r}`:`${se}-${r}`})]},r))}),Array.from({length:de},(a,l)=>e("span",{id:`${se}-${l}`,hidden:!0,children:ne(l+1,de)},l)),f(_)?e(s.Description,{className:m(c(oe),Y?.description),children:_}):null,e(s.Error,ce?{match:!0,className:m(h[oe],"text-(--p-accent)",Y?.error),children:E}:{className:m(h[oe],"text-(--p-accent)",Y?.error)})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDisabled as r,useLabelReference as t}from"../../internal/form.js";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{Field as o}from"@base-ui/react/field";import{OTPField as i}from"@base-ui/react/otp-field";import{hotKeyHandler as m}from"../../internal/keys.js";import{cx as d,disabledClasses as c,fieldDescriptionClasses as u,fieldReadOnlyClasses as p,fieldRestClasses as f,hasContent as h,metaTextClasses as x,stackGapClasses as g,surfaceSlots as b,transitionClasses as y}from"../../internal/styles.js";const v={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},N={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},$={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},j={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},w={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */l.forwardRef(function PlOtpField({variant:V="glass",size:F,color:C,density:I,elevation:M=0,length:O=6,charset:S="numeric",mask:k=!1,groupSize:z,separator:R="–",value:q,defaultValue:A,onValueChange:B,onComplete:D,onValueInvalid:K,autoSubmit:L=!1,label:P,description:_,error:E,invalid:T,name:G,required:H=!1,disabled:J=!1,readOnly:Q=!1,autoFocus:U=!1,slotLabel:W,className:X,hotKeys:Y,classNames:Z,style:ee,"aria-label":ae,"aria-labelledby":le,...re},te){const ne=n(),se=r(J),oe=s(),ie=W??oe.otpSlot,me=l.useId(),de=F??ne.size??"md",ce=C??ne.color??"primary",ue=I??ne.density??"default",pe=Math.min(12,Math.max(2,Math.round(O))),fe=h(E),he=T??fe,xe=he?"danger":ce,ge=d("text-center font-medium [font-family:inherit]",v[de],$[de],N[de],y,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]",se?c[V]:Q?p[V]:f[V]),be=z&&z>0?Math.round(z):0,ye=t(ae,le),ve=ye.labelledBy??(h(P)?`${me}-label`:void 0);return a(o.Root,{disabled:se,invalid:he,className:d("inline-flex flex-col align-top",g[de],X),style:{...b(xe,M),...ee},children:[h(P)?e(o.Label,{className:d(x[de],"font-semibold",se?"text-(--plass-muted-fg)":"text-(--plass-fg)",Z?.label),children:e("span",{id:`${me}-label`,children:P})}):null,e(i.Root,{ref:te,onKeyDown:m(Y,void 0),length:pe,validationType:w[S],mask:k,name:G,required:H,disabled:se,readOnly:Q,autoSubmit:L,value:q,defaultValue:A,onValueChange:e=>B?.(e),onValueComplete:e=>D?.(e),onValueInvalid:e=>K?.(e),className:d("flex items-center",j[ue][de],Z?.control),"aria-label":ae,"aria-labelledby":ye.labelledBy,...re,children:Array.from({length:pe},(r,t)=>a(l.Fragment,{children:[be>0&&t>0&&t%be===0?e("span",{"aria-hidden":"true",className:d("select-none px-0.5 text-(--plass-muted-fg)",$[de]),children:R}):null,e(i.Input,{className:ge,autoFocus:U&&0===t,"aria-labelledby":ve?`${ve} ${me}-${t}`:`${me}-${t}`})]},t))}),Array.from({length:pe},(a,l)=>e("span",{id:`${me}-${l}`,hidden:!0,children:ie(l+1,pe)},l)),ye.node,h(_)?e(o.Description,{className:d(u(de),Z?.description),children:_}):null,e(o.Error,fe?{match:!0,className:d(x[de],"text-(--p-accent)",Z?.error),children:E}:{className:d(x[de],"text-(--p-accent)",Z?.error)})]})});

package/dist/components/overlay/PlOverlay.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Dialog as r}from"@base-ui/react/dialog";import{cx as t,surfaceSlots as i}from"../../internal/styles.js";const o={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},n={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},c=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:m,defaultOpen:d,onOpenChange:f,tone:u="scrim",dismissible:b=!1,modal:x=!0,align:y="center",size:g,color:j,label:k,className:h,classNames:v,style:z,children:w,...N}){const O=s(),P=l(),_=k??P.overlay,B=g??O.size??"md",C=j??O.color??"primary";return e(r.Root,{open:m,defaultOpen:d,modal:x,disablePointerDismissal:!b,onOpenChange:(e,a)=>{b||e||"escape-key"!==a.reason?f?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:t("plass-portal fixed inset-0 z-(--plass-z-portal)",c,o[u],v?.backdrop)}),e(r.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",n[y],p[B]].join(" "),children:e(r.Popup,{"aria-label":_,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",c,h??""].filter(Boolean).join(" "),style:{...i(C,0),...z},...N,children:w})})]})})}
+"use client";import{jsx as a,jsxs as e}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{Dialog as l}from"@base-ui/react/dialog";import{cx as i,surfaceSlots as t}from"../../internal/styles.js";const o={scrim:"bg-(--plass-scrim) [backdrop-filter:var(--plass-scrim-blur)] [-webkit-backdrop-filter:var(--plass-scrim-blur)]",glass:/* @__PURE__ */["[--p-dim:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)] [background-color:var(--p-dim)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]","[@media(prefers-reduced-transparency:reduce)]:[background:linear-gradient(var(--p-dim),var(--p-dim)),var(--plass-surface)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},n={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},c=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:m,defaultOpen:d,onOpenChange:u,tone:f="scrim",dismissible:b=!1,modal:y=!0,align:g="center",size:x,color:v,label:j,className:k,classNames:h,style:z,children:w,...N}){const O=s(),P=r(),_=j??P.overlay,B=x??O.size??"md",C=v??O.color??"primary";return a(l.Root,{open:m,defaultOpen:d,modal:y,disablePointerDismissal:!b,onOpenChange:(a,e)=>{b||a||"escape-key"!==e.reason?u?.(a):e.cancel()},children:e(l.Portal,{children:[a(l.Backdrop,{className:i("plass-portal fixed inset-0 z-(--plass-z-portal)",c,o[f],h?.backdrop)}),a(l.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",n[g],p[B]].join(" "),children:a(l.Popup,{"aria-label":_,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",c,k??""].filter(Boolean).join(" "),style:{...t(C,0),...z},...N,children:w})})]})})}

package/dist/components/page-layout/PlPageLayout.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{PlPageLayoutContext as r,PlassSidebarSideContext as s}from"../../internal/page-layout.js";import{controlSlots as i,cx as a,hasContent as u,toLength as c}from"../../internal/styles.js";const d=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:f,footer:p,sidebar:m,endSidebar:h,headerSpan:v="full",footerSpan:x="full",scroll:y="page",height:b="viewport",collapseBelow:g="md",sidebarOpen:w,defaultSidebarOpen:P=!1,onSidebarOpenChange:k,endSidebarOpen:S,defaultEndSidebarOpen:C=!1,onEndSidebarOpenChange:O,skipLink:j=!0,skipLabel:N,mainId:z="main",mainProps:$,color:R,className:L,style:E,children:M,...B},H){const _=t(),I=n(),T=N??I.skipToContent,q=R??_.color??"primary",A=o.useContext(r).present,D=A?"div":"main",[F,G]=o.useState(P),[J,K]=o.useState(C),Q=o.useMemo(()=>({start:w??F,end:S??J}),[w,F,S,J]),U=o.useCallback((e,l)=>{if("start"===e)return void 0===w&&G(l),void k?.(l);void 0===S&&K(l),O?.(l)},[w,S,k,O]),V=o.useRef(null),W=o.useCallback(e=>{V.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),X=o.useRef({header:null,footer:null}),Y=o.useRef(null),Z=o.useCallback(()=>{const e=V.current;if(e)for(const l of d){const o=X.current[l],t="header"===l?v:x;if(!o){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,s="fixed"===n;e.style.setProperty(`--p-layout-${l}`,s||"sticky"===n&&"full"===t?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,s?r:"0px")}},[v,x]),ee=o.useCallback(()=>{const e=Y.current;if(e){e.disconnect();for(const l of d){const o=X.current[l];o&&e.observe(o)}}Z()},[Z]);o.useEffect(()=>(Y.current=new ResizeObserver(()=>Z()),ee(),()=>{Y.current?.disconnect(),Y.current=null}),[Z,ee]);const le=o.useCallback((e,l)=>{X.current[e]=l,ee()},[ee]),oe=o.useMemo(()=>({present:!0,register:le,collapseBelow:g,open:Q,setOpen:U,scroll:y}),[le,g,Q,U,y]),te=o.useMemo(()=>({...oe,register:()=>{}}),[oe]),ne="content"===y,re=c("viewport"===b||"auto"===b?void 0:b),se=void 0!==re?"":"auto"===b?ne?"h-full":"min-h-full":ne?"h-dvh":"min-h-dvh",ie=u(f)?f:null,ae=u(p)?p:null,ue=(u(m)||u(h))&&("content"===v&&null!==ie||"content"===x&&null!==ae);return e(r.Provider,{value:oe,children:l("div",{ref:W,className:a("relative flex w-full flex-col",ne?"overflow-hidden":"",se,"[padding-top:var(--p-layout-header-inset,0px)]","[padding-bottom:var(--p-layout-footer-inset,0px)]",L),style:void 0===re?E:{...ne?{height:re}:{minHeight:re},...E},...B,children:[j&&!A?e("a",{href:`#${z}`,className:a("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:i(q,2,"solid"),children:T}):null,"full"===v?ie:null,l("div",{className:a("flex w-full flex-1",ne?"min-h-0":"",ue?"z-1 [&>aside]:z-21":""),children:[u(m)?e(s.Provider,{value:"start",children:m}):null,l("div",{className:a("flex min-w-0 flex-1 flex-col",ne?"min-h-0":""),children:["content"===v?ie:null,e(D,{...$,id:A?void 0:z,className:a("min-w-0 flex-1",ne?"min-h-0 overflow-y-auto":"",$?.className),children:e(r.Provider,{value:te,children:M})}),"content"===x?ae:null]}),u(h)?e(s.Provider,{value:"end",children:h}):null]}),"full"===x?ae:null]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PlPageLayoutContext as n,PlassSidebarSideContext as s}from"../../internal/page-layout.js";import{controlSlots as a,cx as i,hasContent as u,toLength as c}from"../../internal/styles.js";const f=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:d,footer:p,sidebar:m,endSidebar:h,headerSpan:v="full",footerSpan:x="full",scroll:y="page",height:b="viewport",collapseBelow:g="md",sidebarOpen:w,defaultSidebarOpen:P=!1,onSidebarOpenChange:k,endSidebarOpen:S,defaultEndSidebarOpen:C=!1,onEndSidebarOpenChange:O,skipLink:j=!0,skipLabel:N,mainId:$="main",mainProps:z,color:L,className:R,style:E,children:M,...B},H){const _=l(),I=r(),T=N??I.skipToContent,V=L??_.color??"primary",q=o.useContext(n).present,A=q?"div":"main",[D,F]=o.useState(P),[G,J]=o.useState(C),K=o.useMemo(()=>({start:w??D,end:S??G}),[w,D,S,G]),Q=o.useCallback((e,t)=>{if("start"===e)return void 0===w&&F(t),void k?.(t);void 0===S&&J(t),O?.(t)},[w,S,k,O]),U=o.useRef(null),W=o.useCallback(e=>{U.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),X=o.useRef({header:null,footer:null}),Y=o.useRef(null),Z=o.useCallback(()=>{const e=U.current;if(!e)return;const t=f.map(e=>{const t=X.current[e];return t?{slot:e,position:getComputedStyle(t).position,extent:t.offsetHeight}:{slot:e,position:null,extent:0}}),write=(t,o)=>{e.style.getPropertyValue(t)!==o&&e.style.setProperty(t,o)};for(const{slot:e,position:o,extent:l}of t){const t="fixed"===o;write(`--p-layout-${e}`,t||"sticky"===o&&"full"===("header"===e?v:x)?`${l}px`:"0px"),write(`--p-layout-${e}-inset`,t?`${l}px`:"0px")}},[v,x]),ee=o.useRef(Z);o.useLayoutEffect(()=>{ee.current=Z,Z()},[Z]),o.useLayoutEffect(()=>{const e=new ResizeObserver(()=>ee.current());for(const t of f){const o=X.current[t];o&&e.observe(o)}return Y.current=e,()=>{e.disconnect(),Y.current=null}},[]);const te=o.useCallback((e,t)=>{const o=X.current[e];if(o===t)return;X.current[e]=t;const l=Y.current;l&&(o&&l.unobserve(o),t?l.observe(t):(U.current?.style.setProperty(`--p-layout-${e}`,"0px"),U.current?.style.setProperty(`--p-layout-${e}-inset`,"0px")))},[]),oe=o.useCallback(()=>ee.current(),[]),le=o.useMemo(()=>({present:!0,register:te,remeasure:oe,collapseBelow:g,open:K,setOpen:Q,scroll:y}),[te,oe,g,K,Q,y]),re=o.useMemo(()=>({...le,register:()=>{},remeasure:()=>{}}),[le]),ne="content"===y,se=c("viewport"===b||"auto"===b?void 0:b),ae=void 0!==se?"":"auto"===b?ne?"h-full":"min-h-full":ne?"h-dvh":"min-h-dvh",ie=u(d)?d:null,ue=u(p)?p:null,ce=(u(m)||u(h))&&("content"===v&&null!==ie||"content"===x&&null!==ue);return e(n.Provider,{value:le,children:t("div",{ref:W,className:i("plass-layout relative flex w-full flex-col",ne?"overflow-hidden":"",ae,"[padding-top:var(--p-layout-header-inset,0px)]","[padding-bottom:var(--p-layout-footer-inset,0px)]",R),style:void 0===se?E:{...ne?{height:se}:{minHeight:se},...E},...B,children:[j&&!q?e("a",{href:`#${$}`,className:i("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:a(V,2,"solid"),children:T}):null,"full"===v?ie:null,t("div",{className:i("flex w-full flex-1",ne?"min-h-0":"",ce?"z-1 [&>aside]:z-21":""),children:[u(m)?e(s.Provider,{value:"start",children:m}):null,t("div",{className:i("flex min-w-0 flex-1 flex-col",ne?"min-h-0":""),children:["content"===v?ie:null,e(A,{...z,id:q?void 0:$,className:i("min-w-0 flex-1",ne?"min-h-0 overflow-y-auto":"",z?.className),children:e(n.Provider,{value:re,children:M})}),"content"===x?ue:null]}),u(h)?e(s.Provider,{value:"end",children:h}):null]}),"full"===x?ue:null]})})});

package/dist/components/pagination/PlPagination.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlPaginationProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'onChange'> {
+    /** @default 'ghost' */
+    variant?: PlassStyleProps['variant'];
     /** How many pages there are. Fewer than two and the whole control renders nothing. */
     count: number;
     /** The current page, 1-based. Use with `onPageChange` for a controlled row. */

package/dist/components/panes/PlPanes.d.ts

@@ -62,7 +62,10 @@ export interface PlPaneProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
  * window being resized without a single line of JavaScript running, so the
  * component measures itself only twice — once on mount, to turn a `'240px'`
  * default into a fraction, and once at the start of each drag, to know what a
- * pixel of pointer movement is worth.
+ * pixel of pointer movement is worth. Until the first measurement the panes are
+ * drawn from their `defaultSize`s alone wherever those settle the split on
+ * their own (see `presplit`), so a split rendered on the server does not move
+ * as it hydrates.
  *
  * The handles are interleaved here rather than written by the caller, so the
  * children of a `PlPanes` are just panes. That does mean the direct children have