plass-ui 1.4.0 → 1.6.0

package/dist/components/file-picker/PlFilePicker.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
 /** Why a file was turned away. One reason per file, in the order they are checked. */
 export type PlFileRejectionReason = 'type' | 'size' | 'count';
 export interface PlFileRejection {
@@ -38,8 +38,14 @@ export interface PlFilePickerProps extends PlassStyleProps, Omit<React.Component
      * file disappears silently, which is the single worst thing a dropzone does.
      */
     onReject?: (rejections: PlFileRejection[]) => void;
-    /** Label above the box. */
+    /** The name of what the box collects. */
     label?: React.ReactNode;
+    /**
+     * Where the `label` goes — above the box, or in its top edge.
+     * Falls back to the nearest `PlassProvider`, then to `top`.
+     * @default 'top'
+     */
+    labelPlacement?: PlassFieldLabelPlacement;
     /** Helper text below the box. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the picker invalid. */
@@ -60,7 +66,20 @@ export interface PlFilePickerProps extends PlassStyleProps, Omit<React.Component
      * @default true
      */
     showList?: boolean;
-    /** Accessible name of a file's remove button. Receives the file's name. */
+    /**
+     * Says under the box why files were turned away, one line per reason.
+     *
+     * On, because a dropzone that swallows a file without a word is the single
+     * worst thing a dropzone does, and `onReject` alone leaves that to a caller
+     * who has to remember. Turn it off when the app shows the same thing
+     * somewhere of its own — `onReject` still fires either way.
+     * @default true
+     */
+    showRejections?: boolean;
+    /**
+     * Accessible name of a file's remove button. Receives the file's name.
+     * @default `Remove {name}`, from the label pack
+     */
     removeLabel?: (name: string) => string;
     /** Stretches to the width of the container. @default true */
     fullWidth?: boolean;

package/dist/components/file-picker/PlFilePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{CloseIcon as t}from"../../internal/icons.js";import{controlTextLeadingClasses as a,disabledClasses as o,focusRingClasses as n,gapClasses as i,glassClasses as c,hasContent as d,iconClasses as p,metaTextClasses as u,radiusClasses as f,readOnlyFilterClasses as m,sheetTitleClasses as h,stackGapClasses as v,surfaceSlots as g,transitionClasses as b}from"../../internal/styles.js";const x={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},y={solid:/* @__PURE__ */[c,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[c,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},k={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let s=e/1e3,l=0;for(;s>=1e3&&l<r.length-1;)s/=1e3,l+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[l]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),l=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?l.startsWith(e.slice(0,-1)):l===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:c="glass",size:N,color:j,density:$,elevation:w=0,accept:z,multiple:C=!1,maxSize:I,maxFiles:L,value:B,defaultValue:D,onFilesChange:F,onReject:M,label:_,description:W,error:S,invalid:P,title:R,hint:T,icon:A,showList:V=!0,removeLabel:E=e=>`Remove ${e}`,fullWidth:O=!0,disabled:q=!1,readOnly:U=!1,required:G=!1,name:H,id:Y,className:J,style:K,...Q},X){const Z=l(),ee=N??Z.size??"md",re=j??Z.color??"primary",se=$??Z.density??"default",le=s.useRef(null);s.useImperativeHandle(X,()=>le.current);const[te,ae]=s.useState(()=>[...D??[]]),oe=s.useMemo(()=>B?[...B]:te,[B,te]),ne=s.useRef(0),[ie,ce]=s.useState(!1),de=d(S),pe=P??de,ue=pe?"danger":re,fe=q||U,me=s.useId(),he=s.useCallback(e=>{B||ae(e),F?.(e)},[F,B]),ve=s.useCallback(e=>{const r=[],s=[],l=C?L??Number.POSITIVE_INFINITY:1,t=C?oe.length:0;for(const a of e)z&&!matchesAccept(a,z)?s.push({file:a,reason:"type"}):void 0!==I&&a.size>I?s.push({file:a,reason:"size"}):t+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[z,oe.length,L,I,C]),ge=s.useCallback(e=>{const{kept:r,rejections:s}=ve(e);s.length>0&&M?.(s),r.length>0&&he(C?[...oe,...r]:r)},[ve,he,oe,C,M]),be=["flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",x[se][ee],f[ee],i[ee],b,p,n,q?`${o[c]} border-2 border-dashed`:U?`${y[c]} ${m} cursor-default`:y[c],fe?"":k[c],ie&&!fe?"bg-(--p-soft-hover) [border-color:var(--p-ring)]":""].filter(Boolean).join(" ");return r("div",{className:["flex-col align-top",v[ee],O?"flex w-full":"inline-flex",J??""].filter(Boolean).join(" "),style:{...g(ue,w),...K},...Q,children:[d(_)?e("span",{className:[u[ee],"font-semibold",q?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:_}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{fe||(e.preventDefault(),ne.current+=1,ce(!0))},onDragOver:e=>{fe||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{fe||(ne.current=Math.max(0,ne.current-1),0===ne.current&&ce(!1))},onDrop:e=>{fe||(e.preventDefault(),ne.current=0,ce(!1),ge(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:Y,disabled:q,"aria-describedby":d(W)||de?me:void 0,"aria-invalid":pe||void 0,className:be,onClick:()=>{fe||le.current&&(le.current.value="",le.current.click())},children:[void 0===A?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):d(A)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:A}):null,e("span",{className:`font-semibold ${h[ee]}`,children:R??"Drop files here, or click to browse"}),d(T)?e("span",{className:`text-(--plass-muted-fg) ${u[ee]}`,children:T}):null]}),e("input",{ref:le,type:"file",name:H,accept:z,multiple:C,required:G&&0===oe.length,disabled:fe,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>ge(Array.from(e.target.files??[]))})]}),V&&oe.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${v[ee]} m-0 list-none p-0`,children:oe.map((s,l)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",f.xs,a[ee],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:s.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${u[ee]}`,children:formatFileSize(s.size)}),fe?null:e("button",{type:"button","aria-label":E(s.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",n].join(" "),onClick:()=>he(oe.filter((e,r)=>r!==l)),children:e(t,{})})]},`${s.name}-${s.size}-${s.lastModified}-${l}`))}):null,d(W)&&!de?e("span",{id:me,className:`${u[ee]} text-(--plass-muted-fg)`,children:W}):null,de?e("span",{id:me,className:`${u[ee]} text-(--p-accent)`,children:S}):null]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{Field as l}from"@base-ui/react/field";import{useDefaults as o}from"../../internal/defaults.js";import{FormControl as a,leaveFormControl as t,useFormReport as n}from"../../internal/form.js";import{glowPointerMove as i}from"../../internal/glow.js";import{CloseIcon as d}from"../../internal/icons.js";import{useLabels as c}from"../../internal/labels.js";import{FieldNotch as p,notchShellStyle as f}from"../../internal/notch.js";import{controlTextLeadingClasses as u,disabledClasses as m,focusRingClasses as h,gapClasses as b,glassClasses as v,hasContent as g,iconClasses as x,metaTextClasses as y,radiusClasses as j,readOnlyFilterClasses as $,sheetTitleClasses as k,stackGapClasses as w,surfaceSlots as N,transitionClasses as z}from"../../internal/styles.js";const _={default:{xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"},compact:{xs:"p-2",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"}},C={solid:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"border-2 border-dashed text-(--plass-fg) bg-transparent [border-color:var(--plass-border)]"},I={solid:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line-hover)]",ghost:"hover:bg-(--p-soft) hover:[border-color:var(--p-line-hover)]"},B=/* @__PURE__ */["border-2 border-dashed [border-color:var(--plass-border)]","group-hover/field:[border-color:var(--p-line-hover)]","group-has-[:focus-visible]/field:[border-color:var(--p-ring)]"].join(" "),R=/* @__PURE__ */["border-2 border-dashed [border-color:var(--plass-border)] opacity-50","forced-colors:[border-color:GrayText]"].join(" "),L={solid:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass),0_0_0_4px_var(--p-soft)]"].join(" "),glass:/* @__PURE__ */[v,"border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass),0_0_0_4px_var(--p-soft)]"].join(" "),ghost:/* @__PURE__ */["border-2 border-dashed text-(--plass-fg) bg-(--p-soft-hover)","[border-color:var(--p-ring)]","[box-shadow:0_0_0_4px_var(--p-soft)]"].join(" ")};function UploadIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"M8 10.5V2.75m0 0L5.25 5.5M8 2.75 10.75 5.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M2.75 9.75v1.75a1.75 1.75 0 0 0 1.75 1.75h7a1.75 1.75 0 0 0 1.75-1.75V9.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let s=e/1e3,l=0;for(;s>=1e3&&l<r.length-1;)s/=1e3,l+=1;return`${s<10?s.toFixed(1):Math.round(s)} ${r[l]}`}function matchesAccept(e,r){const s=e.name.toLowerCase(),l=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?s.endsWith(e):e.endsWith("/*")?l.startsWith(e.slice(0,-1)):l===e)}export const PlFilePicker=/* @__PURE__ */s.forwardRef(function PlFilePicker({variant:v="glass",size:T,color:D,density:M,elevation:P=0,accept:F,multiple:S=!1,maxSize:W,maxFiles:E,value:V,defaultValue:A,onFilesChange:O,onReject:q,label:G,labelPlacement:U,description:H,error:Y,invalid:J,title:K,hint:Q,icon:X,showList:Z=!0,showRejections:ee=!0,removeLabel:re,fullWidth:se=!0,disabled:le=!1,readOnly:oe=!1,required:ae=!1,name:te,id:ne,className:ie,style:de,...ce},pe){const fe=o(),ue=c(),me=re??ue.removeItem,he=T??fe.size??"md",be=D??fe.color??"primary",ve=M??fe.density??"default",ge="notch"===(U??fe.labelPlacement??"top")&&g(G),xe=s.useRef(null),ye=s.useRef(null),je=s.useRef(null);s.useImperativeHandle(pe,()=>xe.current);const[$e,ke]=s.useState(()=>[...A??[]]),we=s.useMemo(()=>V?[...V]:$e,[V,$e]),Ne=s.useRef(0),[ze,_e]=s.useState(!1),[Ce,Ie]=s.useState({type:0,size:0,count:0}),Be=g(Y),Re=J??Be,Le=Re?"danger":be,Te=le||oe,De=s.useId(),Me=`${De}-error`,Pe=`${De}-label`,Fe=ne??`${De}-zone`,Se=s.useCallback(e=>{const r=xe.current;if(!r||"undefined"==typeof DataTransfer)return;const s=new DataTransfer;for(const r of e)s.items.add(r);r.files=s.files},[]);s.useEffect(()=>{Se(we)},[we,Se]),n(te,()=>[...we],!le);const We=s.useCallback(e=>{V||ke(e),O?.(e)},[O,V]),Ee=s.useCallback(e=>{const r=[],s=[],l=S?E??Number.POSITIVE_INFINITY:1,o=S?we.length:0;for(const a of e)F&&!matchesAccept(a,F)?s.push({file:a,reason:"type"}):void 0!==W&&a.size>W?s.push({file:a,reason:"size"}):o+r.length>=l?s.push({file:a,reason:"count"}):r.push(a);return{kept:r,rejections:s}},[F,we.length,E,W,S]),Ve=s.useCallback(e=>{const{kept:r,rejections:s}=Ee(e),l={type:0,size:0,count:0};for(const e of s)l[e.reason]+=1;Ie(l),s.length>0&&q?.(s),r.length>0&&We(S?[...we,...r]:r)},[Ee,We,we,S,q]),Ae=s.useCallback(()=>{Ie(e=>e.type||e.size||e.count?{type:0,size:0,count:0}:e)},[]),Oe=[["type",ue.filesRejectedType],["size",ue.filesRejectedSize],["count",ue.filesRejectedCount]].filter(([e])=>Ce[e]>0),browse=()=>{Te||(Ae(),xe.current?.click())},qe=["relative flex w-full flex-col items-center justify-center text-center","cursor-pointer select-none",_[ve][he],j[he],b[he],z,x,ge?"":h,le?`${m[v]} border-2 border-dashed`:oe?`${C[v]} ${$} cursor-default`:ze?L[v]:C[v],Te||ze?"":I[v],Te?"":"plass-glow"].filter(Boolean).join(" "),Ge=e("span",{id:Pe,className:[y[he],"font-semibold",le?"text-(--plass-muted-fg)":"text-(--plass-fg)"].join(" "),children:G});return r(l.Root,{name:te,disabled:le,invalid:Re,className:["flex-col align-top",w[he],se?"flex w-full":"inline-flex",ie??""].filter(Boolean).join(" "),style:{...N(Le,P),...de},...ce,children:[g(G)&&!ge?Ge:null,r("div",{className:`flex w-full flex-col ${w[he]}`,onDragEnter:e=>{Te||(e.preventDefault(),Ne.current+=1,_e(!0))},onDragOver:e=>{Te||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{Te||(Ne.current=Math.max(0,Ne.current-1),0===Ne.current&&_e(!1))},onDrop:e=>{Te||(e.preventDefault(),Ne.current=0,_e(!1),Ve(Array.from(e.dataTransfer.files)))},children:[e(l.Validity,{children:({validity:s})=>{const l=!1===s.valid,o=!Be&&l&&!le&&!0!==J,a=[g(H)||Be?De:null,o?Me:null].filter(Boolean).join(" ")||void 0;return e(p,{notched:ge,size:he,density:ve,variant:v,disabled:le,readOnly:oe,label:Ge,edgeClassName:le?R:Te?"border-2 border-dashed [border-color:var(--plass-border)]":ze?"border-2 border-dashed [border-color:var(--p-ring)]":B,children:r("button",{ref:ye,type:"button",id:Fe,"aria-labelledby":g(G)?`${Pe} ${Fe}`:void 0,disabled:le,"aria-describedby":a,"aria-invalid":Re||l||void 0,className:qe,style:ge?f:void 0,onPointerMove:i(!Te),onClick:browse,onBlur:()=>t(je.current),children:[void 0===X?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:e(UploadIcon,{})}):g(X)?e("span",{className:"flex items-center text-(--p-accent) [&_svg]:size-[1.8em]",children:X}):null,e("span",{className:`font-semibold ${k[he]}`,children:K??ue.filePickerTitle}),g(Q)?e("span",{className:`text-(--plass-muted-fg) ${y[he]}`,children:Q}):null]})})}}),e("input",{ref:xe,type:"file",name:te,accept:F,multiple:S,disabled:Te,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>{Ve(Array.from(e.target.files??[])),Se(we)}}),Z&&we.length>0?e("ul",{role:"list",className:`flex w-full flex-col ${w[he]} m-0 list-none p-0`,children:we.map((s,l)=>r("li",{className:["flex w-full items-center gap-2 px-2 py-1.5",j.xs,u[he],"bg-(--p-soft) text-(--plass-fg)"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:s.name}),e("span",{className:`shrink-0 text-(--plass-muted-fg) tabular-nums ${y[he]}`,children:formatFileSize(s.size)}),Te?null:e("button",{type:"button","aria-label":me(s.name),className:["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full","size-[1.3em] text-(--plass-muted-fg) opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","[&_svg]:size-[0.9em]","hover:text-(--plass-fg) hover:opacity-100 focus-visible:opacity-100",h].join(" "),onClick:()=>{Ae(),We(we.filter((e,r)=>r!==l))},children:e(d,{})})]},`${s.name}-${s.size}-${s.lastModified}-${l}`))}):null]}),ee&&Oe.length>0?e("div",{role:"status",className:`flex w-full flex-col ${y[he]} text-(--plass-danger-accent)`,children:Oe.map(([r,s])=>e("span",{children:s(Ce[r])},r))}):null,g(H)&&!Be?e("span",{id:De,className:`${y[he]} text-(--plass-muted-fg)`,children:H}):null,Be?e("span",{id:De,className:`${y[he]} text-(--p-accent)`,children:Y}):e(l.Error,{id:Me,className:`${y[he]} text-(--p-accent)`}),e(a,{ref:je,value:we.map(e=>e.name),required:ae&&!oe,disabled:le,standIn:()=>ye.current})]})});

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts

@@ -27,6 +27,9 @@ export interface PlFloatingBottomNavigationProps extends Omit<PlassStyleProps, '
     /**
      * Keeps the bar clear of the home indicator on a phone, by adding
      * `env(safe-area-inset-bottom)` to the gap under it.
+     *
+     * A browser gives a page that inset only when its viewport meta tag has
+     * `viewport-fit=cover`. Without it, this adds nothing.
      * @default true
      */
     safeArea?: boolean;

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{controlHeightClasses as l,controlSlots as o,controlSquareClasses as n,cx as d,focusRingClasses as c,glassClasses as p,hasContent as u,iconSizeClasses as f,srOnlyClasses as m,transitionClasses as g}from"../../internal/styles.js";const v=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),b={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},h={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},x={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},w={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},N={solid:/* @__PURE__ */[p,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[p,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},z=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:l,color:n,density:c,elevation:p=2,value:u,defaultValue:f=null,onValueChange:m,position:j="fixed",safeArea:k=!0,disabled:P=!1,label:C,render:A,className:R,style:F,children:q,...B},$){const E=r(),I=l??E.size??"md",L=n??E.color??"primary",O=c??E.density??"default",[S,V]=s.useState(f),W=void 0!==u,D=W?u:S,H=s.useRef(null),M=s.useRef(null),T=s.useCallback(e=>{const t=H.current,a=M.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{T(!0)},[T,D,a,I,O,P,q]),s.useEffect(()=>{const e=H.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>T(!1));return t.observe(e),()=>t.disconnect()},[T]);const G=s.useCallback(e=>{W||V(e),m?.(e)},[W,m]),J=s.useMemo(()=>({value:D??null,change:G,size:I,disabled:P}),[D,G,I,P]),K=d("flex w-full justify-center px-4","static"===j?"":"pointer-events-none",k?h[I]:b[I],w[j],R);return i({render:A??e("nav",{}),ref:$,props:{"aria-label":C,className:K,style:{...o(L,p,"solid"),...F},children:e(v.Provider,{value:J,children:t("div",{ref:H,className:d("pointer-events-auto relative inline-flex items-center rounded-full",N[a],x[O][I],y[O][I],g),children:[null!=D?e("span",{ref:M,"aria-hidden":"true",className:z}):null,q]})}),...B}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:i,href:o,disabled:p=!1,className:b,children:h,onClick:x,...y},w){const N=s.useContext(v),z=p||N.disabled,j=null!==N.value&&N.value===r,k=d("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",l[N.size],n[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,c,z?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":j?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",b),P=t(a,{children:[u(i)?e("span",{className:d("flex shrink-0 items-center justify-center",f[N.size]),children:i}):null,u(h)?e("span",{className:m,children:h}):null]}),C={"data-disc":"","data-current":j?"":void 0,"data-disabled":z?"":void 0},press=e=>{z?e.preventDefault():(N.change(r),x?.(e))};return o?e("a",{ref:w,href:z?void 0:o,"aria-current":j?"page":void 0,"aria-disabled":z||void 0,...C,className:k,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:z,"aria-current":j?"page":void 0,...C,className:k,onClick:press,...y,children:P})});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{controlHeightClasses as l,controlSlots as o,controlSquareClasses as n,cx as d,focusRingClasses as c,glassClasses as p,hasContent as u,iconSizeClasses as f,srOnlyClasses as m,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),v={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},h={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},x={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},w={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},N={solid:/* @__PURE__ */[p,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[p,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},z=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","forced-colors:border-2 forced-colors:[border-color:Highlight]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:l,color:n,density:c,elevation:p=2,value:u,defaultValue:f=null,onValueChange:m,position:j="fixed",safeArea:k=!0,disabled:P=!1,label:C,render:A,className:R,style:F,children:q,...B},$){const E=r(),H=l??E.size??"md",I=n??E.color??"primary",L=c??E.density??"default",[O,S]=s.useState(f),V=void 0!==u,W=V?u:O,D=s.useRef(null),M=s.useRef(null),T=s.useCallback(e=>{const t=D.current,a=M.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return a.hidden=!0,void a.removeAttribute("data-ready");a.hidden=!1;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{T(!0)},[T,W,a,H,L,P,q]),s.useEffect(()=>{const e=D.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>T(!1));return t.observe(e),()=>t.disconnect()},[T]);const G=s.useCallback(e=>{V||S(e),m?.(e)},[V,m]),J=s.useMemo(()=>({value:W??null,change:G,size:H,disabled:P}),[W,G,H,P]),K=d("flex w-full justify-center px-4","static"===j?"":"pointer-events-none",k?h[H]:v[H],w[j],R);return i({render:A??e("nav",{}),ref:$,props:{"aria-label":C,className:K,style:{...o(I,p,"solid"),...F},children:e(b.Provider,{value:J,children:t("div",{ref:D,className:d("pointer-events-auto relative inline-flex items-center rounded-full",N[a],x[L][H],y[L][H],g),children:[null!=W?e("span",{ref:M,"aria-hidden":"true",className:z}):null,q]})}),...B}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:i,href:o,disabled:p=!1,className:v,children:h,onClick:x,...y},w){const N=s.useContext(b),z=p||N.disabled,j=null!==N.value&&N.value===r,k=d("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",l[N.size],n[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,c,z?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":j?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",v),P=t(a,{children:[u(i)?e("span",{className:d("flex shrink-0 items-center justify-center",f[N.size]),children:i}):null,u(h)?e("span",{className:m,children:h}):null]}),C={"data-disc":"","data-current":j?"":void 0,"data-disabled":z?"":void 0},press=e=>{z?e.preventDefault():(N.change(r),x?.(e))};return o?e("a",{ref:w,href:z?void 0:o,"aria-current":j?"page":void 0,"aria-disabled":z||void 0,...C,className:k,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:z,"aria-current":j?"page":void 0,...C,className:k,onClick:press,...y,children:P})});

package/dist/components/form/PlForm.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{cx as m,sheetSectionGapClasses as t}from"../../internal/styles.js";export const PlForm=/* @__PURE__ */o.forwardRef(function PlForm({validationMode:o="onSubmit",errors:i,onSubmit:s,size:a="md",className:n,children:l,...c},f){return r(e,{ref:f,validationMode:o,errors:i,onFormSubmit:r=>s?.(r),className:m("flex flex-col",t[a],n),...c,children:l})});
+"use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{FormReportContext as t}from"../../internal/form.js";import{cx as i,sheetSectionGapClasses as m}from"../../internal/styles.js";export const PlForm=/* @__PURE__ */o.forwardRef(function PlForm({validationMode:n="onSubmit",errors:s,onSubmit:a,size:l="md",className:f,children:c,...u},d){const[p]=o.useState(()=>new Map);return r(t.Provider,{value:p,children:r(e,{ref:d,validationMode:n,errors:s,onFormSubmit:r=>{if(!a)return;const o={...r};for(const[r,e]of p)o[r]=e();a(o)},className:i("flex flex-col",m[l],f),...u,children:c})})});

package/dist/components/gallery/PlGallery.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { PlImageFit, PlImageFlip, PlImageLetterbox, PlImagePlaceholder, PlImagePosition, PlImageRotation } from '../image/PlImage.js';
 import type { PlassColor, PlassResponsive, PlassSize } from '../../types.js';
 /**
  * How the tiles are arranged.
@@ -43,6 +44,25 @@ export interface PlGalleryItem {
      * `ratio`, and comes out as a grid of squares in a masonry's clothing.
      */
     ratio?: number | string;
+    /**
+     * Turns the picture clockwise, a quarter at a time, as `PlImage`'s `rotate`
+     * does.
+     *
+     * `ratio` stays the file's own proportion. A picture on its side is laid out
+     * on its side in `masonry` and `justified`, and in the viewer; a `grid` tile
+     * keeps the gallery's shape, because that is the shape of the layout.
+     * @default 0
+     */
+    rotate?: PlImageRotation;
+    /** Mirrors the picture, as `PlImage`'s `flip` does. @default 'none' */
+    flip?: PlImageFlip;
+    /** Where the picture sits in its tile, as `PlImage`'s `position`. @default 'center' */
+    position?: PlImagePosition | (string & {});
+    /**
+     * A small copy of the picture to stand in while the file arrives, as
+     * `PlImage`'s `placeholder` takes one.
+     */
+    placeholder?: PlImagePlaceholder;
     /** How many columns the tile takes in `quilted`. @default 1 */
     cols?: number;
     /** How many rows the tile takes in `quilted`. @default 1 */
@@ -93,10 +113,28 @@ export interface PlGalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'
     rowHeight?: number;
     /** Rounds the tiles. @default true */
     rounded?: boolean;
+    /**
+     * How every picture fills its tile, as `PlImage`'s `fit`.
+     * @default 'cover'
+     */
+    fit?: PlImageFit;
+    /**
+     * What fills a tile where `fit` leaves it empty, as `PlImage`'s `letterbox`:
+     * `blur`, or a CSS `background`.
+     * @default 'none'
+     */
+    letterbox?: PlImageLetterbox | (string & {});
+    /**
+     * When the pictures are fetched. `eager` for a gallery at the top of the
+     * page, where lazy tiles would arrive late.
+     * @default 'lazy'
+     */
+    loading?: 'lazy' | 'eager';
     /**
      * Where a tile's `title` and `description` go. `below` puts them under the
      * picture, `overlay` writes them across the foot of it, and `hover` is
-     * `overlay` that arrives with the pointer.
+     * `overlay` that arrives with the pointer. `none` draws no caption, and then
+     * neither is read out.
      * @default 'none'
      */
     caption?: PlGalleryCaption;
@@ -125,7 +163,7 @@ export interface PlGalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'
     label?: string;
     /**
      * How a tile and the viewer's counter say where in the set they are.
-     * @default (index, total) => `${index} of ${total}`
+     * @default `{index} of {total}`, from the label pack
      */
     itemLabel?: (index: number, total: number) => string;
     /** What is drawn when `items` is empty. Nothing at all by default. */

package/dist/components/gallery/PlGallery.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as i}from"../../internal/labels.js";import{dealColumns as r,ratioOf as o}from"../../internal/gallery.js";import{responsiveSlots as n,withBaseline as m}from"../../internal/responsive.js";import{usePlBreakpointValue as p}from"../../hooks/usePlBreakpoint.js";import{cx as c,focusRingClasses as d,hasContent as u,metaTextClasses as f,radiusClasses as g,surfaceSlots as h,toLength as x,transitionClasses as v}from"../../internal/styles.js";import{PlImage as y}from"../image/PlImage.js";const b=/* @__PURE__ */a.lazy(()=>import("./PlGalleryViewer.js").then(e=>({default:e.PlGalleryViewer}))),w={xs:2,sm:3,lg:4},_={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"},j={none:"",lift:"group-hover/tile:[box-shadow:var(--plass-shadow-2)] group-focus-visible/tile:[box-shadow:var(--plass-shadow-2)]",dim:"",zoom:""},N={none:"",lift:"",dim:"group-hover/tile:[&_img]:[filter:brightness(0.82)] group-focus-visible/tile:[&_img]:[filter:brightness(0.82)]",zoom:"group-hover/tile:[&_img]:scale-106 group-focus-visible/tile:[&_img]:scale-106"};export const PlGallery=/* @__PURE__ */a.forwardRef(function PlGallery({items:z,layout:k="grid",columns:M,gap:$="md",ratio:q=1,rowHeight:P=220,rounded:G=!0,caption:S="none",hover:C="lift",preview:I=!1,onItemSelect:R,label:A,itemLabel:B,empty:F,size:L,color:V,className:H,classNames:W,style:D,...E},J){const K=s(),O=L??K.size??"md",Q=V??K.color??"primary",T=i(),U=A??T.gallery,X=B??((e,l)=>`${e} of ${l}`),[Y,Z]=a.useState(null),ee=m(M??w,2),le=Math.max(1,p(ee)??2),te="string"==typeof $&&$ in _?_[$]:x($)??_.md,ae=G?g[O]:"",se=o(q,1),tile=(a,s,i)=>{const r=u(a.title)||u(a.description),o="none"!==S&&r,n="overlay"===S||"hover"===S,m=e(y,{src:a.src,alt:a.alt,ratio:"grid"===k?q:"quilted"===k?"auto":a.ratio??q,fit:"cover",rounded:!1,size:O,color:Q,className:c("size-full",W?.image)}),p=o?l("div",{className:c("min-w-0",n?c("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===S?c("opacity-0 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100","[transition:opacity_var(--plass-duration)_var(--plass-ease)]"):""):"flex flex-col gap-0.5 pt-1.5",W?.caption),children:[u(a.title)?e("span",{className:c("truncate font-medium",f[O],n?"":"text-(--plass-fg)",W?.title),children:a.title}):null,u(a.description)?e("span",{className:c("truncate",f[O],n?"text-white/80":"text-(--plass-muted-fg)",W?.description),children:a.description}):null]}):null,g=l("span",{className:c("relative block overflow-hidden",ae,"quilted"===k||"justified"===k?"size-full":"","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",j[C],N[C],"[&_img]:[transition:opacity_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease),scale_var(--plass-duration)_var(--plass-ease)]"),children:[m,n?p:null]}),h=n||!o?g:l(t,{children:[g,p]});return e("li",{className:c("group/tile relative m-0 min-w-0 list-none","justified"===k?"flex flex-col":"",W?.item),style:i,children:I||R?e("button",{type:"button","aria-label":`${a.alt} — ${X(s+1,z.length)}`,className:c("block w-full bg-transparent p-0 text-start",I?"cursor-zoom-in":"cursor-pointer",d,v,ae,"justified"===k?"flex-1":""),onClick:()=>(e=>{R?.(z[e],e),I&&Z(e)})(s),children:h}):h},a.id??a.src)};let ie;if("masonry"===k){const l=z.map(e=>o(e.ratio,se));ie=r(l,le).map((l,t)=>e("li",{className:"m-0 flex min-w-0 flex-1 list-none flex-col",style:{gap:te},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:te},children:l.map(e=>tile(z[e],e,{}))})},t))}else ie="justified"===k?z.map((e,l)=>{const t=o(e.ratio,se);return tile(e,l,{flexGrow:t,flexBasis:t*P+"px",maxWidth:"100%"})}):z.map((e,l)=>tile(e,l,"quilted"===k?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===z.length&&u(F)?e(t,{children:F}):l(t,{children:[e("ul",{ref:J,role:"list","aria-label":U,className:c("plass-gallery m-0 list-none p-0","justified"===k?"flex flex-wrap":"","masonry"===k?"flex items-start":"","grid"===k?"plass-gallery-grid grid":"","quilted"===k?"plass-gallery-quilted grid":"",H),style:{gap:te,...h(Q,0),...n("cols",ee,e=>String(Math.max(1,Math.round(e)))),..."quilted"===k?{gridAutoRows:`${P}px`,gridAutoFlow:"dense"}:null,...D},...E,children:ie}),I?e(a.Suspense,{fallback:null,children:e(b,{items:z,index:Y,onIndexChange:Z,size:O,color:Q,label:U,itemLabel:X})}):null]})});
+"use client";import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import*as i from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{isTurned as o,masonryRows as s,ratioOf as n,shownRatio as d}from"../../internal/gallery.js";import{responsiveSlots as m,withBaseline as p}from"../../internal/responsive.js";import{usePlBreakpointValue as u}from"../../hooks/usePlBreakpoint.js";import{cx as c,focusRingClasses as g,hasContent as f,metaTextClasses as h,radiusClasses as v,surfaceSlots as x,toLength as y,transitionClasses as b}from"../../internal/styles.js";import{PlImage as w}from"../image/PlImage.js";const j=/* @__PURE__ */i.lazy(()=>import("./PlGalleryViewer.js").then(e=>({default:e.PlGalleryViewer}))),_={xs:2,sm:3,lg:4},$={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"},z={none:"",lift:"group-hover/tile:[box-shadow:var(--plass-shadow-2)] group-focus-visible/tile:[box-shadow:var(--plass-shadow-2)]",dim:"",zoom:""},N={none:"",lift:"",dim:"group-hover/tile:[&_img]:[filter:brightness(0.82)] group-focus-visible/tile:[&_img]:[filter:brightness(0.82)]",zoom:"group-hover/tile:[&_img]:[transform:scale(1.06)] group-focus-visible/tile:[&_img]:[transform:scale(1.06)]"};export const PlGallery=/* @__PURE__ */i.forwardRef(function PlGallery({items:R,layout:k="grid",columns:M,gap:q="md",ratio:P=1,rowHeight:S=220,rounded:C=!0,fit:G="cover",letterbox:I,loading:T="lazy",caption:B="none",hover:F="lift",preview:A=!1,onItemSelect:L,label:V,itemLabel:H,empty:W,size:D,color:E,className:J,classNames:K,style:O,...Q},U){const X=r(),Y=D??X.size??"md",Z=E??X.color??"primary",ee=a(),le=V??ee.gallery,te=H??ee.galleryItem,ie=i.useId(),[re,ae]=i.useState(null),oe=p(M??_,2),se=Math.max(1,u(oe)??2),ne="string"==typeof q&&q in $?$[q]:y(q)??$.md,de=C?v[Y]:"",me=n(P,1),tile=(i,r,a,s)=>{const m=f(i.title)||f(i.description),p="none"!==B&&m,u="overlay"===B||"hover"===B,v=`${ie}-${r}-title`,x=`${ie}-${r}-description`,y=p?[f(i.title)?v:null,f(i.description)?x:null].filter(Boolean).join(" "):void 0,j=e(w,{src:i.src,alt:i.alt,ratio:"grid"===k?P:"quilted"===k?"auto":o(i.rotate)?d(n(i.ratio,me),i.rotate):i.ratio??P,fit:G,letterbox:I,loading:T,rotate:i.rotate,flip:i.flip,position:i.position,placeholder:i.placeholder,rounded:!1,size:Y,color:Z,className:c("size-full",K?.image)}),_=p?l("div",{style:void 0===s||u?void 0:{gridRow:String(s)},className:c("min-w-0",u?c("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===B?c("opacity-0 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100","[transition:opacity_var(--plass-duration)_var(--plass-ease)]"):""):"flex flex-col gap-0.5 pt-1.5",K?.caption),children:[f(i.title)?e("span",{id:v,className:c("truncate font-medium",h[Y],u?"":"text-(--plass-fg)",K?.title),children:i.title}):null,f(i.description)?e("span",{id:x,className:c("truncate",h[Y],u?"text-white/80":"text-(--plass-muted-fg)",K?.description),children:i.description}):null]}):null,$=l("span",{style:void 0===s?void 0:{gridRow:`1 / span ${"below"===B?s-1:s}`},className:c("relative block overflow-hidden",de,"quilted"===k||"justified"===k?"size-full":"","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",z[F],N[F],"[&_img]:[transition:opacity_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease),transform_var(--plass-duration)_var(--plass-ease)]"),children:[j,u?_:null]}),M=u||!p?$:l(t,{children:[$,_]});return e("li",{className:c("group/tile relative m-0 min-w-0 list-none","justified"===k?"flex flex-col":void 0===s?"":"grid",K?.item),style:a,children:A||L?e("button",{type:"button","aria-label":`${i.alt} — ${te(r+1,R.length)}`,"aria-describedby":y,className:c(void 0===s?"block":"grid","w-full bg-transparent p-0 text-start",A?"cursor-zoom-in":"cursor-pointer",g,b,de,"justified"===k?"flex-1":""),style:void 0===s?void 0:{gridRow:`1 / span ${s}`,gridTemplateRows:"subgrid"},onClick:()=>(e=>{L?.(R[e],e),A&&ae(e)})(r),children:M}):M},i.id??i.src)};let pe,ue;if("masonry"===k){const e=R.map(e=>d(n(e.ratio,me),e.rotate)),{tracks:l,tiles:t}=s(e,se,"below"===B);ue=l.map(e=>"caption"===e?"auto":"gap"===e?ne:`${Number((100*e).toFixed(2))}fr`).join(" "),pe=R.map((e,l)=>{const{column:i,start:r,end:a}=t[l];return tile(e,l,{gridColumn:String(i),gridRow:`${r} / ${a}`,gridTemplateRows:"subgrid"},a-r)})}else pe="justified"===k?R.map((e,l)=>{const t=d(n(e.ratio,me),e.rotate);return tile(e,l,{flexGrow:t,flexBasis:t*S+"px",maxWidth:"100%"})}):R.map((e,l)=>tile(e,l,"quilted"===k?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===R.length&&f(W)?e(t,{children:W}):l(t,{children:[e("ul",{ref:U,role:"list","aria-label":le,className:c("plass-gallery m-0 list-none p-0","justified"===k?"plass-gallery-justified flex flex-wrap":"","masonry"===k?"grid":"","grid"===k?"plass-gallery-grid grid":"","quilted"===k?"plass-gallery-quilted grid":"",J),style:{gap:"masonry"===k?`0 ${ne}`:ne,...x(Z,0),...m("cols",oe,e=>String(Math.max(1,Math.round(e)))),..."masonry"===k?{gridTemplateColumns:`repeat(${se}, minmax(0, 1fr))`,gridTemplateRows:ue}:null,..."quilted"===k?{gridAutoRows:`${S}px`,gridAutoFlow:"dense"}:null,...O},...Q,children:pe}),A?e(i.Suspense,{fallback:null,children:e(j,{items:R,index:re,onIndexChange:ae,size:Y,color:Z,label:le,itemLabel:te})}):null]})});

package/dist/components/gallery/PlGalleryViewer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useLabels as t}from"../../internal/labels.js";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as s,metaTextClasses as i}from"../../internal/styles.js";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{PlOverlay as r}from"../overlay/PlOverlay.js";export function PlGalleryViewer({items:o,index:c,onIndexChange:m,size:u,color:d,label:p,itemLabel:f}){const x=t(),v=null!==c,h=null===c?void 0:o[c],g=null===c||c<=0,b=null===c||c>=o.length-1,go=e=>{e>=0&&e<o.length&&m(e)};return e(r,{open:v,onOpenChange:e=>{e||m(null)},tone:"glass",dismissible:!0,size:u,color:d,label:p,onKeyDown:e=>{null===c||e.metaKey||e.ctrlKey||e.altKey||("ArrowRight"===e.key?(e.preventDefault(),go(c+1)):"ArrowLeft"===e.key&&(e.preventDefault(),go(c-1)))},children:l("div",{className:"flex max-w-[90vw] flex-col gap-3",children:[l("div",{className:"relative flex items-center justify-center",children:[h?e("img",{src:h.full??h.src,alt:h.alt,className:"max-h-[80vh] max-w-[90vw] object-contain"},h.id??h.src):null,o.length>1?l("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(a,{variant:"solid",elevation:1,size:u,color:d,label:x.previous,disabled:g,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(n,{})}),onClick:()=>go((c??0)-1)}),e(a,{variant:"solid",elevation:1,size:u,color:d,label:x.next,disabled:b,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(n,{})}),onClick:()=>go((c??0)+1)})]}):null]}),h&&(h.title||h.description)?l("div",{className:"flex min-w-0 flex-col gap-0.5 text-center",children:[h.title?e("span",{className:"truncate font-medium text-(--plass-fg)",children:h.title}):null,h.description?e("span",{className:s("truncate text-(--plass-muted-fg)",i[u]),children:h.description}):null]}):null,o.length>1?e("p",{className:s("m-0 text-center text-(--plass-muted-fg)",i[u]),"aria-live":"polite",children:f((c??0)+1,o.length)}):null]})})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useLabels as n}from"../../internal/labels.js";import{isTurned as r,ratioOf as i,shownRatio as a}from"../../internal/gallery.js";import{ChevronIcon as s}from"../../internal/icons.js";import{poseStyle as o,quartersOf as c}from"../../internal/image.js";import{cx as m,metaTextClasses as u}from"../../internal/styles.js";import{PlIconButton as d}from"../icon-button/PlIconButton.js";import{PlOverlay as f}from"../overlay/PlOverlay.js";function turnedFrame(e){if(void 0===e.ratio)return{aspectRatio:"1",width:"min(90vw, 80vh)",containerType:"size"};const t=a(i(e.ratio,1),e.rotate);return{aspectRatio:String(t),width:`min(90vw, calc(80vh * ${t}))`,containerType:"size"}}export function PlGalleryViewer({items:i,index:a,onIndexChange:p,size:v,color:h,label:x,itemLabel:g}){const y=n(),b=null!==a,w=null===a?void 0:i[a],j=null===a||a<=0,N=null===a||a>=i.length-1,k=l.useRef(null),z=l.useRef(null),R=l.useRef(null),go=e=>{if(e<0||e>=i.length)return;const t=document.activeElement;e===i.length-1&&t===z.current?R.current=k.current:0===e&&t===k.current&&(R.current=z.current),p(e)};return l.useLayoutEffect(()=>{R.current?.focus(),R.current=null},[a]),e(f,{open:b,onOpenChange:e=>{e||p(null)},tone:"glass",dismissible:!0,size:v,color:h,label:x,onKeyDown:e=>{null===a||e.metaKey||e.ctrlKey||e.altKey||("ArrowRight"===e.key?(e.preventDefault(),go(a+1)):"ArrowLeft"===e.key&&(e.preventDefault(),go(a-1)))},children:t("div",{className:"flex max-w-[90vw] flex-col gap-3",children:[t("div",{className:"relative flex items-center justify-center",children:[w?e("span",{className:"relative block",style:r(w.rotate)?turnedFrame(w):void 0,children:e("img",{src:w.full??w.src,alt:w.alt,className:m("block object-contain",r(w.rotate)?"":"max-h-[80vh] max-w-[90vw]"),style:o(c(w.rotate??0),w.flip??"none")??void 0})},w.id??w.src):null,i.length>1?t("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(d,{variant:"solid",elevation:1,size:v,color:h,ref:k,label:y.previous,disabled:j,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(s,{})}),onClick:()=>go((a??0)-1)}),e(d,{variant:"solid",elevation:1,size:v,color:h,ref:z,label:y.next,disabled:N,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(s,{})}),onClick:()=>go((a??0)+1)})]}):null]}),w&&(w.title||w.description)?t("div",{className:"flex min-w-0 flex-col gap-0.5 text-center",children:[w.title?e("span",{className:"truncate font-medium text-(--plass-fg)",children:w.title}):null,w.description?e("span",{className:m("truncate text-(--plass-muted-fg)",u[v]),children:w.description}):null]}):null,i.length>1?e("p",{className:m("m-0 text-center text-(--plass-muted-fg)",u[v]),"aria-live":"polite",children:g((a??0)+1,i.length)}):null]})})}

package/dist/components/gauge-chart/PlGaugeChart.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as s from"react";import{ChartSurface as l,useMeasuredWidth as r}from"../../internal/chart-frame.js";import{arcPath as n,chartFontSizes as i,compactNumber as o,plotHeights as h,ringPath as m,textWidth as c,truncate as d}from"../../internal/chart.js";import{useDefaults as f}from"../../internal/defaults.js";import{numberFormatter as p}from"../../internal/format.js";import{useLabels as u}from"../../internal/labels.js";import{cx as x,hasContent as M,metaTextClasses as g}from"../../internal/styles.js";import{bandColor as v}from"../../internal/threshold.js";function pointAt(t,a,e,s){const l=(s-90)*Math.PI/180;return[t+e*Math.cos(l),a+e*Math.sin(l)]}export function PlGaugeChart({value:y,min:b=0,max:k=100,sweep:j=180,thickness:N=.22,thresholds:$,ticks:w=!1,showRange:A=!0,center:z,caption:P,height:S,format:W,locale:q,label:C,empty:D,size:I,variant:L="ghost",color:R,padded:B=!1,className:F,...G}){const T=f(),Y=I??T.size??"md",E=R??T.color??"primary",H=q??T.locale,J=s.useRef(null),K=r(J),O=u(),Q=s.useCallback(t=>W?p(H,W).format(t):o(t,H),[W,H]),U=Math.max(1,Math.min(360,j)),V=U/2,X=-V,Z=V,_=k-b,tt=null===y||Number.isNaN(y)||0===_?null:Math.min(1,Math.max(0,(y-b)/_)),at=null===y?E:v(y,E,$),et="number"==typeof S?S:h[Y],st=i[Y],lt=Math.min(.9,Math.max(.05,N)),rt=V*Math.PI/180,nt=U>=360?1:Math.max(0,-Math.cos(rt)),it=U>=180?1:Math.sin(rt),ot=Math.sin(rt),ht=-Math.cos(rt),mt=A&&U<330?[b,k].map(t=>d(Q(t),Math.max(0,.28*K),st)):[],ct=mt.reduce((t,a)=>Math.max(t,c(a,st)),0),dt=.35*st,ft=!1===w?0:.85*st,pt=ht<=.25,ut=pt?0:.5*st,xt=pt?st:st*(.35+.55*ht),Mt=mt.length>0?ht*ut+xt+.25*st:0,gt=Math.max(dt,ft),vt=Math.max(dt,ft),yt=Math.max(dt,ft,Mt),bt=[(K/2-gt)/Math.max(.05,it),(et-vt-yt)/(1+nt)];if(ct>0&&ot>.05){const t=pt?ct/2:ct;bt.push(Math.max(0,K/2-dt-t)/ot-ut)}const kt=Math.max(0,Math.min(...bt)),jt=kt*(1-lt),Nt=K/2,$t=vt+kt*(1+nt)+yt,wt=vt+kt+Math.max(0,(et-$t)/2),At=kt<=0||0===_,zt=M(P)?1.85*st:0,Pt=wt-jt*(1-Math.min(1,nt))/2,St=Math.min(jt,Math.abs(wt-Pt)),Wt=Math.min(jt,Math.abs(wt-Pt-zt/2)),qt=2*Math.sqrt(Math.max(0,jt*jt-Wt*Wt)),Ct=z??(null===y?"—":Q(y)),Dt="string"==typeof Ct?c(Ct,1):0,It=Dt>0?Math.max(st,Math.min(2*st,function fitType(t,a,e,s,l){const r=t*t/(4*l*l)+s*s,n=2*a*s,i=a*a-e*e;return r<=0||i>=0?0:(Math.sqrt(n*n-4*r*i)-n)/(2*r)}(Dt,St,jt,.42,.86))):2*st,Lt=!1===w?0:Math.max(2,Math.floor(w));return t(l,{...G,variant:L,color:E,size:Y,padded:B,legendSide:"bottom",className:F,legend:null,table:null,children:t("div",{ref:J,className:"relative w-full",style:{height:et},role:void 0===C?void 0:"img","aria-label":void 0===C?void 0:null===y?C:`${C}: ${Q(y)} / ${Q(k)}`,children:At?t("div",{className:x("flex h-full items-center justify-center text-(--plass-muted-fg)",g[Y]),children:D??O.empty}):K>0?a(e,{children:[a("svg",{width:K,height:et,viewBox:`0 0 ${K} ${et}`,"aria-hidden":"true",className:"block",children:[t("path",{d:n(Nt,wt,kt,jt,X,Z),fill:`var(--plass-${E}-soft)`}),null!==tt?t("path",{d:m(Nt,wt,(kt+jt)/2,X,Z),fill:"none",stroke:`var(--plass-${at}-fill)`,strokeWidth:kt-jt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-tt,style:{transition:"stroke-dashoffset var(--plass-duration-slow) var(--plass-ease), stroke var(--plass-duration) var(--plass-ease)"}}):null,Lt>0?Array.from({length:Lt},(a,e)=>{const s=X+U*e/(Lt-1),[l,r]=pointAt(Nt,wt,kt+.25*st,s),[n,i]=pointAt(Nt,wt,kt+.6*st,s);return t("line",{x1:l,y1:r,x2:n,y2:i,stroke:"var(--plass-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,mt.length>0?[[mt[0],X,"start"],[mt[1],Z,"end"]].map(([a,e,s])=>{const[l,r]=pointAt(Nt,wt,kt+ut,e);return t("text",{x:l,y:r+xt,textAnchor:pt?"middle":"start"===s?"end":"start",fontSize:st,fill:"var(--plass-muted-fg)",children:a},s)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:Pt+zt/2,maxWidth:qt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold text-(--plass-fg) tabular-nums",style:{fontSize:It},children:Ct}),P?t("span",{className:x("text-(--plass-muted-fg)",g[Y]),children:P}):null]})]}):null})})}
+"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as s from"react";import{ChartSurface as l,useMeasuredWidth as r}from"../../internal/chart-frame.js";import{arcPath as n,chartFontSizes as i,compactNumber as o,plotHeights as h,ringPath as m,textWidth as c,truncate as d}from"../../internal/chart.js";import{useDefaults as f}from"../../internal/defaults.js";import{numberFormatter as p}from"../../internal/format.js";import{useLabels as u}from"../../internal/labels.js";import{cx as x,hasContent as M,metaTextClasses as g}from"../../internal/styles.js";import{bandColor as v}from"../../internal/threshold.js";function pointAt(t,a,e,s){const l=(s-90)*Math.PI/180;return[t+e*Math.cos(l),a+e*Math.sin(l)]}export function PlGaugeChart({value:y,min:b=0,max:k=100,sweep:j=180,thickness:N=.22,thresholds:$,ticks:w=!1,showRange:A=!0,center:z,caption:P,height:S,format:W,locale:q,label:C,empty:D,size:I,variant:L="ghost",color:R,padded:B=!1,className:F,...G}){const T=f(),Y=I??T.size??"md",E=R??T.color??"primary",H=q??T.locale,J=s.useRef(null),K=r(J),O=u(),Q=s.useCallback(t=>W?p(H,W).format(t):o(t,H),[W,H]),U=Math.max(1,Math.min(360,j)),V=U/2,X=-V,Z=V,_=k-b,tt=null===y||Number.isNaN(y)||0===_?null:Math.min(1,Math.max(0,(y-b)/_)),at=null===y?E:v(y,E,$),et="number"==typeof S?S:h[Y],st=i[Y],lt=Math.min(.9,Math.max(.05,N)),rt=V*Math.PI/180,nt=U>=360?1:Math.max(0,-Math.cos(rt)),it=U>=180?1:Math.sin(rt),ot=Math.sin(rt),ht=-Math.cos(rt),mt=A&&U<330?[b,k].map(t=>d(Q(t),Math.max(0,.28*K),st)):[],ct=mt.reduce((t,a)=>Math.max(t,c(a,st)),0),dt=.35*st,ft=!1===w?0:.85*st,pt=ht<=.25,ut=pt?0:.5*st,xt=pt?st:st*(.35+.55*ht),Mt=mt.length>0?ht*ut+xt+.25*st:0,gt=Math.max(dt,ft),vt=Math.max(dt,ft),yt=Math.max(dt,ft,Mt),bt=[(K/2-gt)/Math.max(.05,it),(et-vt-yt)/(1+nt)];if(ct>0&&ot>.05){const t=pt?ct/2:ct;bt.push(Math.max(0,K/2-dt-t)/ot-ut)}const kt=Math.max(0,Math.min(...bt)),jt=kt*(1-lt),Nt=K/2,$t=vt+kt*(1+nt)+yt,wt=vt+kt+Math.max(0,(et-$t)/2),At=0===_,zt=M(P)?1.85*st:0,Pt=wt-jt*(1-Math.min(1,nt))/2,St=Math.min(jt,Math.abs(wt-Pt)),Wt=Math.min(jt,Math.abs(wt-Pt-zt/2)),qt=2*Math.sqrt(Math.max(0,jt*jt-Wt*Wt)),Ct=z??(null===y?"—":Q(y)),Dt="string"==typeof Ct?c(Ct,1):0,It=Dt>0?Math.max(st,Math.min(2*st,function fitType(t,a,e,s,l){const r=t*t/(4*l*l)+s*s,n=2*a*s,i=a*a-e*e;return r<=0||i>=0?0:(Math.sqrt(n*n-4*r*i)-n)/(2*r)}(Dt,St,jt,.42,.86))):2*st,Lt=!1===w?0:Math.max(2,Math.floor(w));return t(l,{...G,variant:L,color:E,size:Y,padded:B,legendSide:"bottom",className:F,legend:null,table:null,children:t("div",{ref:J,className:"relative w-full",style:{height:et},role:void 0===C?void 0:"img","aria-label":void 0===C?void 0:null===y?C:`${C}: ${Q(y)} / ${Q(k)}`,children:At?t("div",{className:x("flex h-full items-center justify-center text-(--plass-muted-fg)",g[Y]),children:D??O.empty}):K>0&&kt>0?a(e,{children:[a("svg",{width:K,height:et,viewBox:`0 0 ${K} ${et}`,"aria-hidden":"true",className:"block",children:[t("path",{d:n(Nt,wt,kt,jt,X,Z),fill:`var(--plass-${E}-soft)`}),null!==tt?t("path",{d:m(Nt,wt,(kt+jt)/2,X,Z),fill:"none",stroke:`var(--plass-${at}-fill)`,strokeWidth:kt-jt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-tt,style:{transition:"stroke-dashoffset var(--plass-duration-slow) var(--plass-ease), stroke var(--plass-duration) var(--plass-ease)"}}):null,Lt>0?Array.from({length:Lt},(a,e)=>{const s=X+U*e/(Lt-1),[l,r]=pointAt(Nt,wt,kt+.25*st,s),[n,i]=pointAt(Nt,wt,kt+.6*st,s);return t("line",{x1:l,y1:r,x2:n,y2:i,stroke:"var(--plass-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,mt.length>0?[[mt[0],X,"start"],[mt[1],Z,"end"]].map(([a,e,s])=>{const[l,r]=pointAt(Nt,wt,kt+ut,e);return t("text",{x:l,y:r+xt,textAnchor:pt?"middle":"start"===s?"end":"start",fontSize:st,fill:"var(--plass-muted-fg)",children:a},s)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:Pt+zt/2,maxWidth:qt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold text-(--plass-fg) tabular-nums",style:{fontSize:It},children:Ct}),P?t("span",{className:x("text-(--plass-muted-fg)",g[Y]),children:P}):null]})]}):null})})}

package/dist/components/heatmap-chart/PlHeatmapChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as i,ChartSurface as a,ChartTooltipPanel as r,markTransitionClasses as o,useMeasuredWidth as d}from"../../internal/chart-frame.js";import{categoryAt as h,chartFontSizes as s,compactNumber as c,formatCategory as m,markGap as u,plotHeights as x,rampFill as f,rampInk as g,rampStep as p,rampSteps as w,squarify as v,textWidth as y,toValues as b,truncate as M}from"../../internal/chart.js";import{numberFormatter as $}from"../../internal/format.js";import{cx as j,metaTextClasses as k,srOnlyClasses as z}from"../../internal/styles.js";import{useLabels as A}from"../../internal/labels.js";import{useDefaults as N}from"../../internal/defaults.js";export function PlHeatmapChart({series:E,categories:S,shape:B="grid",scale:C="sequential",midpoint:I=0,min:D,max:L,valueLabels:P="none",height:R,format:_,locale:q,label:H,legend:K,tooltip:U,empty:W,size:F,variant:G="ghost",padded:J=!1,className:O,...Q}){const T=N(),V=F??T.size??"md",X=q??T.locale,Y=t.useRef(null),Z=d(Y),ee=A(),le=t.useId(),[te,ne]=t.useState(null),ie=t.useCallback(e=>_?$(X,_).format(e):c(e,X),[_,X]),ae=t.useMemo(()=>b(E),[E]),re=ae.reduce((e,l)=>Math.max(e,l.length),0),oe=t.useMemo(()=>Array.from({length:re},(e,l)=>h(l,S,ae)),[re,S,ae]),de=t.useMemo(()=>E.map((e,l)=>e.name??`${l+1}`),[E]),he=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of ae)for(const i of n)null!==i.value&&(t=!0,e=Math.min(e,i.value),l=Math.max(l,i.value));return t?{min:e,max:l}:null},[ae]),se=D??he?.min??0,ce=L??he?.max??1,me=t.useCallback(e=>p(e,se,ce,C,I),[se,ce,C,I]),ue="number"==typeof R?R:x[V]??220,xe=s[V],fe=!0===K||void 0===K||!1===K?{}:K,ge=!1!==K,pe=fe.side??"bottom",we=!1===U?{mode:"none"}:!0===U||void 0===U?{}:U,ve="none"===we.mode,ye=null===he||0===re||0===E.length,be=t.useMemo(()=>{if("treemap"===B||Z<=0)return{texts:[],band:0};const e=Math.min(150,.25*Z),l=de.map(l=>M(l,e,xe));return{texts:l,band:l.reduce((e,l)=>Math.max(e,y(l,xe)),0)+10}},[B,de,Z,xe]),Me="treemap"===B?0:xe+8,$e={left:be.band,width:Math.max(0,Z-be.band),height:Math.max(0,ue-Me)},je=t.useMemo(()=>{if($e.width<=0||$e.height<=0)return[];if("treemap"===B){const e=[];return ae.forEach((l,t)=>l.forEach((l,n)=>{null!==l.value&&e.push({row:t,index:n,cell:l})})),v(e.map(e=>Math.max(0,e.cell.value??0)),$e.width,$e.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:$e.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=$e.height/Math.max(1,E.length),l=$e.width/Math.max(1,re),t=[];return ae.forEach((n,i)=>n.forEach((n,a)=>{null!==n.value&&t.push({row:i,index:a,cell:n,x:$e.left+a*l,y:i*e,width:l,height:e})})),t},[B,ae,E.length,re,$e.left,$e.width,$e.height]),ke=t.useCallback(e=>m(e.cell.x??S?.[e.index]??oe[e.index]??e.index,X),[S,oe,X]),ze=null===te?null:je.find(e=>e.row===te.row&&e.index===te.index)??null,Ae=null===ze?[]:[{seriesIndex:ze.row,color:ze.cell.color??f(me(ze.cell.value??0),C),value:ze.cell.value,formatted:ie(ze.cell.value??0),label:ze.cell.label}],Ne=Array.from({length:w},(e,l)=>f(l,C));return l(a,{...Q,size:V,variant:G,padded:J,className:O,legendSide:pe,legend:ge&&!ye?e(n,{steps:Ne,from:ie("diverging"===C?-reach(se,ce,I)+I:se),to:ie("diverging"===C?reach(se,ce,I)+I:ce),middle:"diverging"===C?ie(I):void 0,align:fe.align??"center",vertical:"left"===pe||"right"===pe,size:V}):null,table:ye?null:l("table",{id:le,className:z,children:[H?e("caption",{children:H}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),oe.map((l,t)=>e("th",{scope:"col",children:m(l,X)},t))]})}),e("tbody",{children:ae.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:de[n]}),oe.map((l,n)=>{const i=t[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":ie(i.value)},n)})]},n))})]}),children:[l("div",{ref:Y,role:"img",tabIndex:ye?void 0:0,"aria-label":H??ee.chart,"aria-describedby":ye?void 0:le,onPointerLeave:()=>ne(null),onBlur:()=>ne(null),onKeyDown:e=>{if(ve||0===je.length)return;const l=null===te?-1:je.findIndex(e=>e.row===te.row&&e.index===te.index);if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=je[Math.min(je.length-1,l+1)];ne({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=je[Math.max(0,(-1===l?je.length:l)-1)];ne({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;ne(null)}e.preventDefault()},className:j("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:ue},children:[ye?e("div",{className:j("flex h-full items-center justify-center text-(--plass-muted-fg)",k[V]),children:W??ee.empty}):Z>0?l("svg",{width:Z,height:ue,viewBox:`0 0 ${Z} ${ue}`,"aria-hidden":"true",className:"block",children:[je.map(t=>{const n=me(t.cell.value??0),i=te?.row===t.row&&te?.index===t.index,a=Math.max(0,t.width-u),r=Math.max(0,t.height-u);if(a<=0||r<=0)return null;const d=ie(t.cell.value??0),h="treemap"===B?"all"===P?[ke(t),d]:[ke(t)]:"all"===P?[d]:[],s=h.filter(e=>function fits(e,l,t,n){return t>=1.8*n&&l>=Math.min(y(e,n),2.5*n)+8}(e,a,r/h.length,xe)),c=t.cell.color?"var(--plass-surface)":g(n,C);return l("g",{children:[e("rect",{x:t.x+u/2,y:t.y+u/2,width:a,height:r,rx:Math.min(3,a/2,r/2),fill:t.cell.color??f(n,C),opacity:i?1:.94,onPointerEnter:ve?void 0:()=>ne({row:t.row,index:t.index}),className:o}),s.map((l,n)=>e("text",{x:t.x+t.width/2,y:t.y+t.height/2+(n-(s.length-1)/2)*(xe+2),textAnchor:"middle",dominantBaseline:"central",fontSize:xe,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===B?void 0:"tabular-nums",children:M(l,t.width-8,xe)},n))]},`${t.row}-${t.index}`)}),"grid"===B?be.texts.map((l,t)=>e("text",{x:$e.left-8,y:(t+.5)*$e.height/Math.max(1,E.length),textAnchor:"end",dominantBaseline:"central",fontSize:xe,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===B?oe.map((l,t)=>{const n=$e.width/Math.max(1,re),i=m(l,X);return t%Math.max(1,Math.ceil((y(i,xe)+8)/Math.max(1,n)))!==0?null:e("text",{x:$e.left+(t+.5)*n,y:$e.height+xe,textAnchor:"middle",fontSize:xe,fill:"var(--plass-muted-fg)",children:i},`col-${t}`)}):null]}):null,ze&&!ve?we.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:ze.x+ze.width/2,top:ze.y},children:we.render({index:ze.index,category:ze.cell.x??oe[ze.index]??ze.index,items:Ae})}):e(r,{heading:`${de[ze.row]} · ${ke(ze)}`,items:Ae,x:ze.x+ze.width/2,y:ze.y,flip:ze.x+ze.width/2>.6*Z,size:V}):null]}),ve?null:e(i,{heading:ze?`${de[ze.row]} · ${ke(ze)}`:void 0,items:Ae})]})}function reach(e,l,t){return Math.max(Math.abs(l-t),Math.abs(t-e))}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{ChartScaleLegend as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as a,markTransitionClasses as o,useMeasuredWidth as d}from"../../internal/chart-frame.js";import{categoryAt as h,chartFontSizes as s,compactNumber as c,formatCategory as m,markGap as u,plotHeights as x,rampFill as f,rampInk as p,rampStep as g,rampSteps as w,squarify as v,textWidth as y,tickStride as b,toValues as M,truncate as $}from"../../internal/chart.js";import{numberFormatter as k}from"../../internal/format.js";import{cx as A,metaTextClasses as N,srOnlyClasses as j}from"../../internal/styles.js";import{useLabels as z}from"../../internal/labels.js";import{useDefaults as E}from"../../internal/defaults.js";export function PlHeatmapChart({series:S,categories:C,shape:D="grid",scale:I="sequential",midpoint:B=0,min:L,max:P,valueLabels:R="none",height:U,format:_,locale:q,label:F,legend:H,tooltip:K,empty:W,size:G,variant:J="ghost",padded:O=!1,className:Q,...T}){const V=E(),X=G??V.size??"md",Y=q??V.locale,Z=t.useRef(null),ee=d(Z),le=z(),te=t.useId(),ne=t.useId(),[ie,re]=t.useState(null),ae=t.useCallback(e=>_?k(Y,_).format(e):c(e,Y),[_,Y]),oe=t.useMemo(()=>M(S),[S]),de=oe.reduce((e,l)=>Math.max(e,l.length),0),he=t.useMemo(()=>Array.from({length:de},(e,l)=>h(l,C,oe)),[de,C,oe]),se=t.useMemo(()=>S.map((e,l)=>e.name??`${l+1}`),[S]),ce=t.useMemo(()=>oe.map((e,l)=>{const t=e.map(e=>e.value).filter(e=>null!==e);return{name:se[l],low:0===t.length?null:Math.min(...t),high:0===t.length?null:Math.max(...t)}}),[oe,se]),me=t.useMemo(()=>{let e=1/0,l=-1/0,t=!1;for(const n of oe)for(const i of n)null!==i.value&&(t=!0,e=Math.min(e,i.value),l=Math.max(l,i.value));return t?{min:e,max:l}:null},[oe]),ue=L??me?.min??0,xe=P??me?.max??1,fe=t.useCallback(e=>g(e,ue,xe,I,B),[ue,xe,I,B]),pe="number"==typeof U?U:x[X]??220,ge=s[X],we=!0===H||void 0===H||!1===H?{}:H,ve=!1!==H,ye=we.side??"bottom",be=!1===K?{mode:"none"}:!0===K||void 0===K?{}:K,Me="none"===be.mode,$e=null===me||0===de||0===S.length,ke=t.useMemo(()=>{if("treemap"===D||ee<=0)return{texts:[],band:0};const e=Math.min(150,.25*ee),l=se.map(l=>$(l,e,ge));return{texts:l,band:l.reduce((e,l)=>Math.max(e,y(l,ge)),0)+10}},[D,se,ee,ge]),Ae="treemap"===D?0:ge+8,Ne={left:ke.band,width:Math.max(0,ee-ke.band),height:Math.max(0,pe-Ae)},je=t.useMemo(()=>{if("treemap"===D)return{texts:[],widest:0};const e=he.map(e=>m(e,Y));return{texts:e,widest:e.reduce((e,l)=>Math.max(e,y(l,ge)),0)}},[D,he,Y,ge]),ze=b(de,Ne.width,je.widest+8),Ee=t.useMemo(()=>{if(Ne.width<=0||Ne.height<=0)return[];if("treemap"===D){const e=[];return oe.forEach((l,t)=>l.forEach((l,n)=>{null!==l.value&&e.push({row:t,index:n,cell:l})})),v(e.map(e=>Math.max(0,e.cell.value??0)),Ne.width,Ne.height).map(l=>({row:e[l.index].row,index:e[l.index].index,cell:e[l.index].cell,x:Ne.left+l.x,y:l.y,width:l.width,height:l.height}))}const e=Ne.height/Math.max(1,S.length),l=Ne.width/Math.max(1,de),t=[];return oe.forEach((n,i)=>n.forEach((n,r)=>{null!==n.value&&t.push({row:i,index:r,cell:n,x:Ne.left+r*l,y:i*e,width:l,height:e})})),t},[D,oe,S.length,de,Ne.left,Ne.width,Ne.height]),Se=t.useCallback((e,l)=>m(e.x??C?.[l]??he[l]??l,Y),[C,he,Y]),Ce=t.useCallback(e=>Se(e.cell,e.index),[Se]),De=null===ie?null:Ee.find(e=>e.row===ie.row&&e.index===ie.index)??null,Ie=null===De?[]:[{seriesIndex:De.row,color:De.cell.color??f(fe(De.cell.value??0),I),value:De.cell.value,formatted:ae(De.cell.value??0),label:De.cell.label}],Be=Array.from({length:w},(e,l)=>f(l,I));return l(r,{...T,size:X,variant:J,padded:O,className:Q,legendSide:ye,legend:ve&&!$e?e(n,{steps:Be,from:ae("diverging"===I?-reach(ue,xe,B)+B:ue),to:ae("diverging"===I?reach(ue,xe,B)+B:xe),middle:"diverging"===I?ae(B):void 0,align:we.align??"center",vertical:"left"===ye||"right"===ye,size:X}):null,table:$e?null:l("table","treemap"===D?{id:te,className:j,children:[F?e("caption",{children:F}):null,oe.map((t,n)=>l("tbody",{children:[e("tr",{children:e("th",{scope:"rowgroup",colSpan:2,children:se[n]})}),t.map((t,n)=>null===t.value?null:l("tr",{children:[e("th",{scope:"row",children:Se(t,n)}),e("td",{children:void 0!==t.label?t.label:ae(t.value)})]},n))]},n))]}:{id:te,className:j,children:[F?e("caption",{children:F}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col"}),he.map((l,t)=>e("th",{scope:"col",children:m(l,Y)},t))]})}),e("tbody",{children:oe.map((t,n)=>l("tr",{children:[e("th",{scope:"row",children:se[n]}),he.map((l,n)=>{const i=t[n];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":ae(i.value)},n)})]},n))})]}),children:[l("div",{ref:Z,role:"img",tabIndex:$e?void 0:0,"aria-label":F??le.chart,"aria-describedby":$e?void 0:ne,onPointerLeave:()=>re(null),onBlur:()=>re(null),onKeyDown:e=>{if(Me||0===Ee.length)return;const l=null===ie?-1:Ee.findIndex(e=>e.row===ie.row&&e.index===ie.index);if("grid"!==D||-1===l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if("ArrowRight"===e.key||"ArrowDown"===e.key){const e=Ee[Math.min(Ee.length-1,l+1)];re({row:e.row,index:e.index})}else if("ArrowLeft"===e.key||"ArrowUp"===e.key){const e=Ee[Math.max(0,(-1===l?Ee.length:l)-1)];re({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;re(null)}else{const t="ArrowDown"===e.key?1:-1;let n=l+t;for(;n>=0&&n<Ee.length&&Ee[n].index!==Ee[l].index;)n+=t;n>=0&&n<Ee.length&&re({row:Ee[n].row,index:Ee[n].index})}e.preventDefault()},className:A("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:pe},children:[$e?e("div",{className:A("flex h-full items-center justify-center text-(--plass-muted-fg)",N[X]),children:W??le.empty}):ee>0?l("svg",{width:ee,height:pe,viewBox:`0 0 ${ee} ${pe}`,"aria-hidden":"true",className:"block",children:[Ee.map(t=>{const n=fe(t.cell.value??0),i=ie?.row===t.row&&ie?.index===t.index,r=Math.max(0,t.width-u),a=Math.max(0,t.height-u);if(r<=0||a<=0)return null;const d=ae(t.cell.value??0),h="treemap"===D?"all"===R?[Ce(t),d]:[Ce(t)]:"all"===R?[d]:[],s=h.filter(e=>function fits(e,l,t,n){return t>=1.8*n&&l>=Math.min(y(e,n),2.5*n)+8}(e,r,a/h.length,ge)),c=t.cell.color?"var(--plass-surface)":p(n,I);return l("g",{children:[e("rect",{x:t.x+u/2,y:t.y+u/2,width:r,height:a,rx:Math.min(3,r/2,a/2),fill:t.cell.color??f(n,I),opacity:i?1:.94,onPointerEnter:Me?void 0:()=>re({row:t.row,index:t.index}),className:o}),s.map((l,n)=>e("text",{x:t.x+t.width/2,y:t.y+t.height/2+(n-(s.length-1)/2)*(ge+2),textAnchor:"middle",dominantBaseline:"central",fontSize:ge,fontWeight:0===n?500:400,fill:c,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===D?void 0:"tabular-nums",children:$(l,t.width-8,ge)},n))]},`${t.row}-${t.index}`)}),"grid"===D?ke.texts.map((l,t)=>e("text",{x:Ne.left-8,y:(t+.5)*Ne.height/Math.max(1,S.length),textAnchor:"end",dominantBaseline:"central",fontSize:ge,fill:"var(--plass-muted-fg)",children:l},`row-${t}`)):null,"grid"===D?je.texts.map((l,t)=>{const n=Ne.width/Math.max(1,de);return t%ze!==0?null:e("text",{x:Ne.left+(t+.5)*n,y:Ne.height+ge,textAnchor:"middle",fontSize:ge,fill:"var(--plass-muted-fg)",children:l},`col-${t}`)}):null]}):null,De&&!Me?be.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:De.x+De.width/2,top:De.y},children:be.render({index:De.index,category:De.cell.x??he[De.index]??De.index,items:Ie})}):e(a,{heading:`${se[De.row]} · ${Ce(De)}`,items:Ie,x:De.x+De.width/2,y:De.y,flip:De.x+De.width/2>.6*ee,size:X}):null]}),$e?null:e("span",{id:ne,className:j,children:ce.map((e,n)=>l(t.Fragment,{children:[n>0?", ":null,null===e.low?e.name:e.low===e.high?`${e.name} ${ae(e.low)}`:`${e.name} ${ae(e.low)}–${ae(e.high)}`]},n))}),Me?null:e(i,{heading:De?`${se[De.row]} · ${Ce(De)}`:void 0,items:Ie})]})}function reach(e,l,t){return Math.max(Math.abs(l-t),Math.abs(t-e))}

package/dist/components/highlight/PlHighlight.d.ts

@@ -7,9 +7,16 @@ export interface PlHighlightProps extends Omit<React.ComponentPropsWithoutRef<'s
      *
      * A string is one term, an array is several — the longest is tried first, so
      * `['data', 'database']` marks the whole word rather than the first four
-     * letters of it. A `RegExp` is used as written, with the global flag forced
-     * on; `caseSensitive` and `wholeWord` are ignored for it, because a regular
-     * expression already says both of those things itself.
+     * letters of it. Every term in an array is taken as literal text, so a search
+     * box can be wired straight to it and a reader typing `1 + 1` looks for
+     * `1 + 1`. A pattern goes in on its own: `/error|\d+/` is what an array of
+     * expressions would have been, written the way a regular expression is read.
+     *
+     * A `RegExp` is used as written, with the global flag forced on, and
+     * `caseSensitive` is ignored for one because the expression carries its own
+     * flags. `wholeWord` still applies — it is tested against the text around
+     * each match rather than built into the expression, so it holds however the
+     * match was found.
      */
     query: string | string[] | RegExp;
     /**

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]})]})});