plass-ui 1.4.0 → 1.5.0

package/dist/components/highlight/PlHighlight.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{transitionClasses as t}from"../../internal/styles.js";const o={solid:"[background-image:var(--p-fill)] text-(--p-on-solid)",glass:"border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)]",ghost:"bg-transparent text-(--p-accent)"},l={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i=/[\p{L}\p{N}_]/u;function escapeRegExp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function isWholeWord(e,n,r){const t=n>0?e[n-1]:"",o=r<e.length?e[r]:"";return!i.test(t)&&!i.test(o)}function markString(e,n,r,t){n.lastIndex=0;const o=[];let l,i=0;for(;null!==(l=n.exec(e));){if(""===l[0]){n.lastIndex+=1;continue}const s=l.index,a=s+l[0].length;r&&!isWholeWord(e,s,a)||(s>i&&o.push(e.slice(i,s)),o.push(t(l[0],`${s}`)),i=a)}return 0===o.length?e:(i<e.length&&o.push(e.slice(i)),o)}function markNode(e,r,t,o){if("string"==typeof e)return markString(e,r,t,o);if("number"==typeof e)return markString(String(e),r,t,o);if(Array.isArray(e))return n.Children.map(e,e=>markNode(e,r,t,o));if(n.isValidElement(e)){const l=e.props.children;return void 0===l||"function"==typeof l?e:n.cloneElement(e,void 0,markNode(l,r,t,o))}return e}export const PlHighlight=/* @__PURE__ */n.forwardRef(function PlHighlight({query:i,variant:s="solid",color:a,caseSensitive:c=!1,wholeWord:p=!1,underline:u=!1,weight:d,className:f,style:m,children:g,...h},x){const b=r(),v=a??b.color??"warning",y=n.useMemo(()=>function buildPattern(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const r=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===r.length?null:new RegExp(r.map(escapeRegExp).join("|"),n?"gu":"giu")}(i,c),[i,c]),k=["-mx-0.5 rounded-[0.25rem] px-0.5","box-decoration-clone",o[s],u?"underline decoration-2 underline-offset-2":"",d?l[d]:"",t].filter(Boolean).join(" "),$=y?markNode(g,y,p,(n,r)=>e("mark",{className:k,children:n},r)):g;return e("span",{ref:x,className:f,style:{"--p-fill":`var(--plass-${v}-fill)`,"--p-on-solid":`var(--plass-${v}-on-solid)`,"--p-accent":`var(--plass-${v}-accent)`,"--p-soft":`var(--plass-${v}-soft)`,"--p-line":`var(--plass-${v}-line)`,...m},...h,children:$})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{transitionClasses as o}from"../../internal/styles.js";const t="forced-colors:[background-color:Mark] forced-colors:[color:MarkText]",l={solid:`[background-image:var(--p-fill)] text-(--p-on-solid) ${t}`,glass:`border bg-(--p-soft) text-(--p-accent) [border-color:var(--p-line)] ${t}`,ghost:`bg-transparent text-(--p-accent) ${t}`},i={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},s=/[\p{L}\p{N}_]/u;function escapeRegExp(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function isWholeWord(e,r,n){const o=r>0?e[r-1]:"",t=n<e.length?e[n]:"";return!s.test(o)&&!s.test(t)}function markString(e,r,n,o){r.lastIndex=0;const t=[];let l,i=0;for(;null!==(l=r.exec(e));){if(""===l[0]){r.lastIndex+=1;continue}const s=l.index,a=s+l[0].length;n&&!isWholeWord(e,s,a)||(s>i&&t.push(e.slice(i,s)),t.push(o(l[0],`${s}`)),i=a)}return 0===t.length?e:(i<e.length&&t.push(e.slice(i)),t)}function markNode(e,n,o,t){if("string"==typeof e)return markString(e,n,o,t);if("number"==typeof e)return markString(String(e),n,o,t);if(Array.isArray(e))return r.Children.map(e,e=>markNode(e,n,o,t));if(r.isValidElement(e)){const l=e.props.children;return void 0===l||"function"==typeof l?e:r.cloneElement(e,void 0,markNode(l,n,o,t))}return e}export const PlHighlight=/* @__PURE__ */r.forwardRef(function PlHighlight({query:t,variant:s="solid",color:a,caseSensitive:c=!1,wholeWord:d=!1,underline:p=!1,weight:f,className:u,style:g,children:m,...h},x){const b=n(),k=a??b.color??"warning",$=r.useMemo(()=>function buildPattern(e,r){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const n=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,r)=>r.length-e.length);return 0===n.length?null:new RegExp(n.map(escapeRegExp).join("|"),r?"gu":"giu")}(t,c),[t,c]),v=["-mx-0.5 rounded-[0.25rem] px-0.5","box-decoration-clone",l[s],p?"underline decoration-2 underline-offset-2":"",f?i[f]:"",o].filter(Boolean).join(" "),y=$?markNode(m,$,d,(r,n)=>e("mark",{className:v,children:r},n)):m;return e("span",{ref:x,className:u,style:{"--p-fill":`var(--plass-${k}-fill)`,"--p-on-solid":`var(--plass-${k}-on-solid)`,"--p-accent":`var(--plass-${k}-accent)`,"--p-soft":`var(--plass-${k}-soft)`,"--p-line":`var(--plass-${k}-line)`,...g},...h,children:y})});

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

@@ -1 +1 @@
-"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))})});
+"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,forcedFieldEdgeClasses as c,glassClasses as d,paddingXClasses as p,radiusClasses as u,srOnlyClasses as w,transitionClasses as b}from"../../internal/styles.js";const word=e=>({symbol:e,name:e}),f={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")}},y={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 x={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},h={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),0_2px_0_0_var(--p-tint)]",c].join(" "),glass:/* @__PURE__ */[d,"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)"},g={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=x[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],g[c],p[a][c],u[c],h[n],b,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:u,cluster:b,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(b)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:b.up}),n("span",{className:`inline-flex ${E}`,children:[e(PlKbd,{..._,children:b.left}),e(PlKbd,{..._,children:b.down}),e(PlKbd,{..._,children:b.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)}(u??[]).map(e=>function labelFor(e,n){const s=r(e),a=y[s];if(a)return a;const l=f[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:w,children:l.name})]})})]},r))})});

package/dist/components/hover-card/PlHoverCard.d.ts

@@ -15,7 +15,7 @@ export interface PlHoverCardProps extends Pick<PlassStyleProps, 'size' | 'color'
      * and the thing it is ahead of is nearly always somewhere you can go.
      */
     trigger: React.ReactElement;
-    /** The heading, rendered as the element that names the card. */
+    /** The heading at the top of the card. */
     title?: React.ReactNode;
     /** A line under the title. */
     description?: React.ReactNode;
@@ -88,7 +88,9 @@ export interface PlHoverCardProps extends Pick<PlassStyleProps, 'size' | 'color'
  * not zero because the gap between the trigger and the card has no pointer in
  * it — a card that closed the moment the pointer left could never be reached.
  *
- * Base UI owns the anchoring, the flip at the window edge, the two delays, the
- * dismissal and the `aria-describedby` wiring. What is left here is the surface.
+ * Base UI owns the anchoring, the flip at the window edge, the two delays and the
+ * dismissal. It links the card to nothing for a screen reader: the card is an
+ * extra for a pointer, so what it previews has to be reachable without it. What
+ * is left here is the surface.
  */
 export declare function PlHoverCard({ size: sizeProp, color: colorProp, density: densityProp, trigger, title, description, children, side, align, sideOffset, alignOffset, delay, closeDelay, arrow, open, defaultOpen, onOpenChange, width, className, style, ...props }: PlHoverCardProps): React.JSX.Element;

package/dist/components/hover-card/PlHoverCard.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{PreviewCard as a}from"@base-ui/react/preview-card";import{useDefaults as l}from"../../internal/defaults.js";import{cx as t,glassClasses as i,hasContent as r,metaTextClasses as o,radiusClasses as n,sheetBodyClasses as d,sheetHeaderGapClasses as p,sheetPaddingXClasses as c,sheetPaddingYClasses as m,sheetSectionGapClasses as f,sheetTitleClasses as g,surfaceSlots as h}from"../../internal/styles.js";const x={xs:"max-w-64",sm:"max-w-72",md:"max-w-sm",lg:"max-w-md",xl:"max-w-lg"},u=/* @__PURE__ */[i,"relative flex flex-col","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]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:8,sm:9,md:10,lg:11,xl:12};export function PlHoverCard({size:i,color:y,density:w,trigger:b,title:N,description:O,children:j,side:z="bottom",align:k="center",sideOffset:P=8,alignOffset:C=0,delay:D=600,closeDelay:M=300,arrow:W=!1,open:_,defaultOpen:A,onOpenChange:B,width:E,className:H,style:L,...R}){const T=l(),$=i??T.size??"md",q=y??T.color??"primary",F=w??T.density??"default",G=v[$],I=r(N)||r(O);return s(a.Root,{open:_,defaultOpen:A,onOpenChange:e=>B?.(e),children:[e(a.Trigger,{delay:D,closeDelay:M,render:b}),e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:z,align:k,sideOffset:P,alignOffset:C,children:s(a.Popup,{className:t(u,n[$],d[$],f[$],c[F][$],m[F][$],void 0===E?x[$]:"",H),style:{...h(q,3),...void 0===E?null:{maxWidth:"number"==typeof E?`${E}px`:E},...L},...R,children:[W?e(a.Arrow,{className:t("data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"),children:s("svg",{width:G,height:G/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--plass-glass-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,I?s("div",{className:t("flex min-w-0 flex-col",p[$]),children:[r(N)?e("div",{className:t("m-0 font-semibold",g[$]),children:N}):null,r(O)?e("div",{className:t("m-0 text-(--plass-muted-fg)",o[$]),children:O}):null]}):null,r(j)?e("div",{className:"min-w-0",children:j}):null]})})})]})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{PreviewCard as l}from"@base-ui/react/preview-card";import{useDefaults as a}from"../../internal/defaults.js";import{PopupArrow as r}from"../../internal/picker.js";import{cx as i,glassClasses as n,hasContent as t,metaTextClasses as o,radiusClasses as d,sheetBodyClasses as m,sheetHeaderGapClasses as c,sheetPaddingXClasses as p,sheetPaddingYClasses as f,sheetSectionGapClasses as g,sheetTitleClasses as x,surfaceSlots as u}from"../../internal/styles.js";const y={xs:"max-w-64",sm:"max-w-72",md:"max-w-sm",lg:"max-w-md",xl:"max-w-lg"},h=/* @__PURE__ */[n,"relative flex flex-col","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]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),v={xs:8,sm:9,md:10,lg:11,xl:12};export function PlHoverCard({size:n,color:w,density:b,trigger:O,title:j,description:N,children:z,side:P="bottom",align:C="center",sideOffset:D=8,alignOffset:_=0,delay:k=600,closeDelay:A=300,arrow:H=!1,open:R,defaultOpen:T,onOpenChange:W,width:$,className:q,style:B,...E}){const F=a(),G=n??F.size??"md",I=w??F.color??"primary",J=b??F.density??"default",K=v[G],L=t(j)||t(N);return s(l.Root,{open:R,defaultOpen:T,onOpenChange:e=>W?.(e),children:[e(l.Trigger,{delay:k,closeDelay:A,render:O}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:P,align:C,sideOffset:D,alignOffset:_,children:s(l.Popup,{className:i(h,d[G],m[G],g[G],p[J][G],f[J][G],void 0===$?y[G]:"",q),style:{...u(I,3),...void 0===$?null:{maxWidth:"number"==typeof $?`${$}px`:$},...B},...E,children:[H?e(r,{as:l.Arrow,size:K}):null,L?s("div",{className:i("flex min-w-0 flex-col",c[G]),children:[t(j)?e("div",{className:i("m-0 font-semibold",x[G]),children:j}):null,t(N)?e("div",{className:i("m-0 text-(--plass-muted-fg)",o[G]),children:N}):null]}):null,t(z)?e("div",{className:"min-w-0",children:z}):null]})})})]})}

package/dist/components/how-to-steps/PlHowToSteps.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{useDefaults as s}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as o,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as c,statusAt as d,titleStatusClasses as m}from"../../internal/steps.js";import{cx as p,hasContent as u,iconClasses as f,sheetBodyClasses as x,sheetTitleClasses as h,surfaceSlots as g}from"../../internal/styles.js";const v=/* @__PURE__ */r.createContext(null),w=/* @__PURE__ */r.createContext({index:0,last:!1}),y={default:{xs:"gap-4",sm:"gap-5",md:"gap-6",lg:"gap-7",xl:"gap-8"},compact:{xs:"gap-2.5",sm:"gap-3",md:"gap-4",lg:"gap-4",xl:"gap-5"}};export const PlHowToSteps=/* @__PURE__ */r.forwardRef(function PlHowToSteps({active:t,numbered:n=!0,connector:o="solid",size:a,color:i,density:c,render:d,className:m,style:u,children:f,...h},N){const b=s(),P=a??b.size??"md",j=i??b.color??"primary",H=c??b.density??"default",S=r.Children.toArray(f).filter(r.isValidElement),T=r.useMemo(()=>({size:P,density:H,color:j,active:t??null,numbered:n,connector:o}),[P,H,j,t,n,o]);return e(v.Provider,{value:T,children:l({render:d??e("ol",{}),ref:N,props:{className:p("m-0 flex list-none flex-col p-0",y[H][P],x[P],m),style:{...g(j,0),...u},children:S.map((t,r)=>e(w.Provider,{value:{index:r,last:r===S.length-1},children:t},t.key??r)),...h}})})});export const PlHowToStep=/* @__PURE__ */r.forwardRef(function PlHowToStep({title:l,icon:s,status:x,className:y,children:N,...b},P){const j=r.useContext(v),{index:H,last:S}=r.useContext(w);if(!j)throw new Error("PlHowToStep has to be inside a PlHowToSteps.");const{size:T,color:C,active:z,numbered:k,connector:E}=j,R=x??d(H,z),A=o[T];return t("li",{ref:P,"aria-current":"current"===R?"step":void 0,className:p("relative flex",n[T],y),style:g(C,0),...b,children:[t("div",{className:"flex flex-col items-center self-stretch",children:[e("span",{"aria-hidden":"true",className:p("flex shrink-0 items-center justify-center rounded-full font-semibold","text-[0.7em] leading-none",f,a[R]),style:{width:A,height:A},children:u(s)?s:k?H+1:null}),S||"none"===E?null:e("span",{"aria-hidden":"true",className:p("mt-1 w-0 flex-1 border-s-2",c[E],i[R])})]}),t("div",{className:"min-w-0 flex-1 pb-0.5",children:[u(l)?e("div",{className:p("font-semibold",h[T],m[R]),children:l}):null,u(N)?e("div",{className:p(u(l)?"mt-1":"","text-(--plass-muted-fg)"),children:N}):null]})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as r}from"@base-ui/react/use-render";import{useDefaults as s}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as o,bulletStatusClasses as i,connectorColorClasses as a,connectorStyleClasses as c,statusAt as d,titleStatusClasses as m}from"../../internal/steps.js";import{cx as p,hasContent as u,iconClasses as f,sheetBodyClasses as x,sheetTitleClasses as h,surfaceSlots as g}from"../../internal/styles.js";const v=/* @__PURE__ */l.createContext(null),w=/* @__PURE__ */l.createContext({index:0,last:!1}),y={default:{xs:"gap-4",sm:"gap-5",md:"gap-6",lg:"gap-7",xl:"gap-8"},compact:{xs:"gap-2.5",sm:"gap-3",md:"gap-4",lg:"gap-4",xl:"gap-5"}};export const PlHowToSteps=/* @__PURE__ */l.forwardRef(function PlHowToSteps({active:t,numbered:n=!0,connector:o="solid",size:i,color:a,density:c,render:d,className:m,style:u,children:f,...h},N){const b=s(),P=i??b.size??"md",j=a??b.color??"primary",H=c??b.density??"default",S=l.Children.toArray(f).filter(l.isValidElement),T=l.useMemo(()=>({size:P,density:H,color:j,active:t??null,numbered:n,connector:o}),[P,H,j,t,n,o]);return e(v.Provider,{value:T,children:r({render:d??e("ol",{}),ref:N,props:{role:"list",className:p("m-0 flex list-none flex-col p-0",y[H][P],x[P],m),style:{...g(j,0),...u},children:S.map((t,l)=>e(w.Provider,{value:{index:l,last:l===S.length-1},children:t},t.key??l)),...h}})})});export const PlHowToStep=/* @__PURE__ */l.forwardRef(function PlHowToStep({title:r,icon:s,status:x,className:y,children:N,...b},P){const j=l.useContext(v),{index:H,last:S}=l.useContext(w);if(!j)throw new Error("PlHowToStep has to be inside a PlHowToSteps.");const{size:T,color:C,active:z,numbered:k,connector:E}=j,R=x??d(H,z),A=o[T];return t("li",{ref:P,"aria-current":"current"===R?"step":void 0,className:p("relative flex",n[T],y),style:g(C,0),...b,children:[t("div",{className:"flex flex-col items-center self-stretch",children:[e("span",{"aria-hidden":"true",className:p("flex shrink-0 items-center justify-center rounded-full font-semibold","text-[0.7em] leading-none",f,i[R]),style:{width:A,height:A},children:u(s)?s:k?H+1:null}),S||"none"===E?null:e("span",{"aria-hidden":"true",className:p("mt-1 w-0 flex-1 border-s-2",c[E],a[R])})]}),t("div",{className:"min-w-0 flex-1 pb-0.5",children:[u(r)?e("div",{className:p("font-semibold",h[T],m[R]),children:r}):null,u(N)?e("div",{className:p(u(r)?"mt-1":"","text-(--plass-muted-fg)"),children:N}):null]})]})});

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

@@ -1,7 +1,71 @@
 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';
+import type { PlassImageFlip } from '../../internal/image.js';
+import type { PlassColor, PlassSide, PlassSize } from '../../types.js';
+import type { PlassWatermarkOptions, PlassWatermarkPlacement } from '../../internal/watermark.js';
+/** Where a watermark sits on the picture. */
+export type PlImageWatermarkPlacement = PlassWatermarkPlacement;
+/** A mark laid over the picture. A bare string is the text, in the usual corner. */
+export type PlImageWatermark = PlassWatermarkOptions;
+/**
+ * How the picture is fitted to the box. `object-fit`'s own words, and the same
+ * five `PlAspectRatio` takes: `scale-down` is `contain` that never enlarges a
+ * file smaller than the box.
+ */
+export type PlImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+/**
+ * How far the picture is turned, clockwise, in degrees.
+ *
+ * Quarter turns and nothing between them. A picture turned by any other angle
+ * no longer covers its own box, and filling the corners that leaves means
+ * enlarging it by an amount a caller would then want to tune, which is a photo
+ * editor's job rather than a component's.
+ */
+export type PlImageRotation = 0 | 90 | 180 | 270;
+/**
+ * Which way the picture is mirrored, along the axes it is shown on: `horizontal`
+ * swaps left and right on the screen whether or not the picture is turned.
+ */
+export type PlImageFlip = PlassImageFlip;
+/**
+ * Where the picture sits in its box, spelled the way `object-position` spells
+ * it: the centre, a side, a corner, or two percentages across and down.
+ *
+ * Physical rather than logical, on purpose. The subject of a photograph is on
+ * the same side of it in every language, so a crop that keeps it must not move
+ * to the other side on a right-to-left page.
+ */
+export type PlImagePosition = 'center' | PlassSide | 'top left' | 'top right' | 'bottom left' | 'bottom right' | `${number}% ${number}%`;
+/**
+ * What fills the part of the box a picture leaves empty.
+ *
+ * `blur` is the picture itself, covering the box and blurred behind it, the way
+ * a video player fills the sides of a portrait clip. Any other string is a CSS
+ * `background`.
+ */
+export type PlImageLetterbox = 'none' | 'blur';
+/**
+ * A picture to stand in while the file arrives, in place of the skeleton.
+ *
+ * It is drawn the way the picture will be, with the same `fit`, `position`,
+ * `rotate`, `flip` and `filter`, which is what it is for: a small copy of the
+ * same file, a few hundred bytes as a data URI or already in memory as a
+ * `Blob`, so the reader sees the picture's colours and shape before its detail.
+ */
+export interface PlImagePlaceholder {
+    /**
+     * The stand-in: a URL, a data URI or a `Blob`. A `Blob` is given an object URL
+     * for as long as it is shown, and the URL is released when it is not.
+     */
+    src: string | Blob;
+    /**
+     * Blurs the stand-in, by this many pixels or by 20 for `true`. A copy
+     * stretched up from a few pixels is blocky without it.
+     * @default false
+     */
+    blur?: boolean | number;
+}
+/** The treatments that have a name. Anything else is written as CSS. */
+export type PlImageFilter = 'none' | 'grayscale' | 'sepia' | 'saturate' | 'desaturate' | 'contrast' | 'dim';
 export interface PlImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'color' | 'onError' | 'onLoad'> {
     /**
      * The description a screen reader reads. **Required**, and `""` is a real
@@ -19,8 +83,85 @@ export interface PlImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>
      * down the screen.
      */
     ratio?: number | string;
-    /** @default 'cover' */
+    /**
+     * The file's own pixel dimensions, as an `<img>` takes them, or, given one at
+     * a time, the size of the box.
+     *
+     * Together they describe the file, and the box keeps their proportion before
+     * the file arrives, which is what they have always done on an `<img>`.
+     *
+     * One on its own is not a proportion, so it is read as the length it looks
+     * like. `height={200}` is a box 200 pixels tall across the width it is given,
+     * and `width={320}` is one 320 wide, never wider than its container, and as
+     * tall as the picture makes it. A number or a string of digits is pixels, and
+     * any other string is a CSS length. With a `ratio` as well, a lone `height`
+     * takes its width from the ratio. `fit` decides what the picture does inside.
+     *
+     * They reach the `<img>` either way.
+     */
+    width?: number | string;
+    height?: number | string;
+    /**
+     * How the picture fills its box.
+     * @default 'cover'
+     */
     fit?: PlImageFit;
+    /**
+     * Where the picture sits in its box: which part of it a `cover` crop keeps,
+     * and where `contain`, `none` and `scale-down` leave their empty space.
+     *
+     * Read on the picture as it is shown, so it holds through `rotate` and
+     * `flip`: `position="top"` keeps the top of what the reader sees rather than
+     * the top of the file. Anything else `object-position` accepts is passed
+     * through as written, without that conversion.
+     * @default 'center'
+     */
+    position?: PlImagePosition | (string & {});
+    /**
+     * What fills the box where `contain`, `none` or `scale-down` leave it empty:
+     * `blur` for the picture itself, blurred and covering the box behind it, or
+     * any CSS `background` — a colour, a token, a gradient.
+     *
+     * The blurred copy loads from exactly what the picture loads from, so it is
+     * the same request rather than a second one, and it is drawn only under a
+     * `fit` that can leave space. It is hidden from the accessibility tree and
+     * takes no pointer.
+     * @default 'none'
+     */
+    letterbox?: PlImageLetterbox | (string & {});
+    /**
+     * Turns the picture clockwise, a quarter at a time.
+     *
+     * A picture on its side is laid out on its side. `width` and `height` still
+     * describe the file, so `width={1200} height={800} rotate={90}` reserves a box
+     * two wide by three tall, and a picture with neither takes the turned shape
+     * once the file has said what it is. A `ratio` is the layout's and is kept,
+     * with `fit` deciding how the turned picture fills it.
+     *
+     * Drawn with CSS's own `rotate` property rather than a `transform`, which
+     * stays free for a hover effect or a class of your own.
+     * @default 0
+     */
+    rotate?: PlImageRotation;
+    /**
+     * Mirrors the picture, along the axes it is shown on.
+     *
+     * `horizontal` swaps left and right on the screen and `vertical` swaps top
+     * and bottom, whichever way `rotate` has turned the picture. Drawn with CSS's
+     * own `scale` property, so `transform` stays free.
+     * @default 'none'
+     */
+    flip?: PlImageFlip;
+    /**
+     * A treatment laid over the picture: one of the named ones, or any CSS
+     * `filter` chain of your own — `'blur(2px) hue-rotate(20deg)'` is as valid a
+     * value as `'sepia'`.
+     *
+     * It rides the same transition as the picture's own fade, so a caller who
+     * swaps the filter on hover gets a change that travels rather than one that
+     * snaps.
+     */
+    filter?: PlImageFilter | (string & {});
     /** 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' */
@@ -28,10 +169,16 @@ export interface PlImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>
     /** 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.
+     * What is drawn while the picture is loading. A `PlSkeleton` by default, a
+     * node of your own, `{ src }` for a picture to stand in, or `null` for nothing
+     * at all.
+     *
+     * A picture stand-in is a small copy of the same file, as a URL or a `Blob`.
+     * It is drawn under the picture and stays until the picture has finished
+     * fading in over it. Like the skeleton it fills the box, so it needs a box to
+     * fill: a `ratio`, or both `width` and `height`.
      */
-    placeholder?: React.ReactNode;
+    placeholder?: React.ReactNode | PlImagePlaceholder;
     /**
      * What is drawn when the picture does not arrive — a wrong URL, a dead host,
      * a file that is not an image.
@@ -40,6 +187,30 @@ export interface PlImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>
      * that is certainly available and certainly describes what is missing.
      */
     fallback?: React.ReactNode;
+    /**
+     * A mark laid over the picture — a bare string for one in the bottom corner,
+     * or an object to say where it goes, how visible it is, and at what angle.
+     *
+     * `placement: 'tile'` covers the whole picture instead, which is the one a
+     * proof or a preview wants: a mark in a corner is cropped off in a second.
+     *
+     * It is drawn only once the picture has arrived, and it is `aria-hidden` and
+     * takes no pointer. A watermark is a claim about the file, not something the
+     * page is telling a reader — `alt` is where a picture says what it is.
+     */
+    watermark?: string | PlImageWatermark;
+    /**
+     * Makes the picture awkward to take: no context menu, no drag out of the
+     * page, no text selection over it, and no long-press callout on iOS.
+     *
+     * **It is a deterrent and not a lock.** The file is still one request away —
+     * it is in the network tab, it is in the cache, and a screenshot needs none of
+     * that. What this stops is the casual right-click-and-save, which for most
+     * pictures is the whole of what was wanted. Anything that genuinely must not
+     * be copied does not belong on the page.
+     * @default false
+     */
+    protect?: boolean;
     /**
      * Opens the picture over the page when it is pressed.
      *
@@ -48,8 +219,24 @@ export interface PlImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>
      * @default false
      */
     preview?: boolean;
-    /** The accessible name of the preview overlay. @default 'Preview' */
+    /**
+     * The accessible name of the preview overlay. It also names the button that
+     * opens it: after `alt` and in lower case, "A portrait — preview", or on its
+     * own when `alt` is empty.
+     * @default 'Preview'
+     */
     previewLabel?: string;
+    /**
+     * Marks the picture a page is judged by — usually the largest thing above the
+     * fold, which is what Largest Contentful Paint measures — so it is fetched
+     * early rather than lazily: `loading="eager"` and a high fetch priority.
+     *
+     * Everything else about when a picture loads belongs to the `<img>` and
+     * passes straight through: `loading`, `decoding`, `fetchPriority`. An
+     * attribute written out wins over what this implies.
+     * @default false
+     */
+    priority?: boolean;
     /** Called when the picture has loaded, and when it has failed. */
     onStatusChange?: (status: PlImageStatus) => void;
 }

package/dist/components/image/PlImage.js

@@ -1 +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{useLabels as t}from"../../internal/labels.js";import{PlOverlay as r}from"../overlay/PlOverlay.js";import{PlSkeleton as n}from"../skeleton/PlSkeleton.js";import{cx as i,focusRingClasses as c,radiusClasses as m,transitionClasses as d}from"../../internal/styles.js";const p={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"};export const PlImage=/* @__PURE__ */l.forwardRef(function PlImage({alt:f,src:u,ratio:b,fit:h="cover",rounded:g=!1,size:j,color:v,placeholder:y,fallback:x,preview:w=!1,previewLabel:N,onStatusChange:k,className:z,style:C,loading:P="lazy",...S},L){const E=s(),I=t(),O=N??I.preview,R=j??E.size??"md",$=v??E.color??"primary",[F,q]=l.useState("loading"),[A,B]=l.useState(!1);l.useEffect(()=>{q("loading")},[u]);const settle=e=>{q(e),k?.(e)},D=g?m[R]:"",G=e("img",{ref:L,src:u,alt:f,loading:P,onLoad:()=>settle("loaded"),onError:()=>settle("error"),className:i("block size-full",p[h],d,"loaded"===F?"opacity-100":"opacity-0","error"===F?"hidden":""),...S}),H=a(o,{children:[G,"loading"===F?e("span",{className:"absolute inset-0",children:void 0===y?e(n,{shape:"rect",color:$,size:R,width:"100%",height:"100%",className:D}):y}):null,"error"===F?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:x??f}):null]}),J=i("relative block overflow-hidden",D,z),K={aspectRatio:b,...C};return w?a(o,{children:[e("button",{type:"button","aria-label":f?`${f} — ${O.toLowerCase()}`:O,onClick:()=>B(!0),disabled:"loaded"!==F,className:i(J,"cursor-zoom-in p-0",c),style:K,children:H}),e(r,{open:A,onOpenChange:B,tone:"glass",dismissible:!0,color:$,label:O,children:e("img",{src:u,alt:f,className:"max-h-[85vh] max-w-[90vw] object-contain"})})]}):e("span",{className:J,style:K,children:H})});
+"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as l from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{PlSkeleton as i}from"../skeleton/PlSkeleton.js";import{PlassWatermark as a}from"../../internal/watermark.js";import{isSideways as s,layerStyle as u,objectPosition as c,poseStyle as d,quartersOf as f}from"../../internal/image.js";import{cx as p,focusRingClasses as h,radiusClasses as b,transitionClasses as m}from"../../internal/styles.js";function boxLength(e){return"number"==typeof e||/^\d+(\.\d+)?$/.test(e.trim())?`${Number(e)}px`:e}const g=Number.parseInt(l.version,10)>=19?"fetchPriority":"fetchpriority",v={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",saturate:"saturate(1.35)",desaturate:"saturate(0.45)",contrast:"contrast(1.2)",dim:"brightness(0.82)"},y={draggable:!1,onDragStart:e=>e.preventDefault(),onContextMenu:e=>e.preventDefault()},w={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},j=/* @__PURE__ */l.lazy(()=>import("./PlImagePreview.js").then(e=>({default:e.PlImagePreview})));export const PlImage=/* @__PURE__ */l.forwardRef(function PlImage({alt:x,src:k,ratio:P,fit:S="cover",position:N,letterbox:z="none",rotate:L=0,flip:R="none",filter:$,watermark:C,protect:I=!1,rounded:W=!1,size:O,color:U,placeholder:E,fallback:D,preview:B=!1,previewLabel:T,onStatusChange:q,className:A,style:F,loading:H,priority:M=!1,width:V,height:G,...J},K){const Q=n(),X=o(),Y=T??X.preview,Z=O??Q.size??"md",_=U??Q.color??"primary",[ee,te]=l.useState({status:"loading",natural:null}),re=ee.status,[le,ne]=l.useState(!1),oe=H??(M?"eager":"lazy"),ie=J.fetchPriority??(M?"high":void 0),ae=void 0===ie?null:{[g]:ie},se=function isPicturePlaceholder(e){return"object"==typeof e&&null!==e&&!l.isValidElement(e)&&"src"in e}(E)?E:null,ue=function useStandInUrl(e){const[t,r]=l.useState(null);return l.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return r({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(se?.src),ce=l.useRef(null),de=l.useCallback(e=>{ce.current=e,"function"==typeof K?K(e):K&&(K.current=e)},[K]),fe=l.useRef("loading"),pe=l.useRef(k),he=l.useRef(null),settle=(e,t)=>{const r="loaded"===e?function naturalSize(e){return null!==e&&e.naturalWidth>0?{width:e.naturalWidth,height:e.naturalHeight}:null}(t):null;te(t=>t.status===e&&t.natural?.width===r?.width&&t.natural?.height===r?.height?t:{status:e,natural:r}),fe.current!==e&&(fe.current=e,q?.(e))};l.useLayoutEffect(()=>{const e=ce.current;if(null!==e){if(pe.current!==k&&(pe.current=k,fe.current="loading"),e.getAttribute("src")&&e.complete)return e.naturalWidth>0&&(he.current={src:k,file:e.currentSrc}),void settle(e.naturalWidth>0?"loaded":"error",e);te(e=>"loading"===e.status?e:{status:"loading",natural:null})}},[k]);const be=W?b[Z]:"",me=void 0===$?void 0:v[$]??$,ge=f(L),ve=s(ge),ye=d(ge,R),we=void 0===N?void 0:c(N,ge,R),je=void 0===me&&null===ye&&void 0===we?void 0:{...void 0===me?null:{"--p-filter":me},objectPosition:we,...ye},xe="blur"===z&&"cover"!==S&&"fill"!==S,ke="none"===z||"blur"===z?void 0:z,Pe=void 0===me||"none"===me?"":`${me} `,Se=xe&&"error"!==re?e("img",{src:k,srcSet:J.srcSet,sizes:J.sizes,loading:oe,decoding:J.decoding,crossOrigin:J.crossOrigin,referrerPolicy:J.referrerPolicy,...ae,alt:"","aria-hidden":"true",draggable:!1,className:p("pointer-events-none block object-cover select-none",m,"loaded"===re?"opacity-100":"opacity-0"),style:{...u(ge,R,48),objectPosition:we,filter:`${Pe}blur(24px)`}}):null,Ne=null!==se&&se.blur?!0===se.blur?20:se.blur:0,ze=null===se||void 0===ue||"error"===re?null:e("img",{src:ue,alt:"","aria-hidden":"true",draggable:!1,className:p("pointer-events-none block select-none",w[S]),style:{...u(ge,R,2*Ne),objectPosition:we,filter:""===Pe&&0===Ne?void 0:`${Pe}blur(${Ne}px)`,..."loaded"===re?{opacity:0,transition:"opacity 0ms linear var(--plass-duration)"}:null}}),Le=e("img",{ref:de,src:k,alt:x,loading:oe,width:V,height:G,onLoad:e=>{const t=e.currentTarget,r=he.current;he.current=null,null!==r&&r.src!==k&&r.file===t.currentSrc||settle("loaded",t)},onError:()=>settle("error",null),style:je,className:p("block size-full",w[S],void 0===me?"":"[filter:var(--p-filter,none)]",m,xe||null!==ze?"relative":"","loaded"===re?"opacity-100":"opacity-0","error"===re?"hidden":"",I?"select-none [-webkit-touch-callout:none]":""),...ae,...J,...I?y:null}),Re=r(t,{children:[Se,ze,Le,"loading"===re&&null===se?e("span",{className:"absolute inset-0",children:void 0===E?e(i,{shape:"rect",color:_,size:Z,width:"100%",height:"100%",className:be}):E}):null,"error"===re?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:D??x}):null,void 0!==C&&"loaded"===re?e(a,{watermark:C}):null]}),$e=function pixelSize(e,t){const r=Number(e),l=Number(t);return void 0!==e&&void 0!==t&&r>0&&l>0?{width:r,height:l}:null}(V,G)??ee.natural,Ce=void 0===G&&void 0!==V?boxLength(V):void 0,Ie=void 0===V&&void 0!==G?boxLength(G):void 0,We=void 0===P&&ve&&null!==$e&&void 0===Ie?`${$e.height} / ${$e.width}`:P,Oe=p("relative block overflow-hidden",be,A),Ue={...void 0===Ce?null:{width:Ce,maxWidth:"100%"},...void 0===Ie?null:{height:Ie,...void 0===P?null:{width:"auto",maxWidth:"100%"}},aspectRatio:We,background:ke,containerType:ve?"size":void 0,...F};return B?r(t,{children:[e("button",{type:"button","aria-label":x?`${x} — ${Y.toLowerCase()}`:Y,onClick:()=>ne(!0),disabled:"loaded"!==re,className:p(Oe,"w-full cursor-zoom-in p-0",h),style:Ue,children:Re}),e(l.Suspense,{fallback:null,children:e(j,{open:le,onOpenChange:ne,src:k,alt:x,label:Y,color:_,protect:I,watermark:C,quarters:ge,flip:R,file:$e})})]}):e("span",{className:Oe,style:Ue,children:Re})});

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { PlassImageFlip, PlassQuarters } from '../../internal/image.js';
+import type { PlassWatermarkOptions } from '../../internal/watermark.js';
+import type { PlassColor } from '../../types.js';
+export interface PlImagePreviewProps {
+    /** Whether the picture is open over the page. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The file to show, at whatever size it really is. */
+    src?: string;
+    /** The picture's description, carried over from the thumbnail. */
+    alt: string;
+    /** The accessible name of the overlay itself. */
+    label: string;
+    /** The family the overlay takes. */
+    color: PlassColor;
+    /**
+     * Carried in from the thumbnail. A mark or a refusal that comes off the
+     * moment the picture is opened large is not a mark or a refusal — and large
+     * is the copy somebody wanted in the first place.
+     */
+    protect?: boolean;
+    /**
+     * Carried in from the thumbnail, for the same reason `protect` is: a mark that
+     * comes off the moment the picture is opened large has marked the copy nobody
+     * wanted.
+     */
+    watermark?: string | PlassWatermarkOptions;
+    /**
+     * How many quarters the thumbnail is turned, carried in so the picture opens
+     * the way it was shown.
+     */
+    quarters?: PlassQuarters;
+    /** The thumbnail's mirror, carried in for the same reason as its turn. */
+    flip?: PlassImageFlip;
+    /**
+     * The file's own pixel size, where the thumbnail knows it. A picture on its
+     * side is opened in a box of the turned shape, and this is that shape.
+     */
+    file?: {
+        width: number;
+        height: number;
+    } | null;
+}
+/**
+ * A `PlImage` opened over the page.
+ *
+ * It is a separate module because it is a separate download. This is a whole
+ * overlay and the chrome around it — several times the weight of the picture
+ * component that opens it — and `preview` is off by default, so a page drawing
+ * a wall of thumbnails would otherwise be paying for a lightbox it never shows.
+ * Reached through `React.lazy`, the chunk arrives after the first paint on the
+ * pages that ask for one and is never fetched by the pages that do not.
+ *
+ * The same bargain `PlGallery` makes with `PlGalleryViewer`, for the same
+ * reason.
+ */
+export declare function PlImagePreview({ open, onOpenChange, src, alt, label, color, protect, watermark, quarters, flip, file }: PlImagePreviewProps): React.JSX.Element;

package/dist/components/image/PlImagePreview.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{PlOverlay as n}from"../overlay/PlOverlay.js";import{cx as o}from"../../internal/styles.js";import{isSideways as r,poseStyle as a}from"../../internal/image.js";import{PlassWatermark as i}from"../../internal/watermark.js";const l="85vh",s="90vw";function turnedBox(e){return null===e?{aspectRatio:"1",width:`min(${s}, ${l})`,containerType:"size"}:{aspectRatio:`${e.height} / ${e.width}`,width:`min(${s}, ${e.height}px, calc(${l} * ${e.height/e.width}))`,containerType:"size"}}export function PlImagePreview({open:l,onOpenChange:s,src:c,alt:m,label:p,color:h,protect:u=!1,watermark:d,quarters:v=0,flip:g="none",file:w=null}){const f=r(v);return e(n,{open:l,onOpenChange:s,tone:"glass",dismissible:!0,color:h,label:p,children:t("span",{className:"relative block",style:f?turnedBox(w):void 0,children:[e("img",{src:c,alt:m,className:o("block object-contain",f?"":"max-h-[85vh] max-w-[90vw]",u?"select-none [-webkit-touch-callout:none]":""),style:a(v,g)??void 0,draggable:!u&&void 0,onDragStart:u?e=>e.preventDefault():void 0,onContextMenu:u?e=>e.preventDefault():void 0}),void 0===d?null:e(i,{watermark:d})]})})}

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

@@ -1,2 +1,2 @@
 export { PlImage } from './PlImage.js';
-export type { PlImageFit, PlImageProps, PlImageStatus } from './PlImage.js';
+export type { PlImageFit, PlImageFlip, PlImageLetterbox, PlImagePlaceholder, PlImagePosition, PlImageProps, PlImageRotation, PlImageStatus } from './PlImage.js';

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

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

package/dist/components/menu/PlMenu.js

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

package/dist/components/meter/PlMeter.js

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

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

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