plass-ui 1.1.0 → 1.3.0

package/dist/components/hot-keys/PlHotKeys.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as o from"react";import{controlHeightClasses as r,controlSlots as s,controlTextClasses as t,glassClasses as l,paddingXClasses as i,radiusClasses as m,srOnlyClasses as c,transitionClasses as d}from"../../internal/styles.js";const word=e=>({symbol:e,name:e}),p={mod:{mac:{symbol:"⌘",name:"Command"},windows:word("Ctrl"),linux:word("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:word("Win"),linux:word("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:word("Ctrl"),linux:word("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:word("Alt"),linux:word("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:word("Shift"),linux:word("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:word("Enter"),linux:word("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:word("Tab"),linux:word("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:word("Esc"),linux:word("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:word("Backspace"),linux:word("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:word("Del"),linux:word("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:word("Caps Lock"),linux:word("Caps Lock")}},u={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},w={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function detectOS(){if("undefined"==typeof navigator)return"windows";const e=navigator.userAgentData,n=`${e?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(n)?"mac":/win/i.test(n)?"windows":"linux"}function subscribe(){return()=>{}}function serverOS(){return"windows"}const b={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},f={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--p-tint)]"].join(" "),glass:/* @__PURE__ */[l,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--plass-shadow-ambient)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},x={xs:"min-w-6",sm:"min-w-8",md:"min-w-10",lg:"min-w-12",xl:"min-w-14"};export const PlKbd=/* @__PURE__ */o.forwardRef(function PlKbd({variant:n="glass",size:a="md",density:o="compact",className:s,children:l,...c},p){const u=b[a];return e("kbd",{ref:p,className:["inline-flex shrink-0 items-center justify-center","font-mono leading-none font-medium tabular-nums whitespace-nowrap",r[u],t[u],x[u],i[o][u],m[u],f[n],d,s??""].filter(Boolean).join(" "),...c,children:l})});export const PlHotKeys=/* @__PURE__ */o.forwardRef(function PlHotKeys({variant:r="glass",size:t="md",color:l="secondary",density:i="compact",elevation:m=0,keys:d,cluster:b,os:f="auto",separator:x,className:y,style:g,...h},v){const k=function useDetectedOS(){return o.useSyncExternalStore(subscribe,detectOS,serverOS)}(),A="auto"===f?k:f,C={...s(l,m,r),...g},S={variant:r,size:t,density:i},j="xs"===t||"sm"===t?"gap-1":"gap-1.5";if(b)return n("span",{ref:v,className:["inline-flex flex-col items-center align-middle",j,y??""].filter(Boolean).join(" "),style:C,...h,children:[e(PlKbd,{...S,children:b.up}),n("span",{className:`inline-flex ${j}`,children:[e(PlKbd,{...S,children:b.left}),e(PlKbd,{...S,children:b.down}),e(PlKbd,{...S,children:b.right})]})]});const K=function tokenize(e){return Array.isArray(e)?e.map(e=>e.trim()).filter(Boolean):e.split("+").map(e=>e.trim()).filter(Boolean)}(d??[]).map(e=>function labelFor(e,n){const a=e.toLowerCase().replace(/[\s_-]/g,""),o=u[a]??a,r=w[o];if(r)return r;const s=p[o];return s?s[n]:word(1===e.length?e.toUpperCase():e)}(e,A)),P=void 0===x?"mac"===A?null:"+":x;return e("span",{ref:v,className:["inline-flex max-w-full items-center gap-1 align-middle",y??""].filter(Boolean).join(" "),style:C,...h,children:K.map((r,s)=>n(o.Fragment,{children:[s>0&&null!==P?e("span",{"aria-hidden":"true",className:"text-(--plass-muted-fg)",children:P}):null,e(PlKbd,{...S,children:r.symbol===r.name?r.symbol:n(a,{children:[e("span",{"aria-hidden":"true",children:r.symbol}),e("span",{className:c,children:r.name})]})})]},s))})});
+"use client";import{jsx as e,jsxs as n,Fragment as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{canonicalKey as r,detectOS as o}from"../../internal/keys.js";import{controlHeightClasses as t,controlSlots as i,controlTextClasses as m,glassClasses as c,paddingXClasses as d,radiusClasses as p,srOnlyClasses as u,transitionClasses as w}from"../../internal/styles.js";const word=e=>({symbol:e,name:e}),b={mod:{mac:{symbol:"⌘",name:"Command"},windows:word("Ctrl"),linux:word("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:word("Win"),linux:word("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:word("Ctrl"),linux:word("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:word("Alt"),linux:word("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:word("Shift"),linux:word("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:word("Enter"),linux:word("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:word("Tab"),linux:word("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:word("Esc"),linux:word("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:word("Backspace"),linux:word("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:word("Del"),linux:word("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:word("Caps Lock"),linux:word("Caps Lock")}},f={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function subscribe(){return()=>{}}function serverOS(){return"windows"}const y={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},x={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--p-tint)]"].join(" "),glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--plass-shadow-ambient)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},h={xs:"min-w-6",sm:"min-w-8",md:"min-w-10",lg:"min-w-12",xl:"min-w-14"};export const PlKbd=/* @__PURE__ */a.forwardRef(function PlKbd({variant:n="glass",size:s="md",density:a="compact",className:l,children:r,...o},i){const c=y[s];return e("kbd",{ref:i,className:["inline-flex shrink-0 items-center justify-center","font-mono leading-none font-medium tabular-nums whitespace-nowrap",t[c],m[c],h[c],d[a][c],p[c],x[n],w,l??""].filter(Boolean).join(" "),...o,children:r})});export const PlHotKeys=/* @__PURE__ */a.forwardRef(function PlHotKeys({variant:t="glass",size:m,color:c,density:d,elevation:p=0,keys:w,cluster:y,os:x="auto",separator:h,className:g,style:v,...k},j){const A=l(),C=m??A.size??"md",K=c??A.color??"secondary",P=d??A.density??"compact",S=function useDetectedOS(){return a.useSyncExternalStore(subscribe,o,serverOS)}(),B="auto"===x?S:x,N={...i(K,p,t),...v},_={variant:t,size:C,density:P},E="xs"===C||"sm"===C?"gap-1":"gap-1.5";if(y)return n("span",{ref:j,className:["inline-flex flex-col items-center align-middle",E,g??""].filter(Boolean).join(" "),style:N,...k,children:[e(PlKbd,{..._,children:y.up}),n("span",{className:`inline-flex ${E}`,children:[e(PlKbd,{..._,children:y.left}),e(PlKbd,{..._,children:y.down}),e(PlKbd,{..._,children:y.right})]})]});const z=function tokenize(e){return Array.isArray(e)?e.map(e=>e.trim()).filter(Boolean):e.split("+").map(e=>e.trim()).filter(Boolean)}(w??[]).map(e=>function labelFor(e,n){const s=r(e),a=f[s];if(a)return a;const l=b[s];return l?l[n]:word(1===e.length?e.toUpperCase():e)}(e,B)),D=void 0===h?"mac"===B?null:"+":h;return e("span",{ref:j,className:["inline-flex max-w-full items-center gap-1 align-middle",g??""].filter(Boolean).join(" "),style:N,...k,children:z.map((l,r)=>n(a.Fragment,{children:[r>0&&null!==D?e("span",{"aria-hidden":"true",className:"text-(--plass-muted-fg)",children:D}):null,e(PlKbd,{..._,children:l.symbol===l.name?l.symbol:n(s,{children:[e("span",{"aria-hidden":"true",children:l.symbol}),e("span",{className:u,children:l.name})]})})]},r))})});

package/dist/components/image/PlImage.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../../types.js';
+/** How the picture is fitted to the box. `object-fit`'s own words. */
+export type PlImageFit = 'cover' | 'contain' | 'fill' | 'none';
+export interface PlImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'color' | 'onError' | 'onLoad'> {
+    /**
+     * The description a screen reader reads. **Required**, and `""` is a real
+     * answer: it marks the picture decorative and takes it off the accessibility
+     * tree, which is the right call for a background or a texture and the wrong
+     * one for anything a reader would miss.
+     */
+    alt: string;
+    /**
+     * The proportion the box holds while the picture is on its way, written the
+     * way CSS writes it — a number or `'16 / 9'`.
+     *
+     * This is what the component is really for. Without it the page has nothing
+     * to reserve, and every image that arrives late pushes the paragraph under it
+     * down the screen.
+     */
+    ratio?: number | string;
+    /** @default 'cover' */
+    fit?: PlImageFit;
+    /** Rounds the corners to the `size` step of the house ladder. @default false */
+    rounded?: boolean;
+    /** Which step of the radius ladder `rounded` uses. @default 'md' */
+    size?: PlassSize;
+    /** The family the skeleton and the focus ring take. @default 'primary' */
+    color?: PlassColor;
+    /**
+     * What is drawn while the picture is loading. A `PlSkeleton` by default;
+     * `null` draws nothing and leaves the reserved box empty.
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * What is drawn when the picture does not arrive — a wrong URL, a dead host,
+     * a file that is not an image.
+     *
+     * A muted panel with the `alt` text in it by default, which is the one thing
+     * that is certainly available and certainly describes what is missing.
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Opens the picture over the page when it is pressed.
+     *
+     * Off by default. A picture that grows when you click it is a promise that
+     * there is more of it to see, and most pictures on a page are not making it.
+     * @default false
+     */
+    preview?: boolean;
+    /** The accessible name of the preview overlay. @default 'Preview' */
+    previewLabel?: string;
+    /** Called when the picture has loaded, and when it has failed. */
+    onStatusChange?: (status: PlImageStatus) => void;
+}
+/** Where the picture has got to. */
+export type PlImageStatus = 'loading' | 'loaded' | 'error';
+/**
+ * A picture, and the two states a picture spends most of its life in.
+ *
+ * An `<img>` is one tag and it works, which is the reason to say what this adds
+ * rather than to assume it. Three things: the space is **reserved** before the
+ * picture arrives, so the paragraph under it does not move when it does; a
+ * failure is *drawn* rather than left as the browser's broken-image glyph and
+ * the alt text in a serif nobody chose; and the two are one state machine, so
+ * the placeholder is not still there behind a picture that has already loaded.
+ *
+ * `ratio` is what makes the first one work and is the prop worth reaching for
+ * every time. Without it there is nothing to reserve — the box is however tall
+ * the picture turns out to be, which is not known until it arrives.
+ */
+export declare const PlImage: React.ForwardRefExoticComponent<PlImageProps & React.RefAttributes<HTMLImageElement>>;

package/dist/components/image/PlImage.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as o,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{PlOverlay as t}from"../overlay/PlOverlay.js";import{PlSkeleton as r}from"../skeleton/PlSkeleton.js";import{cx as n,focusRingClasses as i,radiusClasses as c,transitionClasses as d}from"../../internal/styles.js";const m={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"};export const PlImage=/* @__PURE__ */l.forwardRef(function PlImage({alt:p,src:f,ratio:u,fit:b="cover",rounded:h=!1,size:g,color:j,placeholder:v,fallback:y,preview:x=!1,previewLabel:w="Preview",onStatusChange:N,className:k,style:z,loading:P="lazy",...C},S){const L=s(),E=g??L.size??"md",I=j??L.color??"primary",[O,R]=l.useState("loading"),[$,F]=l.useState(!1);l.useEffect(()=>{R("loading")},[f]);const settle=e=>{R(e),N?.(e)},q=h?c[E]:"",A=e("img",{ref:S,src:f,alt:p,loading:P,onLoad:()=>settle("loaded"),onError:()=>settle("error"),className:n("block size-full",m[b],d,"loaded"===O?"opacity-100":"opacity-0","error"===O?"hidden":""),...C}),B=a(o,{children:[A,"loading"===O?e("span",{className:"absolute inset-0",children:void 0===v?e(r,{shape:"rect",color:I,size:E,width:"100%",height:"100%",className:q}):v}):null,"error"===O?e("span",{className:"absolute inset-0 flex items-center justify-center bg-(--plass-glass-press) p-3 text-center text-[0.8125rem] text-(--plass-muted-fg)",children:y??p}):null]}),D=n("relative block overflow-hidden",q,k),G={aspectRatio:u,...z};return x?a(o,{children:[e("button",{type:"button","aria-label":p?`${p} — ${w.toLowerCase()}`:w,onClick:()=>F(!0),disabled:"loaded"!==O,className:n(D,"cursor-zoom-in p-0",i),style:G,children:B}),e(t,{open:$,onOpenChange:F,tone:"glass",dismissible:!0,color:I,label:w,children:e("img",{src:f,alt:p,className:"max-h-[85vh] max-w-[90vw] object-contain"})})]}):e("span",{className:D,style:G,children:B})});

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

@@ -0,0 +1,2 @@
+export { PlImage } from './PlImage.js';
+export type { PlImageFit, PlImageProps, PlImageStatus } from './PlImage.js';

package/dist/components/image/index.js

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

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

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;
 /**
@@ -195,7 +197,7 @@ export declare function PlMenuSubmenu({ label, startIcon, disabled, side, sideOf
  * variant for every shape a row can take, which is a component tree spelled as a
  * discriminated union.
  */
-export declare function PlMenu({ size, color, density, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: PlMenuProps): React.JSX.Element;
+export declare function PlMenu({ size: sizeProp, color: colorProp, density: densityProp, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: PlMenuProps): React.JSX.Element;
 /**
  * The same menu, opened by a right-click or a long press instead of by a button.
  *
@@ -206,5 +208,5 @@ export declare function PlMenu({ size, color, density, trigger, open, defaultOpe
  * against an anchor, and the long press is what makes it reachable on a touch
  * screen at all.
  */
-export declare function PlContextMenu({ size, color, density, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: PlContextMenuProps): React.JSX.Element;
+export declare function PlContextMenu({ size: sizeProp, color: colorProp, density: densityProp, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: PlContextMenuProps): React.JSX.Element;
 export {};

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

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

@@ -29,6 +29,10 @@ export interface PlMenubarMenuProps {
     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.
@@ -39,7 +43,7 @@ export interface PlMenubarMenuProps {
  * `PlMenuGroup` and `PlMenuSubmenu` a `PlMenu` takes, because it *is* the same
  * menu.
  */
-export declare function PlMenubarMenu({ label, startIcon, disabled, children }: PlMenubarMenuProps): React.ReactElement;
+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.

package/dist/components/menubar/PlMenubar.js

@@ -1 +1 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as o from"react";import{Menubar as s}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:s,startIcon:p,disabled:m=!1,children:h}){const{size:v,color:x,density:g}=o.useContext(n);return t(r,{size:v,color:x,density:g,disabled:m,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:m,className:i(b,f[v],a[v],l[v],d["default"===g?"compact":g][v],u[v]),children:[c(p)?p:null,s]}),children:h})}export const PlMenubar=/* @__PURE__ */o.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=o.useMemo(()=>({size:e,color:r,density:a}),[e,r,a]);return t(n.Provider,{value:x,children:t(s,{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})})});
+"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})})});

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: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: PlModalProps): React.JSX.Element;

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

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

@@ -52,6 +52,10 @@ export interface PlNavigationMenuItemProps {
     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. */
@@ -80,7 +84,7 @@ export declare const PlNavigationMenuLink: React.ForwardRefExoticComponent<PlNav
  * is a link, and the difference is not cosmetic — the second is announced as a
  * destination and the first as something that expands.
  */
-export declare function PlNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, columns, children }: PlNavigationMenuItemProps): React.ReactElement;
+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.

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

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

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, PlassHotKeys, PlassStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *
@@ -15,6 +15,17 @@ 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;
+    /**
+     * Chords this field answers to, in the vocabulary `PlHotKeys` draws.
+     *
+     * `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
+     * beside the field would print, so the cap and the binding cannot drift. A
+     * chord that matches is **consumed**: the handler runs and the key reaches
+     * neither the control's own behaviour nor the form around it.
+     */
+    hotKeys?: PlassHotKeys;
     /**
      * Drop shadow depth. `0` is the default — a field is a well cut into the
      * sheet, not a key resting on it.
@@ -130,4 +141,4 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
  * clamping, the press-and-hold repeat on the steppers, and the hidden input that
  * submits with a form.
  */
-export declare function PlNumberField({ variant, size, 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: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;

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

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

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, PlassHotKeys, PlassStyleProps } from '../../types.js';
 /**
  * What may be typed into a slot.
  *
@@ -9,6 +9,17 @@ 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;
+    /**
+     * Chords this field answers to, in the vocabulary `PlHotKeys` draws.
+     *
+     * `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
+     * beside the field would print, so the cap and the binding cannot drift. A
+     * chord that matches is **consumed**: the handler runs and the key reaches
+     * neither the control's own behaviour nor the form around it.
+     */
+    hotKeys?: PlassHotKeys;
     /** 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,e(l.Error,W?{match:!0,className:n(d[v],"text-(--p-accent)"),children:A}:{className:n(d[v],"text-(--p-accent)")})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Field as r}from"@base-ui/react/field";import{OTPField as n}from"@base-ui/react/otp-field";import{hotKeyHandler as s}from"../../internal/keys.js";import{cx as o,disabledClasses as i,fieldReadOnlyClasses as m,fieldRestClasses as d,hasContent as u,metaTextClasses as c,stackGapClasses as p,surfaceSlots as f,transitionClasses as x}from"../../internal/styles.js";const g={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"},h={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},y={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},b={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"}},v={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */t.forwardRef(function PlOtpField({variant:N="glass",size:w,color:V,density:j,elevation:F=0,length:C=6,charset:M="numeric",mask:O=!1,groupSize:k,separator:z="–",value:I,defaultValue:R,onValueChange:S,onComplete:q,onValueInvalid:D,autoSubmit:K=!1,label:P,description:_,error:A,invalid:E,name:L,required:T=!1,disabled:B=!1,readOnly:G=!1,autoFocus:H=!1,className:J,hotKeys:Q,classNames:U,style:W,...X},Y){const Z=l(),$=w??Z.size??"md",ee=V??Z.color??"primary",ae=j??Z.density??"default",te=Math.min(12,Math.max(2,Math.round(C))),le=u(A),re=E??le,ne=re?"danger":ee,se=o("text-center font-medium [font-family:inherit]",g[$],y[$],h[$],x,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",B?i[N]:G?m[N]:d[N]),oe=k&&k>0?Math.round(k):0;return a(r.Root,{disabled:B,invalid:re,className:o("inline-flex flex-col align-top",p[$],J),style:{...f(ne,F),...W},children:[u(P)?e(r.Label,{className:o(c[$],"font-medium",B?"text-(--plass-muted-fg)":"text-(--plass-fg)",U?.label),children:P}):null,e(n.Root,{ref:Y,onKeyDown:s(Q,void 0),length:te,validationType:v[M],mask:O,name:L,required:T,disabled:B,readOnly:G,autoSubmit:K,value:I,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>D?.(e),className:o("flex items-center",b[ae][$],U?.control),...X,children:Array.from({length:te},(l,r)=>a(t.Fragment,{children:[oe>0&&r>0&&r%oe===0?e("span",{"aria-hidden":"true",className:o("select-none px-0.5 text-(--plass-muted-fg)",y[$]),children:z}):null,e(n.Input,{className:se,autoFocus:H&&0===r})]},r))}),u(_)?e(r.Description,{className:o(c[$],"text-(--plass-muted-fg)",U?.description),children:_}):null,e(r.Error,le?{match:!0,className:o(c[$],"text-(--p-accent)",U?.error),children:A}:{className:o(c[$],"text-(--p-accent)",U?.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: sizeProp, color: colorProp, 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{useDefaults as s}from"../../internal/defaults.js";import{Dialog as l}from"@base-ui/react/dialog";import{cx as r,surfaceSlots as t}from"../../internal/styles.js";const i={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:""},o={start:"items-start",center:"items-center",end:"items-end"},n={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},p=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:c,defaultOpen:m,onOpenChange:d,tone:f="scrim",dismissible:u=!1,modal:b=!0,align:x="center",size:y,color:g,label:j="Overlay",className:k,classNames:h,style:v,children:z,...O}){const N=s(),w=y??N.size??"md",P=g??N.color??"primary";return e(l.Root,{open:c,defaultOpen:m,modal:b,disablePointerDismissal:!u,onOpenChange:(e,a)=>{u||e||"escape-key"!==a.reason?d?.(e):a.cancel()},children:a(l.Portal,{children:[e(l.Backdrop,{className:r("plass-portal fixed inset-0 z-(--plass-z-portal)",p,i[f],h?.backdrop)}),e(l.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",o[x],n[w]].join(" "),children:e(l.Popup,{"aria-label":j,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",p,k??""].filter(Boolean).join(" "),style:{...t(P,0),...v},...O,children:z})})]})})}

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

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