plass-ui 1.0.3 → 1.2.0

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

@@ -113,6 +113,7 @@ export interface PlMenuGroupProps {
     label?: React.ReactNode;
     children?: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 }
 export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
     checked?: boolean;
@@ -133,6 +134,7 @@ export interface PlMenuRadioGroupProps {
     disabled?: boolean;
     children?: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 }
 export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
     /** What this row sets the group to. */
@@ -153,7 +155,7 @@ export declare function PlMenuItem({ onClick, href, target, startIcon, endIcon,
 /** 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. */
-export declare function PlMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className }: PlMenuRadioGroupProps): React.JSX.Element;
+export declare function PlMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className, style }: PlMenuRadioGroupProps): React.JSX.Element;
 /**
  * A row inside a `PlMenuRadioGroup`.
  *
@@ -163,7 +165,7 @@ export declare function PlMenuRadioGroup({ value, defaultValue, onValueChange, d
  */
 export declare function PlMenuRadioItem({ value, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuRadioItemProps): React.JSX.Element;
 /** A named run of rows. The label is a heading, not a row — it cannot be picked. */
-export declare function PlMenuGroup({ label, children, className }: PlMenuGroupProps): React.JSX.Element;
+export declare function PlMenuGroup({ label, children, className, style }: PlMenuGroupProps): React.JSX.Element;
 /** The hairline between two runs of rows. */
 export declare function PlMenuSeparator({ className, ...props }: PlMenuSeparatorProps): React.JSX.Element;
 /**

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

package/dist/components/menubar/PlMenubar.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { PlassOrientation, PlassStyleProps } from '../../types.js';
+export interface PlMenubarProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the bar runs. `vertical` is the shape a side rail of menus takes;
+     * the arrow keys follow it either way.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * Whether an open menu takes the page away. On — the default, and Base UI's —
+     * an open menu is what the pointer is talking to.
+     * @default true
+     */
+    modal?: boolean;
+    /** Whether the arrow keys wrap around at the ends of the bar. @default true */
+    loopFocus?: boolean;
+    /** Disables every menu on the bar at once. */
+    disabled?: boolean;
+    /** The menus. */
+    children?: React.ReactNode;
+}
+export interface PlMenubarMenuProps {
+    /** The word on the bar. */
+    label: React.ReactNode;
+    /** Content before the label. Sized in `em`, so it tracks it. */
+    startIcon?: React.ReactNode;
+    /** Unavailable. The word stays on the bar and opens nothing. */
+    disabled?: boolean;
+    /** The rows, written exactly as they are inside a `PlMenu`. */
+    children?: React.ReactNode;
+    /** Classes on the word this menu is opened by, alongside the bar's own. */
+    className?: string;
+    /** Inline styles on that word. */
+    style?: React.CSSProperties;
+}
+/**
+ * One menu on the bar: the word, and the rows behind it.
+ *
+ * It has no `size`, `color` or `density` of its own — all three belong to the
+ * bar, which is the only place they can be set once and hold for every menu on
+ * it. The rows inside are the same `PlMenuItem`, `PlMenuSeparator`,
+ * `PlMenuGroup` and `PlMenuSubmenu` a `PlMenu` takes, because it *is* the same
+ * menu.
+ */
+export declare function PlMenubarMenu({ label, startIcon, disabled, children, className, style }: PlMenubarMenuProps): React.ReactElement;
+/**
+ * The strip of words at the top of an application — File, Edit, View — each of
+ * which opens a menu.
+ *
+ * What makes it a bar rather than a row of separate menus is what happens once
+ * one is open: moving along the strip walks through the others instead of
+ * closing the one you left, and the arrow keys move between the menus as well
+ * as inside them. Base UI owns all of that, along with the `menubar` role.
+ *
+ * It draws **no surface of its own**. A menu bar sits *on* something — a
+ * `PlToolbar`, a `PlHeader` — and a sheet under a strip that is already on a
+ * sheet is two sheets.
+ */
+export declare const PlMenubar: React.ForwardRefExoticComponent<PlMenubarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/menubar/PlMenubar.js

@@ -0,0 +1 @@
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{Menubar as o}from"@base-ui/react/menubar";import{PlMenu as r}from"../menu/PlMenu.js";import{MenuContext as n}from"../../internal/menu.js";import{controlTextClasses as a,cx as i,gapClasses as l,hasContent as c,iconClasses as p,paddingXClasses as d,radiusClasses as u,transitionClasses as m}from"../../internal/styles.js";const f={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},b=/* @__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]",m,p,"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:p,disabled:m=!1,children:h,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(n);return t(r,{size:g,color:y,density:j,disabled:m,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:m,className:i(b,f[g],a[g],l[g],d["default"===j?"compact":j][g],u[g],v),style:x,children:[c(p)?p:null,o]}),children:h})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e="md",color:r="primary",density:a="default",orientation:c="horizontal",modal:p=!0,loopFocus:d=!0,disabled:u=!1,className:m,style:f,children:b,...h},v){const x=s.useMemo(()=>({size:e,color:r,density:a}),[e,r,a]);return t(n.Provider,{value:x,children:t(o,{ref:v,orientation:c,modal:p,loopFocus:d,disabled:u,className:i("flex items-center","vertical"===c?"flex-col items-stretch":"flex-row",l[e],m),style:{"--p-soft":`var(--plass-${r}-soft)`,"--p-soft-hover":`var(--plass-${r}-soft-hover)`,"--p-accent":`var(--plass-${r}-accent)`,"--p-ring":`var(--plass-${r}-ring)`,...f},...h,children:b})})});

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

@@ -0,0 +1,2 @@
+export { PlMenubar, PlMenubarMenu } from './PlMenubar.js';
+export type { PlMenubarProps, PlMenubarMenuProps } from './PlMenubar.js';

package/dist/components/menubar/index.js

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
-import type { PlassStyleProps } from '../../types.js';
+import type { PlassPortalClassNames, PlassStyleProps } from '../../types.js';
 /**
  * A modal takes `size`, `color` and `density` and stops there.
  *
@@ -9,6 +9,8 @@ import type { PlassStyleProps } from '../../types.js';
  * page. There is no `elevation` either — see `popupClasses`.
  */
 export interface PlModalProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassPortalClassNames;
     /** The modal is shown. Use with `onOpenChange` for a controlled modal. */
     open?: boolean;
     /** Whether it starts open, for an uncontrolled one. */
@@ -109,4 +111,4 @@ export declare const PlModalClose: React.ForwardRefExoticComponent<Omit<import("
  * the header and the actions stay put while only the body scrolls, which is why
  * `dividers` matters more here than on a PlCard.
  */
-export declare function PlModal({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, style, children, ...props }: PlModalProps): React.JSX.Element;
+export declare function PlModal({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: PlModalProps): React.JSX.Element;

package/dist/components/modal/PlModal.js

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

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

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import type { PlassOrientation, PlassStyleProps } from '../../types.js';
+export interface PlNavigationMenuProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Which way the row runs. `vertical` is a nav rail whose panels open beside
+     * it; the arrow keys follow either way.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /** Which item's panel is open, by its `value`. Nullish means closed. */
+    value?: string | null;
+    /** Which starts open, for an uncontrolled menu. */
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    /** How long the pointer rests before a panel opens, in milliseconds. */
+    delay?: number;
+    /** How long a panel stays after the pointer leaves, in milliseconds. */
+    closeDelay?: number;
+    /** Distance from the row, in pixels. @default 8 */
+    sideOffset?: number;
+    /** The items. */
+    children?: React.ReactNode;
+}
+export interface PlNavigationMenuItemProps {
+    /** The word in the row. */
+    label: React.ReactNode;
+    /**
+     * Makes the item a plain link rather than something that opens a panel. An
+     * item with an `href` and no children is a destination, and it is announced
+     * as one — which is the whole reason a site nav is not a `PlMenu`.
+     */
+    href?: string;
+    /**
+     * Where the link opens. Ignored without `href`.
+     *
+     * Anything other than this tab also gets `rel="noopener noreferrer"`, merged
+     * with whatever `rel` was asked for, exactly as on `PlTextLink`.
+     */
+    target?: string;
+    /** The link's `rel`. The two tokens a new tab needs are added to it. */
+    rel?: string;
+    /** Content before the label. Sized in `em`, so it tracks it. */
+    startIcon?: React.ReactNode;
+    /**
+     * Identifies the item, for a controlled menu. Left out is fine for an
+     * uncontrolled one — Base UI gives each item an identity of its own.
+     */
+    value?: string;
+    /** Unavailable. The word stays in the row and opens nothing. */
+    disabled?: 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;
+}
+export interface PlNavigationMenuLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'title'> {
+    /** Where it goes. */
+    href: string;
+    /** The row's name. */
+    title: React.ReactNode;
+    /** A second line under it, one step down the scale and muted. */
+    description?: React.ReactNode;
+    /** A glyph before the title. */
+    startIcon?: React.ReactNode;
+}
+/**
+ * One row inside a panel: where it goes, what it is called, and a line saying
+ * what is there.
+ *
+ * It is a real `<a>`, which is the point of the whole component — a site's
+ * navigation is a list of destinations, and a destination that is a `<div>` with
+ * a click handler is not in the link list, not on the status bar and not in a
+ * crawler's index.
+ */
+export declare const PlNavigationMenuLink: React.ForwardRefExoticComponent<PlNavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * 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.
+ */
+export declare function PlNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, 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.
+ *
+ * The difference from a `PlMenu` is what the rows *are*. A menu holds actions,
+ * so its rows are `menuitem`s and the whole thing is a widget that traps the
+ * arrow keys. This holds links, so it is a `<nav>` full of real `<a>`s — which
+ * is what puts them in the link list, on the status bar and in a crawler's
+ * index. Reach for a menu when the row *does* something and for this when the
+ * row *goes* somewhere.
+ *
+ * One panel is open at a time and it resizes between items rather than closing
+ * and reopening, which is Base UI's doing and is what makes crossing the row
+ * read as one surface rather than three.
+ */
+export declare const PlNavigationMenu: React.ForwardRefExoticComponent<PlNavigationMenuProps & React.RefAttributes<HTMLElement>>;

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

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

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

@@ -0,0 +1,2 @@
+export { PlNavigationMenu, PlNavigationMenuItem, PlNavigationMenuLink } from './PlNavigationMenu.js';
+export type { PlNavigationMenuProps, PlNavigationMenuItemProps, PlNavigationMenuLinkProps } from './PlNavigationMenu.js';

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

@@ -0,0 +1 @@
+export{PlNavigationMenu,PlNavigationMenuItem,PlNavigationMenuLink}from"./PlNavigationMenu.js";

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *
@@ -15,6 +15,8 @@ import type { PlassElevation, PlassStyleProps } from '../../types.js';
  */
 export type PlNumberFieldSteppers = 'end' | 'split' | 'none';
 export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassFieldClassNames;
     /**
      * Drop shadow depth. `0` is the default — a field is a well cut into the
      * sheet, not a key resting on it.
@@ -130,4 +132,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, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, style, ...props }: PlNumberFieldProps): React.JSX.Element;
+export declare function PlNumberField({ variant, size, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, classNames, style, ...props }: 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{NumberField as a}from"@base-ui/react/number-field";import{Field as t}from"@base-ui/react/field";import{MinusIcon as s,PlusIcon as n}from"../../internal/icons.js";import{controlHeightClasses as r,controlTextLeadingClasses as i,disabledClasses as o,fieldReadOnlyClasses as c,fieldRestClasses as d,focusRingClasses as p,focusWithinRingClasses as m,gapClasses as u,hasContent as f,iconClasses as h,metaTextClasses as b,paddingXClasses as x,radiusClasses as g,stackGapClasses as v,surfaceSlots as N,transitionClasses as j}from"../../internal/styles.js";const y=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",j,"focus-within:[transition-duration:0ms]",m,h].join(" "),w=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",p,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:p="glass",size:m="md",color:h="primary",density:j="default",elevation:k=0,value:S,defaultValue:_,onValueChange:V,onValueCommitted:I,min:C,max:O,step:z,largeStep:B,smallStep:D,snapOnStep:L,allowWheelScrub:W=!1,format:$,locale:q,steppers:F="end",incrementLabel:R="Increase",decrementLabel:E="Decrease",label:G,description:P,error:A,invalid:H,startIcon:J,endIcon:K,fullWidth:M=!1,disabled:Q=!1,readOnly:T=!1,required:U=!1,name:X,placeholder:Y,id:Z,className:ee,style:le,...ae}){const te=f(A),se=H??te,ne=se?"danger":h,re=x[j][m],ie={end:`${re} pe-1`,split:"px-1",none:re},oe=e(a.Decrement,{"aria-label":E,className:w,children:e(s,{})}),ce=e(a.Increment,{"aria-label":R,className:w,children:e(n,{})}),de="none"!==F&&!T;return l(t.Root,{disabled:Q,invalid:se,className:["flex-col align-top",v[m],M?"flex w-full":"inline-flex",ee??""].filter(Boolean).join(" "),style:{...N(ne,k),...le},...ae,children:[G?e(t.Label,{className:[b[m],"font-medium text-(--plass-fg)",Q?"opacity-50":""].filter(Boolean).join(" "),children:G}):null,e(a.Root,{id:Z,name:X,className:"contents",value:S,defaultValue:_,onValueChange:e=>V?.(e),onValueCommitted:e=>I?.(e),min:C,max:O,step:z,largeStep:B,smallStep:D,snapOnStep:L,allowWheelScrub:W,format:$,locale:q,disabled:Q,readOnly:T,required:U,children:l(a.Group,{className:[y,r[m],i[m],g[m],u[m],de?ie[F]:re,Q?o[p]:T?c[p]:d[p]].join(" "),children:[de&&"split"===F?oe:null,J?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:J}):null,e(a.Input,{placeholder:Y,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===F&&de?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),K?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:K}):null,de&&"end"===F?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[oe,ce]}):null,de&&"split"===F?ce:null]})}),P?e(t.Description,{className:`${b[m]} text-(--plass-muted-fg)`,children:P}):null,te?e(t.Error,{match:!0,className:`${b[m]} text-(--p-accent)`,children:A}):null]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{NumberField as l}from"@base-ui/react/number-field";import{Field as t}from"@base-ui/react/field";import{MinusIcon as s,PlusIcon as n}from"../../internal/icons.js";import{controlHeightClasses as r,controlTextLeadingClasses as i,cx as o,disabledClasses as c,fieldReadOnlyClasses as d,fieldRestClasses as p,focusRingClasses as m,focusWithinRingClasses as u,gapClasses as f,hasContent as h,iconClasses as b,metaTextClasses as x,paddingXClasses as g,radiusClasses as v,stackGapClasses as N,surfaceSlots as j,transitionClasses as y}from"../../internal/styles.js";const w=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",y,"focus-within:[transition-duration:0ms]",u,b].join(" "),k=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",m,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:m="glass",size:u="md",color:b="primary",density:y="default",elevation:S=0,value:_,defaultValue:V,onValueChange:I,onValueCommitted:C,min:O,max:z,step:B,largeStep:D,smallStep:L,snapOnStep:W,allowWheelScrub:q=!1,format:F,locale:R,steppers:E="end",incrementLabel:G="Increase",decrementLabel:P="Decrease",label:$,description:A,error:H,invalid:J,startIcon:K,endIcon:M,fullWidth:Q=!1,disabled:T=!1,readOnly:U=!1,required:X=!1,name:Y,placeholder:Z,id:ee,className:ae,classNames:le,style:te,...se}){const ne=h(H),re=J??ne,ie=re?"danger":b,oe=g[y][u],ce={end:`${oe} pe-1`,split:"px-1",none:oe},de=e(l.Decrement,{"aria-label":P,className:k,children:e(s,{})}),pe=e(l.Increment,{"aria-label":G,className:k,children:e(n,{})}),me="none"!==E&&!U;return a(t.Root,{disabled:T,invalid:re,className:["flex-col align-top",N[u],Q?"flex w-full":"inline-flex",ae??""].filter(Boolean).join(" "),style:{...j(ie,S),...te},...se,children:[$?e(t.Label,{className:o(x[u],"font-medium text-(--plass-fg)",T?"opacity-50":"",le?.label),children:$}):null,e(l.Root,{id:ee,name:Y,className:"contents",value:_,defaultValue:V,onValueChange:e=>I?.(e),onValueCommitted:e=>C?.(e),min:O,max:z,step:B,largeStep:D,smallStep:L,snapOnStep:W,allowWheelScrub:q,format:F,locale:R,disabled:T,readOnly:U,required:X,children:a(l.Group,{className:[w,r[u],i[u],v[u],f[u],me?ce[E]:oe,T?c[m]:U?d[m]:p[m],le?.control].filter(Boolean).join(" "),children:[me&&"split"===E?de:null,K?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:K}):null,e(l.Input,{placeholder:Z,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===E&&me?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),M?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:M}):null,me&&"end"===E?a("span",{className:"flex shrink-0 items-center gap-0.5",children:[de,pe]}):null,me&&"split"===E?pe:null]})}),A?e(t.Description,{className:o(x[u],"text-(--plass-muted-fg)",le?.description),children:A}):null,e(t.Error,ne?{match:!0,className:o(x[u],"text-(--p-accent)",le?.error),children:H}:{className:o(x[u],"text-(--p-accent)",le?.error)})]})}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
 /**
  * What may be typed into a slot.
  *
@@ -9,6 +9,8 @@ import type { PlassElevation, PlassStyleProps } from '../../types.js';
  */
 export type PlOtpCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
 export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'children'> {
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassFieldClassNames;
     /** Drop shadow depth. `0` is the default — a field is cut into the sheet. */
     elevation?: PlassElevation;
     /**

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

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as l}from"@base-ui/react/field";import{OTPField as r}from"@base-ui/react/otp-field";import{cx as n,disabledClasses as s,fieldReadOnlyClasses as i,fieldRestClasses as o,hasContent as m,metaTextClasses as d,stackGapClasses as u,surfaceSlots as c,transitionClasses as p}from"../../internal/styles.js";const f={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"},x={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},g={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={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"}},y={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */t.forwardRef(function PlOtpField({variant:b="glass",size:v="md",color:N="primary",density:V="default",elevation:w=0,length:F=6,charset:j="numeric",mask:C=!1,groupSize:M,separator:O="–",value:I,defaultValue:R,onValueChange:S,onComplete:k,onValueInvalid:q,autoSubmit:z=!1,label:P,description:_,error:A,invalid:D,name:E,required:L=!1,disabled:T=!1,readOnly:B=!1,autoFocus:G=!1,className:H,style:J,...K},Q){const U=Math.min(12,Math.max(2,Math.round(F))),W=m(A),X=D??W,Y=X?"danger":N,Z=n("text-center font-medium [font-family:inherit]",f[v],g[v],x[v],p,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",T?s[b]:B?i[b]:o[b]),$=M&&M>0?Math.round(M):0;return a(l.Root,{disabled:T,invalid:X,className:n("inline-flex flex-col align-top",u[v],H),style:{...c(Y,w),...J},children:[m(P)?e(l.Label,{className:n(d[v],"font-medium",T?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:P}):null,e(r.Root,{ref:Q,length:U,validationType:y[j],mask:C,name:E,required:L,disabled:T,readOnly:B,autoSubmit:z,value:I,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>k?.(e),onValueInvalid:e=>q?.(e),className:n("flex items-center",h[V][v]),...K,children:Array.from({length:U},(l,s)=>a(t.Fragment,{children:[$>0&&s>0&&s%$===0?e("span",{"aria-hidden":"true",className:n("select-none px-0.5 text-(--plass-muted-fg)",g[v]),children:O}):null,e(r.Input,{className:Z,autoFocus:G&&0===s})]},s))}),m(_)?e(l.Description,{className:n(d[v],"text-(--plass-muted-fg)"),children:_}):null,W?e(l.Error,{match:!0,className:n(d[v],"text-(--p-accent)"),children:A}):null]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as l}from"@base-ui/react/field";import{OTPField as r}from"@base-ui/react/otp-field";import{cx as n,disabledClasses as s,fieldReadOnlyClasses as o,fieldRestClasses as i,hasContent as m,metaTextClasses as d,stackGapClasses as u,surfaceSlots as c,transitionClasses as p}from"../../internal/styles.js";const f={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"},x={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},g={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={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"}},b={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */t.forwardRef(function PlOtpField({variant:y="glass",size:v="md",color:N="primary",density:V="default",elevation:w=0,length:F=6,charset:j="numeric",mask:C=!1,groupSize:M,separator:O="–",value:I,defaultValue:R,onValueChange:S,onComplete:k,onValueInvalid:q,autoSubmit:z=!1,label:P,description:_,error:A,invalid:D,name:E,required:L=!1,disabled:T=!1,readOnly:B=!1,autoFocus:G=!1,className:H,classNames:J,style:K,...Q},U){const W=Math.min(12,Math.max(2,Math.round(F))),X=m(A),Y=D??X,Z=Y?"danger":N,$=n("text-center font-medium [font-family:inherit]",f[v],g[v],x[v],p,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",T?s[y]:B?o[y]:i[y]),ee=M&&M>0?Math.round(M):0;return a(l.Root,{disabled:T,invalid:Y,className:n("inline-flex flex-col align-top",u[v],H),style:{...c(Z,w),...K},children:[m(P)?e(l.Label,{className:n(d[v],"font-medium",T?"text-(--plass-muted-fg)":"text-(--plass-fg)",J?.label),children:P}):null,e(r.Root,{ref:U,length:W,validationType:b[j],mask:C,name:E,required:L,disabled:T,readOnly:B,autoSubmit:z,value:I,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>k?.(e),onValueInvalid:e=>q?.(e),className:n("flex items-center",h[V][v],J?.control),...Q,children:Array.from({length:W},(l,s)=>a(t.Fragment,{children:[ee>0&&s>0&&s%ee===0?e("span",{"aria-hidden":"true",className:n("select-none px-0.5 text-(--plass-muted-fg)",g[v]),children:O}):null,e(r.Input,{className:$,autoFocus:G&&0===s})]},s))}),m(_)?e(l.Description,{className:n(d[v],"text-(--plass-muted-fg)",J?.description),children:_}):null,e(l.Error,X?{match:!0,className:n(d[v],"text-(--p-accent)",J?.error),children:A}:{className:n(d[v],"text-(--p-accent)",J?.error)})]})});

package/dist/components/overlay/PlOverlay.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassAlign, PlassColor, PlassSize } from '../../types.js';
+import type { PlassAlign, PlassColor, PlassPortalClassNames, PlassSize } from '../../types.js';
 /**
  * How much of the page the overlay takes away.
  *
@@ -28,6 +28,8 @@ export type PlOverlayTone = 'scrim' | 'glass' | 'solid' | 'clear';
  * shadow is a scrim with an edge.
  */
 export interface PlOverlayProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlassPortalClassNames;
     /** The overlay is shown. Use with `onOpenChange` for a controlled overlay. */
     open?: boolean;
     /** Whether the overlay starts shown, for an uncontrolled one. */
@@ -93,4 +95,4 @@ export interface PlOverlayProps extends Omit<React.ComponentPropsWithoutRef<'div
  * held inside, the page behind going inert, and focus returning to wherever it
  * came from when the overlay closes.
  */
-export declare function PlOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, color, label, className, style, children, ...props }: PlOverlayProps): React.JSX.Element;
+export declare function PlOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, color, label, className, classNames, style, children, ...props }: PlOverlayProps): React.JSX.Element;

package/dist/components/overlay/PlOverlay.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as s}from"@base-ui/react/dialog";import{surfaceSlots as l}from"../../internal/styles.js";const r={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:""},t={start:"items-start",center:"items-center",end:"items-end"},i={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},o=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:n,defaultOpen:p,onOpenChange:c,tone:m="scrim",dismissible:d=!1,modal:f=!0,align:u="center",size:b="md",color:x="primary",label:y="Overlay",className:g,style:j,children:k,...h}){return e(s.Root,{open:n,defaultOpen:p,modal:f,disablePointerDismissal:!d,onOpenChange:(e,a)=>{d||e||"escape-key"!==a.reason?c?.(e):a.cancel()},children:a(s.Portal,{children:[e(s.Backdrop,{className:`plass-portal fixed inset-0 z-(--plass-z-portal) ${o} ${r[m]}`}),e(s.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",t[u],i[b]].join(" "),children:e(s.Popup,{"aria-label":y,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",o,g??""].filter(Boolean).join(" "),style:{...l(x,0),...j},...h,children:k})})]})})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as s}from"@base-ui/react/dialog";import{cx as l,surfaceSlots as r}from"../../internal/styles.js";const t={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:""},i={start:"items-start",center:"items-center",end:"items-end"},o={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},n=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:p,defaultOpen:c,onOpenChange:m,tone:d="scrim",dismissible:f=!1,modal:b=!0,align:u="center",size:x="md",color:y="primary",label:g="Overlay",className:k,classNames:j,style:h,children:v,...O}){return e(s.Root,{open:p,defaultOpen:c,modal:b,disablePointerDismissal:!f,onOpenChange:(e,a)=>{f||e||"escape-key"!==a.reason?m?.(e):a.cancel()},children:a(s.Portal,{children:[e(s.Backdrop,{className:l("plass-portal fixed inset-0 z-(--plass-z-portal)",n,t[d],j?.backdrop)}),e(s.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",i[u],o[x]].join(" "),children:e(s.Popup,{"aria-label":g,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",n,k??""].filter(Boolean).join(" "),style:{...r(y,0),...h},...O,children:v})})]})})}

package/dist/components/page-layout/PlPageLayout.d.ts

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { type PlPageLayoutCollapse, type PlPageLayoutScroll, type PlPageLayoutSpan } from '../../internal/page-layout.js';
+import type { PlassColor } from '../../types.js';
+export type { PlPageLayoutCollapse, PlPageLayoutScroll, PlPageLayoutSpan } from '../../internal/page-layout.js';
+export interface PlPageLayoutProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** The bar across the top. A `PlHeader`, usually. */
+    header?: React.ReactNode;
+    /** The sheet at the end. A `PlFooter`, usually. */
+    footer?: React.ReactNode;
+    /**
+     * The leading column — the left of an English page, the right of an Arabic
+     * one. A `PlSidebar`, which is told which end it is on and needs no `side`
+     * prop of its own in here.
+     */
+    sidebar?: React.ReactNode;
+    /**
+     * The trailing column, for the layouts that have two: navigation down one
+     * side and a table of contents, an inspector or a filter panel down the
+     * other. Each is a sidebar with its own width, its own drawer and its own
+     * trigger.
+     */
+    endSidebar?: React.ReactNode;
+    /**
+     * Which of the header and the sidebars takes the top corner.
+     *
+     * - `full` — the header spans the whole width and the sidebars begin
+     *   underneath it. The arrangement of a website. The default.
+     * - `content` — the sidebars run the full height of the window and the header
+     *   sits between them, belonging to the view rather than to the site. The
+     *   arrangement of an application.
+     * @default 'full'
+     */
+    headerSpan?: PlPageLayoutSpan;
+    /**
+     * The same question for the footer, and it is worth answering separately: a
+     * dashboard with a full-height navigation rail still usually wants its
+     * copyright line under the content rather than under the rail.
+     * @default 'full'
+     */
+    footerSpan?: PlPageLayoutSpan;
+    /**
+     * What scrolls: the document, or only the region between the header and the
+     * footer.
+     *
+     * `page` is the default and is what almost every page wants — the browser's
+     * own address bar hides on a phone, the scroll position is restored on a back
+     * navigation, and the header holds its place with `position: sticky` without
+     * anything having to be padded out of its way. Reach for `content` when the
+     * page is a workspace rather than a document.
+     * @default 'page'
+     */
+    scroll?: PlPageLayoutScroll;
+    /**
+     * How tall the layout is.
+     *
+     * - `viewport` — the window's, which is what a page wants: a short page still
+     *   pushes its footer to the bottom of the screen, and with `scroll="content"`
+     *   the layout is exactly one screen tall. The default.
+     * - `auto` — its parent's, for a layout that is not the page. An app shell
+     *   inside a preview, a pane of a larger tool, the frame in a documentation
+     *   demo.
+     * - a length — a number in pixels, or any CSS length.
+     *
+     * It sets a floor while the page scrolls and an exact height while only the
+     * content does, which is the same difference `scroll` makes everywhere else.
+     * @default 'viewport'
+     */
+    height?: 'viewport' | 'auto' | number | string;
+    /**
+     * The window width below which the sidebars stop being columns and become
+     * drawers, with a `PlSidebarTrigger` as the way to open them. `none` keeps
+     * them as columns at every width.
+     * @default 'md'
+     */
+    collapseBelow?: PlPageLayoutCollapse;
+    /**
+     * Whether the leading sidebar's drawer is open. Use with
+     * `onSidebarOpenChange` for a controlled layout — a route change that should
+     * close the drawer behind it, a state the app already stores.
+     */
+    sidebarOpen?: boolean;
+    /** Which state it starts in. @default false */
+    defaultSidebarOpen?: boolean;
+    onSidebarOpenChange?: (open: boolean) => void;
+    /** The same three for the trailing sidebar. */
+    endSidebarOpen?: boolean;
+    defaultEndSidebarOpen?: boolean;
+    onEndSidebarOpenChange?: (open: boolean) => void;
+    /**
+     * Puts a "Skip to content" link first in the document, drawn only while it
+     * holds the focus.
+     *
+     * On by default, and it is the one thing here that is not a style decision. A
+     * keyboard reader arriving on a page whose navigation holds forty links has
+     * to walk past all forty on every page before reaching the article, and this
+     * is the one link that spares them. It costs a sighted reader nothing,
+     * because it is invisible until it is tabbed to.
+     * @default true
+     */
+    skipLink?: boolean;
+    /** What that link says. @default 'Skip to content' */
+    skipLabel?: React.ReactNode;
+    /**
+     * The `id` the skip link jumps to, put on the `<main>`.
+     * @default 'main'
+     */
+    mainId?: string;
+    /** Anything else the `<main>` needs — a `className`, an `aria-label`. */
+    mainProps?: Omit<React.ComponentPropsWithoutRef<'main'>, 'id' | 'children'>;
+    /** The colour family the skip link lights up in. @default 'primary' */
+    color?: PlassColor;
+    /** The page. Rendered inside the `<main>`. */
+    children?: React.ReactNode;
+}
+/**
+ * The skeleton a page is hung on: a header, a footer, one sidebar or two, and
+ * the content between them.
+ *
+ * What it is really for is the landmarks. A page assembled out of `<div>`s is a
+ * page a screen reader offers as one undifferentiated region and a search
+ * engine reads as one undifferentiated blob; the same page built out of
+ * `<header>`, `<nav>`, `<aside>`, `<main>` and `<footer>` is a page with a
+ * table of contents. Those tags come from the components this one arranges — it
+ * draws no surface of its own and contributes exactly one element to the
+ * document, plus the `<main>` and the skip link that jumps to it.
+ *
+ * The arrangement is flexbox and media queries, which is deliberate rather than
+ * incidental: everything that decides where a column goes is stated in CSS, so
+ * the layout is right in the first frame the browser paints and right in a page
+ * with JavaScript turned off. The only things measured are the header's and the
+ * footer's heights, and only because a sidebar that holds its place has to
+ * start below a bar whose height nobody but the bar knows.
+ *
+ * It draws no gutter and no measure. That is `PlContainer`'s job, and a layout
+ * that also did it would be a second spelling of one idea — put a container
+ * inside, where a page can have a wide dashboard on one route and a narrow
+ * article on the next.
+ */
+export declare const PlPageLayout: React.ForwardRefExoticComponent<PlPageLayoutProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{PlPageLayoutContext as o,PlassSidebarSideContext as n}from"../../internal/page-layout.js";import{controlSlots as r,cx as s,hasContent as a,toLength as i}from"../../internal/styles.js";const u=["header","footer"];export const PlPageLayout=/* @__PURE__ */t.forwardRef(function PlPageLayout({header:c,footer:d,sidebar:f,endSidebar:p,headerSpan:h="full",footerSpan:m="full",scroll:v="page",height:x="viewport",collapseBelow:y="md",sidebarOpen:b,defaultSidebarOpen:g=!1,onSidebarOpenChange:w,endSidebarOpen:P,defaultEndSidebarOpen:S=!1,onEndSidebarOpenChange:k,skipLink:C=!0,skipLabel:O="Skip to content",mainId:N="main",mainProps:$,color:j="primary",className:R,style:z,children:L,...E},B){const[H,M]=t.useState(g),[_,I]=t.useState(S),q=t.useMemo(()=>({start:b??H,end:P??_}),[b,H,P,_]),A=t.useCallback((e,l)=>{if("start"===e)return void 0===b&&M(l),void w?.(l);void 0===P&&I(l),k?.(l)},[b,P,w,k]),D=t.useRef(null),F=t.useCallback(e=>{D.current=e,"function"==typeof B?B(e):B&&(B.current=e)},[B]),G=t.useRef({header:null,footer:null}),J=t.useRef(null),K=t.useCallback(()=>{const e=D.current;if(e)for(const l of u){const t=G.current[l],o="header"===l?h:m;if(!t){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(t).position,r=`${t.offsetHeight}px`,s="sticky"===n||"fixed"===n;e.style.setProperty(`--p-layout-${l}`,s&&"full"===o?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"fixed"===n?r:"0px")}},[h,m]),Q=t.useCallback(()=>{const e=J.current;if(e){e.disconnect();for(const l of u){const t=G.current[l];t&&e.observe(t)}}K()},[K]);t.useEffect(()=>(J.current=new ResizeObserver(()=>K()),Q(),()=>{J.current?.disconnect(),J.current=null}),[K,Q]);const T=t.useCallback((e,l)=>{G.current[e]=l,Q()},[Q]),U=t.useMemo(()=>({present:!0,register:T,collapseBelow:y,open:q,setOpen:A,scroll:v}),[T,y,q,A,v]),V="content"===v,W=i("viewport"===x||"auto"===x?void 0:x),X=void 0!==W?"":"auto"===x?V?"h-full":"min-h-full":V?"h-dvh":"min-h-dvh",Y=a(c)?c:null,Z=a(d)?d:null;return e(o.Provider,{value:U,children:l("div",{ref:F,className:s("relative flex w-full flex-col",V?"overflow-hidden":"",X,"full"===h?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===m?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",R),style:void 0===W?z:{...V?{height:W}:{minHeight:W},...z},...E,children:[C?e("a",{href:`#${N}`,className:s("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:r(j,2,"solid"),children:O}):null,"full"===h?Y:null,l("div",{className:s("flex w-full flex-1",V?"min-h-0":""),children:[a(f)?e(n.Provider,{value:"start",children:f}):null,l("div",{className:s("flex min-w-0 flex-1 flex-col",V?"min-h-0":"","content"===h?"[padding-top:var(--p-layout-header-inset,0px)]":"","content"===m?"[padding-bottom:var(--p-layout-footer-inset,0px)]":""),children:["content"===h?Y:null,e("main",{...$,id:N,className:s("min-w-0 flex-1",V?"min-h-0 overflow-y-auto":"",$?.className),children:L}),"content"===m?Z:null]}),a(p)?e(n.Provider,{value:"end",children:p}):null]}),"full"===m?Z:null]})})});

package/dist/components/page-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { PlPageLayout } from './PlPageLayout.js';
+export type { PlPageLayoutProps, PlPageLayoutCollapse, PlPageLayoutScroll, PlPageLayoutSpan } from './PlPageLayout.js';

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

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