plass-ui 1.6.0 → 1.8.0

package/dist/components/switch/PlSwitch.js

@@ -1 +1 @@
-"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Switch as s}from"@base-ui/react/switch";import{Field as l}from"@base-ui/react/field";import{controlSlots as c,cx as i,focusRingClasses as n,hasContent as d,metaTextClasses as h,tickRowTextClasses as m}from"../../internal/styles.js";const p={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},f={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},u=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition-property:background-color,background-image,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",n].join(" "),g=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),b=/* @__PURE__ */[g,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),x=/* @__PURE__ */[g,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:shadow-none"].join(" "),k=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[background-image:var(--p-fill)]"].join(" "),w=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:n,label:g,description:v,error:j,invalid:N,labelPlacement:y="end",disabled:_=!1,readOnly:T=!1,className:P,classNames:R,style:S,...$},z){const B=o(),C=t??B.size??"md",H=n??B.color??"primary",O=d(j),q=N??O,D=q?"danger":H,E=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(s.Root,{ref:z,className:i(u,p[C],_?k:T?x:b,R?.control),disabled:_,readOnly:T,...$,children:a(s.Thumb,{className:`${w} ${f[C]}`})})}),F=g||v?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===y?"flex-1":""].filter(Boolean).join(" "),children:[g?a(l.Label,{className:i(_?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",R?.label),children:g}):null,v?a(l.Description,{className:i("m-0",h[C],"text-(--plass-muted-fg)",R?.description),children:v}):null]}):null;return e(l.Root,{disabled:_,invalid:q,className:["inline-flex flex-col gap-1 align-top",P??""].filter(Boolean).join(" "),style:{...c(D,0,"solid"),...S},children:[a("div",{className:`flex items-start gap-2.5 ${m[C]}`,children:e(r,"start"===y?{children:[F,E]}:{children:[E,F]})}),a(l.Error,O?{match:!0,className:i(h[C],"text-(--p-accent)",R?.error),children:j}:{className:i(h[C],"text-(--p-accent)",R?.error)})]})});
+"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDisabled as l,useLabelReference as o}from"../../internal/form.js";import{useDefaults as s}from"../../internal/defaults.js";import{Switch as c}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{controlSlots as n,cx as d,fieldDescriptionClasses as h,focusRingClasses as m,hasContent as p,metaTextClasses as f,tickRowTextClasses as u}from"../../internal/styles.js";const b={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},g={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},x=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill","[transition-property:background-color,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",m].join(" "),k=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),w=/* @__PURE__ */[k,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[--p-fill-on:1]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),j=/* @__PURE__ */[k,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[--p-fill-on:1]","data-[checked]:shadow-none"].join(" "),v=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[--p-fill-on:1]"].join(" "),y=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:m,label:k,description:N,error:_,invalid:T,labelPlacement:B="end",disabled:P=!1,readOnly:R=!1,className:S,classNames:$,style:z,"aria-label":C,"aria-labelledby":H,...O},q){const D=s(),E=l(P),F=o(C,H),G=t??D.size??"md",L=m??D.color??"primary",A=p(_),I=T??A,J=I?"danger":L,K=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(c.Root,{ref:q,className:d(x,b[G],E?v:R?j:w,$?.control),disabled:E,readOnly:R,"aria-label":C,"aria-labelledby":F.labelledBy,...O,children:a(c.Thumb,{className:`${y} ${g[G]}`})})}),M=k||N?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===B?"flex-1":""].filter(Boolean).join(" "),children:[k?a(i.Label,{className:d(E?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",$?.label),children:k}):null,N?a(i.Description,{className:d(h(G),$?.description),children:N}):null]}):null;return e(i.Root,{disabled:E,invalid:I,className:["inline-flex flex-col gap-1 align-top",S??""].filter(Boolean).join(" "),style:{...n(J,0,"solid"),...z},children:[a("div",{className:`flex items-start gap-2.5 ${u[G]}`,children:e(r,"start"===B?{children:[M,K]}:{children:[K,M]})}),a(i.Error,A?{match:!0,className:d(f[G],"text-(--p-accent)",$?.error),children:_}:{className:d(f[G],"text-(--p-accent)",$?.error)}),F.node]})});

package/dist/components/table/PlTable.d.ts

@@ -55,6 +55,16 @@ export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.Component
     getRowKey?: (row: Row, index: number) => React.Key;
     /** Shown above the grid, and read out as the table's accessible name. */
     caption?: React.ReactNode;
+    /**
+     * The table's accessible name when there is no `caption` — "Invoices",
+     * "Exchange rates".
+     *
+     * It names the `<table>`, and the box the grid scrolls in too: a grid wider
+     * than its sheet, or taller than `maxHeight`, is a tab stop while it
+     * scrolls, and a stop is announced by its name. A caption is that name when
+     * there is one, and this is not read then.
+     */
+    label?: string;
     /**
      * What to show instead of rows when `rows` is empty.
      * @default 'No data'
@@ -109,4 +119,4 @@ export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.Component
  * the API. `ref` is not offered rather than being offered with `Row` widened to
  * `any`.
  */
-export declare function PlTable<Row>({ variant, size, color, density, elevation, columns, rows, getRowKey, caption, empty, striped, hoverable, stickyHeader, maxHeight, onRowClick, className, style, ...props }: PlTableProps<Row>): React.JSX.Element;
+export declare function PlTable<Row>({ variant, size, color, density, elevation, columns, rows, getRowKey, caption, label, empty, striped, hoverable, stickyHeader, maxHeight, onRowClick, className, style, ...props }: PlTableProps<Row>): React.JSX.Element;

package/dist/components/table/PlTable.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{controlTextLeadingClasses as r,metaTextClasses as a,paddingXValues as l,radiusClasses as o,sheetRestClasses as s,srOnlyClasses as n,surfaceSlots as i}from"../../internal/styles.js";import{cellPaddingYValues as d,clickableRowClasses as c,headRule as p,rowClasses as m,rowRule as h,tableStyle as g}from"../../internal/table.js";export function PlTable({variant:y="glass",size:v="md",color:f="primary",density:u="default",elevation:x=0,columns:b,rows:w,getRowKey:k,caption:N,empty:j="No data",striped:B=!1,hoverable:$=!1,stickyHeader:A=!1,maxHeight:C,onRowClick:H,className:T,style:z,...D}){const K=l[u][v],R=d[u][v],S=Boolean(H),E=$||S,I=void 0!==C,P={padding:`${R} ${K}`,border:0,background:"none"},q={...P,...A?{boxShadow:"inset 0 -1px 0 var(--plass-border)"}:{borderBottom:p},...A?{background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:null},bodyCellStyle=e=>0===e?P:{...P,borderTop:h};return t("div",{className:["overflow-hidden",o[v],s[y],T??""].filter(Boolean).join(" "),style:{...i(f,x),...z},...D,children:[N?e("div",{"aria-hidden":"true",className:`${a[v]} font-semibold text-(--plass-muted-fg)`,style:{...P,borderBottom:h,textAlign:"start"},children:N}):null,e("div",{className:["overflow-x-auto",I?"overflow-y-auto overscroll-contain":""].filter(Boolean).join(" "),style:I?{maxHeight:C}:void 0,children:t("table",{className:`text-start ${r[v]} text-(--plass-fg)`,style:g,children:[N?e("caption",{className:n,children:N}):null,e("colgroup",{children:b.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:b.map(t=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--plass-muted-fg)",A?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...q,textAlign:t.align??"start"},children:t.header??t.key},t.key))})}),e("tbody",{children:0===w.length?e("tr",{className:m,children:e("td",{colSpan:b.length,className:"text-(--plass-muted-fg)",style:{...P,padding:`2rem ${K}`,textAlign:"center"},children:j})}):w.map((t,r)=>e("tr",{className:[m,B&&r%2==1?"[--p-row:var(--plass-stripe)]":"",E?"hover:[--p-row:var(--p-soft)]":"",S?c:""].filter(Boolean).join(" "),style:{backgroundColor:"var(--p-row)"},tabIndex:S?0:void 0,onClick:H?()=>H(t,r):void 0,onKeyDown:H?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),H(t,r)))}:void 0,children:b.map(a=>e("td",{style:{...bodyCellStyle(r),textAlign:a.align??"start"},children:a.render?a.render(t,r):t[a.key]},a.key))},k?k(t,r):r))})]})})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{controlTextLeadingClasses as a,metaTextClasses as r,paddingXValues as l,radiusClasses as o,sheetRestClasses as s,surfaceSlots as n}from"../../internal/styles.js";import{PlassTableScroll as i}from"../../internal/table-scroll.js";import{cellPaddingYValues as d,clickableRowClasses as c,headRule as p,rowClasses as m,rowRule as h,tableStyle as g}from"../../internal/table.js";export function PlTable({variant:y="glass",size:v="md",color:f="primary",density:b="default",elevation:u=0,columns:x,rows:w,getRowKey:k,caption:j,label:N,empty:B="No data",striped:$=!1,hoverable:A=!1,stickyHeader:C=!1,maxHeight:H,onRowClick:S,className:T,style:z,...D}){const K=l[b][v],R=d[b][v],E=Boolean(S),I=A||E,P=void 0!==H,q={padding:`${R} ${K}`,border:0,background:"none"},F={...q,...C?{boxShadow:"inset 0 -1px 0 var(--plass-border)"}:{borderBottom:p},...C?{background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:null},bodyCellStyle=e=>0===e?q:{...q,borderTop:h};return t("div",{className:["overflow-hidden",o[v],s[y],T??""].filter(Boolean).join(" "),style:{...n(f,u),...z},...D,children:[j?e("div",{"aria-hidden":"true",className:`${r[v]} font-semibold text-(--plass-muted-fg)`,style:{...q,borderBottom:h,textAlign:"start"},children:j}):null,t(i,{className:["overflow-x-auto",P?"overflow-y-auto overscroll-contain":""].filter(Boolean).join(" "),style:P?{maxHeight:H}:void 0,tableClassName:`text-start ${a[v]} text-(--plass-fg)`,tableStyle:g,caption:j,label:N,children:[e("colgroup",{children:x.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:x.map(t=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--plass-muted-fg)",C?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...F,textAlign:t.align??"start"},children:t.header??t.key},t.key))})}),e("tbody",{children:0===w.length?e("tr",{className:m,children:e("td",{colSpan:x.length,className:"text-(--plass-muted-fg)",style:{...q,padding:`2rem ${K}`,textAlign:"center"},children:B})}):w.map((t,a)=>e("tr",{className:[m,$&&a%2==1?"[--p-row:var(--plass-stripe)]":"",I?"hover:[--p-row:var(--p-soft)]":"",E?c:""].filter(Boolean).join(" "),style:{backgroundColor:"var(--p-row)"},tabIndex:E?0:void 0,onClick:S?()=>S(t,a):void 0,onKeyDown:S?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),S(t,a)))}:void 0,children:x.map(r=>e("td",{style:{...bodyCellStyle(a),textAlign:r.align??"start"},children:r.render?r.render(t,a):t[r.key]},r.key))},k?k(t,a):a))})]})]})}

package/dist/components/tabs/PlTabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassOrientation, PlassOverscroll, PlassResponsive, PlassStyleProps, PlassVariant } from '../../types.js';
+import type { PlassAlign, PlassOrientation, PlassOverscroll, PlassResponsive, PlassStyleProps, PlassVariant } from '../../types.js';
 /** A tab's value. The same restraint `PlSelect` puts on its own — an identifier. */
 export type PlTabValue = string | number;
 export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
@@ -43,6 +43,23 @@ export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<Reac
      * @default true
      */
     loopFocus?: boolean;
+    /**
+     * Where each tab's label sits inside the tab, once the tab is wider than the
+     * label is.
+     *
+     * Which is the part worth saying: this moves the words, never the tabs. A
+     * horizontal bar sizes every tab to its own label, so there is no room for a
+     * label to move in and nothing changes — it takes effect on a `vertical` bar,
+     * whose tabs are all as wide as the widest, and on a `fullWidth` one, whose
+     * tabs are all an equal share of the bar. `start` is what a bar down the side
+     * of a settings page usually wants, so the names line up as a list rather
+     * than drifting around a centre line.
+     *
+     * Logical, not physical: `start` is the left under `ltr` and the right under
+     * `rtl`, and an icon beside the label travels with it.
+     * @default 'center'
+     */
+    align?: PlassAlign;
     /** The tabs share the bar's full width, each taking an equal part of it. */
     fullWidth?: boolean;
     /**

package/dist/components/tabs/PlTabs.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as r,focusRingClasses as i,focusRingInsetClasses as n,forcedFieldEdgeClasses as c,forcedFillClasses as d,gapClasses as f,glassClasses as h,hasContent as u,iconClasses as p,paddingXClasses as v,radiusClasses as b,surfaceSlots as m,transitionClasses as g}from"../../internal/styles.js";import{useResponsiveValue as x}from"../../internal/responsive.js";import{overscrollClasses as w,useWheelScroll as y}from"../../internal/wheel.js";const z=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),j={solid:{horizontal:`${h} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`,vertical:`${h} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},P={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},N={solid:`${h} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},T="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:i,endIcon:c,disabled:d=!1,className:h,children:m,...x},w){const{variant:y,size:j,density:P,fullWidth:N}=a.useContext(z);return t(o.Tab,{ref:w,value:l,disabled:d,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",s[j],r[j],f[j],v[P][j],"solid"===y?b[j]:"",g,p,T,"solid"===y?"forced-colors:data-[active]:[color:HighlightText]":"",n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",N?"flex-1":"",h??""].filter(Boolean).join(" "),...x,children:[u(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,m,u(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:s,children:r,...n},c){const{size:d}=a.useContext(z);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",i,b[d],s??""].filter(Boolean).join(" "),...n,children:r})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:s="glass",size:r,color:i,density:n,value:c,defaultValue:f,onValueChange:h,orientation:u,activateOnFocus:p=!1,loopFocus:v=!0,fullWidth:g=!1,wheel:T=!0,overscroll:k="contain",className:C,style:R,children:S,...V},W){const E=x(u,"horizontal"),F=l(),O=r??F.size??"md",$=i??F.color??"primary",B=n??F.density??"default",L=a.useMemo(()=>({variant:s,size:O,density:B,orientation:E,fullWidth:g}),[s,O,B,E,g]),M=a.useRef(null),I="horizontal"===E,H=function useListOverflow(e,t){const[l,o]=a.useState({start:!1,end:!1,rtl:!1}),s=a.useCallback(()=>{const t=e.current;if(!t)return;const a=t.scrollWidth-t.clientWidth,l=Math.abs(t.scrollLeft),s={start:l>1,end:a-l>1,rtl:"rtl"===getComputedStyle(t).direction};o(e=>e.start===s.start&&e.end===s.end&&e.rtl===s.rtl?e:s)},[e]);return a.useLayoutEffect(()=>{t&&s()}),a.useEffect(()=>{const a=e.current;if(!a||!t||"undefined"==typeof ResizeObserver)return;const l=new ResizeObserver(s);return l.observe(a),()=>l.disconnect()},[t,s,e]),t?{style:{"--p-fade-left":(l.rtl?l.end:l.start)?"var(--p-fade)":void 0,"--p-fade-right":(l.rtl?l.start:l.end)?"var(--p-fade)":void 0},onScroll:s,state:l.start?l.end?"both":"start":l.end?"end":"none"}:{style:void 0,onScroll:void 0,state:void 0}}(M,I);y(M,{enabled:T&&I,overscroll:k});const q=[],A=[],sort=e=>{a.Children.forEach(e,e=>{a.isValidElement(e)&&e.type===a.Fragment?sort(e.props.children):a.isValidElement(e)&&e.type===PlTabPanel?A.push(e):null!=e&&!1!==e&&q.push(e)})};return sort(S),e(z.Provider,{value:L,children:t(o.Root,{ref:W,value:c,defaultValue:f,onValueChange:e=>h?.(e),orientation:E,className:["flex min-w-0","vertical"===E?"flex-row gap-4":"flex-col gap-4",C??""].filter(Boolean).join(" "),style:{...m($,0),...R},...V,children:[t(o.List,{ref:M,activateOnFocus:p,loopFocus:v,className:["relative shrink-0",j[s][E],"solid"===s?b[O]:"",g&&I?"w-full":"",I?"plass-fade-x overflow-x-auto overflow-y-hidden":"",I?w(k,!0):""].filter(Boolean).join(" "),style:H.style,onScroll:H.onScroll,"data-overflow":H.state,children:[q,e(o.Indicator,{className:["pointer-events-none",P[s][E],N[s],d,"solid"===s?b[O]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),A]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as r}from"@base-ui/react/tabs";import{useDirection as o}from"@base-ui/react/direction-provider";import{useDocumentDirection as s}from"../../internal/direction.js";import{controlHeightClasses as n,controlTextClasses as i,focusRingClasses as c,focusRingInsetClasses as d,forcedFieldEdgeClasses as u,forcedFillClasses as f,gapClasses as h,glassClasses as p,hasContent as v,iconClasses as b,paddingXClasses as m,radiusClasses as g,surfaceSlots as w,transitionClasses as x}from"../../internal/styles.js";import{useResponsiveValue as y}from"../../internal/responsive.js";import{overscrollClasses as z,useWheelScroll as j}from"../../internal/wheel.js";const T=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",align:"center",fullWidth:!1}),P={solid:{horizontal:`${p} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${u}`,vertical:`${p} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${u}`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},k={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},N={solid:`${p} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},C="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)",R={start:"justify-start",center:"justify-center",end:"justify-end"};export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:o,endIcon:s,disabled:c=!1,className:u,children:f,...p},w){const{variant:y,size:z,density:j,align:P,fullWidth:k}=a.useContext(T);return t(r.Tab,{ref:w,value:l,disabled:c,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center select-none p-0",R[P],"font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",n[z],i[z],h[z],m[j][z],"solid"===y?g[z]:"",x,b,C,"solid"===y?"forced-colors:data-[active]:[color:HighlightText]":"",d,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",k?"flex-1":"",u??""].filter(Boolean).join(" "),...p,children:[v(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null,f,v(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:o,children:s,...n},i){const{size:d}=a.useContext(T);return e(r.Panel,{ref:i,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",c,g[d],o??""].filter(Boolean).join(" "),...n,children:s})});function movesTheStrip(e,t){return e.some(e=>!(e.target===t&&"style"===e.attributeName))}export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:n="glass",size:i,color:c,density:d,value:u,defaultValue:h,onValueChange:p,orientation:v,align:b="center",activateOnFocus:m=!1,loopFocus:x=!0,fullWidth:C=!1,wheel:R=!0,overscroll:S="contain",className:$,style:E,children:L,...F},M){const O=y(v,"horizontal"),V=l(),W=i??V.size??"md",B=c??V.color??"primary",I=d??V.density??"default",D=a.useMemo(()=>({variant:n,size:W,density:I,orientation:O,align:b,fullWidth:C}),[n,W,I,O,b,C]),H=a.useRef(null),q="horizontal"===O,A=function useListOverflow(e,t){const[l,r]=a.useState({start:!1,end:!1,rtl:!1}),n=a.useCallback(t=>{const a=e.current;if(!a)return;const l=a.scrollWidth-a.clientWidth,o=Math.abs(a.scrollLeft),s=o>1,n=l-o>1;r(e=>{const a={start:s,end:n,rtl:t??e.rtl};return e.start===a.start&&e.end===a.end&&e.rtl===a.rtl?e:a})},[e]),i=a.useCallback(()=>{const t=e.current;t&&n("rtl"===getComputedStyle(t).direction)},[e,n]),c=a.useCallback(()=>n(),[n]),d=s(),u=o();a.useLayoutEffect(()=>{t&&i()},[t,i,d,u]);const f=a.useRef(null);a.useLayoutEffect(()=>{const a=e.current;if(!a||!t)return;const l=new MutationObserver(e=>{movesTheStrip(e,a)&&i()});return l.observe(a,{subtree:!0,childList:!0,characterData:!0,attributes:!0,attributeFilter:["class","style"]}),f.current=l,()=>{l.disconnect(),f.current=null}},[t,i,e]),a.useLayoutEffect(()=>{const t=e.current,a=f.current?.takeRecords();t&&a&&movesTheStrip(a,t)&&i()}),a.useEffect(()=>{const a=e.current;if(!a||!t||"undefined"==typeof ResizeObserver)return;const l=new ResizeObserver(i);return l.observe(a),()=>l.disconnect()},[t,i,e]);const h=`${d} ${u} ${l.rtl}`;return t?{style:{"--p-fade-left":(l.rtl?l.end:l.start)?"var(--p-fade)":void 0,"--p-fade-right":(l.rtl?l.start:l.end)?"var(--p-fade)":void 0},onScroll:c,state:l.start?l.end?"both":"start":l.end?"end":"none",turn:h}:{style:void 0,onScroll:void 0,state:void 0,turn:h}}(H,q);j(H,{enabled:R&&q,overflows:void 0!==A.state&&"none"!==A.state,overscroll:S});const G=a.useMemo(()=>e(r.Indicator,{className:["pointer-events-none",k[n][O],N[n],f,"solid"===n?g[W]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ")}),[n,O,W,A.turn]),J=[],K=[],sort=e=>{a.Children.forEach(e,e=>{a.isValidElement(e)&&e.type===a.Fragment?sort(e.props.children):a.isValidElement(e)&&e.type===PlTabPanel?K.push(e):null!=e&&!1!==e&&J.push(e)})};return sort(L),e(T.Provider,{value:D,children:t(r.Root,{ref:M,value:u,defaultValue:h,onValueChange:e=>p?.(e),orientation:O,className:["flex min-w-0","vertical"===O?"flex-row gap-4":"flex-col gap-4",$??""].filter(Boolean).join(" "),style:{...w(B,0),...E},...F,children:[t(r.List,{ref:H,activateOnFocus:m,loopFocus:x,className:["relative shrink-0",P[n][O],"solid"===n?g[W]:"",C&&q?"w-full":"",q?"plass-fade-x overflow-x-auto overflow-y-hidden":"",q?z(S,!0):""].filter(Boolean).join(" "),style:A.style,onScroll:A.onScroll,"data-overflow":A.state,children:[J,G]}),K]})})});

package/dist/components/text-field/PlTextField.d.ts

@@ -44,17 +44,15 @@ export interface PlTextFieldProps extends PlassStyleProps, NativeControlProps {
     resize?: PlTextFieldResize;
     /**
      * The name of what the field holds, wired to the control by Base UI's Field.
-     * `labelPlacement` decides whether it sits above the box or in its top edge.
-     *
-     * There is no floating variant on purpose, and a notch is not one: a floating
-     * label is animated out of the control as the caret arrives, which needs a
-     * `transform` on the thing being typed into, and a label that moves under the
-     * caret is the one effect this library rules out on a control. The notch is
-     * where it always was.
+     * `labelPlacement` decides whether it sits above the box, in its top edge, or
+     * inside it until the field is focused or filled.
      */
     label?: React.ReactNode;
     /**
-     * Where the `label` goes — above the control, or in its top edge.
+     * Where the `label` goes — above the control, in its top edge, or inside it
+     * where the value would be written until the field is focused or filled, and
+     * in its top edge from then on. With a `startIcon` a `float` label stays in
+     * the edge, because the icon is where it would rest.
      * Falls back to the nearest `PlassProvider`, then to `top`.
      * @default 'top'
      */

package/dist/components/text-field/PlTextField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as n}from"../../internal/defaults.js";import{Field as r}from"@base-ui/react/field";import{Input as s}from"@base-ui/react/input";import{Spinner as i}from"../../internal/icons.js";import{glowPointerMove as a}from"../../internal/glow.js";import{FieldNotch as o,notchShellStyle as c}from"../../internal/notch.js";import{hotKeyHandler as m}from"../../internal/keys.js";import{controlHeightClasses as d,controlTextLeadingClasses as p,cx as f,disabledClasses as u,fieldReadOnlyClasses as x,fieldRestClasses as h,focusWithinRingClasses as g,gapClasses as y,hasContent as b,iconClasses as $,metaTextClasses as w,paddingXClasses as j,radiusClasses as v,stackGapClasses as N,surfaceSlots as z,transitionClasses as P}from"../../internal/styles.js";const k={xs:`${y.xs} ${v.xs} ${p.xs}`,sm:`${y.sm} ${v.sm} ${p.sm}`,md:`${y.md} ${v.md} ${p.md}`,lg:`${y.lg} ${v.lg} ${p.lg}`,xl:`${y.xl} ${v.xl} ${p.xl}`},D={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},K={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},O=/* @__PURE__ */["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",P,$].join(" "),R=g,T=h,B=x;export const PlTextField=/* @__PURE__ */l.forwardRef(function PlTextField({variant:p="glass",size:x,color:h,density:g,elevation:y=0,multiline:$=!1,rows:v=3,resize:P="vertical",label:F,labelPlacement:I,description:C,error:E,invalid:L,startIcon:M,endIcon:W,loading:q=!1,fullWidth:A=!1,readOnly:G=!1,disabled:H=!1,type:J="text",hotKeys:Q,onKeyDown:S,className:U,classNames:V,style:X,...Y},Z){const _=n(),ee=x??_.size??"md",te=h??_.color??"primary",le=g??_.density??"default",ne="notch"===(I??_.labelPlacement??"top")&&b(F),re=b(E),se=L??re,ie=se?"danger":te,ae=l.useRef(null),oe=l.useCallback(e=>{ae.current=e,"function"==typeof Z?Z(e):Z&&(Z.current=e)},[Z]),ce=!H&&!G,me=[O,ne?"":R,k[ee],$?`${D[ee]} items-start`:`${d[ee]} items-center`,j[le][ee],H?u[p]:G?B[p]:T[p],ce?"plass-glow":""].filter(Boolean).join(" "),de=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",$?`block ${K[P]}`:"self-stretch"].join(" "),pe="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg) transition-[color] duration-(--plass-duration) group-focus-within:text-(--p-accent)",fe=e(r.Label,{className:f(w[ee],"font-semibold",H?"text-(--plass-muted-fg)":"text-(--plass-fg)",V?.label),children:F});return t(r.Root,{disabled:H,invalid:se,className:["flex-col align-top",N[ee],A?"flex w-full":"inline-flex",U??""].filter(Boolean).join(" "),style:{...z(ie,y),...X},children:[b(F)&&!ne?fe:null,e(o,{notched:ne,size:ee,density:le,variant:p,disabled:H,readOnly:G,label:fe,children:t("span",{className:f(me,V?.control),style:ne?c:void 0,onPointerMove:a(ce),onPointerDown:e=>{e.target!==e.currentTarget||H||(e.preventDefault(),ae.current?.focus())},children:[M?e("span",{className:pe,children:M}):null,e(s,{ref:oe,className:de,disabled:H,readOnly:G,"aria-busy":q||void 0,"data-loading":q||void 0,onKeyDown:m(Q,S),...$?{render:e("textarea",{rows:v})}:{type:J},...Y}),q?e("span",{className:pe,children:e(i,{})}):W?e("span",{className:pe,children:W}):null]})}),C?e(r.Description,{className:f("m-0",w[ee],"text-(--plass-muted-fg)",V?.description),children:C}):null,e(r.Error,re?{match:!0,className:f(w[ee],"text-(--p-accent)",V?.error),children:E}:{className:f(w[ee],"text-(--p-accent)",V?.error)})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{controlNaming as r,useDisabled as n}from"../../internal/form.js";import{useDefaults as a}from"../../internal/defaults.js";import{ownsPress as s}from"../../internal/focusable.js";import{Field as i}from"@base-ui/react/field";import{Input as o}from"@base-ui/react/input";import{Spinner as c}from"../../internal/icons.js";import{useFieldLight as m}from"../../internal/glow.js";import{FieldNotch as d,floatControlClassName as p,notchShellStyle as f,resolveNotch as x}from"../../internal/notch.js";import{hotKeyHandler as u}from"../../internal/keys.js";import{controlHeightClasses as h,controlTextLeadingClasses as y,cx as b,disabledClasses as g,fieldDescriptionClasses as $,fieldReadOnlyClasses as j,fieldRestClasses as w,fieldSlots as v,focusWithinRingClasses as N,gapClasses as z,hasContent as k,iconClasses as D,metaTextClasses as P,paddingXClasses as K,radiusClasses as O,stackGapClasses as R,transitionClasses as T}from"../../internal/styles.js";const B={xs:`${z.xs} ${O.xs} ${y.xs}`,sm:`${z.sm} ${O.sm} ${y.sm}`,md:`${z.md} ${O.md} ${y.md}`,lg:`${z.lg} ${O.lg} ${y.lg}`,xl:`${z.xl} ${O.xl} ${y.xl}`},F={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},I={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},C=/* @__PURE__ */["relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",T,D].join(" "),E=N,L=w,W=j;export const PlTextField=/* @__PURE__ */t.forwardRef(function PlTextField({variant:y="glass",size:j,color:w,density:N,elevation:z=0,multiline:D=!1,rows:O=3,resize:T="vertical",label:q,labelPlacement:A,description:G,error:H,invalid:J,startIcon:M,endIcon:Q,loading:S=!1,fullWidth:U=!1,readOnly:V=!1,disabled:X=!1,type:Y="text",placeholder:Z,hotKeys:_,onKeyDown:ee,className:le,classNames:te,style:re,"aria-label":ne,"aria-labelledby":ae,...se},ie){const oe=a(),ce=n(X),me=j??oe.size??"md",de=w??oe.color??"primary",pe=N??oe.density??"default",fe=A??oe.labelPlacement??"top",{notched:xe,float:ue}=x(fe,q,k(M)),he=k(H),ye=J??he,be=ye?"danger":de,ge=t.useRef(null),$e=t.useCallback(e=>{ge.current=e,"function"==typeof ie?ie(e):ie&&(ie.current=e)},[ie]),je=!ce&&!V,we=m(je),ve=[C,xe?"":E,B[me],D?`${F[me]} items-start`:`${h[me]} items-center`,K[pe][me],ce?g[y]:V?W[y]:L[y],je?"plass-glow":""].filter(Boolean).join(" "),Ne=["min-w-0 flex-1 bg-transparent p-0 [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",D?`block ${I[T]}`:"self-stretch",ue?p:""].join(" "),ze="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",ke=e(i.Label,{className:b(P[me],"font-semibold",ce?"text-(--plass-muted-fg)":"text-(--plass-fg)",te?.label),children:q});return l(i.Root,{disabled:ce,invalid:ye,className:["flex-col align-top",R[me],U?"flex w-full":"inline-flex",le??""].filter(Boolean).join(" "),style:{...v(be,z),...re},children:[k(q)&&!xe?ke:null,e(d,{notched:xe,size:me,density:pe,variant:y,disabled:ce,readOnly:V,float:ue,label:ke,children:l("span",{className:b(ve,te?.control),style:xe?f:void 0,...we,onPointerDown:e=>{ce||s(e.target,e.currentTarget,ge.current)||(e.preventDefault(),ge.current?.focus())},children:[M?e("span",{className:ze,children:M}):null,e(o,{ref:$e,className:Ne,disabled:ce,readOnly:V,"aria-busy":S||void 0,"data-loading":S||void 0,onKeyDown:u(_,ee),placeholder:ue?Z||" ":Z,...D?{render:e("textarea",{rows:O})}:{type:Y},...r(ne,ae),...se}),S?e("span",{className:ze,children:e(c,{})}):Q?e("span",{className:ze,children:Q}):null]})}),G?e(i.Description,{className:b($(me),te?.description),children:G}):null,e(i.Error,he?{match:!0,className:b(P[me],"text-(--p-accent)",te?.error),children:H}:{className:b(P[me],"text-(--p-accent)",te?.error)})]})});

package/dist/components/text-link/PlTextLink.js

@@ -1 +1 @@
-"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as l}from"../../internal/labels.js";import{useRender as i}from"@base-ui/react/use-render";import{ExternalLinkIcon as a,LinkIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as t,focusRingClasses as c,srOnlyClasses as p}from"../../internal/styles.js";import{safeRel as m}from"../../internal/link.js";const d={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},u=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:c,underline:f="always",color:h,size:v,newTab:k=!1,icon:b,startIcon:g,newTabLabel:j,render:x,className:y,style:w,children:_,...N},T){const L=l(),z=j??L.newTab,C=b??k,P=!0===C?n(k?a:o,{}):C,$=[u,v?t[v]:"",d[f],h?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",y??""].filter(Boolean).join(" "),B={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${h??"primary"}-ring)`,...h?{"--p-accent":`var(--plass-${h}-accent)`}:null},E=s.isValidElement(x)&&void 0!==x.props.href,{rel:F,target:I,...R}=N,V=I??(k?"_blank":void 0),q=k||"_blank"===V,A=m(V,F);return i({render:x??n("a",{}),ref:T,props:{...E?null:{href:c},target:V,className:$,style:{...B,...w},children:r(e,{children:[g?n("span",{className:"me-[0.25em]",children:g}):null,_,P?n("span",{className:"ms-[0.25em]",children:P}):null,q?r(e,{children:[" ",n("span",{className:p,children:z})]}):null]}),...R,rel:A}})});
+"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as i}from"../../internal/labels.js";import{useRender as l}from"@base-ui/react/use-render";import{ExternalLinkIcon as a,LinkIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as t,focusRingClasses as c,srOnlyClasses as p}from"../../internal/styles.js";import{safeRel as m}from"../../internal/link.js";const d={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},u=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0 [&_svg]:align-middle",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:s,underline:c="always",color:f,size:v,newTab:h=!1,icon:k,startIcon:g,newTabLabel:b,render:j,className:x,style:y,children:_,...w},N){const T=i(),L=b??T.newTab,z=k??h,C=!0===z?n(h?a:o,{}):z,P=[u,v?t[v]:"",d[c],f?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",x??""].filter(Boolean).join(" "),$={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${f??"primary"}-ring)`,...f?{"--p-accent":`var(--plass-${f}-accent)`}:null},{rel:B,target:F,...I}=w,R=F??(h?"_blank":void 0),q=h||"_blank"===R,A=m(R,B);return l({render:j??n("a",{}),ref:N,props:{href:s,target:R,className:P,style:{...$,...y},children:r(e,{children:[g?n("span",{className:"me-[0.25em]",children:g}):null,_,C?n("span",{className:"ms-[0.25em]",children:C}):null,q?r(e,{children:[" ",n("span",{className:p,children:L})]}):null]}),...I,rel:A}})});

package/dist/components/time-picker/PlTimePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{useDefaults as l}from"../../internal/defaults.js";import{PlButton as t}from"../button/PlButton.js";import{TimeGrid as s,usePickerLabels as r}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{displaySamples as d,formatDate as u,isHour12 as m,isValidDate as p,secondsOfDay as h,timeUnitSpan as f,toISOTime as g,withPlaceholder as y,withTime as S}from"../../internal/date.js";import{cx as b}from"../../internal/styles.js";export const PlTimePicker=/* @__PURE__ */n.forwardRef(function PlTimePicker({value:j,defaultValue:v,onValueChange:C,open:w,defaultOpen:z,onOpenChange:k,referenceDate:x,minTime:D,maxTime:O,shouldDisableTime:T,hour12:P,showSeconds:M=!1,hourStep:V=1,minuteStep:B=1,secondStep:I=1,locale:N,format:R,placeholder:F,clearable:H=!1,showNowButton:q=!0,closeOnSelect:A=!1,labels:E,name:G,size:J,color:K,density:L,readOnly:Q=!1,disabled:U=!1,startIcon:W,...X},Y){const Z=l(),$=N??Z.locale,_=J??Z.size??"md",ee=K??Z.color??"primary",oe=L??Z.density??"default",ne=r(E),le=P??m($),[te,se]=n.useState(v??null),re=void 0!==j?j:te,[ae,ie]=n.useState(z??!1),ce=w??ae,[de]=n.useState(()=>x??new Date),setOpen=e=>{e&&(Q||U)||(void 0===w&&ie(e),k?.(e))},commit=e=>{void 0===j&&se(e),C?.(e)},ue=n.useCallback((e,o)=>{const[n,l]=f(o,e);return!!(p(D)&&l<h(D))||!!(p(O)&&n>h(O))||(T?.(e,o)??!1)},[D,O,T]),me=n.useMemo(()=>R??{hour:"numeric",minute:"2-digit",...M?{second:"2-digit"}:{}},[R,M]),pe=new Date,he=S(x??de,{hours:pe.getHours(),minutes:pe.getMinutes(),seconds:M?pe.getSeconds():0}),fe=q||H||!A,ge=n.useMemo(()=>y(d($,me),F),[$,me,F]);return e(c,{...X,size:_,color:ee,density:oe,readOnly:Q,disabled:U,triggerRef:Y,startIcon:W??e(a,{}),display:p(re)?u(re,$,me):F??"",samples:ge,empty:!p(re),clearable:H,onClear:()=>commit(null),open:ce,onOpenChange:setOpen,labels:ne,name:G,formValue:p(re)?g(re,M):"",children:o("div",{className:b("flex flex-col",fe&&"gap-1.5"),children:[e(s,{size:_,density:oe,locale:$,value:p(re)?re:null,referenceDate:x??de,onChange:e=>{commit(e),A&&setOpen(!1)},hour12:le,showSeconds:M,hourStep:V,minuteStep:B,secondStep:I,shouldDisableTime:ue,labels:ne,autoFocus:!0}),fe?o(i,{size:_,children:[H?e(t,{variant:"ghost",size:_,color:ee,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:ne.clear}):null,q?e(t,{variant:"ghost",size:_,color:ee,density:"compact",disabled:ue(he,"second"),onClick:()=>{commit(he),setOpen(!1)},children:ne.now}):null,A?null:e(t,{variant:"solid",size:_,color:ee,density:"compact",onClick:()=>setOpen(!1),children:ne.done})]}):null]})})});
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{useDefaults as l,useLocale as t}from"../../internal/defaults.js";import{PlButton as s}from"../button/PlButton.js";import{TimeGrid as r,usePickerLabels as i}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as c,PickerShell as d}from"../../internal/picker.js";import{displaySamples as u,formatDate as m,isHour12 as p,isValidDate as h,secondsOfDay as f,timeUnitSpan as g,toISOTime as y,withPlaceholder as S,withTime as b}from"../../internal/date.js";import{cx as j}from"../../internal/styles.js";export const PlTimePicker=/* @__PURE__ */o.forwardRef(function PlTimePicker({value:v,defaultValue:C,onValueChange:w,open:z,defaultOpen:k,onOpenChange:x,referenceDate:D,minTime:O,maxTime:T,shouldDisableTime:P,hour12:M,showSeconds:V=!1,hourStep:B=1,minuteStep:I=1,secondStep:N=1,locale:R,format:F,placeholder:H,clearable:q=!1,showNowButton:A=!0,closeOnSelect:E=!1,labels:G,name:J,size:K,color:L,density:Q,readOnly:U=!1,disabled:W=!1,startIcon:X,...Y},Z){const $=l(),_=t(R),ee=K??$.size??"md",ne=L??$.color??"primary",oe=Q??$.density??"default",le=i(G),te=M??p(_),[se,re]=o.useState(C??null),ie=void 0!==v?v:se,[ae,ce]=o.useState(k??!1),de=z??ae,[ue]=o.useState(()=>D??new Date),setOpen=e=>{e&&(U||W)||(void 0===z&&ce(e),x?.(e))},commit=e=>{void 0===v&&re(e),w?.(e)},me=o.useCallback((e,n)=>{const[o,l]=g(n,e);return!!(h(O)&&l<f(O))||!!(h(T)&&o>f(T))||(P?.(e,n)??!1)},[O,T,P]),pe=o.useMemo(()=>F??{hour:"numeric",minute:"2-digit",...V?{second:"2-digit"}:{}},[F,V]),he=new Date,fe=b(D??ue,{hours:he.getHours(),minutes:he.getMinutes(),seconds:V?he.getSeconds():0}),ge=A||q||!E,ye=o.useMemo(()=>S(u(_,pe),H),[_,pe,H]);return e(d,{...Y,size:ee,color:ne,density:oe,readOnly:U,disabled:W,triggerRef:Z,startIcon:X??e(a,{}),display:h(ie)?m(ie,_,pe):H??"",samples:ye,empty:!h(ie),clearable:q,onClear:()=>commit(null),open:de,onOpenChange:setOpen,labels:le,name:J,formValue:h(ie)?y(ie,V):"",children:n("div",{className:j("flex flex-col",ge&&"gap-1.5"),children:[e(r,{size:ee,density:oe,locale:_,value:h(ie)?ie:null,referenceDate:D??ue,onChange:e=>{commit(e),E&&setOpen(!1)},hour12:te,showSeconds:V,hourStep:B,minuteStep:I,secondStep:N,shouldDisableTime:me,labels:le,autoFocus:!0}),ge?n(c,{size:ee,children:[q?e(s,{variant:"ghost",size:ee,color:ne,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:le.clear}):null,A?e(s,{variant:"ghost",size:ee,color:ne,density:"compact",disabled:me(fe,"second"),onClick:()=>{commit(fe),setOpen(!1)},children:le.now}):null,E?null:e(s,{variant:"solid",size:ee,color:ne,density:"compact",onClick:()=>setOpen(!1),children:le.done})]}):null]})})});

package/dist/components/timeline-chart/PlTimelineChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as a,markTransitionClasses as o}from"../../internal/chart-frame.js";import{barBandRatio as r,barMaxThickness as s,barRadius as l,formatTimeTicks as i,formatTimeValue as c,markGap as m,resolveColor as d,seriesColor as u,timeNeedsDate as h,timeScale as p,toNumber as x}from"../../internal/chart.js";import{srOnlyClasses as f}from"../../internal/styles.js";import{useDefaults as M}from"../../internal/defaults.js";import{useLabels as b}from"../../internal/labels.js";export function PlTimelineChart({series:n,min:o,max:l,barSize:d,rounded:f=!0,size:b,density:k,xAxis:y,yAxis:w,locale:g,...j}){const v=M(),$=b??v.size??"md",C=k??v.density??"default",T=g??v.locale,z=t.useMemo(()=>n.map(packRow),[n]),A=t.useMemo(()=>z.map(e=>e.spans),[z]),P=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const a of A)for(const o of a)o&&(t=!0,e=Math.min(e,o.from),n=Math.max(n,o.to));return t?{min:e,max:n}:null},[A]),W=t.useMemo(()=>p(P,{min:x(o)??void 0,max:x(l)??void 0,tickCount:w?.tickCount}),[P,o,l,w?.tickCount]),E=t.useMemo(()=>i(W.ticks,W.unit,T),[W,T]),R=h(W.ticks,W.unit),S=t.useMemo(()=>n.map((e,n)=>u(e,n)),[n]),B=t.useMemo(()=>[{data:A.map(e=>e.some(Boolean)?1:null)}],[A]),D=t.useMemo(()=>n.map((e,n)=>e.name??`${n+1}`),[n]),I=d??s[$],N=t.useCallback(e=>{const n=[];return z.forEach((t,a)=>{const o=Math.min(I,Math.max(1,(e.band.band-m*(t.lanes-1))/t.lanes)),r=o*t.lanes+m*(t.lanes-1),s=e.plot.top+e.categoryPx(a)-r/2+o/2;t.spans.forEach((t,r)=>{if(!t||!inWindow(t,e.scale))return;const l=e.valuePx(Math.max(t.from,e.scale.min)),i=e.valuePx(Math.min(t.to,e.scale.max));n.push({series:a,index:r,x:(l+i)/2,y:s+t.lane*(o+m),r:o/2,rx:Math.max(0,(i-l)/2),ry:o/2})})}),n},[z,I]),F=t.useCallback(e=>{const n=A[e.series]?.[e.index];if(!n)return null;const t=[{seriesIndex:e.series,name:D[e.series],color:n.color??S[e.series],value:n.to-n.from,formatted:`${c(n.from,W.unit,T,R)} – ${c(n.to,W.unit,T,R)}`}];return{heading:n.span.label??D[e.series],items:t}},[A,D,S,W.unit,T,R]);return e(a,{...j,series:B,categories:D,size:$,density:C,locale:T,horizontal:!0,scale:W,xAxis:y,yAxis:{tickFormat:(e,n)=>E[n]??"",...w},legend:!1,bandRatio:r[C],marks:N,markTooltip:F,table:t=>e(TimelineTable,{id:t,names:D,series:n,spans:A,scale:W,withDate:R,label:j.label,corner:y?.label,locale:T}),children:n=>e(Spans,{context:n,spans:A,colors:S,rounded:f})})}function packRow(e){const n=e.data.map(e=>{const n=x(e.start),t=x(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?d(e.color):void 0,span:e}}),t=[];return n.map((e,n)=>({one:e,index:n})).filter(e=>Boolean(e.one)).sort((e,n)=>e.one.from-n.one.from).forEach(({one:e})=>{const n=t.findIndex(n=>n<=e.from),a=-1===n?t.length:n;t[a]=e.to,e.lane=a}),{spans:n,lanes:Math.max(1,t.length)}}function inWindow(e,n){return e.to>=n.min&&e.from<=n.max}function Spans({context:n,spans:t,colors:a,rounded:r}){const{marks:s,activeMark:i}=n,c=r?l:0;return e("g",{children:s.map(n=>{const r=t[n.series]?.[n.index];if(!r)return null;const s=i?.series===n.series&&i?.index===n.index,l=n.rx??n.r,m=2*(n.ry??n.r),d=Math.max(1,2*l);return e("rect",{x:n.x-l,y:n.y-m/2,width:d,height:m,rx:Math.min(c,d/2,m/2),fill:r.color??a[n.series],opacity:s?1:.92,className:o},`${n.series}-${n.index}`)})})}function TimelineTable({id:t,names:a,series:o,spans:r,scale:s,withDate:l,label:i,corner:m,locale:d}){const u=b(),h=r.some((e,n)=>e.some((e,t)=>null!==e&&inWindow(e,s)&&void 0!==o[n].data[t]?.label));return n("table",{id:t,className:f,children:[i?e("caption",{children:i}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:m??""}),h?e("th",{scope:"col",children:"label"}):null,e("th",{scope:"col",children:u.start}),e("th",{scope:"col",children:u.end})]})}),e("tbody",{children:r.flatMap((t,r)=>t.map((t,i)=>t&&inWindow(t,s)?n("tr",{children:[e("th",{scope:"row",children:a[r]}),h?e("td",{children:o[r].data[i]?.label??""}):null,e("td",{children:c(t.from,s.unit,d,l)}),e("td",{children:c(t.to,s.unit,d,l)})]},`${r}-${i}`):null))})]})}
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as a,entryKeys as o,markTransitionClasses as r}from"../../internal/chart-frame.js";import{barBandRatio as s,barMaxThickness as i,barRadius as l,formatTimeTicks as m,formatTimeValue as c,markGap as d,resolveColor as u,seriesColor as h,timeNeedsDate as p,timeScale as x,toNumber as f}from"../../internal/chart.js";import{srOnlyClasses as M}from"../../internal/styles.js";import{textOf as b}from"../../internal/text.js";import{useDefaults as y,useLocale as k}from"../../internal/defaults.js";import{useLabels as w}from"../../internal/labels.js";export function PlTimelineChart({series:n,min:r,max:l,barSize:u,rounded:M=!0,size:w,density:v,xAxis:g,yAxis:j,locale:$,...C}){const T=y(),z=w??T.size??"md",W=v??T.density??"default",A=k($),P=t.useMemo(()=>n.map(packRow),[n]),B=t.useMemo(()=>P.map(e=>e.spans),[P]),E=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const a of B)for(const o of a)o&&(t=!0,e=Math.min(e,o.from),n=Math.max(n,o.to));return t?{min:e,max:n}:null},[B]),I=t.useMemo(()=>x(E,{min:f(r)??void 0,max:f(l)??void 0,tickCount:j?.tickCount}),[E,r,l,j?.tickCount]),R=t.useMemo(()=>m(I.ticks,I.unit,A),[I,A]),S=p(I.ticks,I.unit),D=t.useCallback(e=>c(e,I.unit,A,S),[I.unit,A,S]),N=t.useMemo(()=>n.map((e,n)=>h(e,n)),[n]),F=t.useMemo(()=>[{data:B.map(e=>e.some(Boolean)?1:null)}],[B]),V=t.useMemo(()=>n.map((e,n)=>e.name??`${n+1}`),[n]),q=t.useMemo(()=>o(n),[n]),G=t.useMemo(()=>B.map((e,n)=>{let t=1/0,a=-1/0;for(const n of e)n&&inWindow(n,I)&&(t=Math.min(t,n.from),a=Math.max(a,n.to));return{name:V[n],said:t>a?null:`${D(t)} – ${D(a)}`}}),[B,V,I,D]),H=u??i[z],J=t.useCallback(e=>{const n=[];return P.forEach((t,a)=>{const o=Math.min(H,Math.max(1,(e.band.band-d*(t.lanes-1))/t.lanes)),r=o*t.lanes+d*(t.lanes-1),s=e.plot.top+e.categoryPx(a)-r/2+o/2;t.spans.forEach((t,r)=>{if(!t||!inWindow(t,e.scale))return;const i=e.valuePx(Math.max(t.from,e.scale.min)),l=e.valuePx(Math.min(t.to,e.scale.max));n.push({series:a,index:r,key:q[a],x:(i+l)/2,y:s+t.lane*(o+d),r:o/2,rx:Math.max(0,(l-i)/2),ry:o/2})})}),n},[P,q,H]),K=t.useCallback(e=>{const n=B[e.series]?.[e.index];if(!n)return null;const t=n.span.label,a=null!=t,o={seriesIndex:e.series,color:n.color??N[e.series],value:n.to-n.from,formatted:`${c(n.from,I.unit,A,S)} – ${c(n.to,I.unit,A,S)}`};return{heading:a?t:V[e.series],items:[{...o,name:a?V[e.series]:void 0}],index:e.series,category:V[e.series],renderItems:[{...o,name:a&&b(t)||void 0}]}},[B,V,N,I.unit,A,S]);return e(a,{...C,series:F,categories:V,size:z,density:W,locale:A,horizontal:!0,scale:I,xAxis:g,yAxis:{tickFormat:(e,n)=>R[n]??"",...j},legend:!1,bandRatio:s[W],marks:J,markTooltip:K,summary:G,writeValue:D,table:(t,a)=>e(TimelineTable,{id:t,...a,names:V,series:n,spans:B,scale:I,withDate:S,corner:g?.label,locale:A}),children:n=>e(Spans,{context:n,spans:B,colors:N,rounded:M})})}function packRow(e){const n=e.data.map(e=>{const n=f(e.start),t=f(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?u(e.color):void 0,span:e}}),t=[];return n.map((e,n)=>({one:e,index:n})).filter(e=>Boolean(e.one)).sort((e,n)=>e.one.from-n.one.from).forEach(({one:e})=>{const n=t.findIndex(n=>n<=e.from),a=-1===n?t.length:n;t[a]=e.to,e.lane=a}),{spans:n,lanes:Math.max(1,t.length)}}function inWindow(e,n){return e.to>=n.min&&e.from<=n.max}function Spans({context:n,spans:t,colors:a,rounded:o}){const{marks:s,activeMark:i}=n,m=o?l:0;return e("g",{children:s.map(n=>{const o=t[n.series]?.[n.index];if(!o)return null;const s=i?.series===n.series&&i?.index===n.index,l=n.rx??n.r,c=2*(n.ry??n.r),d=Math.max(1,2*l);return e("rect",{x:n.x-l,y:n.y-c/2,width:d,height:c,rx:Math.min(m,d/2,c/2),fill:o.color??a[n.series],opacity:s?1:.92,className:r},`${n.series}-${n.index}`)})})}function TimelineTable({id:t,caption:a,labelledBy:o,names:r,series:s,spans:i,scale:l,withDate:m,corner:d,locale:u}){const h=w(),p=i.some((e,n)=>e.some((e,t)=>null!==e&&inWindow(e,l)&&void 0!==s[n].data[t]?.label));return n("table",{id:t,className:M,"aria-labelledby":o,children:[a?e("caption",{children:a}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:d??""}),p?e("th",{scope:"col",children:h.name}):null,e("th",{scope:"col",children:h.start}),e("th",{scope:"col",children:h.end})]})}),e("tbody",{children:i.flatMap((t,a)=>t.map((t,o)=>t&&inWindow(t,l)?n("tr",{children:[e("th",{scope:"row",children:r[a]}),p?e("td",{children:s[a].data[o]?.label??""}):null,e("td",{children:c(t.from,l.unit,u,m)}),e("td",{children:c(t.to,l.unit,u,m)})]},`${a}-${o}`):null))})]})}

package/dist/components/toast/PlToast.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Toast as i}from"@base-ui/react/toast";import{CloseIcon as r,severityIcon as n}from"../../internal/icons.js";import{controlSlots as l,focusRingClasses as c,forcedFieldEdgeClasses as p,glassClasses as d,hasContent as m,iconClasses as f,metaTextClasses as u,radiusClasses as h,sheetBodyClasses as g,sheetHeaderGapClasses as v,sheetPaddingXClasses as x,sheetPaddingYClasses as b,sheetSectionGapClasses as y,sheetTitleClasses as w}from"../../internal/styles.js";const j={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},N={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]",p].join(" "),glass:/* @__PURE__ */[d,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--p-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" "),ghost:/* @__PURE__ */[d,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},T={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"};function toManagerOptions(t){const{color:s,variant:e,icon:o,className:a,style:i,actionLabel:r,onAction:n,...l}=t;return{...l,data:{color:s,variant:e,icon:o,className:a,style:i},actionProps:void 0===r?void 0:{children:r,onClick:n}}}export function usePlToast(){const t=i.useToastManager();return e.useMemo(()=>({add:s=>t.add(toManagerOptions(s)),close:s=>t.close(s),update:(s,e)=>t.update(s,toManagerOptions(e)),promise:(s,e)=>t.promise(s,{loading:toManagerOptions(e.loading),success:t=>toManagerOptions("function"==typeof e.success?e.success(t):e.success),error:t=>toManagerOptions("function"==typeof e.error?e.error(t):e.error)}),toasts:t.toasts}),[t])}function ToastItem({toast:e,variant:o,color:a,size:p,density:d,closeLabel:j,swipeDirection:M}){const z=e.data?.variant??o??"glass",O=e.data?.color??a,P=void 0===e.data?.icon?n(O):e.data.icon,k=T[z],$=m(e.title);return s(i.Root,{toast:e,swipeDirection:M,className:["pointer-events-auto flex w-full items-start",x[d??"default"][p],b[d??"default"][p],h[p],y[p],g[p],N[z],f,"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",c,"[outline:none]",e.data?.className??""].filter(Boolean).join(" "),style:{...l(O,3,z),...e.data?.style},children:[m(P)?t("span",{className:`flex h-[1lh] shrink-0 items-center ${k}`,children:P}):null,s("div",{className:`flex min-w-0 flex-1 flex-col ${v[p]}`,children:[t(i.Title,{className:`plass-title m-0 font-semibold ${w[p]} ${k}`}),t(i.Description,{className:$&&"solid"!==z?"m-0 text-(--plass-muted-fg)":"m-0"})]}),t(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",k||"text-(--p-on-solid)","hover:underline",c,u[p]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(i.Close,{"aria-label":j,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",c].join(" "),children:t(r,{})})})]})}function ToastViewport(s){const{toasts:e}=i.useToastManager(),o=a(),{position:r,width:n,...l}=s,c=[r.startsWith("top")?"up":"down","left","right"];return t(i.Portal,{children:t(i.Viewport,{"aria-label":o.notifications,className:["plass-portal pointer-events-none fixed inset-x-0 z-(--plass-z-portal) flex flex-col gap-2 p-4",j[r]].join(" "),children:e.map(s=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof n?`${n}px`:n},children:t(ToastItem,{toast:s,swipeDirection:c,...l})},s.id))})})}export function PlToastProvider({variant:e="glass",size:r,color:n,density:l,position:c="bottom-end",timeout:p=5e3,limit:d=3,width:m=380,closeLabel:f,children:u}){const h=o(),g=a(),v=f??g.close,x=r??h.size??"md",b=n??h.color??"primary",y=l??h.density??"default";return s(i.Provider,{timeout:p,limit:d,children:[u,t(ToastViewport,{position:c,variant:e,size:x,color:b,density:y,width:m,closeLabel:v})]})}
+"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Toast as i}from"@base-ui/react/toast";import{CloseIcon as r,severityIcon as n}from"../../internal/icons.js";import{controlSlots as l,focusRingClasses as c,forcedFieldEdgeClasses as d,glassClasses as p,hasContent as m,iconClasses as f,metaTextClasses as u,radiusClasses as h,sheetBodyClasses as v,sheetHeaderGapClasses as g,sheetPaddingXClasses as x,sheetPaddingYClasses as b,sheetSectionGapClasses as y,sheetTitleClasses as w,targetClasses as j,transitionClasses as N}from"../../internal/styles.js";const T={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},M={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]",d].join(" "),glass:/* @__PURE__ */[p,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--p-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" "),ghost:/* @__PURE__ */[p,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},z={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"};function toManagerOptions(t){const{color:e,variant:s,icon:o,className:a,style:i,actionLabel:r,onAction:n,...l}=t;return{...l,data:{color:e,variant:s,icon:o,className:a,style:i},actionProps:void 0===r?void 0:{children:r,onClick:n}}}export function usePlToast(){const t=i.useToastManager();return s.useMemo(()=>({add:e=>t.add(toManagerOptions(e)),close:e=>t.close(e),update:(e,s)=>t.update(e,toManagerOptions(s)),promise:(e,s)=>t.promise(e,{loading:toManagerOptions(s.loading),success:t=>toManagerOptions("function"==typeof s.success?s.success(t):s.success),error:t=>toManagerOptions("function"==typeof s.error?s.error(t):s.error)}),toasts:t.toasts}),[t])}function ToastItem({toast:s,variant:o,color:a,size:d,density:p,closeLabel:T,swipeDirection:O}){const P=s.data?.variant??o??"glass",k=s.data?.color??a,$=void 0===s.data?.icon?n(k):s.data.icon,D=z[P],L=m(s.title);return e(i.Root,{toast:s,swipeDirection:O,className:["pointer-events-auto flex w-full items-start",x[p??"default"][d],b[p??"default"][d],h[d],y[d],v[d],M[P],f,N,"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[ending-style]:data-[swipe-direction]:[transform:translate(var(--toast-swipe-movement-x),var(--toast-swipe-movement-y))]","data-[limited]:hidden",c,"[outline:none]",s.data?.className??""].filter(Boolean).join(" "),style:{...l(k,3,P),...s.data?.style},children:[m($)?t("span",{className:`flex h-[1lh] shrink-0 items-center ${D}`,children:$}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${g[d]}`,children:[t(i.Title,{className:`plass-title m-0 font-semibold ${w[d]} ${D}`}),t(i.Description,{className:L&&"solid"!==P?"m-0 text-(--plass-muted-fg)":"m-0"})]}),t(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2 py-0","font-medium underline-offset-2",D||"text-inherit","hover:underline",c,u[d]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(i.Close,{"aria-label":T,className:[j,"inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full p-0","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:opacity-100 focus-visible:opacity-100",c].join(" "),children:t(r,{})})})]})}function ToastViewport(e){const{toasts:s}=i.useToastManager(),o=a(),{position:r,width:n,...l}=e,c=[r.startsWith("top")?"up":"down","left","right"];return t(i.Portal,{children:t(i.Viewport,{"aria-label":o.notifications,className:["plass-portal pointer-events-none fixed inset-x-0 z-(--plass-z-portal) flex flex-col gap-2 p-4",T[r]].join(" "),children:s.map(e=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof n?`${n}px`:n},children:t(ToastItem,{toast:e,swipeDirection:c,...l})},e.id))})})}export function PlToastProvider({variant:s="glass",size:r,color:n,density:l,position:c="bottom-end",timeout:d=5e3,limit:p=3,width:m=380,closeLabel:f,children:u}){const h=o(),v=a(),g=f??v.close,x=r??h.size??"md",b=n??h.color??"primary",y=l??h.density??"default";return e(i.Provider,{timeout:d,limit:p,children:[u,t(ToastViewport,{position:c,variant:s,size:x,color:b,density:y,width:m,closeLabel:g})]})}

package/dist/components/toggle/PlToggle.js

@@ -1 +1 @@
-"use client";import{jsxs as s}from"react/jsx-runtime";import*as e from"react";import{glowPointerMove as o}from"../../internal/glow.js";import{useDefaults as l}from"../../internal/defaults.js";import{Toggle as a}from"@base-ui/react/toggle";import{ButtonGroupContext as r}from"../../internal/button-group.js";import{controlHeightClasses as t,controlSlots as i,controlSquareClasses as p,controlTextClasses as g,disabledClasses as n,focusRingClasses as v,forcedEdgeClasses as d,forcedPressedClasses as h,gapClasses as x,glassClasses as c,hasContent as m,iconClasses as b,paddingXClasses as f,radiusClasses as $,transitionClasses as u}from"../../internal/styles.js";const w={xs:`${t.xs} ${x.xs} ${$.xs} ${g.xs}`,sm:`${t.sm} ${x.sm} ${$.sm} ${g.sm}`,md:`${t.md} ${x.md} ${$.md} ${g.md}`,lg:`${t.lg} ${x.lg} ${$.lg} ${g.lg}`,xl:`${t.xl} ${x.xl} ${$.xl} ${g.xl}`},j={xs:`${p.xs} px-0`,sm:`${p.sm} px-0`,md:`${p.md} px-0`,lg:`${p.lg} px-0`,xl:`${p.xl} px-0`},y=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",u,v,b].join(" "),P={solid:/* @__PURE__ */[c,"text-(--plass-muted-fg) bg-(--plass-glass-hover)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",d].join(" "),glass:/* @__PURE__ */[c,"border text-(--plass-muted-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-muted-fg) bg-transparent"},k={solid:/* @__PURE__ */["hover:bg-(--plass-glass-press) hover:text-(--plass-fg)","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) active:bg-(--plass-glass-press)"},z={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",h].join(" "),glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--p-soft)","[border-color:var(--p-line-hover)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",h].join(" "),ghost:`text-(--p-accent) bg-(--p-soft) ${h}`},C={solid:/* @__PURE__ */["hover:brightness-105 hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95 active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"};export const PlToggle=/* @__PURE__ */e.forwardRef(function PlToggle({variant:t,size:p,color:g,density:v,elevation:d,pressed:h,defaultPressed:x,onPressedChange:c,value:b,startIcon:$,endIcon:u,fullWidth:T=!1,disabled:I,className:M,style:N,children:B,onPointerMove:R,...W},q){const A=l(),D=e.useContext(r),E=t??D?.variant??"glass",F=p??D?.size??A.size??"md",G=g??D?.color??A.color??"primary",H=v??D?.density??A.density??"default",J=d??D?.elevation??0,K=I??D?.disabled??!1,L=!m(B);return s(a,{ref:q,value:b,pressed:h,defaultPressed:x,onPressedChange:s=>c?.(s),disabled:K,className:s=>[y,w[F],L?j[F]:f[H][F],K?n[E]:s.pressed?`${z[E]} ${C[E]}`:`${P[E]} ${k[E]}`,K?"":"plass-glow cursor-pointer",T?"w-full":"",M??""].filter(Boolean).join(" "),style:{...i(G,J,E),...N},onPointerMove:o(!K,R),...W,children:[$,B,u]})});
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{glowPointerMove as l}from"../../internal/glow.js";import{useDefaults as a}from"../../internal/defaults.js";import{Toggle as r}from"@base-ui/react/toggle";import{ButtonGroupContext as t}from"../../internal/button-group.js";import{useDisabled as i}from"../../internal/form.js";import{controlHeightClasses as p,controlSlots as n,controlSquareClasses as g,controlTextClasses as v,disabledClasses as d,focusRingClasses as h,forcedEdgeClasses as m,forcedPressedClasses as x,gapClasses as c,glassClasses as f,hasContent as b,iconClasses as $,paddingXClasses as u,radiusClasses as j,transitionClasses as w}from"../../internal/styles.js";const y={xs:`${p.xs} ${c.xs} ${j.xs} ${v.xs}`,sm:`${p.sm} ${c.sm} ${j.sm} ${v.sm}`,md:`${p.md} ${c.md} ${j.md} ${v.md}`,lg:`${p.lg} ${c.lg} ${j.lg} ${v.lg}`,xl:`${p.xl} ${c.xl} ${j.xl} ${v.xl}`},P={xs:`${g.xs} px-0`,sm:`${g.sm} px-0`,md:`${g.md} px-0`,lg:`${g.lg} px-0`,xl:`${g.xl} px-0`},z=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center p-0","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,h,$].join(" "),C={solid:/* @__PURE__ */[f,"text-(--plass-muted-fg) bg-(--plass-glass-hover)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",m].join(" "),glass:/* @__PURE__ */[f,"border text-(--plass-muted-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-muted-fg) bg-transparent"},N={solid:/* @__PURE__ */["hover:bg-(--plass-glass-press) hover:text-(--plass-fg)","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) active:bg-(--plass-glass-press)"},T={solid:/* @__PURE__ */["text-(--p-on-solid) [--p-fill-on:1]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--p-soft)","[border-color:var(--p-line-hover)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",x].join(" "),ghost:`text-(--p-accent) bg-(--p-soft) ${x}`},k={solid:/* @__PURE__ */["hover:brightness-105 hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95 active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"};export const PlToggle=/* @__PURE__ */o.forwardRef(function PlToggle({variant:p,size:g,color:v,density:h,elevation:m,pressed:x,defaultPressed:c,onPressedChange:f,value:$,startIcon:j,endIcon:w,fullWidth:I=!1,disabled:M,className:B,style:R,children:W,onPointerMove:q,...A},D){const E=a(),F=o.useContext(t),G=p??F?.variant??"glass",H=g??F?.size??E.size??"md",J=v??F?.color??E.color??"primary",K=h??F?.density??E.density??"default",L=m??F?.elevation??0,O=i(M??F?.disabled),Q=!b(W);return e(r,{ref:D,value:$,pressed:x,defaultPressed:c,onPressedChange:s=>f?.(s),disabled:O,className:s=>[z,y[H],Q?P[H]:u[K][H],O?d[G]:s.pressed?`${T[G]} ${k[G]}`:`${C[G]} ${N[G]}`,O?"":"plass-glow cursor-pointer",I?"w-full":"",B??""].filter(Boolean).join(" "),style:{...n(J,L,G),...R},onPointerMove:l(!O,q),...A,children:["solid"===G?s("span",{"aria-hidden":"true",className:"plass-fill-layer"}):null,j,W,w]})});

package/dist/components/tooltip/PlTooltip.d.ts

@@ -55,6 +55,10 @@ export interface PlTooltipProps extends Pick<PlassStyleProps, 'size' | 'color' |
     /**
      * Stops the tooltip from opening at all, without disabling the trigger. For
      * the tooltip that only exists while a label is truncated.
+     *
+     * One that is up when this turns on closes, and `onOpenChange` hears it
+     * close. A controlled `open` shows nothing while this is on, and is answered
+     * with `false`.
      * @default false
      */
     disabled?: boolean;

package/dist/components/tooltip/PlTooltip.js

@@ -1 +1 @@
-"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Tooltip as t}from"@base-ui/react/tooltip";import{PopupArrow as l}from"../../internal/picker.js";import{glassClasses as r,metaTextClasses as i,paddingXClasses as n,radiusClasses as p,surfaceSlots as d}from"../../internal/styles.js";export const PlTooltipProvider=t.Provider;const c=/* @__PURE__ */[r,"max-w-64 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","data-[instant]:[transition-duration:0ms]"].join(" "),m={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},y={xs:6,sm:7,md:8,lg:9,xl:10};export function PlTooltip({content:r,children:f,size:u,color:g,density:x,side:b="top",align:h="center",sideOffset:j=6,delay:v,closeDelay:P,arrow:O=!0,open:w,defaultOpen:z,onOpenChange:T,disabled:N=!1,className:C,style:D,..._}){const k=a(),A=u??k.size??"sm",B=g??k.color??"secondary",I=x??k.density??"default",R=y[A],S=o.useId(),[q,E]=o.useState(z??!1),F=w??q;return e(t.Root,{open:w,defaultOpen:z,onOpenChange:s=>{E(s),T?.(s)},children:[s(t.Trigger,{render:f,delay:v,closeDelay:P,disabled:N,"aria-describedby":F?S:void 0}),s(t.Portal,{children:s(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:b,align:h,sideOffset:j,children:e(t.Popup,{id:S,role:"tooltip",className:[c,p[A],n[I][A],m[A],i[A],C??""].filter(Boolean).join(" "),style:{...d(B,3),...D},..._,children:[O?s(l,{as:t.Arrow,size:R}):null,r]})})})]})}
+"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Tooltip as t}from"@base-ui/react/tooltip";import{PopupArrow as r}from"../../internal/picker.js";import{glassClasses as l,metaTextClasses as i,paddingXClasses as n,radiusClasses as d,surfaceSlots as p}from"../../internal/styles.js";export const PlTooltipProvider=t.Provider;const c=/* @__PURE__ */[l,"max-w-64 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","data-[instant]:[transition-duration:0ms]","motion-reduce:[transition-duration:0ms]"].join(" "),m={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},y={xs:6,sm:7,md:8,lg:9,xl:10};export function PlTooltip({content:l,children:u,size:f,color:g,density:x,side:b="top",align:h="center",sideOffset:j=6,delay:v,closeDelay:P,arrow:O=!0,open:w,defaultOpen:z,onOpenChange:T,disabled:N=!1,className:C,style:D,..._}){const k=a(),A=f??k.size??"sm",B=g??k.color??"secondary",I=x??k.density??"default",R=y[A],S=o.useId(),[q,E]=o.useState(z??!1),F=!N&&(w??q);return e(t.Root,{open:w,defaultOpen:z,disabled:N,onOpenChange:s=>{E(s),T?.(s)},children:[s(t.Trigger,{render:u,delay:v,closeDelay:P,disabled:N,"aria-describedby":F?S:void 0}),s(t.Portal,{children:s(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:b,align:h,sideOffset:j,children:e(t.Popup,{id:S,role:"tooltip",className:[c,d[A],n[I][A],m[A],i[A],C??""].filter(Boolean).join(" "),style:{...p(B,3),...D},..._,children:[O?s(r,{as:t.Arrow,size:R}):null,l]})})})]})}

package/dist/components/tour/PlTour.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as t from"react";import{Popover as n}from"@base-ui/react/popover";import{PlButton as l}from"../button/index.js";import{useDefaults as i}from"../../internal/defaults.js";import{CloseIcon as a}from"../../internal/icons.js";import{useLabels as o}from"../../internal/labels.js";import{reducedMotionQuery as r}from"../../internal/media.js";import{inflate as c,spotlightPath as d}from"../../internal/tour.js";import{cx as p,focusRingClasses as m,glassClasses as u,hasContent as f,metaTextClasses as h,radiusClasses as g,sheetBodyClasses as v,sheetHeaderGapClasses as x,sheetPaddingXClasses as b,sheetPaddingYClasses as w,sheetSectionGapClasses as y,sheetTitleClasses as k,surfaceSlots as z}from"../../internal/styles.js";const j={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},N={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},_={xs:6,sm:8,md:10,lg:12,xl:14},C=/* @__PURE__ */[u,"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(" "),L=/* @__PURE__ */["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",m].join(" "),E={getBoundingClientRect:()=>DOMRect.fromRect({x:window.innerWidth/2,y:window.innerHeight/2,width:0,height:0})},centreOnAnchor=({positioner:e})=>-e.height/2;function resolve(e){return void 0===e?null:"string"==typeof e?document.querySelector(e):"function"==typeof e?e()??null:e.current??null}export function PlTour({steps:m,open:u,defaultOpen:O=!1,onOpenChange:P,step:R,defaultStep:S=0,onStepChange:M,onFinish:F,mask:q=!0,skippable:A=!0,dismissible:B=!0,scrollIntoView:D=!0,previousLabel:I,nextLabel:T,doneLabel:V,skipLabel:H,size:W,color:G,density:J,className:K,classNames:Q}){const U=i(),X=o(),Y=W??U.size??"md",Z=G??U.color??"primary",$=J??U.density??"default",[ee,se]=t.useState(O),[te,ne]=t.useState(S),le=u??ee,ie=Math.min(R??te,Math.max(0,m.length-1)),ae=m[ie],[oe,re]=t.useState(null),setOpen=e=>{void 0===u&&se(e),P?.(e)},goTo=e=>{void 0===R&&ne(e),M?.(e)},ce=ae?.target,de=ae?.padding??6,[pe,me]=t.useState(null);if(t.useLayoutEffect(()=>{me(le?resolve(ce):null)},[le,ce,ie]),t.useEffect(()=>{if(!le)return;const e=resolve(ce);if(!(e instanceof Element))return;if(D){const s=window.matchMedia?.(r).matches;e.scrollIntoView({block:"center",inline:"nearest",behavior:s?"instant":"smooth"})}let s=0;const read=()=>{s=0;const t=e.getBoundingClientRect();re({at:ie,spot:c({top:t.top,left:t.left,width:t.width,height:t.height},de)})},schedule=()=>{0===s&&(s=requestAnimationFrame(read))};read();const t="undefined"==typeof ResizeObserver?null:new ResizeObserver(schedule);return t?.observe(e),window.addEventListener("scroll",schedule,{passive:!0,capture:!0}),window.addEventListener("resize",schedule,{passive:!0}),()=>{0!==s&&cancelAnimationFrame(s),t?.disconnect(),window.removeEventListener("scroll",schedule,!0),window.removeEventListener("resize",schedule)}},[le,ce,de,ie,D]),0===m.length)return null;const ue=le&&oe?.at===ie?oe.spot:null,fe=0===ie,he=ie===m.length-1,ge=b[$][Y],ve=w[$][Y],xe=N[Y],be=f(ae?.title)||f(ae?.content);return e(n.Root,{open:le,onOpenChange:(e,s)=>{(e||B||"escape-key"!==s.reason)&&(e||"outside-press"!==s.reason&&"focus-out"!==s.reason)?setOpen(e):s.cancel()},children:s(n.Portal,{children:[le&&q?e("div",{"aria-hidden":"true","data-testid":"plass-tour-mask",className:p("plass-portal fixed inset-0 z-(--plass-z-portal)","bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]",Q?.mask),style:{clipPath:d(ue,ae?.radius??_[Y])}}):null,e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:pe?ae?.side??"bottom":"bottom",align:pe?ae?.align??"center":"center",sideOffset:pe?10:centreOnAnchor,collisionPadding:12,anchor:pe??E,children:s(n.Popup,{className:p(C,g[Y],v[Y],y[Y],j[Y],ge,ve,K),style:z(Z,3),children:[be?s("div",{className:"flex items-start gap-3",children:[s("div",{"aria-live":"polite","aria-atomic":"true",className:p("flex min-w-0 flex-1 flex-col",x[Y]),children:[f(ae?.title)?e(n.Title,{className:p("m-0 font-semibold",k[Y],Q?.title),children:ae?.title}):null,f(ae?.content)?e(n.Description,{className:p("m-0 min-w-0",Q?.content),children:ae?.content}):null]}),B?e("button",{type:"button","aria-label":X.close,onClick:()=>setOpen(!1),className:p(L,Q?.close),children:e(a,{})}):null]}):null,s("div",{className:p("flex items-center gap-2",Q?.footer),children:[s("span",{className:p("shrink-0 tabular-nums text-(--plass-muted-fg)",h[Y]),children:[ie+1," / ",m.length]}),s("div",{className:"ms-auto flex items-center gap-2",children:[A&&!he?e(l,{size:xe,variant:"ghost",color:"secondary",onClick:()=>setOpen(!1),children:H??X.skip}):null,fe?null:e(l,{size:xe,variant:"ghost",color:Z,onClick:()=>goTo(ie-1),children:I??X.previous}),e(l,{size:xe,color:Z,onClick:()=>he?(F?.(),void setOpen(!1)):goTo(ie+1),children:he?V??X.done:T??X.next})]})]})]})})]})})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as t from"react";import{Popover as n}from"@base-ui/react/popover";import{PlButton as i}from"../button/index.js";import{useDefaults as o}from"../../internal/defaults.js";import{CloseIcon as a}from"../../internal/icons.js";import{useLabels as l}from"../../internal/labels.js";import{reducedMotionQuery as r}from"../../internal/media.js";import{inflate as c,spotlightPath as d}from"../../internal/tour.js";import{cx as m,focusRingClasses as p,glassClasses as u,hasContent as f,metaTextClasses as h,radiusClasses as v,sheetBodyClasses as g,sheetHeaderGapClasses as x,sheetPaddingXClasses as b,sheetPaddingYClasses as w,sheetSectionGapClasses as y,sheetTitleClasses as k,surfaceSlots as z,targetClasses as j}from"../../internal/styles.js";const N={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},_={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},C={xs:6,sm:8,md:10,lg:12,xl:14},L=/* @__PURE__ */[u,"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)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),E=/* @__PURE__ */[j,"flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center p-0","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)",p].join(" "),O={getBoundingClientRect:()=>DOMRect.fromRect({x:window.innerWidth/2,y:window.innerHeight/2,width:0,height:0})},centreOnAnchor=({positioner:e})=>-e.height/2;function resolve(e){return void 0===e?null:"string"==typeof e?document.querySelector(e):"function"==typeof e?e()??null:e.current??null}export function PlTour({steps:p,open:u,defaultOpen:j=!1,onOpenChange:P,step:R,defaultStep:S=0,onStepChange:M,onFinish:F,mask:q=!0,skippable:A=!0,dismissible:B=!0,scrollIntoView:D=!0,previousLabel:I,nextLabel:T,doneLabel:V,skipLabel:H,size:W,color:G,density:J,className:K,classNames:Q}){const U=o(),X=l(),Y=W??U.size??"md",Z=G??U.color??"primary",$=J??U.density??"default",[ee,se]=t.useState(j),[te,ne]=t.useState(S),ie=u??ee,oe=Math.min(R??te,Math.max(0,p.length-1)),ae=p[oe],[le,re]=t.useState(null),setOpen=e=>{void 0===u&&se(e),P?.(e)},goTo=e=>{void 0===R&&ne(e),M?.(e)},ce=ae?.target,de=ae?.padding??6,[me,pe]=t.useState(null);if(t.useLayoutEffect(()=>{pe(ie?resolve(ce):null)},[ie,ce,oe]),t.useEffect(()=>{if(!ie)return;const e=resolve(ce);if(!(e instanceof Element))return;if(D){const s=window.matchMedia?.(r).matches;e.scrollIntoView({block:"center",inline:"nearest",behavior:s?"instant":"smooth"})}let s=0;const read=()=>{s=0;const t=e.getBoundingClientRect();re({at:oe,spot:c({top:t.top,left:t.left,width:t.width,height:t.height},de)})},schedule=()=>{0===s&&(s=requestAnimationFrame(read))};read();const t="undefined"==typeof ResizeObserver?null:new ResizeObserver(schedule);return t?.observe(e),window.addEventListener("scroll",schedule,{passive:!0,capture:!0}),window.addEventListener("resize",schedule,{passive:!0}),()=>{0!==s&&cancelAnimationFrame(s),t?.disconnect(),window.removeEventListener("scroll",schedule,!0),window.removeEventListener("resize",schedule)}},[ie,ce,de,oe,D]),0===p.length)return null;const ue=ie&&le?.at===oe?le.spot:null,fe=0===oe,he=oe===p.length-1,ve=b[$][Y],ge=w[$][Y],xe=_[Y],be=f(ae?.title)||f(ae?.content);return e(n.Root,{open:ie,onOpenChange:(e,s)=>{(e||B||"escape-key"!==s.reason)&&(e||"outside-press"!==s.reason&&"focus-out"!==s.reason)?setOpen(e):s.cancel()},children:s(n.Portal,{children:[ie&&q?e("div",{"aria-hidden":"true","data-testid":"plass-tour-mask",className:m("plass-portal fixed inset-0 z-(--plass-z-portal)","bg-(--plass-scrim) [backdrop-filter:var(--plass-scrim-blur)] [-webkit-backdrop-filter:var(--plass-scrim-blur)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",Q?.mask),style:{clipPath:d(ue,ae?.radius??C[Y])}}):null,e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:me?ae?.side??"bottom":"bottom",align:me?ae?.align??"center":"center",sideOffset:me?10:centreOnAnchor,collisionPadding:12,anchor:me??O,children:s(n.Popup,{className:m(L,v[Y],g[Y],y[Y],N[Y],ve,ge,K),style:z(Z,3),children:[be?s("div",{className:"flex items-start gap-3",children:[s("div",{"aria-live":"polite","aria-atomic":"true",className:m("flex min-w-0 flex-1 flex-col",x[Y]),children:[f(ae?.title)?e(n.Title,{className:m("m-0 font-semibold",k[Y],Q?.title),children:ae?.title}):null,f(ae?.content)?e(n.Description,{className:m("m-0 min-w-0",Q?.content),children:ae?.content}):null]}),B?e("button",{type:"button","aria-label":X.close,onClick:()=>setOpen(!1),className:m(E,Q?.close),children:e(a,{})}):null]}):null,s("div",{className:m("flex items-center gap-2",Q?.footer),children:[s("span",{className:m("shrink-0 tabular-nums text-(--plass-muted-fg)",h[Y]),children:[oe+1," / ",p.length]}),s("div",{className:"ms-auto flex items-center gap-2",children:[A&&!he?e(i,{size:xe,variant:"ghost",color:"secondary",onClick:()=>setOpen(!1),children:H??X.skip}):null,fe?null:e(i,{size:xe,variant:"ghost",color:Z,onClick:()=>goTo(oe-1),children:I??X.previous}),e(i,{size:xe,color:Z,onClick:()=>he?(F?.(),void setOpen(!1)):goTo(oe+1),children:he?V??X.done:T??X.next})]})]})]})})]})})}

package/dist/components/transfer/PlTransfer.d.ts

@@ -28,8 +28,11 @@ export interface PlTransferProps extends PlassStyleProps, Omit<React.ComponentPr
     /** What a list with nothing in it says. @default 'Nothing here' */
     emptyLabel?: string;
     /**
-     * What the tick in a list's heading is announced as, before the heading itself.
-     * @default 'Select all'
+     * What the tick in a list's heading is announced as, before the name of its
+     * list, so the two ticks are told apart by ear. Left out, the label pack's
+     * `transferSelectAll` says the whole sentence and puts the name where each
+     * language puts it.
+     * @default `Select all in {list}`, from the label pack
      */
     selectAllLabel?: string;
     /** What the two arrows are announced as. */

package/dist/components/transfer/PlTransfer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{PlCheckbox as r}from"../checkbox/PlCheckbox.js";import{PlIconButton as n}from"../icon-button/PlIconButton.js";import{PlTextField as i}from"../text-field/PlTextField.js";import{ArrowRightIcon as o}from"../../internal/icons.js";import{searchText as c}from"../../internal/search.js";import{cx as d,fieldRestClasses as u,hasContent as f,metaTextClasses as h,paddingXClasses as m,radiusClasses as b,srOnlyClasses as p,surfaceSlots as v,toLength as g}from"../../internal/styles.js";const y={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},x={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function Panel({title:a,rows:t,ticked:s,onTick:n,onTickAll:o,search:c,onSearch:f,searchable:p,disabled:g,height:w,emptyLabel:k,searchLabel:S,selectAllLabel:L,style:T,titleId:N,listRef:A,rowRef:j}){const{variant:R,size:z,color:C,density:P}=T,I=t.filter(e=>!e.disabled),M=I.filter(e=>s.has(e.value)),$=I.length>0&&M.length===I.length,_=M.length>0&&!$,V=m[P][z];return l("div",{className:d("flex min-w-0 flex-col overflow-hidden",u[R],b[z]),style:v(C,0),children:[l("div",{className:d("flex items-center gap-2 border-b [border-color:var(--plass-divider)]",V,y[z]),children:[e(r,{size:z,color:C,checked:$,indeterminate:_,disabled:g||0===I.length,"aria-labelledby":`${N}-all ${N}`,onCheckedChange:e=>o(!0===e)}),e("span",{id:`${N}-all`,hidden:!0,children:L}),e("span",{id:N,className:d("min-w-0 flex-1 truncate font-medium",h[z]),children:a}),l("span",{className:d("shrink-0 tabular-nums text-(--plass-muted-fg)",h[z]),children:[M.length,"/",t.length]})]}),p?e("div",{className:d(V,y[z]),children:e(i,{size:z,color:C,density:P,fullWidth:!0,variant:"ghost",disabled:g,placeholder:S,"aria-label":S,value:c,onChange:e=>f(e.target.value)})}):null,e("div",{ref:A,role:"group","aria-labelledby":N,tabIndex:-1,className:d("min-h-0 flex-1 overflow-y-auto overscroll-contain","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),style:void 0===w?void 0:{height:w},children:e("div",{className:d("flex flex-col",V,y[z]),children:0===t.length?e("span",{className:d("text-(--plass-muted-fg)",h[z],x[z]),children:k}):t.map(l=>e(r,{ref:e=>j(l.value,e),size:z,color:C,className:x[z],label:l.label,checked:s.has(l.value),disabled:g||l.disabled,onCheckedChange:e=>n(l.value,!0===e)},l.value))})})]})}function narrow(e,l){const a=c(l);return""===a?e:e.filter(e=>"string"!=typeof e.label||c(e.label).includes(a))}export const PlTransfer=/* @__PURE__ */a.forwardRef(function PlTransfer({items:r,value:i,defaultValue:c,onValueChange:u,sourceLabel:h,targetLabel:m,searchable:b=!1,searchLabel:v,emptyLabel:y,selectAllLabel:x,toTargetLabel:w,toSourceLabel:k,movedLabel:S,height:L=220,disabled:T=!1,variant:N="glass",size:A,color:j,density:R,className:z,...C},P){const I=t(),M=s(),$=h??M.transferAvailable,_=m??M.transferSelected,V=v??M.search,B=y??M.empty,E=x??M.selectAll,F=w??M.transferToSelected,W=k??M.transferToAvailable,q=S??M.transferMoved,D=A??I.size??"md",G=j??I.color??"primary",H=R??I.density??"default",[J,K]=a.useState(c??[]),O=i??J,[Q,U]=a.useState(()=>new Set),X=a.useMemo(()=>new Set(r.map(e=>e.value)),[r]);[...Q].some(e=>!X.has(e))&&U(new Set([...Q].filter(e=>X.has(e))));const[Y,Z]=a.useState(""),[ee,le]=a.useState(""),ae=a.useId(),te=a.useRef(new Map),se=a.useRef(null),re=a.useRef(null),ne=a.useRef(null),[ie,oe]=a.useState(null),rowRef=(e,l)=>{l?te.current.set(e,l):te.current.delete(e)},ce=a.useMemo(()=>new Set(O),[O]),de=a.useMemo(()=>r.filter(e=>!ce.has(e.value)),[r,ce]),ue=a.useMemo(()=>r.filter(e=>ce.has(e.value)),[r,ce]),tick=(e,l)=>{U(a=>{const t=new Set(a);return l?t.add(e):t.delete(e),t})},tickAll=(e,l)=>{U(a=>{const t=new Set(a);for(const a of e)a.disabled||(l?t.add(a.value):t.delete(a.value));return t})},move=(e,l)=>{const a=e.filter(e=>!e.disabled&&Q.has(e.value));if(0===a.length)return;const t=new Set(a.map(e=>e.value)),s=l?r.filter(e=>ce.has(e.value)||t.has(e.value)).map(e=>e.value):O.filter(e=>!t.has(e));ne.current={ids:a.map(e=>e.value),toTarget:l},U(e=>new Set([...e].filter(e=>!t.has(e)))),(e=>{void 0===i&&K(e),u?.(e)})(s)};a.useLayoutEffect(()=>{const e=ne.current;if(!e)return;ne.current=null;const l=e.ids.filter(l=>ce.has(l)===e.toTarget),a=e.toTarget?re.current:se.current;if(0===l.length)return void a?.focus();(te.current.get(l[0])??a)?.focus();const t=e.toTarget?_:$,s="string"==typeof t&&""!==t?t:e.toTarget?M.transferSelected:M.transferAvailable;oe(e=>({key:(e?.key??0)+1,text:q(l.length,s)}))},[ce,Q,M,q,$,_]);const fe=narrow(de,Y),he=narrow(ue,ee),me=fe.some(e=>!e.disabled&&Q.has(e.value)),be=he.some(e=>!e.disabled&&Q.has(e.value)),pe=g(L),ve={variant:N,size:D,color:G,density:H},ge="ghost"===N?"ghost":"glass";return l("div",{ref:P,className:d("grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",z),...C,children:[e(Panel,{title:f($)?$:M.transferAvailable,titleId:`${ae}-source`,listRef:se,rowRef,rows:fe,ticked:Q,onTick:tick,onTickAll:e=>tickAll(fe,e),search:Y,onSearch:Z,searchable:b,disabled:T,height:pe,emptyLabel:B,searchLabel:V,selectAllLabel:E,style:ve}),l("div",{className:"flex flex-col gap-2",children:[e(n,{size:D,color:G,variant:ge,label:F,disabled:T||!me,onClick:()=>move(fe,!0),icon:e("span",{className:"flex rtl:rotate-180",children:e(o,{})})}),e(n,{size:D,color:G,variant:ge,label:W,disabled:T||!be,onClick:()=>move(he,!1),icon:e("span",{className:"flex rotate-180 rtl:rotate-0",children:e(o,{})})})]}),e(Panel,{title:f(_)?_:M.transferSelected,titleId:`${ae}-target`,listRef:re,rowRef,rows:he,ticked:Q,onTick:tick,onTickAll:e=>tickAll(he,e),search:ee,onSearch:le,searchable:b,disabled:T,height:pe,emptyLabel:B,searchLabel:V,selectAllLabel:E,style:ve}),e("div",{className:p,"aria-live":"polite",children:ie?e("span",{children:ie.text},ie.key):null})]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{PlCheckbox as n}from"../checkbox/PlCheckbox.js";import{PlIconButton as i}from"../icon-button/PlIconButton.js";import{PlTextField as o}from"../text-field/PlTextField.js";import{ArrowRightIcon as c}from"../../internal/icons.js";import{cachedSearchText as d,searchText as f}from"../../internal/search.js";import{textOf as u}from"../../internal/text.js";import{cx as m,fieldRestClasses as h,hasContent as b,metaTextClasses as v,paddingXClasses as p,radiusClasses as g,srOnlyClasses as y,surfaceSlots as x,toLength as k}from"../../internal/styles.js";const w={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},S={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},N=/* @__PURE__ */a.memo(function Row({value:l,label:t,checked:r,disabled:s,size:i,color:o,onTick:c,rowRef:d}){const f=a.useCallback(e=>d(l,e),[d,l]),u=a.useCallback(e=>c(l,!0===e),[c,l]);return e(n,{ref:f,size:i,color:o,className:S[i],label:t,checked:r,disabled:s,onCheckedChange:u})});function Panel({title:a,rows:t,ticked:r,onTick:s,onTickAll:i,search:c,onSearch:d,searchable:f,disabled:u,height:b,emptyLabel:y,searchLabel:k,selectAllName:T,style:L,titleId:j,listRef:R,rowRef:A}){const{variant:C,size:z,color:P,density:I}=L,M=t.filter(e=>!e.disabled),O=M.filter(e=>r.has(e.value)),_=M.length>0&&O.length===M.length,B=O.length>0&&!_,V=p[I][z];return l("div",{className:m("flex min-w-0 flex-col overflow-hidden",h[C],g[z]),style:x(P,0),children:[l("div",{className:m("flex items-center gap-2 border-b [border-color:var(--plass-divider)]",V,w[z]),children:[e(n,{size:z,color:P,checked:_,indeterminate:B,disabled:u||0===M.length,"aria-label":T,onCheckedChange:e=>i(!0===e)}),e("span",{id:j,className:m("min-w-0 flex-1 truncate font-medium",v[z]),children:a}),l("span",{className:m("shrink-0 tabular-nums text-(--plass-muted-fg)",v[z]),children:[O.length,"/",t.length]})]}),f?e("div",{className:m(V,w[z]),children:e(o,{size:z,color:P,density:I,fullWidth:!0,variant:"ghost",disabled:u,placeholder:k,"aria-label":k,value:c,onChange:e=>d(e.target.value)})}):null,e("div",{ref:R,role:"group","aria-labelledby":j,tabIndex:-1,className:m("min-h-0 flex-1 overflow-y-auto overscroll-contain","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),style:void 0===b?void 0:{height:b},children:e("div",{className:m("flex flex-col",V,w[z]),children:0===t.length?e("span",{className:m("text-(--plass-muted-fg)",v[z],S[z]),children:y}):t.map(l=>e(N,{value:l.value,label:l.label,checked:r.has(l.value),disabled:u||!0===l.disabled,size:z,color:P,onTick:s,rowRef:A},l.value))})})]})}function nameOf(e,l){const a=u(e).trim();return""===a?l:a}const T=/* @__PURE__ */d(e=>e.label);function narrow(e,l){const a=f(l);return""===a?e:e.filter(e=>"string"!=typeof e.label||T(e).includes(a))}export const PlTransfer=/* @__PURE__ */a.forwardRef(function PlTransfer({items:n,value:o,defaultValue:d,onValueChange:f,sourceLabel:u,targetLabel:h,searchable:v=!1,searchLabel:p,emptyLabel:g,selectAllLabel:x,toTargetLabel:w,toSourceLabel:S,movedLabel:N,height:T=220,disabled:L=!1,variant:j="glass",size:R,color:A,density:C,className:z,...P},I){const M=r(),O=t(L),_=s(),B=u??_.transferAvailable,V=h??_.transferSelected,$=p??_.search,E=g??_.empty,F=void 0===x?_.transferSelectAll:e=>[x,e].filter(Boolean).join(" "),W=w??_.transferToSelected,q=S??_.transferToAvailable,D=N??_.transferMoved,G=R??M.size??"md",H=A??M.color??"primary",J=C??M.density??"default",[K,Q]=a.useState(d??[]),U=o??K,[X,Y]=a.useState(()=>new Set),Z=a.useMemo(()=>new Set(n.map(e=>e.value)),[n]);[...X].some(e=>!Z.has(e))&&Y(new Set([...X].filter(e=>Z.has(e))));const[ee,le]=a.useState(""),[ae,te]=a.useState(""),re=a.useId(),se=a.useRef(new Map),ne=a.useRef(null),ie=a.useRef(null),oe=a.useRef(null),[ce,de]=a.useState(null),fe=a.useCallback((e,l)=>{l?se.current.set(e,l):se.current.delete(e)},[]),ue=a.useMemo(()=>new Set(U),[U]),me=a.useMemo(()=>n.filter(e=>!ue.has(e.value)),[n,ue]),he=a.useMemo(()=>n.filter(e=>ue.has(e.value)),[n,ue]),be=a.useCallback((e,l)=>{Y(a=>{const t=new Set(a);return l?t.add(e):t.delete(e),t})},[]),tickAll=(e,l)=>{Y(a=>{const t=new Set(a);for(const a of e)a.disabled||(l?t.add(a.value):t.delete(a.value));return t})},move=(e,l)=>{const a=e.filter(e=>!e.disabled&&X.has(e.value));if(0===a.length)return;const t=new Set(a.map(e=>e.value)),r=l?n.filter(e=>ue.has(e.value)||t.has(e.value)).map(e=>e.value):U.filter(e=>!t.has(e));oe.current={ids:a.map(e=>e.value),toTarget:l},Y(e=>new Set([...e].filter(e=>!t.has(e)))),(e=>{void 0===o&&Q(e),f?.(e)})(r)};a.useLayoutEffect(()=>{const e=oe.current;if(!e)return;oe.current=null;const l=e.ids.filter(l=>ue.has(l)===e.toTarget),a=e.toTarget?ie.current:ne.current;if(0===l.length)return void a?.focus();(se.current.get(l[0])??a)?.focus();const t=e.toTarget?nameOf(V,_.transferSelected):nameOf(B,_.transferAvailable);de(e=>({key:(e?.key??0)+1,text:D(l.length,t)}))},[ue,X,_,D,B,V]);const ve=narrow(me,ee),pe=narrow(he,ae),ge=ve.some(e=>!e.disabled&&X.has(e.value)),ye=pe.some(e=>!e.disabled&&X.has(e.value)),xe=k(T),ke={variant:j,size:G,color:H,density:J},we=b(B)?B:_.transferAvailable,Se=b(V)?V:_.transferSelected,Ne="ghost"===j?"ghost":"glass";return l("div",{ref:I,className:m("grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",z),role:P["aria-label"]||P["aria-labelledby"]?"group":void 0,...P,children:[e(Panel,{title:we,titleId:`${re}-source`,listRef:ne,rowRef:fe,rows:ve,ticked:X,onTick:be,onTickAll:e=>tickAll(ve,e),search:ee,onSearch:le,searchable:v,disabled:O,height:xe,emptyLabel:E,searchLabel:$,selectAllName:F(nameOf(we,_.transferAvailable)),style:ke}),l("div",{className:"flex flex-col gap-2",children:[e(i,{size:G,color:H,variant:Ne,label:W,disabled:O||!ge,onClick:()=>move(ve,!0),icon:e("span",{className:"flex rtl:rotate-180",children:e(c,{})})}),e(i,{size:G,color:H,variant:Ne,label:q,disabled:O||!ye,onClick:()=>move(pe,!1),icon:e("span",{className:"flex rotate-180 rtl:rotate-0",children:e(c,{})})})]}),e(Panel,{title:Se,titleId:`${re}-target`,listRef:ie,rowRef:fe,rows:pe,ticked:X,onTick:be,onTickAll:e=>tickAll(pe,e),search:ae,onSearch:te,searchable:v,disabled:O,height:xe,emptyLabel:E,searchLabel:$,selectAllName:F(nameOf(Se,_.transferSelected)),style:ke}),e("div",{className:y,"aria-live":"polite",children:ce?e("span",{children:ce.text},ce.key):null})]})});

package/dist/components/tree/PlTree.d.ts

@@ -41,6 +41,18 @@ export interface PlTreeProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
     selection?: PlTreeSelection;
     /** Called when a row is clicked, selectable or not. */
     onItemClick?: (node: PlTreeNode) => void;
+    /**
+     * Builds the rows of every branch, open or shut, and keeps a shut branch's
+     * rows in the document, hidden, rather than leaving them out.
+     *
+     * For a tree a search engine should read in full: a shut branch is otherwise
+     * not in the HTML a server sends. A kept row is out of the layout, the focus
+     * order and the accessibility tree, and the arrow keys still walk only the
+     * rows that are visible. Off by default, because it builds every row the
+     * data holds.
+     * @default false
+     */
+    keepMounted?: boolean;
     /** @default 'md' */
     size?: PlassSize;
     /** @default 'primary' */

package/dist/components/tree/PlTree.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Collapsible as i}from"@base-ui/react/collapsible";import{ChevronIcon as r}from"../../internal/icons.js";import{controlTextLeadingClasses as a,cx as d,focusRingClasses as o,gapClasses as c,iconClasses as p,radiusClasses as u,surfaceSlots as f,transitionClasses as m}from"../../internal/styles.js";const h=/* @__PURE__ */["h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),v={xs:14,sm:16,md:20,lg:24,xl:28},x={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-2",xl:"py-2.5"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1.5"}};function visibleRows(e,t,n=1,s=[]){for(const l of e)s.push({node:l,level:n}),l.children&&t.has(l.id)&&visibleRows(l.children,t,n+1,s);return s}function parentsOf(e,t=null,n=new Map){for(const s of e)n.set(s.id,t),s.children&&parentsOf(s.children,s.id,n);return n}const b=/* @__PURE__ */s.createContext(null);function TreeRows({items:n,level:l,parent:i,tabStop:r,expanded:a,selected:d}){const{parents:o}=s.useContext(b);let c=null;for(let e=r;null!==e&&o.has(e);e=o.get(e))if(o.get(e)===i){c=e;break}return e(t,{children:n.map(t=>{const n=void 0!==t.children&&t.children.length>0;return e(y,{node:t,level:l,isOpen:a.has(t.id),isSelected:d.has(t.id),tabStop:t.id===c?r:null,expanded:n?a:void 0,selected:n?d:void 0},t.id)})})}const y=/* @__PURE__ */s.memo(function TreeRow({node:l,level:f,isOpen:y,isSelected:g,tabStop:w,expanded:k,selected:S}){const{size:D,density:R,selection:C,idPrefix:j,focus:M,actions:N}=s.useContext(b),E=void 0!==l.children;return n(t,{children:[n("div",{id:`${j}-${l.id}`,role:"treeitem","aria-level":f,"aria-expanded":E?y:void 0,"aria-selected":"none"===C?void 0:g,"aria-disabled":l.disabled||void 0,tabIndex:l.disabled?void 0:w===l.id?0:-1,onFocus:()=>M(l.id),onKeyDown:e=>{l.disabled||N.current?.keyDown(e,l,f)},onClick:()=>{l.disabled||N.current?.press(l)},className:d("flex cursor-pointer items-center select-none",c[D],x[R][D],a[D],u[D],o,m,p,l.disabled?"cursor-not-allowed opacity-50":g?"bg-(--p-soft) text-(--p-accent) font-medium":"text-(--plass-fg) hover:bg-(--p-soft)"),style:{paddingInlineStart:(f-1)*v[D]+6+"px"},children:[e("span",{"aria-hidden":"true",className:d("flex shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]",E?"":"invisible",y?"rotate-0":"-rotate-90 rtl:rotate-90"),children:e(r,{})}),l.icon?e("span",{className:"flex shrink-0 items-center",children:l.icon}):null,e("span",{className:"truncate",children:l.label})]}),k&&S?e(i.Root,{open:y,children:e(i.Panel,{role:"group",className:h,children:e(TreeRows,{items:l.children,level:f+1,parent:l.id,tabStop:w,expanded:k,selected:S})})}):null]})});export const PlTree=/* @__PURE__ */s.forwardRef(function PlTree({items:t,expanded:n,defaultExpanded:i,onExpandedChange:r,selected:a,defaultSelected:o,onSelectedChange:c,selection:p="single",onItemClick:u,size:m,color:h,density:v,className:x,style:y,...g},w){const k=l(),S=m??k.size??"md",D=h??k.color??"primary",R=v??k.density??"default",[C,j]=s.useState(i??[]),M=n??C,N=s.useMemo(()=>new Set(M),[M]),[E,I]=s.useState(o??[]),P=a??E,T=s.useMemo(()=>new Set(P),[P]),O=s.useMemo(()=>visibleRows(t,N),[t,N]),z=s.useMemo(()=>parentsOf(t),[t]),[A,$]=s.useState(null),_=s.useMemo(()=>O.filter(e=>!e.node.disabled),[O]),F=A&&_.some(e=>e.node.id===A)?A:_[0]?.node.id??null,toggle=(e,t)=>{var s;s=t??!N.has(e)?[...M.filter(t=>t!==e),e]:M.filter(t=>t!==e),void 0===n&&j(s),r?.(s)},press=e=>{void 0!==e.children&&toggle(e.id),(e=>{if("none"===p)return;const t="multiple"===p?T.has(e.id)?P.filter(t=>t!==e.id):[...P,e.id]:[e.id];void 0===a&&I(t),c?.(t)})(e),u?.(e)},L=s.useId(),focusRow=e=>{$(e),document.getElementById(`${L}-${e}`)?.focus()},onKeyDown=(e,t,n)=>{const s=_.findIndex(e=>e.node.id===t.id),l=void 0!==t.children,i=N.has(t.id);switch(e.key){case"ArrowDown":e.preventDefault(),_[s+1]&&focusRow(_[s+1].node.id);break;case"ArrowUp":e.preventDefault(),_[s-1]&&focusRow(_[s-1].node.id);break;case"ArrowRight":e.preventDefault(),l&&!i?toggle(t.id,!0):l&&_[s+1]?.level===n+1&&focusRow(_[s+1].node.id);break;case"ArrowLeft":if(e.preventDefault(),l&&i){toggle(t.id,!1);break}for(let e=s-1;e>=0;e-=1)if(_[e].level<n){focusRow(_[e].node.id);break}break;case"Home":e.preventDefault(),_[0]&&focusRow(_[0].node.id);break;case"End":e.preventDefault(),_.length&&focusRow(_[_.length-1].node.id);break;case"Enter":case" ":e.preventDefault(),press(t)}},B=s.useRef(null);s.useLayoutEffect(()=>{B.current={press,keyDown:onKeyDown}});const H=s.useMemo(()=>({size:S,density:R,selection:p,idPrefix:L,parents:z,focus:$,actions:B}),[S,R,p,L,z]);return e("div",{ref:w,role:"tree","aria-multiselectable":"multiple"===p||void 0,className:d("flex flex-col",x),style:{...f(D,0),...y},...g,children:e(b.Provider,{value:H,children:e(TreeRows,{items:t,level:1,parent:null,tabStop:F,expanded:N,selected:T})})})});
+"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{useDefaults as i}from"../../internal/defaults.js";import{Collapsible as l}from"@base-ui/react/collapsible";import{ChevronIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as r,cx as d,focusRingClasses as a,gapClasses as c,iconClasses as p,radiusClasses as u,surfaceSlots as f,transitionClasses as m}from"../../internal/styles.js";const h=/* @__PURE__ */["h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),v={xs:14,sm:16,md:20,lg:24,xl:28},x={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-2",xl:"py-2.5"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1.5"}};function visibleRows(e,t,n=1,s=[]){for(const i of e)s.push({node:i,level:n}),i.children&&t.has(i.id)&&visibleRows(i.children,t,n+1,s);return s}function parentsOf(e,t=null,n=new Map){for(const s of e)n.set(s.id,t),s.children&&parentsOf(s.children,s.id,n);return n}const b=/* @__PURE__ */s.createContext(null);function TreeRows({items:n,level:i,parent:l,tabStop:o,expanded:r,selected:d}){const{parents:a}=s.useContext(b);let c=null;for(let e=o;null!==e&&a.has(e);e=a.get(e))if(a.get(e)===l){c=e;break}return e(t,{children:n.map(t=>{const n=void 0!==t.children&&t.children.length>0;return e(y,{node:t,level:i,isOpen:r.has(t.id),isSelected:d.has(t.id),tabStop:t.id===c?o:null,expanded:n?r:void 0,selected:n?d:void 0},t.id)})})}const y=/* @__PURE__ */s.memo(function TreeRow({node:i,level:f,isOpen:y,isSelected:g,tabStop:w,expanded:k,selected:S}){const{size:D,density:M,selection:R,keepMounted:C,idPrefix:j,focus:N,actions:E}=s.useContext(b),I=void 0!==i.children;return n(t,{children:[n("div",{id:`${j}-${i.id}`,role:"treeitem","aria-level":f,"aria-expanded":I?y:void 0,"aria-selected":"none"===R?void 0:g,"aria-disabled":i.disabled||void 0,tabIndex:i.disabled?void 0:w===i.id?0:-1,onFocus:()=>N(i.id),onKeyDown:e=>{i.disabled||E.current?.keyDown(e,i,f)},onClick:()=>{i.disabled||E.current?.press(i)},className:d("flex cursor-pointer items-center select-none",c[D],x[M][D],r[D],u[D],a,m,p,i.disabled?"cursor-not-allowed opacity-50":g?"bg-(--p-soft) text-(--p-accent) font-medium":"text-(--plass-fg) hover:bg-(--p-soft)"),style:{paddingInlineStart:(f-1)*v[D]+6+"px"},children:[e("span",{"aria-hidden":"true",className:d("flex shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",I?"":"invisible",y?"rotate-0":"-rotate-90 rtl:rotate-90"),children:e(o,{})}),i.icon?e("span",{className:"flex shrink-0 items-center",children:i.icon}):null,e("span",{className:"truncate",children:i.label})]}),k&&S?e(l.Root,{open:y,children:e(l.Panel,{role:"group",keepMounted:C,className:h,children:e(TreeRows,{items:i.children,level:f+1,parent:i.id,tabStop:w,expanded:k,selected:S})})}):null]})});export const PlTree=/* @__PURE__ */s.forwardRef(function PlTree({items:t,expanded:n,defaultExpanded:l,onExpandedChange:o,selected:r,defaultSelected:a,onSelectedChange:c,selection:p="single",onItemClick:u,keepMounted:m=!1,size:h,color:v,density:x,className:y,style:g,...w},k){const S=i(),D=h??S.size??"md",M=v??S.color??"primary",R=x??S.density??"default",[C,j]=s.useState(l??[]),N=n??C,E=s.useMemo(()=>new Set(N),[N]),[I,P]=s.useState(a??[]),T=r??I,O=s.useMemo(()=>new Set(T),[T]),z=s.useMemo(()=>visibleRows(t,E),[t,E]),A=s.useMemo(()=>parentsOf(t),[t]),[$,_]=s.useState(null),F=s.useMemo(()=>z.filter(e=>!e.node.disabled),[z]),L=$&&F.some(e=>e.node.id===$)?$:F[0]?.node.id??null,toggle=(e,t)=>{var s;s=t??!E.has(e)?[...N.filter(t=>t!==e),e]:N.filter(t=>t!==e),void 0===n&&j(s),o?.(s)},press=e=>{void 0!==e.children&&toggle(e.id),(e=>{if("none"===p)return;const t="multiple"===p?O.has(e.id)?T.filter(t=>t!==e.id):[...T,e.id]:[e.id];void 0===r&&P(t),c?.(t)})(e),u?.(e)},B=s.useId(),focusRow=e=>{_(e),document.getElementById(`${B}-${e}`)?.focus()},onKeyDown=(e,t,n)=>{const s=F.findIndex(e=>e.node.id===t.id),i=void 0!==t.children,l=E.has(t.id);switch(e.key){case"ArrowDown":e.preventDefault(),F[s+1]&&focusRow(F[s+1].node.id);break;case"ArrowUp":e.preventDefault(),F[s-1]&&focusRow(F[s-1].node.id);break;case"ArrowRight":e.preventDefault(),i&&!l?toggle(t.id,!0):i&&F[s+1]?.level===n+1&&focusRow(F[s+1].node.id);break;case"ArrowLeft":if(e.preventDefault(),i&&l){toggle(t.id,!1);break}for(let e=s-1;e>=0;e-=1)if(F[e].level<n){focusRow(F[e].node.id);break}break;case"Home":e.preventDefault(),F[0]&&focusRow(F[0].node.id);break;case"End":e.preventDefault(),F.length&&focusRow(F[F.length-1].node.id);break;case"Enter":case" ":e.preventDefault(),press(t)}},H=s.useRef(null);s.useLayoutEffect(()=>{H.current={press,keyDown:onKeyDown}});const K=s.useMemo(()=>({size:D,density:R,selection:p,keepMounted:m,idPrefix:B,parents:A,focus:_,actions:H}),[D,R,p,m,B,A]);return e("div",{ref:k,role:"tree","aria-multiselectable":"multiple"===p||void 0,className:d("flex flex-col",y),style:{...f(M,0),...g},...w,children:e(b.Provider,{value:K,children:e(TreeRows,{items:t,level:1,parent:null,tabStop:L,expanded:E,selected:O})})})});

package/dist/components/tree-select/PlTreeSelect.js

@@ -1 +1 @@
-"use client";import{jsxs as e,jsx as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PickerShell as a}from"../../internal/picker.js";import{searchHaystack as i,searchText as o}from"../../internal/search.js";import{cx as s,metaTextClasses as d}from"../../internal/styles.js";import{PlTextField as c}from"../text-field/PlTextField.js";import{PlTree as f}from"../tree/PlTree.js";function flatten(e,l=new Map){for(const t of e)l.set(t.id,t),t.children&&flatten(t.children,l);return l}function haystackOf(e){return i([e.searchLabel??("string"==typeof e.label?e.label:e.id)])}function filterTree(e,l){const t=[];for(const n of e){const e=n.children?filterTree(n.children,l):void 0,r=haystackOf(n).includes(l);(r||e&&e.length>0)&&t.push(r?n:{...n,children:e})}return t}function branchIds(e,l=[]){for(const t of e)t.children&&t.children.length>0&&(l.push(t.id),branchIds(t.children,l));return l}export const PlTreeSelect=/* @__PURE__ */t.forwardRef(function PlTreeSelect({items:i,value:h,defaultValue:m,onValueChange:u,multiple:p=!1,selectableBranches:g=!1,expanded:b,defaultExpanded:v,onExpandedChange:y,open:x,defaultOpen:j,onOpenChange:C,placeholder:O,clearable:S=!1,closeOnSelect:T,searchable:w=!1,searchLabel:z,emptyLabel:M,format:P,name:k,size:E,color:I,density:L,readOnly:N=!1,disabled:V=!1,...F},R){const B=n(),W=E??B.size??"md",q=I??B.color??"primary",A=L??B.density??"default",D=r(),G=z??D.search,H=M??D.empty,[J,K]=t.useState(m??[]),Q=h??J,[U,X]=t.useState(j??!1),Y=x??U,[Z,$]=t.useState(""),_=o(Z),ee=t.useMemo(()=>flatten(i),[i]),le=t.useMemo(()=>""===_?i:filterTree(i,_),[i,_]),te=""!==_,[ne,re]=t.useState(v??[]),ae=t.useMemo(()=>te?branchIds(le):void 0,[te,le])??b??ne,setOpen=e=>{e&&(V||N)||(void 0===x&&X(e),e||$(""),C?.(e))},commit=e=>{void 0===h&&K(e),u?.(e)},isSelectable=e=>!e.disabled&&(e.selectable??(!(e.children&&e.children.length>0)||g)),ie=Q.map(e=>ee.get(e)).filter(e=>void 0!==e),oe=0===ie.length?O??"":P?P(ie):ie.map((l,n)=>e(t.Fragment,{children:[0===n?null:", ",l.label]},l.id));return l(a,{...F,size:W,color:q,density:A,readOnly:N,disabled:V,triggerRef:R,display:oe,empty:0===ie.length,clearable:S,onClear:()=>commit([]),open:Y,onOpenChange:setOpen,labels:D,name:k,formValue:p?Q:Q[0]??"",children:e("div",{className:"flex max-h-80 w-64 flex-col gap-1.5 overflow-hidden",children:[w?l(c,{size:W,color:q,density:A,variant:"ghost",fullWidth:!0,placeholder:G,"aria-label":G,value:Z,onChange:e=>$(e.target.value)}):null,l("div",{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain",children:0===le.length?l("p",{className:s("m-0 px-1.5 py-1 text-(--plass-muted-fg)",d[W]),children:H}):l(f,{items:le,size:W,color:q,density:A,selection:p?"multiple":"single",selected:Q,onSelectedChange:e=>{if(!p){const l=1===e.length?ee.get(e[0]):void 0;if(!l||!isSelectable(l))return;return commit([l.id]),void((T??!0)&&setOpen(!1))}const l=e.filter(e=>{const l=ee.get(e);return void 0!==l&&isSelectable(l)});(l.length!==Q.length||l.some((e,l)=>e!==Q[l]))&&(commit(l),T&&setOpen(!1))},expanded:ae,onExpandedChange:e=>{te||(void 0===b&&re(e),y?.(e))}})})]})})});
+"use client";import{jsxs as e,jsx as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PickerShell as a}from"../../internal/picker.js";import{cachedSearchText as i,searchText as o}from"../../internal/search.js";import{cx as s,metaTextClasses as d}from"../../internal/styles.js";import{PlTextField as c}from"../text-field/PlTextField.js";import{PlTree as h}from"../tree/PlTree.js";function flatten(e,l=new Map){for(const t of e)l.set(t.id,t),t.children&&flatten(t.children,l);return l}const f=/* @__PURE__ */i(e=>e.searchLabel??("string"==typeof e.label?e.label:e.id));function filterTree(e,l){const t=[];for(const n of e){const e=n.children?filterTree(n.children,l):void 0,r=f(n).includes(l);(r||e&&e.length>0)&&t.push(r?n:{...n,children:e})}return t}function branchIds(e,l=[]){for(const t of e)t.children&&t.children.length>0&&(l.push(t.id),branchIds(t.children,l));return l}export const PlTreeSelect=/* @__PURE__ */t.forwardRef(function PlTreeSelect({items:i,value:f,defaultValue:m,onValueChange:p,multiple:u=!1,selectableBranches:g=!1,expanded:b,defaultExpanded:v,onExpandedChange:x,open:y,defaultOpen:j,onOpenChange:C,placeholder:S,clearable:T=!1,closeOnSelect:O,searchable:w=!1,searchLabel:z,emptyLabel:M,format:P,name:E,size:I,color:L,density:N,readOnly:V=!1,disabled:F=!1,...R},k){const B=n(),W=I??B.size??"md",q=L??B.color??"primary",A=N??B.density??"default",D=r(),G=z??D.search,H=M??D.empty,[J,K]=t.useState(m??[]),Q=f??J,[U,X]=t.useState(j??!1),Y=y??U,[Z,$]=t.useState(""),_=o(Z),ee=t.useMemo(()=>flatten(i),[i]),le=t.useMemo(()=>""===_?i:filterTree(i,_),[i,_]),te=""!==_,[ne,re]=t.useState(v??[]),ae=t.useMemo(()=>te?branchIds(le):void 0,[te,le])??b??ne,setOpen=e=>{e&&(F||V)||(void 0===y&&X(e),e||$(""),C?.(e))},commit=e=>{void 0===f&&K(e),p?.(e)},isSelectable=e=>!e.disabled&&(e.selectable??(!(e.children&&e.children.length>0)||g)),ie=Q.map(e=>ee.get(e)).filter(e=>void 0!==e),oe=0===ie.length?S??"":P?P(ie):ie.map((l,n)=>e(t.Fragment,{children:[0===n?null:", ",l.label]},l.id));return l(a,{...R,size:W,color:q,density:A,readOnly:V,disabled:F,triggerRef:k,display:oe,empty:0===ie.length,clearable:T,onClear:()=>commit([]),open:Y,onOpenChange:setOpen,labels:D,name:E,formValue:u?Q:Q[0]??"",children:e("div",{className:"flex max-h-80 w-64 flex-col gap-1.5 overflow-hidden",children:[w?l(c,{size:W,color:q,density:A,variant:"ghost",fullWidth:!0,placeholder:G,"aria-label":G,value:Z,onChange:e=>$(e.target.value)}):null,l("div",{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain",children:0===le.length?l("p",{className:s("m-0 px-1.5 py-1 text-(--plass-muted-fg)",d[W]),children:H}):l(h,{items:le,size:W,color:q,density:A,selection:u?"multiple":"single",selected:Q,onSelectedChange:e=>{if(!u){const l=1===e.length?ee.get(e[0]):void 0;if(!l||!isSelectable(l))return;return commit([l.id]),void((O??!0)&&setOpen(!1))}const l=e.filter(e=>{const l=ee.get(e);return void 0!==l&&isSelectable(l)});(l.length!==Q.length||l.some((e,l)=>e!==Q[l]))&&(commit(l),O&&setOpen(!1))},expanded:ae,onExpandedChange:e=>{te||(void 0===b&&re(e),x?.(e))}})})]})})});