plass-ui 1.5.0 → 1.7.0

package/dist/components/calendar/PlCalendar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Calendar as n,usePickerLabels as l}from"../../internal/calendar.js";import{popupPaddingClasses as s}from"../../internal/picker.js";import{useFormReport as r}from"../../internal/form.js";import{inertProps as i}from"../../internal/inert.js";import{isValidDate as m,localeWeekStart as d,mergeDateAndTime as c,startOfDay as u,startOfMonth as f,today as p,toISODate as h,toISOMonth as j,toISOYear as y}from"../../internal/date.js";import{controlTextLeadingClasses as D,cx as v,disabledClasses as x,radiusClasses as b,sheetRestClasses as w,surfaceSlots as S}from"../../internal/styles.js";const C={day:h,month:j,year:y};export const PlCalendar=/* @__PURE__ */t.forwardRef(function PlCalendar({variant:h="glass",size:j,color:y,elevation:O=1,value:g,defaultValue:k,onValueChange:z,precision:M="day",month:F,defaultMonth:N,onMonthChange:P,minDate:V,maxDate:R,shouldDisableDate:q,locale:A,weekStartsOn:B,showOutsideDays:E=!0,autoFocus:G=!1,disabled:H=!1,name:I,labels:J,className:K,style:L,...Q},T){const U=o(),W=A??U.locale,X=j??U.size??"md",Y=y??U.color??"primary",Z=l(J),$=B??U.weekStartsOn??d(W),[_,ee]=t.useState(k??null),ae=void 0!==g?g:_,[te,oe]=t.useState(()=>f(m(ae)?ae:N??p())),ne=F??te,setMonth=e=>{void 0===F&&oe(e),P?.(e)},le=m(ae)?C[M](ae):"";return r(I,()=>le,!H),a("div",{ref:T,...i(H),className:v("inline-flex flex-col",w[h],b[X],s[X],D[X],H?x[h]:"",K),style:{...S(Y,O),...L},...Q,children:[e(n,{size:X,color:Y,locale:W,weekStartsOn:$,month:ne,onMonthChange:setMonth,precision:M,selected:[ae],onSelect:e=>{const a=m(ae)?c(e,ae):u(e);void 0===g&&ee(a),z?.(a),setMonth(f(a))},minDate:V,maxDate:R,shouldDisableDate:q,showOutsideDays:E,autoFocus:G,labels:Z}),I?e("input",{type:"hidden",name:I,value:le,disabled:H}):null]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Calendar as l,usePickerLabels as n}from"../../internal/calendar.js";import{popupPaddingClasses as s,popupSlots as r}from"../../internal/picker.js";import{FieldsetDisabledContext as i,useDisabled as m,useFormReport as d}from"../../internal/form.js";import{inertProps as c}from"../../internal/inert.js";import{isValidDate as u,localeWeekStart as f,mergeDateAndTime as h,startOfDay as p,startOfMonth as j,today as v,toISODate as y,toISOMonth as D,toISOYear as x}from"../../internal/date.js";import{controlTextLeadingClasses as b,cx as w,disabledClasses as S,radiusClasses as C,sheetRestClasses as O}from"../../internal/styles.js";const g={day:y,month:D,year:x};export const PlCalendar=/* @__PURE__ */t.forwardRef(function PlCalendar({variant:y="glass",size:D,color:x,elevation:k=1,value:z,defaultValue:M,onValueChange:P,precision:F="day",month:N,defaultMonth:V,onMonthChange:R,minDate:q,maxDate:A,shouldDisableDate:B,locale:E,weekStartsOn:G,showOutsideDays:H=!0,autoFocus:I=!1,disabled:J=!1,name:K,labels:L,className:Q,style:T,...U},W){const X=o(),Y=m(J),Z=E??X.locale,$=D??X.size??"md",_=x??X.color??"primary",ee=n(L),ae=G??X.weekStartsOn??f(Z),[te,oe]=t.useState(M??null),le=void 0!==z?z:te,[ne,se]=t.useState(()=>j(u(le)?le:V??v())),re=N??ne,setMonth=e=>{void 0===N&&se(e),R?.(e)},ie=u(le)?g[F](le):"";return d(K,()=>ie,!Y),a("div",{ref:W,...c(Y),className:w("inline-flex flex-col",O[y],C[$],s[$],b[$],Y?S[y]:"",Q),style:{...r(_,k),...T},...U,children:[e(i.Provider,{value:!1,children:e(l,{size:$,color:_,locale:Z,weekStartsOn:ae,month:re,onMonthChange:setMonth,precision:F,selected:[le],onSelect:e=>{const a=u(le)?h(e,le):p(e);void 0===z&&oe(a),P?.(a),setMonth(j(a))},minDate:q,maxDate:A,shouldDisableDate:B,showOutsideDays:H,autoFocus:I,labels:ee})}),K?e("input",{type:"hidden",name:K,value:ie,disabled:Y}):null]})});

package/dist/components/card/PlCard.d.ts

@@ -51,15 +51,18 @@ export interface PlCardProps extends PlassStyleProps, Omit<React.ComponentPropsW
      * pane of glass says it can be picked up.
      *
      * It changes how the card looks and nothing else. A card that is actually
-     * clickable has to be a real element: `render={<a href="…" />}` or
-     * `render={<button type="button" />}`, so it is focusable, announced, and
-     * reachable from a keyboard.
+     * clickable needs a real link: the title's own, stretched over the card by an
+     * `::after` with `absolute inset-0` against a `relative` card, so it is
+     * focusable, announced, and named by the title alone. A control in a slot
+     * takes `relative` and a `z-index` to sit above it. Rendering the whole card
+     * as the link puts every slot inside it, and a button in one of them inside a
+     * link.
      * @default false
      */
     interactive?: boolean;
     /**
      * Renders something other than a `<div>`: `render={<section />}`,
-     * `render={<li />}`, `render={<a href="…" />}`. Base UI's own escape hatch.
+     * `render={<li />}`, `render={<article />}`. Base UI's own escape hatch.
      */
     render?: useRender.RenderProp;
     /** The card's body. */

package/dist/components/carousel/PlCarousel.d.ts

@@ -20,12 +20,18 @@ export interface PlCarouselProps extends PlassStyleProps, Omit<React.ComponentPr
      */
     loop?: boolean;
     /**
-     * Advances on its own.
+     * Advances on its own, with a button over the frame that stops it and starts
+     * it again.
      *
      * Off by default and deliberately so: a carousel that moves while it is being
-     * read is the most complained-about pattern on the web. It pauses on hover,
-     * on focus anywhere inside it, while the tab is in the background, and it
-     * does not start at all for a reader who has asked for reduced motion.
+     * read is the most complained-about pattern on the web. It pauses while the
+     * pointer is over it, while a finger is down on the strip, while the tab is
+     * in the background, and while it is hidden in a tab panel that is not
+     * selected or a closed disclosure; once the finger lifts, or it is shown
+     * again, it holds the slide it is on for a whole `interval`. It **stops** once
+     * the focus comes into it or an arrow or a dot is clicked, and stays stopped
+     * until the button starts it again. For a reader who has asked for reduced
+     * motion it starts stopped.
      * @default false
      */
     autoPlay?: boolean;
@@ -45,6 +51,10 @@ export interface PlCarouselProps extends PlassStyleProps, Omit<React.ComponentPr
     previousLabel?: string;
     /** @default 'Next slide' */
     nextLabel?: string;
+    /** What the `autoPlay` button says while the carousel is stopped. @default 'Start slide show' */
+    playLabel?: string;
+    /** What it says while the carousel is playing. @default 'Stop slide show' */
+    stopLabel?: string;
     /**
      * How one slide is named to a screen reader, and how its dot is labelled.
      * @default `Slide {index} of {count}`, from the label pack

package/dist/components/carousel/PlCarousel.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{ChevronIcon as o}from"../../internal/icons.js";import{cx as i,radiusClasses as c,sheetRestClasses as u,srOnlyClasses as d,surfaceSlots as f,transitionClasses as m}from"../../internal/styles.js";const p={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},h={xs:{rest:"h-1 w-1",current:"h-1 w-3"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5"},xl:{rest:"h-2 w-2",current:"h-2 w-6"}};export const PlCarousel=/* @__PURE__ */t.forwardRef(function PlCarousel({variant:v="glass",size:b,color:w,density:x,elevation:g=0,value:y,defaultValue:N=0,onValueChange:j,loop:C=!0,autoPlay:k=!1,interval:R=5e3,arrows:M=!0,indicators:P=!0,label:L,previousLabel:E,nextLabel:z,slideLabel:B,className:I,style:S,children:_,...T},V){const W=s(),$=l(),A=L??$.carousel,F=E??$.carouselPrevious,q=z??$.carouselNext,D=b??W.size??"md",G=w??W.color??"primary",H=x??W.density??"default",J=B??$.carouselSlide,K=t.Children.toArray(_),O=K.length,[Q,U]=t.useState(N),X=Math.min(Math.max(y??Q,0),Math.max(O-1,0)),Y=t.useRef(null),Z=t.useRef([]),ee=t.useRef(!1),re=t.useRef(!1),te=t.useRef(!1),[ne,se]=t.useState(!1),le=t.useCallback((e,r=!1)=>{if(0===O)return;const t=C?(e%O+O)%O:Math.min(Math.max(e,0),O-1);ee.current=r,void 0===y&&U(t),t!==X&&j?.(t)},[O,C,y,X,j]);t.useEffect(()=>{if(ee.current)return void(ee.current=!1);if(!re.current)return void(re.current=!0);const e=Y.current,r=Z.current[X];e&&r&&e.scrollTo({left:e.scrollLeft+r.getBoundingClientRect().left-e.getBoundingClientRect().left}),te.current=!0;const t=window.setTimeout(()=>{te.current=!1},700);return()=>window.clearTimeout(t)},[X]);const ae=t.useRef(le);t.useEffect(()=>{ae.current=le}),t.useEffect(()=>{if(!k||ne||O<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||ae.current(X+1)},R);return()=>window.clearInterval(e)},[k,ne,O,R,X]);const oe=X<=0,ie=X>=O-1;return r("div",{ref:V,role:"region","aria-roledescription":$.carousel,"aria-label":A,className:i("flex flex-col",I),style:{...f(G,g),...S},...n(T,{onPointerEnter:()=>se(!0),onPointerLeave:()=>se(!1),onFocus:()=>se(!0),onBlur:()=>se(!1)}),children:[r("div",{className:i("relative min-w-0 overflow-hidden",c[D],u[v],m),children:[e("div",{ref:Y,tabIndex:0,role:"group","aria-label":A,className:i("flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:()=>{const e=Y.current;if(te.current||!e||0===e.clientWidth)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==X&&r>=0&&r<O&&le(r,!0)},children:K.map((r,n)=>e("div",{ref:e=>{Z.current[n]=e},role:"group","aria-roledescription":$.slide,"aria-label":J(n+1,O),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t.isValidElement(r)?r.key??n:n))}),M&&O>1?r("div",{className:i("pointer-events-none absolute inset-y-0 flex items-center",p[D]),children:[e(a,{variant:"glass",size:D,color:G,density:H,elevation:1,label:F,disabled:!C&&oe,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(o,{})}),onClick:()=>le(X-1)}),e("span",{className:"flex-1"}),e(a,{variant:"glass",size:D,color:G,density:H,elevation:1,label:q,disabled:!C&&ie,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(o,{})}),onClick:()=>le(X+1)})]}):null]}),P&&O>1?e("div",{className:"flex shrink-0 items-center justify-center",children:K.map((r,t)=>e("button",{type:"button","aria-label":J(t+1,O),"aria-current":t===X?"true":void 0,className:i("group flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-full","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0"),onClick:()=>le(t),children:e("span",{"aria-hidden":"true",className:i("rounded-full","[transition-property:width,background-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",t===X?`${h[D].current} bg-(--p-accent)`:`${h[D].rest} bg-(--plass-border) group-hover:bg-(--p-accent)`)})},t))}):null,e("span",{className:d,"aria-live":k?"off":"polite",children:O>0?J(X+1,O):""})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{ChevronIcon as l,PauseIcon as i,PlayIcon as c}from"../../internal/icons.js";import{usePrefersReducedMotion as u}from"../../internal/media.js";import{cx as d,pictureSlotClasses as f,radiusClasses as m,sheetRestClasses as h,srOnlyClasses as p,surfaceSlots as v,transitionClasses as b}from"../../internal/styles.js";const g={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},w={xs:"top-1 start-1",sm:"top-1.5 start-1.5",md:"top-2 start-2",lg:"top-3 start-3",xl:"top-4 start-4"},x={xs:{rest:"h-1 w-1",current:"h-1 w-3"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5"},xl:{rest:"h-2 w-2",current:"h-2 w-6"}};function scrollTrackTo(e,t,r){e.scrollTo({left:e.scrollLeft+t.getBoundingClientRect().left-e.getBoundingClientRect().left,behavior:r})}export const PlCarousel=/* @__PURE__ */r.forwardRef(function PlCarousel({variant:y="glass",size:R,color:T,density:N,elevation:k=0,value:C,defaultValue:L=0,onValueChange:j,loop:E=!0,autoPlay:S=!1,interval:z=5e3,arrows:P=!0,indicators:M=!0,label:B,previousLabel:I,nextLabel:W,playLabel:_,stopLabel:V,slideLabel:O,className:$,style:A,children:F,...q},D){const G=s(),H=o(),J=B??H.carousel,K=I??H.carouselPrevious,Q=W??H.carouselNext,U=_??H.carouselPlay,X=V??H.carouselStop,Y=R??G.size??"md",Z=T??G.color??"primary",ee=N??G.density??"default",te=O??H.carouselSlide,re=r.Children.toArray(F),ne=re.length,[se,oe]=r.useState(L),ae=Math.min(Math.max(C??se,0),Math.max(ne-1,0)),le=r.useRef(null),ie=r.useRef([]),ce=r.useRef(!1),ue=r.useRef(!1),de=r.useRef(!1),fe=r.useRef(!1),me=r.useRef(0),[he,pe]=r.useState(0),[ve,be]=r.useState(!1),ge=r.useRef(new Set),[we,xe]=r.useState(!1),[ye,Re]=r.useState(null),Te=u(),Ne=ye??Te,ke=S&&!Ne,Ce=r.useRef(null),Le=r.useRef(!1),je=r.useCallback((e,t=!1)=>{if(0===ne)return;const r=E?(e%ne+ne)%ne:Math.min(Math.max(e,0),ne-1);ce.current=t,void 0===C&&oe(r),r!==ae&&j?.(r)},[ne,E,C,ae,j]),Ee=r.useRef(ae);r.useLayoutEffect(()=>{Ee.current=ae}),r.useLayoutEffect(()=>{const e=le.current;if(!e)return;const place=()=>{const t=ie.current[Ee.current];t&&scrollTrackTo(e,t,"instant")};if("undefined"==typeof ResizeObserver)return void(Ee.current>0&&place());fe.current=0===e.clientWidth,!fe.current&&Ee.current>0&&place();const t=new ResizeObserver(e=>{0===e[e.length-1].contentRect.width?fe.current=!0:fe.current&&(fe.current=!1,place(),me.current+=1,pe(me.current))});return t.observe(e),()=>t.disconnect()},[]),r.useEffect(()=>{if(ce.current)return void(ce.current=!1);if(!ue.current)return void(ue.current=!0);const e=le.current,t=ie.current[ae];e&&t&&scrollTrackTo(e,t),de.current=!0;const r=window.setTimeout(()=>{de.current=!1},700);return()=>window.clearTimeout(r)},[ae]);const Se=r.useRef(je);r.useEffect(()=>{Se.current=je}),r.useEffect(()=>{if(!ke)return;const handleVisibility=()=>{document.hidden||(me.current+=1,pe(me.current))};return document.addEventListener("visibilitychange",handleVisibility),()=>document.removeEventListener("visibilitychange",handleVisibility)},[ke]),r.useEffect(()=>{if(!ke||ve||we||ne<2)return;const e=window.setInterval(()=>{document.hidden||fe.current||me.current!==he||0===le.current?.clientWidth||Se.current(ae+1)},z);return()=>window.clearInterval(e)},[ke,ve,we,ne,z,ae,he]);const handleTouch=e=>{const t="touchstart"===e.type;for(let r=0;r<e.changedTouches.length;r+=1){const{identifier:n}=e.changedTouches[r];t?ge.current.add(n):ge.current.delete(n)}xe(ge.current.size>0)},hold=()=>{S&&!Le.current&&Re(!0)},steer=e=>{hold(),je(e)},ze=ae<=0,Pe=ae>=ne-1;return t("div",{ref:D,role:"region","aria-roledescription":H.carousel,"aria-label":J,className:d("flex flex-col",$),style:{...v(Z,k),...A},...n(q,{onPointerEnter:()=>be(!0),onPointerLeave:()=>be(!1),onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||(Le.current=!1),e.target!==Ce.current&&hold()},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(Le.current=!1)}}),children:[t("div",{className:d("relative min-w-0 overflow-hidden",m[Y],h[y],b),children:[S&&ne>1?e("div",{className:d("absolute z-10 flex",w[Y]),children:e(a,{ref:Ce,variant:"glass",size:Y,color:Z,density:ee,elevation:1,label:Ne?U:X,icon:e(Ne?c:i,{}),onClick:()=>{const e=!Ne;Re(e),Le.current=!e}})}):null,e("div",{ref:le,tabIndex:0,role:"group","aria-label":J,className:d("flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:()=>{const e=le.current;if(de.current||fe.current||!e||0===e.clientWidth)return;const t=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);t!==ae&&t>=0&&t<ne&&je(t,!0)},onTouchStart:handleTouch,onTouchEnd:handleTouch,onTouchCancel:handleTouch,children:re.map((t,n)=>e("div",{ref:e=>{ie.current[n]=e},role:"group","aria-roledescription":H.slide,"aria-label":te(n+1,ne),className:d("w-full shrink-0 grow-0 basis-full snap-start",f),children:t},r.isValidElement(t)?t.key??n:n))}),P&&ne>1?t("div",{className:d("pointer-events-none absolute inset-y-0 flex items-center",g[Y]),children:[e(a,{variant:"glass",size:Y,color:Z,density:ee,elevation:1,label:K,disabled:!E&&ze,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(l,{})}),onClick:()=>steer(ae-1)}),e("span",{className:"flex-1"}),e(a,{variant:"glass",size:Y,color:Z,density:ee,elevation:1,label:Q,disabled:!E&&Pe,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(l,{})}),onClick:()=>steer(ae+1)})]}):null]}),M&&ne>1?e("div",{className:"flex shrink-0 items-center justify-center",children:re.map((t,r)=>e("button",{type:"button","aria-label":te(r+1,ne),"aria-current":r===ae?"true":void 0,className:d("group flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-full","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0"),onClick:()=>steer(r),children:e("span",{"aria-hidden":"true",className:d("rounded-full","[transition-property:width,background-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",r===ae?`${x[Y].current} bg-(--p-accent)`:`${x[Y].rest} bg-(--plass-border) group-hover:bg-(--p-accent)`)})},r))}):null,e("span",{className:p,"aria-live":ke?"off":"polite",children:ne>0?te(ae+1,ne):""})]})});

package/dist/components/chat-bubble/PlChatBubble.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{CheckIcon as i,ClockIcon as t,LinkIcon as o,severityIcon as d}from"../../internal/icons.js";import{safeHref as c}from"../../internal/link.js";import{controlSlots as p,focusRingClasses as m,forcedFieldEdgeClasses as u,glassClasses as g,hasContent as f,metaTextClasses as v,radiusClasses as h,sheetBodyClasses as x,sheetHeaderGapClasses as b,srOnlyClasses as y,transitionClasses as k}from"../../internal/styles.js";const w={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},N={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},j={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",u].join(" "),glass:/* @__PURE__ */[g,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft) [box-shadow:var(--p-elev)]"};function DoubleCheckIcon(){return s("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const _={sending:e(t,{}),sent:e(i,{}),delivered:e(DoubleCheckIcon,{}),read:e(DoubleCheckIcon,{}),failed:/* @__PURE__ */d("danger")};function statusWord(e,s){switch(e){case"sending":return s.messageSending;case"sent":return s.messageSent;case"delivered":return s.messageDelivered;case"read":return s.messageRead;case"failed":return s.messageFailed}}const C={sending:"text-(--plass-muted-fg)",sent:"text-(--plass-muted-fg)",delivered:"text-(--plass-muted-fg)",read:"text-(--p-accent)",failed:"text-(--plass-danger-accent)"},L=/* @__PURE__ */["block overflow-hidden rounded-(--plass-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]"].join(" "),z=/* @__PURE__ */[L,"hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property:background-color] [transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",m].join(" "),D=/* @__PURE__ */["shrink-0 opacity-0","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const PlChatBubble=/* @__PURE__ */l.forwardRef(function PlChatBubble({side:a="start",name:l,time:i,avatar:t,status:o,statusLabel:d,typing:c=!1,typingLabel:m,media:u,preview:g,actions:L,variant:z="glass",size:B,color:P,density:W,elevation:I=0,className:T,style:F,children:R,...S},M){const $=r(),q=n(),A=m??q.typing,E=B??$.size??"md",G=P??$.color??"primary",H=W??$.density??"default",J="end"===a,K=f(l)||f(i),O=c||f(R)||Boolean(g),Q=["flex min-w-0 flex-col overflow-hidden",h[E],N[a],j[z],k].join(" ");return s("div",{ref:M,className:["group/bubble flex w-full items-start gap-2",J?"flex-row-reverse":"",T??""].filter(Boolean).join(" "),style:{...p(G,I,z),...F},...S,children:[f(t)?e("div",{className:"shrink-0",children:t}):null,s("div",{className:["flex max-w-[min(100%,32rem)] min-w-0 flex-col",b[E],J?"items-end":"items-start"].join(" "),children:[K?s("div",{className:`flex items-baseline gap-2 ${v[E]}`,children:[f(l)?e("span",{className:"font-semibold",children:l}):null,f(i)?e("span",{className:"text-(--plass-muted-fg)",children:i}):null]}):null,s("div",{className:"flex min-w-0 items-center gap-1 "+(J?"flex-row-reverse":""),children:[s("div",{className:Q,children:[f(u)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:u}):null,O?s("div",{className:[w[H][E],"flex min-w-0 flex-col gap-2",x[E]].join(" "),children:[c?e(TypingDots,{label:A}):f(R)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:R}):null,g?e(LinkPreview,{preview:g}):null]}):null]}),f(L)?e("div",{className:D,children:L}):null]}),o?s("div",{className:["flex items-center gap-1",v[E],C[o],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[_[o],e("span",{className:y,children:d??statusWord(o,q)})]}):null]})]})});function TypingDots({label:a}){return s("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(s=>e("span",{"aria-hidden":"true",className:"plass-typing-dot size-[0.45em] rounded-full",style:{"--p-i":s}},s)),e("span",{className:y,children:a})]})}function LinkPreview({preview:l}){const{url:r,title:n,description:i,image:t,site:d,newTab:p=!1}=l,m=c(r),u=s(a,{children:[t?e("img",{src:t,alt:"",loading:"lazy",decoding:"async",className:"block h-28 w-full object-cover"}):null,s("div",{className:"flex flex-col gap-0.5 p-2",children:[f(d)?s("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(o,{}),e("span",{className:"truncate",children:d})]}):null,f(n)?e("span",{className:"font-semibold",children:n}):null,f(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]});return void 0===m?e("div",{className:L,children:u}):e("a",{href:m,target:p?"_blank":void 0,rel:p?"noopener noreferrer":void 0,className:z,children:u})}
+"use client";import{jsx as e,jsxs as s,Fragment as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{CheckIcon as i,ClockIcon as t,LinkIcon as o,severityIcon as d}from"../../internal/icons.js";import{safeHref as c}from"../../internal/link.js";import{controlSlots as p,focusRingClasses as m,forcedFieldEdgeClasses as u,glassClasses as g,hasContent as f,metaTextClasses as v,radiusClasses as h,sheetBodyClasses as x,sheetHeaderGapClasses as b,srOnlyClasses as y,transitionClasses as k}from"../../internal/styles.js";const w={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},N={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},j={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",u].join(" "),glass:/* @__PURE__ */[g,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-(--p-soft) [box-shadow:var(--p-elev)]"};function DoubleCheckIcon(){return s("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const _={sending:e(t,{}),sent:e(i,{}),delivered:e(DoubleCheckIcon,{}),read:e(DoubleCheckIcon,{}),failed:/* @__PURE__ */d("danger")};function statusWord(e,s){switch(e){case"sending":return s.messageSending;case"sent":return s.messageSent;case"delivered":return s.messageDelivered;case"read":return s.messageRead;case"failed":return s.messageFailed}}const C={sending:"text-(--plass-muted-fg)",sent:"text-(--plass-muted-fg)",delivered:"text-(--plass-muted-fg)",read:"text-(--p-accent)",failed:"text-(--plass-danger-accent)"},L=/* @__PURE__ */["block overflow-hidden rounded-(--plass-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]"].join(" "),z=/* @__PURE__ */[L,"hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property:background-color] [transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",m].join(" "),D=/* @__PURE__ */["shrink-0 opacity-0","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const PlChatBubble=/* @__PURE__ */r.forwardRef(function PlChatBubble({side:a="start",name:r,time:i,avatar:t,status:o,statusLabel:d,typing:c=!1,typingLabel:m,media:u,preview:g,actions:L,variant:z="glass",size:B,color:P,density:W,elevation:I=0,className:T,style:F,children:R,...S},M){const $=n(),q=l(),A=m??q.typing,E=B??$.size??"md",G=P??$.color??"primary",H=W??$.density??"default",J="end"===a,K=f(r)||f(i),O=c||f(R)||Boolean(g),Q=["flex min-w-0 flex-col overflow-hidden",h[E],N[a],j[z],k].join(" ");return s("div",{ref:M,className:["group/bubble flex w-full items-start gap-2",J?"flex-row-reverse":"",T??""].filter(Boolean).join(" "),style:{...p(G,I,z),...F},...S,children:[f(t)?e("div",{className:"shrink-0",children:t}):null,s("div",{className:["flex max-w-[min(100%,32rem)] min-w-0 flex-col",b[E],J?"items-end":"items-start"].join(" "),children:[K?s("div",{className:`flex items-baseline gap-2 ${v[E]}`,children:[f(r)?e("span",{className:"font-semibold",children:r}):null,f(i)?e("span",{className:"text-(--plass-muted-fg)",children:i}):null]}):null,s("div",{className:"flex min-w-0 items-center gap-1 "+(J?"flex-row-reverse":""),children:[s("div",{className:Q,children:[f(u)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full [:where(&_img)]:h-auto [:where(&_video)]:h-auto",children:u}):null,O?s("div",{className:[w[H][E],"flex min-w-0 flex-col gap-2",x[E]].join(" "),children:[c?e(TypingDots,{label:A}):f(R)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:R}):null,g?e(LinkPreview,{preview:g}):null]}):null]}),f(L)?e("div",{className:D,children:L}):null]}),o?s("div",{className:["flex items-center gap-1",v[E],C[o],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[_[o],e("span",{className:y,children:d??statusWord(o,q)})]}):null]})]})});function TypingDots({label:a}){return s("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(s=>e("span",{"aria-hidden":"true",className:"plass-typing-dot size-[0.45em] rounded-full",style:{"--p-i":s}},s)),e("span",{className:y,children:a})]})}function LinkPreview({preview:r}){const{url:n,title:l,description:i,image:t,site:d,newTab:p=!1}=r,m=c(n),u=s(a,{children:[t?e("img",{src:t,alt:"",loading:"lazy",decoding:"async",className:"block h-28 w-full object-cover"}):null,s("div",{className:"flex flex-col gap-0.5 p-2",children:[f(d)?s("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(o,{}),e("span",{className:"truncate",children:d})]}):null,f(l)?e("span",{className:"font-semibold",children:l}):null,f(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]});return void 0===m?e("div",{className:L,children:u}):e("a",{href:m,target:p?"_blank":void 0,rel:p?"noopener noreferrer":void 0,className:z,children:u})}

package/dist/components/checkbox/PlCheckbox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Checkbox as o}from"@base-ui/react/checkbox";import{Field as s}from"@base-ui/react/field";import{controlSlots as i,cx as n,focusRingClasses as l,forcedCheckedClasses as c,forcedDisabledCheckedClasses as d,glassClasses as h,hasContent as p,metaTextClasses as m,tickRadiusClasses as f,tickRowTextClasses as u,tickSizeClasses as k,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,l].join(" "),x=/* @__PURE__ */["forced-colors:data-[indeterminate]:[background-color:Highlight]","forced-colors:data-[indeterminate]:[border-color:Highlight]","forced-colors:data-[indeterminate]:[color:HighlightText]"].join(" "),v=/* @__PURE__ */[h,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",c,x].join(" "),j=/* @__PURE__ */[h,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",c,x].join(" "),N=/* @__PURE__ */[h,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)",d,"forced-colors:data-[indeterminate]:[background-color:GrayText]","forced-colors:data-[indeterminate]:[color:Canvas]"].join(" "),y=/* @__PURE__ */["flex size-[70%] items-center justify-center","[&_path]:[stroke-dasharray:1] [&_path]:[stroke-dashoffset:0]","[&_path]:[transition:stroke-dashoffset_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[&_path]:[transition-duration:0ms]","data-[unchecked]:[&_path]:[stroke-dashoffset:1]"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a,color:l,label:c,description:d,error:h,invalid:g,disabled:x=!1,readOnly:C=!1,className:M,classNames:_,style:w,...L},z){const B=t(),D=a??B.size??"md",H=l??B.color??"primary",R=p(h),O=g??R,P=O?"danger":H,T=n(b,k[D],f[D],x?N:C?j:v,_?.control);return r(s.Root,{disabled:x,invalid:O,className:["inline-flex flex-col gap-1 align-top",M??""].filter(Boolean).join(" "),style:{...i(P,0,"solid"),...w},children:[r("div",{className:`flex items-start gap-2 ${u[D]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:z,className:T,disabled:x,readOnly:C,...L,children:e(o.Indicator,{keepMounted:!0,className:y,children:L.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),c||d?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[c?e(s.Label,{className:n(x?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",_?.label),children:c}):null,d?e(s.Description,{className:n(m[D],"text-(--plass-muted-fg)",_?.description),children:d}):null]}):null]}),e(s.Error,R?{match:!0,className:n(m[D],"text-(--p-accent)",_?.error),children:h}:{className:n(m[D],"text-(--p-accent)",_?.error)})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as o}from"../../internal/defaults.js";import{Checkbox as n}from"@base-ui/react/checkbox";import{Field as s}from"@base-ui/react/field";import{controlSlots as i,cx as l,fieldDescriptionClasses as d,focusRingClasses as c,forcedCheckedClasses as p,forcedDisabledCheckedClasses as h,glassClasses as m,hasContent as f,metaTextClasses as u,tickRadiusClasses as k,tickRowTextClasses as b,tickSizeClasses as g,transitionClasses as x}from"../../internal/styles.js";const v=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill [--p-fill-edge:1px]",x,c].join(" "),j=/* @__PURE__ */["forced-colors:data-[indeterminate]:[background-color:Highlight]","forced-colors:data-[indeterminate]:[border-color:Highlight]","forced-colors:data-[indeterminate]:[color:HighlightText]"].join(" "),N=/* @__PURE__ */[m,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",p,j].join(" "),y=/* @__PURE__ */[m,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",p,j].join(" "),C=/* @__PURE__ */[m,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",h,"forced-colors:data-[indeterminate]:[background-color:GrayText]","forced-colors:data-[indeterminate]:[color:Canvas]"].join(" "),M=/* @__PURE__ */["flex size-[70%] items-center justify-center","[&_path]:[stroke-dasharray:1] [&_path]:[stroke-dashoffset:0]","[&_path]:[transition:stroke-dashoffset_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[&_path]:[transition-duration:0ms]","data-[unchecked]:[&_path]:[stroke-dashoffset:1]"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a,color:c,label:p,description:h,error:m,invalid:x,disabled:j=!1,readOnly:_=!1,className:w,classNames:L,style:z,...B},D){const H=o(),R=t(j),O=a??H.size??"md",P=c??H.color??"primary",T=f(m),W=x??T,E=W?"danger":P,G=l(v,g[O],k[O],R?C:_?y:N,L?.control);return r(s.Root,{disabled:R,invalid:W,className:["inline-flex flex-col gap-1 align-top",w??""].filter(Boolean).join(" "),style:{...i(E,0,"solid"),...z},children:[r("div",{className:`flex items-start gap-2 ${b[O]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:D,className:G,disabled:R,readOnly:_,...B,children:e(n.Indicator,{keepMounted:!0,className:M,children:B.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),p||h?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p?e(s.Label,{className:l(R?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",L?.label),children:p}):null,h?e(s.Description,{className:l(d(O),L?.description),children:h}):null]}):null]}),e(s.Error,T?{match:!0,className:l(u[O],"text-(--p-accent)",L?.error),children:m}:{className:l(u[O],"text-(--p-accent)",L?.error)})]})});

package/dist/components/chip/PlChip.d.ts

@@ -49,7 +49,8 @@ export interface PlChipProps extends PlassStyleProps, Omit<React.ComponentPropsW
  * The shell is always a `<span>`. What changes is what is inside it: a plain run
  * of content, or — when `onClick` is given — a real `<button>` wrapping that
  * content, plus a second button for `onDelete`. Both are reachable by keyboard,
- * and neither is nested inside the other.
+ * and neither is nested inside the other. `disabled` disables them rather than
+ * taking them away.
  *
  * An inert `<span>` carrying a click handler is the single most common way a
  * component library loses its keyboard users, and a `<button>` inside a

package/dist/components/chip/PlChip.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{CloseIcon as a}from"../../internal/icons.js";import{textOf as n}from"../../internal/text.js";import{chipRemoveClasses as i,controlHeightClasses as d,controlSlots as p,controlTextClasses as c,disabledClasses as m,focusRingClasses as g,forcedEdgeClasses as b,gapClasses as f,glassClasses as h,hasContent as u,iconClasses as v,paddingXClasses as x,radiusClasses as j,transitionClasses as y}from"../../internal/styles.js";const w={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},k={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)] ${b}`,glass:/* @__PURE__ */[h,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},N={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},$={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},C=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",y,v].join(" "),I=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",g].join(" ");export const PlChip=/* @__PURE__ */t.forwardRef(function PlChip({variant:g="glass",size:b,color:h,density:v,elevation:y=0,startIcon:z,endIcon:B,count:P,onDelete:D,deleteLabel:F,selected:L=!1,disabled:R=!1,className:q,style:A,children:E,onClick:G,...H},J){const K=o(),M=r(),O=n(E).trim(),Q=F??(O?M.removeItem(O):M.remove),S=b??K.size??"md",T=h??K.color??"primary",U=v??K.density??"default",V=Boolean(G)&&!R,W=t.useId(),X=t.useId(),Y=w[S],Z=x[U][Y],_=[C,d[Y],c[Y],f[Y],j[Y],R?m[g]:k[g],!R&&L?N[g]:"",V?$[g]:"",V?"ps-0":Z,D?"pe-1":V?"pe-0":"",q??""].filter(Boolean).join(" "),ee=l(s,{children:[z,u(E)?e("span",{id:X,className:"min-w-0 truncate leading-[normal]",children:E}):null,B,u(P)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===g?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:P}):null]});return l("span",{ref:J,className:_,style:{...p(T,y,g),...A},"aria-disabled":!(!R||V)||void 0,...H,children:[V?e("button",{type:"button","aria-pressed":L,className:`${I} ${f[Y]} ${Z}`,onClick:G,children:ee}):ee,D?e("button",{type:"button",id:W,"aria-label":Q,"aria-labelledby":void 0===F&&!O&&u(E)?`${W} ${X}`:void 0,disabled:R,className:i,onClick:D,children:e(a,{})}):null]})});
+"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{FadedContext as t}from"../../internal/form.js";import{glowPointerMove as r}from"../../internal/glow.js";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{CloseIcon as i}from"../../internal/icons.js";import{textOf as d}from"../../internal/text.js";import{chipRemoveClasses as p,controlHeightClasses as c,controlSlots as m,controlTextClasses as g,disabledClasses as b,disabledLookClasses as f,focusRingClasses as h,forcedEdgeClasses as u,gapClasses as v,glassClasses as x,hasContent as j,iconClasses as w,paddingXClasses as y,radiusClasses as k,transitionClasses as $}from"../../internal/styles.js";const C={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},N={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)] ${u}`,glass:/* @__PURE__ */[x,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},I={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},P={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},z=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",$,w].join(" "),B=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",h,"disabled:cursor-not-allowed"].join(" ");export const PlChip=/* @__PURE__ */o.forwardRef(function PlChip({variant:h="glass",size:u,color:x,density:w,elevation:$=0,startIcon:M,endIcon:D,count:F,onDelete:L,deleteLabel:R,selected:q=!1,disabled:A=!1,className:E,style:G,children:H,onClick:J,onPointerMove:K,...O},Q){const S=n(),T=a(),U=d(H).trim(),V=R??(U?T.removeItem(U):T.remove),W=u??S.size??"md",X=x??S.color??"primary",Y=w??S.density??"default",Z=o.useContext(t),_=Boolean(J),ee=_&&!A,se=o.useId(),le=o.useId(),oe=C[W],te=y[Y][oe],re=[z,c[oe],g[oe],v[oe],k[oe],A?(Z?f:b)[h]:N[h],!A&&q?I[h]:"",ee?`plass-glow ${P[h]}`:"",_?"ps-0":te,L?"pe-1":_?"pe-0":"",E??""].filter(Boolean).join(" "),ne=l(s,{children:[M,j(H)?e("span",{id:le,className:"min-w-0 truncate leading-[normal]",children:H}):null,D,j(F)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===h?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:F}):null]});return l("span",{ref:Q,className:re,style:{...m(X,$,h),...G},"aria-disabled":!(!A||_)||void 0,onPointerMove:r(ee,K),...O,children:[_?e("button",{type:"button",disabled:A,"aria-pressed":q,className:`${B} ${v[oe]} ${te}`,onClick:J,children:ne}):ne,L?e("button",{type:"button",id:se,"aria-label":V,"aria-labelledby":void 0===R&&!U&&j(H)?`${se} ${le}`:void 0,disabled:A,className:p,onClick:L,children:e(i,{})}):null]})});

package/dist/components/collapsible/PlCollapsible.d.ts

@@ -39,6 +39,17 @@ export interface PlCollapsibleProps extends PlassStyleProps, Omit<React.Componen
     trigger?: React.ReactElement;
     /** The chevron at the end of the header, turned to report the state. @default true */
     indicator?: boolean;
+    /**
+     * Holds the header's title and subtitle to one line each, ellipsing whatever
+     * runs past.
+     *
+     * Off, as it is on a `PlAccordionItem`: a fold's title is a heading rather
+     * than a cell, and ellipsing one costs the reader the end of it with no
+     * tooltip and no way to see it. The place for it is a header carrying a name
+     * from a database beside a control.
+     * @default false
+     */
+    truncate?: boolean;
     /** Unavailable. The trigger stops answering and the panel stays as it is. */
     disabled?: boolean;
     /**

package/dist/components/collapsible/PlCollapsible.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Collapsible as a}from"@base-ui/react/collapsible";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as i,focusRingInsetClasses as r,gapClasses as p,hasContent as o,iconClasses as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as h,sheetPaddingXClasses as u,sheetPaddingYClasses as x,sheetRestClasses as b,sheetTitleClasses as g,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const w={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},y={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlCollapsible=/* @__PURE__ */t.forwardRef(function PlCollapsible({variant:t="glass",size:j,color:k,density:C,elevation:O=0,open:_,defaultOpen:P=!1,onOpenChange:z,title:F,subtitle:M,startIcon:R,action:T,trigger:U,indicator:$=!0,disabled:I=!1,padded:q=!0,hiddenUntilFound:A=!1,keepMounted:B=!1,className:D,style:E,children:G,...H},J){const K=s(),L=j??K.size??"md",Q=k??K.color??"primary",S=C??K.density??"default",V=u[S][L],W=x[S][L];return l(a.Root,{ref:J,open:_,defaultOpen:P,onOpenChange:e=>z?.(e),disabled:I,className:i("flex flex-col overflow-hidden",m[L],b[t],v,D),style:{...N(Q,O),...E},...H,children:[U?e(a.Trigger,{render:U}):l("div",{className:"flex w-full items-center",children:[l(a.Trigger,{className:i("flex min-w-0 flex-1 cursor-pointer items-center text-start",V,W,p[L],v,d,r,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"),children:[o(R)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:R}):null,l("span",{className:i("flex min-w-0 flex-1 flex-col",h[L]),children:[o(F)?e("span",{className:i("plass-title truncate font-semibold",g[L]),children:F}):null,o(M)?e("span",{className:i("truncate text-(--plass-muted-fg)",c[L]),children:M}):null]}),$?e("span",{className:i("flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[panel-open]:rotate-180"),children:e(n,{})}):null]}),o(T)?e("span",{className:i("flex shrink-0 items-center",V),children:T}):null]}),e(a.Panel,{hiddenUntilFound:A,keepMounted:B,className:i("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"),children:e("div",{className:i("min-w-0 text-(--plass-muted-fg)",f[L],q?V:"",q?U?`${w[S][L]} ${y[S][L]}`:y[S][L]:""),children:G})})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Collapsible as a}from"@base-ui/react/collapsible";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as i,focusRingInsetClasses as r,gapClasses as o,hasContent as d,iconClasses as p,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as u,sheetPaddingXClasses as h,sheetPaddingYClasses as x,sheetRestClasses as b,sheetTitleClasses as g,surfaceSlots as N,transitionClasses as v}from"../../internal/styles.js";const w={default:{xs:"pt-1.5",sm:"pt-2",md:"pt-3",lg:"pt-3.5",xl:"pt-4"},compact:{xs:"pt-1",sm:"pt-1.5",md:"pt-2",lg:"pt-2.5",xl:"pt-3"}},y={default:{xs:"pb-2.5",sm:"pb-3",md:"pb-5",lg:"pb-6",xl:"pb-7"},compact:{xs:"pb-2",sm:"pb-2.5",md:"pb-3.5",lg:"pb-4",xl:"pb-5"}};export const PlCollapsible=/* @__PURE__ */l.forwardRef(function PlCollapsible({variant:l="glass",size:j,color:k,density:C,elevation:O=0,open:_,defaultOpen:P=!1,onOpenChange:$,title:z,subtitle:F,startIcon:M,action:R,trigger:T,indicator:U=!0,truncate:I=!1,disabled:q=!1,padded:A=!0,hiddenUntilFound:B=!1,keepMounted:D=!1,className:E,style:G,children:H,...J},K){const L=s(),Q=j??L.size??"md",S=k??L.color??"primary",V=C??L.density??"default",W=h[V][Q],X=x[V][Q],Y=I?"truncate":"";return t(a.Root,{ref:K,open:_,defaultOpen:P,onOpenChange:e=>$?.(e),disabled:q,className:i("flex flex-col overflow-hidden",m[Q],b[l],v,E),style:{...N(S,O),...G},...J,children:[T?e(a.Trigger,{render:T}):t("div",{className:"flex w-full items-center",children:[t(a.Trigger,{className:i("flex min-w-0 flex-1 cursor-pointer items-center text-start",W,X,o[Q],v,p,r,"hover:bg-(--p-soft)","data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)","disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50"),children:[d(M)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:M}):null,t("span",{className:i("flex min-w-0 flex-1 flex-col",u[Q]),children:[d(z)?e("span",{className:i("plass-title font-semibold",Y,g[Q]),children:z}):null,d(F)?e("span",{className:i("text-(--plass-muted-fg)",Y,c[Q]),children:F}):null]}),U?e("span",{className:i("flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[panel-open]:rotate-180"),children:e(n,{})}):null]}),d(R)?e("span",{className:i("flex shrink-0 items-center",W),children:R}):null]}),e(a.Panel,{hiddenUntilFound:B,keepMounted:D,className:i("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"),children:e("div",{className:i("min-w-0 text-(--plass-muted-fg)",f[Q],A?`${W} ${w[V][Q]} ${y[V][Q]}`:""),children:H})})]})});

package/dist/components/color-picker/PlColorPicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PlColorFormat } from '../../internal/color.js';
-import type { PlassElevation, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
 export type { PlColorFormat } from '../../internal/color.js';
 /** The names for the parts of the picker that have no text on them. */
 export interface PlColorPickerLabels {
@@ -22,6 +22,17 @@ export interface PlColorPickerLabels {
 /** The English the picker uses for the parts nobody can read a name off. */
 export declare const defaultColorPickerLabels: PlColorPickerLabels;
 export interface PlColorPickerProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * The four parts of a labelled field, as every other one names them: the
+     * `label`, the `control`, the `description` and the `error`. `className`
+     * itself goes on the stack that holds all four, which is what a caller
+     * positions and sizes.
+     *
+     * `control` is the trigger the panel hangs off, or — with `inline` — the panel
+     * itself, because inline there is no trigger and the panel is what a reader
+     * acts on.
+     */
+    classNames?: PlassFieldClassNames;
     /** The colour, as a CSS string. Pass it to drive the picker yourself. */
     value?: string;
     /** Where an uncontrolled picker starts. @default '#1a58d1' */
@@ -41,8 +52,16 @@ export interface PlColorPickerProps extends PlassStyleProps, Omit<React.Componen
     inline?: boolean;
     /** The field under the panel that the value can be typed into. @default true */
     editable?: boolean;
-    /** Label above the control. */
+    /** The name of what the control holds. */
     label?: React.ReactNode;
+    /**
+     * Where the `label` goes — above the trigger, or in its top edge. `float`
+     * puts it in the edge as well: the swatch at the trigger's start is where a
+     * floating label would rest.
+     * Falls back to the nearest `PlassProvider`, then to `top`.
+     * @default 'top'
+     */
+    labelPlacement?: PlassFieldLabelPlacement;
     /** Helper text below it. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the control invalid. */

package/dist/components/color-picker/PlColorPicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{defaultPickerLabels as s}from"../../internal/calendar.js";import{PickerShell as o}from"../../internal/picker.js";import{useFieldsetDisabled as t,useFormReport as n}from"../../internal/form.js";import{CheckIcon as i}from"../../internal/icons.js";import{checkerBackground as d,clamp as c,cssColor as h,defaultSwatches as u,formatColor as f,parseColor as p,readableInk as m}from"../../internal/color.js";import{controlTextClasses as v,cx as b,focusRingClasses as g,metaTextClasses as x,radiusClasses as y,stackGapClasses as w,surfaceSlots as C}from"../../internal/styles.js";export const defaultColorPickerLabels={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"Pick a colour"};const k={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},N={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},j={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},P={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},S={xs:10,sm:12,md:14,lg:16,xl:18},_=/* @__PURE__ */["relative overflow-hidden border","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)]"].join(" "),O=/* @__PURE__ */["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function fractionsOf(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:c((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:c((e.clientY-a.top)/a.height,0,1)}}function arrowStep(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:s,text:o,onTextChange:t,withAlpha:n,swatches:u,editable:v,size:w,inert:C,invalid:$,labels:z}){const I=S[w],T=-I/2,D=h({h:r.h,s:100,v:100}),M=h(r),A=u?u.flatMap(e=>{const a=p(e);return a?[{swatch:e,parsed:a}]:[]}):[],track=e=>({onPointerDown:a=>{C||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!C&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),railProps=(e,a,r,l,s)=>({role:"slider",tabIndex:C?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":C||void 0,"aria-invalid":$||void 0,onKeyDown:e=>{if(C)return;if("Home"===e.key||"End"===e.key)return e.preventDefault(),void s("Home"===e.key?0:1);const a=arrowStep(e);a&&(e.preventDefault(),l(a.x+a.y))}});return a("div",{className:b("flex flex-col",k[w],P[w]),children:[e("div",{...track(e=>{const{x:a,y:o}=fractionsOf(e);s({hsv:{h:r.h,s:100*a,v:100*(1-o)},alpha:l})}),role:"slider",tabIndex:C?-1:0,"aria-label":z.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":C||void 0,"aria-invalid":$||void 0,onKeyDown:e=>{const a=arrowStep(e);!C&&a&&(e.preventDefault(),s({hsv:{h:r.h,s:c(r.s+a.x,0,100),v:c(r.v+a.y,0,100)},alpha:l}))},className:b(_,N[w],y[w],g,C?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:D,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:O,style:{width:I,height:I,left:`${r.s}%`,top:100-r.v+"%",marginLeft:T,marginTop:T,backgroundColor:M}})}),e("div",{...track(e=>s({hsv:{...r,h:360*fractionsOf(e).x},alpha:l})),...railProps(z.hue,r.h,360,e=>s({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l}),e=>s({hsv:{...r,h:360*e},alpha:l})),className:b(_,j[w],"rounded-full",g,C?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:O,style:{width:I,height:I,left:r.h/360*100+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:D}})}),n?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(z.alpha,100*l,100,e=>s({hsv:r,alpha:c(l+e/100,0,1)}),e=>s({hsv:r,alpha:e})),className:b(_,j[w],"rounded-full",g,C?"cursor-default":"cursor-pointer touch-none"),style:d,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${h(r,0)}, ${M})`}}),e("span",{className:O,style:{width:I,height:I,left:100*l+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:h(r,l)}})]}):null,v?a("div",{className:b("flex items-center",P[w]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:I+6,height:I+6,...d},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:h(r,l)}})}),e("input",{type:"text",value:o,readOnly:C,spellCheck:!1,autoComplete:"off","aria-label":z.value,onChange:e=>t(e.target.value),className:b("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",y.xs,x[w],"text-(--plass-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]")})]}):null,A.length>0?e("div",{role:"group","aria-label":z.swatches,className:"grid grid-cols-8 gap-1",children:A.map(({swatch:a,parsed:o})=>{const t=f(o.hsv,o.alpha,"hex")===f(r,l,"hex");return e("button",{type:"button",disabled:C,"aria-label":a,"aria-pressed":t,onClick:()=>s(o),className:b("flex aspect-square items-center justify-center rounded-full border","[border-color:var(--plass-border)]","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",g,"[outline:none]",C?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:h(o.hsv,o.alpha)},children:t?e("span",{style:{color:m(o.hsv)},children:e(i,{})}):null},a)})}):null]})}function widthSamples(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const $={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:i,defaultValue:c="#1a58d1",onValueChange:m,format:g="hex",alpha:y=!1,swatches:k=u,inline:N=!1,editable:j=!0,label:P,description:S,error:_,invalid:O,required:z=!1,disabled:I=!1,readOnly:T=!1,fullWidth:D=!1,clearable:M=!1,name:A,open:L,defaultOpen:V=!1,onOpenChange:q,labels:B,variant:H="glass",size:K,color:R,density:E,elevation:W=0,className:U,style:X,...Y},F){const G=l(),J=K??G.size??"md",Q=R??G.color??"primary",Z=E??G.density??"default",ee=r.useMemo(()=>({...defaultColorPickerLabels,...B}),[B]),[ae,re]=r.useState(c),le=i??ae,[se,oe]=r.useState(V),te=L??se,[ne,ie]=r.useState(()=>p(le)??{hsv:$,alpha:1}),[de,ce]=r.useState(()=>le),he=f(ne.hsv,y?ne.alpha:1,g),ue=""===le;r.useEffect(()=>{const e=p(le);e?f(e.hsv,y?e.alpha:1,g)!==he&&(ce(le),ie(e)):ce(le)},[le,he,y,g]);const commit=(e,a)=>{ie(e);const r=f(e.hsv,y?e.alpha:1,g);ce(a??r),void 0===i&&re(r),m?.(r)},[fe,pe]=r.useState(null),me=r.useCallback(e=>{pe(e),"function"==typeof F?F(e):F&&(F.current=e)},[F]),ve=t(fe),be=I||ve,ge=be||T,xe=O??Boolean(_),ye=r.useId(),we=e(ColorPanel,{hsv:ne.hsv,alphaValue:ne.alpha,onChange:commit,text:de,onTextChange:e=>{ce(e);const a=p(e);a&&commit(a,e)},withAlpha:y,swatches:k,editable:j,size:J,inert:ge,invalid:N&&xe,labels:ee});n(A,()=>ue?"":he,N&&!be);const Ce=A?e("input",{type:"hidden",name:A,value:ue?"":he,disabled:be}):null;if(N){const r=xe?"danger":Q,l=[S?`${ye}-description`:null,_?`${ye}-error`:null].filter(Boolean).join(" ")||void 0;return a("div",{ref:me,role:"group","aria-labelledby":P?`${ye}-label`:void 0,"aria-describedby":l,className:b("flex flex-col",w[J],U),style:{...C(r,W),...X},...Y,children:[P?e("span",{id:`${ye}-label`,className:b(x[J],"font-semibold",be?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:P}):null,we,S?e("span",{id:`${ye}-description`,className:b(x[J],"text-(--plass-muted-fg)"),children:S}):null,_?e("span",{id:`${ye}-error`,className:b(x[J],"text-(--p-accent)"),children:_}):null,Ce]})}return e("div",{ref:F,className:D?"w-full":"inline-block",...Y,children:e(o,{variant:H,size:J,color:Q,density:Z,elevation:W,style:X,label:P,description:S,error:_,invalid:O,required:z,disabled:I,readOnly:T,fullWidth:D,className:U,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:d,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ue?"transparent":h(ne.hsv,y?ne.alpha:1)}})}),display:ue?ee.empty:he,samples:widthSamples(g,y),empty:ue,clearable:M,onClear:()=>{void 0===i&&re(""),ce(""),m?.("")},open:te,onOpenChange:e=>{void 0===L&&oe(e),q?.(e)},labels:{...s,clear:ee.clear},name:A,formValue:ue?"":he,children:e("div",{className:v[J],children:we})})})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{defaultPickerLabels as s}from"../../internal/calendar.js";import{PickerShell as o}from"../../internal/picker.js";import{useDisabled as n,useFieldsetDisabled as t,useFormReport as i}from"../../internal/form.js";import{CheckIcon as d}from"../../internal/icons.js";import{checkerBackground as c,clamp as h,cssColor as u,defaultSwatches as f,formatColor as p,parseColor as m,readableInk as v}from"../../internal/color.js";import{controlTextClasses as b,cx as g,fieldDescriptionClasses as x,focusRingClasses as y,metaTextClasses as w,radiusClasses as C,stackGapClasses as k,surfaceSlots as N}from"../../internal/styles.js";export const defaultColorPickerLabels={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"Pick a colour"};const P={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},j={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},O={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},S={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},_={xs:10,sm:12,md:14,lg:16,xl:18},$=/* @__PURE__ */["relative overflow-hidden border","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)]"].join(" "),z=/* @__PURE__ */["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function fractionsOf(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:h((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:h((e.clientY-a.top)/a.height,0,1)}}function arrowStep(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:s,text:o,onTextChange:n,withAlpha:t,swatches:i,editable:f,size:b,disabled:x,readOnly:k,invalid:N,labels:I,className:T}){const D=x||k,M=_[b],A=-M/2,L=u({h:r.h,s:100,v:100}),V=u(r),q=i?i.flatMap(e=>{const a=m(e);return a?[{swatch:e,parsed:a}]:[]}):[],track=e=>({onPointerDown:a=>{D||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!D&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),railProps=(e,a,r,l,s)=>({role:"slider",tabIndex:D?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":D||void 0,"aria-invalid":N||void 0,onKeyDown:e=>{if(D)return;if("Home"===e.key||"End"===e.key)return e.preventDefault(),void s("Home"===e.key?0:1);const a=arrowStep(e);a&&(e.preventDefault(),l(a.x+a.y))}});return a("div",{className:g("flex flex-col",P[b],S[b],T),children:[e("div",{...track(e=>{const{x:a,y:o}=fractionsOf(e);s({hsv:{h:r.h,s:100*a,v:100*(1-o)},alpha:l})}),role:"slider",tabIndex:D?-1:0,"aria-label":I.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":D||void 0,"aria-invalid":N||void 0,onKeyDown:e=>{const a=arrowStep(e);if(D||!a)return;e.preventDefault();const o=h(r.s+a.x,0,100),n=h(r.v+a.y,0,100);o===r.s&&n===r.v||s({hsv:{h:r.h,s:o,v:n},alpha:l})},className:g($,j[b],C[b],y,D?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:L,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:z,style:{width:M,height:M,left:`${r.s}%`,top:100-r.v+"%",marginLeft:A,marginTop:A,backgroundColor:V}})}),e("div",{...track(e=>s({hsv:{...r,h:360*fractionsOf(e).x},alpha:l})),...railProps(I.hue,r.h,360,e=>s({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l}),e=>s({hsv:{...r,h:360*e},alpha:l})),className:g($,O[b],"rounded-full",y,D?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:z,style:{width:M,height:M,left:r.h/360*100+"%",top:"50%",marginLeft:A,marginTop:A,backgroundColor:L}})}),t?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(I.alpha,100*l,100,e=>{const a=h(l+e/100,0,1);a!==l&&s({hsv:r,alpha:a})},e=>s({hsv:r,alpha:e})),className:g($,O[b],"rounded-full",y,D?"cursor-default":"cursor-pointer touch-none"),style:c,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${u(r,0)}, ${V})`}}),e("span",{className:z,style:{width:M,height:M,left:100*l+"%",top:"50%",marginLeft:A,marginTop:A,backgroundColor:u(r,l)}})]}):null,f?a("div",{className:g("flex items-center",S[b]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:M+6,height:M+6,...c},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:u(r,l)}})}),e("input",{type:"text",value:o,disabled:x,readOnly:k,spellCheck:!1,autoComplete:"off","aria-label":I.value,onChange:e=>n(e.target.value),className:g("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",C.xs,w[b],"text-(--plass-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]")})]}):null,q.length>0?e("div",{role:"group","aria-label":I.swatches,className:"grid grid-cols-8 gap-1",children:q.map(({swatch:a,parsed:o})=>{const n=p(o.hsv,o.alpha,"hex")===p(r,l,"hex");return e("button",{type:"button",disabled:D,"aria-label":a,"aria-pressed":n,onClick:()=>s(o),className:g("flex aspect-square items-center justify-center rounded-full border","[border-color:var(--plass-border)]","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",y,"[outline:none]",D?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:u(o.hsv,o.alpha)},children:n?e("span",{style:{color:v(o.hsv)},children:e(d,{})}):null},a)})}):null]})}function widthSamples(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const I={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:d,defaultValue:h="#1a58d1",onValueChange:v,format:y="hex",alpha:C=!1,swatches:P=f,inline:j=!1,editable:O=!0,label:S,labelPlacement:_,description:$,error:z,invalid:T,required:D=!1,disabled:M=!1,readOnly:A=!1,fullWidth:L=!1,clearable:V=!1,name:q,open:B,defaultOpen:H=!1,onOpenChange:K,labels:R,variant:E="glass",size:W,color:U,density:X,elevation:Y=0,className:F,classNames:G,style:J,...Q},Z){const ee=l(),ae=W??ee.size??"md",re=U??ee.color??"primary",le=X??ee.density??"default",se=r.useMemo(()=>({...defaultColorPickerLabels,...R}),[R]),[oe,ne]=r.useState(h),te=d??oe,[ie,de]=r.useState(H),ce=B??ie,[he,ue]=r.useState(()=>m(te)??{hsv:I,alpha:1}),[fe,pe]=r.useState(()=>te),me=p(he.hsv,C?he.alpha:1,y),ve=""===te;r.useEffect(()=>{const e=m(te);e?p(e.hsv,C?e.alpha:1,y)!==me&&(pe(te),ue(e)):pe(te)},[te,me,C,y]);const commit=(e,a)=>{ue(e);const r=p(e.hsv,C?e.alpha:1,y);pe(a??r),void 0===d&&ne(r),v?.(r)},[be,ge]=r.useState(null),xe=r.useCallback(e=>{ge(e),"function"==typeof Z?Z(e):Z&&(Z.current=e)},[Z]),ye=t(be),we=n(M)||ye,Ce=T??Boolean(z),ke=r.useId(),Ne=e(ColorPanel,{hsv:he.hsv,alphaValue:he.alpha,onChange:commit,text:fe,onTextChange:e=>{pe(e);const a=m(e);a&&commit(a,e)},withAlpha:C,swatches:P,editable:O,size:ae,disabled:we,readOnly:A,invalid:j&&Ce,labels:se,className:j?G?.control:void 0});i(q,()=>ve?"":me,j&&!we);const Pe=q?e("input",{type:"hidden",name:q,value:ve?"":me,disabled:we}):null;if(j){const r=Ce?"danger":re,l=[$?`${ke}-description`:null,z?`${ke}-error`:null].filter(Boolean).join(" ")||void 0;return a("div",{ref:xe,role:"group","aria-labelledby":S?`${ke}-label`:void 0,"aria-describedby":l,className:g("flex flex-col",k[ae],F),style:{...N(r,Y),...J},...Q,children:[S?e("span",{id:`${ke}-label`,className:g(w[ae],"font-semibold",we?"text-(--plass-muted-fg)":"text-(--plass-fg)",G?.label),children:S}):null,Ne,$?e("span",{id:`${ke}-description`,className:g(x(ae),G?.description),children:$}):null,z?e("span",{id:`${ke}-error`,className:g(w[ae],"text-(--p-accent)",G?.error),children:z}):null,Pe]})}return e("div",{ref:xe,className:L?"w-full":"inline-block",...Q,children:e(o,{variant:E,size:ae,color:re,density:le,elevation:Y,style:J,label:S,labelPlacement:_,description:$,error:z,invalid:T,required:D,disabled:M,readOnly:A,fullWidth:L,className:F,classNames:G,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:c,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ve?"transparent":u(he.hsv,C?he.alpha:1)}})}),display:ve?se.empty:me,samples:widthSamples(y,C),empty:ve,clearable:V,onClear:()=>{void 0===d&&ne(""),pe(""),v?.("")},open:ce,onOpenChange:e=>{void 0===B&&de(e),K?.(e)},labels:{...s,clear:se.clear},name:q,formValue:ve?"":me,children:e("div",{className:b[ae],children:Ne})})})});

package/dist/components/combobox/PlCombobox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
 /**
  * What a combobox's value may be — the same two types a PlSelect submits, and
  * for the same reason: a form control's value is what a form sends, and every
@@ -43,7 +43,9 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
     items: readonly PlComboboxOption[];
     /**
      * Whether more than one value may be held. The chosen ones become chips
-     * inside the field, and the input goes on filtering after each.
+     * inside the field, and the input goes on filtering after each. A row taken
+     * from a filtered list closes the list and empties the text, as Base UI does;
+     * a row taken with nothing typed leaves the list open for the next one.
      * @default false
      */
     multiple?: Multiple;
@@ -92,8 +94,17 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
      * @default 0
      */
     elevation?: PlassElevation;
-    /** Label above the field, wired to it by Base UI's Field. */
+    /** The name of what the field holds, wired to it by Base UI's Field. */
     label?: React.ReactNode;
+    /**
+     * Where the `label` goes — above the field, in its top edge, or inside it
+     * where the text would be typed until the field is focused or holds a value.
+     * 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'
+     */
+    labelPlacement?: PlassFieldLabelPlacement;
     /** Helper text below the field. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the combobox invalid. */
@@ -140,13 +151,14 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
  * itself, offered as the last row rather than committed silently on blur.
  *
  * With `multiple` the chosen values become PlChips inside the field and the
- * input goes on filtering after each one, so a set of tags is built without the
- * field ever closing.
+ * input goes on filtering after each one. A row taken from a filtered list
+ * closes the list and empties the text, which is how Base UI 1.8.0 behaves,
+ * and a row taken with nothing typed leaves the list open for the next one.
  *
  * Base UI owns everything hard about this: the filtering and its collator, the
  * popup's positioning and flipping, the `combobox`/`listbox` wiring, arrow-key
  * navigation across both the list and the chips, and the hidden input that makes
  * the whole thing submit with a form.
  */
-export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage: emptyMessageProp, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel: removeLabelProp, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
+export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage: emptyMessageProp, limit, placeholder, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel: removeLabelProp, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
 export {};

package/dist/components/combobox/PlCombobox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{Combobox as r}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{PlChip as i}from"../chip/PlChip.js";import{CheckIcon as o,ChevronIcon as c,CloseIcon as d,PlusIcon as m}from"../../internal/icons.js";import{hotKeyHandler as p}from"../../internal/keys.js";import{chipRemoveClasses as u,controlHeightClasses as h,controlTextLeadingClasses as b,cx as f,disabledClasses as g,fieldReadOnlyClasses as v,fieldRestClasses as x,focusWithinRingClasses as y,forcedHighlightedClasses as N,gapClasses as w,glassClasses as C,hasContent as j,iconClasses as L,metaTextClasses as I,paddingXClasses as S,radiusClasses as _,stackGapClasses as z,surfaceSlots as V,transitionClasses as A}from"../../internal/styles.js";const O=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",A,y,L].join(" "),k={xs:"min-h-6 py-0",sm:"min-h-8 py-0.5",md:"min-h-10 py-1",lg:"min-h-12 py-1.5",xl:"min-h-14 py-2"},M=/* @__PURE__ */[C,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),P=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",A,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",N,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),R=/* @__PURE__ */["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg)","[transition:color_var(--plass-duration)_var(--plass-ease)]","hover:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]","disabled:cursor-not-allowed disabled:opacity-50"].join(" ");function toArray(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function PlCombobox({variant:y="glass",size:N,color:C,density:L,elevation:A=0,items:T,multiple:q,value:E,defaultValue:F,onValueChange:$,onInputValueChange:D,allowCustom:K=!0,customLabel:G,clearable:H=!1,emptyMessage:W,limit:B,placeholder:J,label:Q,description:U,error:X,invalid:Y,startIcon:Z,fullWidth:ee=!1,disabled:ae=!1,readOnly:le=!1,required:te=!1,name:se,open:re,defaultOpen:ne,onOpenChange:ie,openLabel:oe,clearLabel:ce,removeLabel:de,inputRef:me,id:pe,className:ue,hotKeys:he,classNames:be,style:fe,...ge}){const ve=t(),xe=s(),ye=oe??xe.open,Ne=ce??xe.clear,we=W??xe.empty,Ce=de??xe.removeItem,je=N??ve.size??"md",Le=C??ve.color??"primary",Ie=L??ve.density??"default",Se=j(X),_e=Y??Se,ze=_e?"danger":Le,Ve=!0===q,Ae=l.useMemo(()=>T.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[T]),[Oe,ke]=l.useState(()=>toArray(F)),Me=void 0===E?Oe:toArray(E),[Pe,Re]=l.useState(""),Te=l.useMemo(()=>new Map(Ae.map(e=>[e.value,e])),[Ae]),qe=l.useCallback(e=>Te.get(e)??{value:e,label:String(e),custom:!0},[Te]),Ee=Pe.trim(),Fe=Ee.toLocaleLowerCase(),$e=""===Ee||Ae.some(e=>e.label.toLocaleLowerCase()===Fe||String(e.value).toLocaleLowerCase()===Fe)||Me.some(e=>String(e).toLocaleLowerCase()===Fe),De=!K||le||ae||$e?null:Ee,Ke=l.useMemo(()=>null===De?Ae:[...Ae,{value:De,label:De,custom:!0}],[Ae,De]),Ge=Ve?Me.map(qe):Me.length>0?qe(Me[0]):null,He=f(O,b[je],_[je],w[je],Ve?k[je]:h[je],`${S[Ie][je]} pe-1.5`,ae?g[y]:le?v[y]:x[y]),We=/* @__PURE__ */["min-w-0 flex-1 self-stretch 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"].join(" "),renderInput=a=>e(r.Input,{ref:me,placeholder:J,onKeyDown:p(he,void 0),className:f(We,Ve&&"min-w-16",Ve&&a&&"ms-1.5")});return a(n.Root,{disabled:ae,invalid:_e,className:f("flex-col align-top",z[je],ee?"flex w-full":"inline-flex",ue),style:{...V(ze,A),...fe},...ge,children:[Q?e(n.Label,{className:f(I[je],"font-semibold",ae?"text-(--plass-muted-fg)":"text-(--plass-fg)",be?.label),children:Q}):null,a(r.Root,{id:pe,name:se,items:Ke,multiple:Ve,value:Ge,onValueChange:e=>{!function commit(e){void 0===E&&ke(e),$?.(Ve?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Re(e),D?.(e)},open:re,defaultOpen:ne,onOpenChange:e=>ie?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:B,disabled:ae,readOnly:le,required:te,children:[a(r.InputGroup,{className:f(He,be?.control),children:[Z?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Z}):null,Ve?e(r.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(r.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(r.Chip,{render:e(i,{variant:"glass",size:je,color:ze,density:"compact",disabled:ae,endIcon:le||ae?null:e(r.ChipRemove,{"aria-label":Ce(a.label),className:u,children:e(d,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})}):renderInput(!1),H&&!le?e(r.Clear,{"aria-label":Ne,className:R,children:e(d,{})}):null,e(r.Trigger,{"aria-label":ye,className:R,children:e(r.Icon,{className:f("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(c,{})})})]}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(r.Popup,{className:f(M,_[je],b[je]),style:V(ze,3),children:[e(r.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:we}),e(r.List,{children:t=>e(r.Item,{value:t,disabled:t.disabled,className:P,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(m,{})}),e("span",{className:"truncate",children:G?G(t.label):xe.addCustom(t.label)})]}):a(l.Fragment,{children:[e(r.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(o,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),U?e(n.Description,{className:f(I[je],"text-(--plass-muted-fg)",be?.description),children:U}):null,e(n.Error,Se?{match:!0,className:f(I[je],"text-(--p-accent)",be?.error),children:X}:{className:f(I[je],"text-(--p-accent)",be?.error)})]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{FadedContext as t,useDisabled as s}from"../../internal/form.js";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{Combobox as i}from"@base-ui/react/combobox";import{Field as o}from"@base-ui/react/field";import{PlChip as c}from"../chip/PlChip.js";import{CheckIcon as d,ChevronIcon as m,CloseIcon as p,PlusIcon as u}from"../../internal/icons.js";import{hotKeyHandler as h}from"../../internal/keys.js";import{useFieldLight as b}from"../../internal/glow.js";import{FieldNotch as f,floatControlClassName as g,notchShellStyle as v,resolveNotch as x}from"../../internal/notch.js";import{chipRemoveClasses as y,controlHeightClasses as w,controlTextLeadingClasses as N,cx as j,disabledClasses as C,fieldDescriptionClasses as L,fieldReadOnlyClasses as I,fieldRestClasses as S,fieldSlots as z,focusWithinRingClasses as _,forcedHighlightedClasses as O,gapClasses as P,glassClasses as V,hasContent as A,iconClasses as M,metaTextClasses as k,paddingXClasses as R,radiusClasses as F,stackGapClasses as T,surfaceSlots as $,targetClasses as q,transitionClasses as D}from"../../internal/styles.js";const E=/* @__PURE__ */["relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",D,M].join(" "),K=_,G={xs:"min-h-6 py-0",sm:"min-h-8 py-0.5",md:"min-h-10 py-1",lg:"min-h-12 py-1.5",xl:"min-h-14 py-2"},H=/* @__PURE__ */[V,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),W=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",D,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",O,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),B=/* @__PURE__ */["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg)","[transition:color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","enabled:hover:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]","disabled:cursor-not-allowed"].join(" "),J=/* @__PURE__ */j(q,B),Q=[];function toArray(e){return null==e?Q:Array.isArray(e)?e:[e]}export function PlCombobox({variant:_="glass",size:O,color:V,density:M,elevation:q=0,items:D,multiple:Q,value:U,defaultValue:X,onValueChange:Y,onInputValueChange:Z,allowCustom:ee=!0,customLabel:ae,clearable:le=!1,emptyMessage:te,limit:se,placeholder:ne,label:re,labelPlacement:ie,description:oe,error:ce,invalid:de,startIcon:me,fullWidth:pe=!1,disabled:ue=!1,readOnly:he=!1,required:be=!1,name:fe,open:ge,defaultOpen:ve,onOpenChange:xe,openLabel:ye,clearLabel:we,removeLabel:Ne,inputRef:je,id:Ce,className:Le,hotKeys:Ie,classNames:Se,style:ze,..._e}){const Oe=n(),Pe=s(ue),Ve=r(),Ae=ye??Ve.open,Me=we??Ve.clear,ke=te??Ve.empty,Re=Ne??Ve.removeItem,Fe=O??Oe.size??"md",Te=V??Oe.color??"primary",$e=M??Oe.density??"default",qe=ie??Oe.labelPlacement??"top",{notched:De,float:Ee}=x(qe,re,A(me)),Ke=A(ce),Ge=de??Ke,He=Ge?"danger":Te,We=!0===Q,Be=l.useMemo(()=>D.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[D]),[Je,Qe]=l.useState(()=>toArray(X)),Ue=void 0===U?Je:toArray(U),[Xe,Ye]=l.useState(""),Ze=l.useMemo(()=>new Map(Be.map(e=>[e.value,e])),[Be]),ea=l.useCallback(e=>Ze.get(e)??{value:e,label:String(e),custom:!0},[Ze]),aa=Xe.trim(),la=aa.toLocaleLowerCase(),ta=""===aa||Be.some(e=>e.label.toLocaleLowerCase()===la||String(e.value).toLocaleLowerCase()===la)||Ue.some(e=>String(e).toLocaleLowerCase()===la),sa=!ee||he||Pe||ta?null:aa,na=l.useMemo(()=>null===sa?Be:[...Be,{value:sa,label:sa,custom:!0}],[Be,sa]),ra=l.useMemo(()=>i.createItems(na,{getValue:e=>e.value,getLabel:e=>e.label}),[na]),ia=We?Ue:Ue[0]??null,oa=!Pe&&!he,ca=b(oa),da=j(E,De?"":K,N[Fe],F[Fe],P[Fe],We?G[Fe]:w[Fe],`${R[$e][Fe]} pe-1.5`,Pe?C[_]:he?I[_]:S[_],oa?"plass-glow":""),ma=/* @__PURE__ */["min-w-0 flex-1 self-stretch 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"].join(" "),renderInput=a=>e(i.Input,{ref:je,placeholder:Ee?ne||" ":ne,onKeyDown:h(Ie,void 0),className:j(ma,We&&"min-w-16",We&&a&&"ms-1.5",Ee&&!a&&g)}),pa=e(o.Label,{className:j(k[Fe],"font-semibold",Pe?"text-(--plass-muted-fg)":"text-(--plass-fg)",Se?.label),children:re});return a(o.Root,{disabled:Pe,invalid:Ge,className:j("flex-col align-top",T[Fe],pe?"flex w-full":"inline-flex",Le),style:{...z(He,q),...ze},..._e,children:[A(re)&&!De?pa:null,a(i.Root,{id:Ce,name:fe,items:ra,multiple:We,value:ia,onValueChange:e=>{const a=toArray(e);0===a.length&&0===Ue.length||function commit(e){void 0===U&&Qe(e),Y?.(We?e:e[0]??null)}(a)},onInputValueChange:e=>{Ye(e),Z?.(e)},open:ge,defaultOpen:ve,onOpenChange:e=>xe?.(e),autoHighlight:!0,itemToStringLabel:String,itemToStringValue:String,limit:se,disabled:Pe,readOnly:he,required:be,children:[e(f,{notched:De,size:Fe,density:$e,variant:_,disabled:Pe,readOnly:he,float:Ee,label:pa,children:a(i.InputGroup,{style:De?v:void 0,...ca,className:j(da,Se?.control),children:[me?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:me}):null,We?e(i.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Provider,{value:Pe,children:e(i.Value,{children:t=>a(l.Fragment,{children:[t.map(ea).map(a=>e(i.Chip,{render:e(c,{variant:"glass",size:Fe,color:He,density:"compact",disabled:Pe,endIcon:he||Pe?null:e(i.ChipRemove,{"aria-label":Re(a.label),className:y,children:e(p,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})})}):renderInput(!1),!le||he||Pe?null:e(i.Clear,{"aria-label":Me,className:J,children:e(p,{})}),e(i.Trigger,{"aria-label":Ae,"aria-labelledby":void 0,className:B,children:e(i.Icon,{className:j("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[popup-open]:rotate-180"),children:e(m,{})})})]})}),e(i.Portal,{children:e(i.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(i.Popup,{className:j(H,F[Fe],N[Fe]),style:$(He,3),children:[e(i.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:ke}),e(i.List,{children:t=>e(i.Item,{value:t.value,disabled:t.disabled,className:W,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(u,{})}),e("span",{className:"truncate",children:ae?ae(t.label):Ve.addCustom(t.label)})]}):a(l.Fragment,{children:[e(i.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(d,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),oe?e(o.Description,{className:j(L(Fe),Se?.description),children:oe}):null,e(o.Error,Ke?{match:!0,className:j(k[Fe],"text-(--p-accent)",Se?.error),children:ce}:{className:j(k[Fe],"text-(--p-accent)",Se?.error)})]})}

package/dist/components/command-palette/PlCommandPalette.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Autocomplete as o}from"@base-ui/react/autocomplete";import{Dialog as r}from"@base-ui/react/dialog";import{PlHotKeys as i}from"../hot-keys/PlHotKeys.js";import{usePlHotKeys as n}from"../../hooks/usePlHotKeys.js";import{searchHaystack as c,searchText as p}from"../../internal/search.js";import{controlTextLeadingClasses as d,cx as m,forcedHighlightedClasses as u,glassClasses as h,hasContent as x,metaTextClasses as f,radiusClasses as g,surfaceSlots as y,toLength as b}from"../../internal/styles.js";const v=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),w=/* @__PURE__ */[h,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},N={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},j={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},P={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},z=/* @__PURE__ */["flex cursor-pointer items-center gap-3 select-none","[transition:background-color_var(--plass-duration)_var(--plass-ease)]","data-[highlighted]:bg-(--p-soft) data-[highlighted]:text-(--p-accent)",u,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35]"].join(" ");function haystackOf(e){return c([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:c,open:u,defaultOpen:h=!1,onOpenChange:_,onSelect:C,shortcut:O="Mod+K",width:S,maxHeight:H=320,placeholder:M,emptyMessage:K,label:R,size:V,color:E,density:F,className:I,classNames:T,style:B}){const D=t(),L=l(),W=R??L.commandPalette,q=M??L.commandPalettePlaceholder,A=K??L.empty,G=V??D.size??"md",J=E??D.color??"primary",Q=F??D.density??"default",[U,X]=a.useState(h),[Y,Z]=a.useState(""),$=u??U,ee=a.useRef($);a.useEffect(()=>{ee.current&&!$&&Z(""),ee.current=$},[$]);const se=a.useCallback(e=>{void 0===u&&X(e),_?.(e)},[u,_]);n(!1===O?void 0:{[O]:()=>se(!0)},{whileTyping:!0});const ae=a.useMemo(()=>c.map(haystackOf),[c]),te=a.useMemo(()=>{const e=p(Y);return""===e?c:c.filter((s,a)=>ae[a].includes(e))},[c,ae,Y]),le=b(S),oe=b(H);return e(r.Root,{open:$,onOpenChange:se,children:s(r.Portal,{children:[e(r.Backdrop,{className:m("plass-portal",v,T?.backdrop)}),e(r.Viewport,{className:"plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center p-4 pt-[12vh]",children:e(r.Popup,{"aria-label":W,className:m(w,g[G],d[G],void 0===le?k[G]:"","self-start",I),style:{...y(J,3),...void 0===le?null:{maxWidth:le},...B},children:s(o.Root,{open:!0,mode:"list",items:te,filter:null,value:Y,onValueChange:e=>Z(e),itemToStringValue:e=>e.label,children:[e("div",{className:m("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",P[G]),children:e(o.Input,{autoFocus:!0,placeholder:q,className:m("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)",N[G])})}),e(o.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:oe},children:(t,l)=>s(a.Fragment,{children:[t.group&&t.group!==te[l-1]?.group?e("div",{role:"presentation",className:m(P[G],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",f[G]),children:t.group}):null,s(o.Item,{index:l,value:t,disabled:t.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),C?.(e),se(!1))})(t),className:m(z,g[G],P[G],j["compact"===Q?"xs":G]),children:[x(t.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:t.icon}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:t.label}),x(t.description)?e("span",{className:m("truncate text-(--plass-muted-fg)",f[G]),children:t.description}):null]}),t.shortcut?e(i,{size:"xs",keys:t.shortcut,className:"shrink-0"}):null]})]},t.value)}),e(o.Empty,{className:m(P[G],"py-6 text-center text-(--plass-muted-fg)",f[G]),children:A})]})})})]})})}
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Autocomplete as o}from"@base-ui/react/autocomplete";import{Dialog as r}from"@base-ui/react/dialog";import{PlHotKeys as i}from"../hot-keys/PlHotKeys.js";import{usePlHotKeys as n}from"../../hooks/usePlHotKeys.js";import{searchHaystack as c,searchText as p}from"../../internal/search.js";import{controlTextLeadingClasses as d,cx as m,forcedHighlightedClasses as u,glassClasses as h,hasContent as x,metaTextClasses as f,radiusClasses as g,surfaceSlots as y,toLength as b,transitionClasses as v}from"../../internal/styles.js";const w=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */[h,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),N={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},j={xs:"h-9",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},P={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},z={xs:"px-2.5",sm:"px-3",md:"px-3.5",lg:"px-4",xl:"px-5"},C=/* @__PURE__ */["flex cursor-pointer items-center gap-3 select-none",v,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",u,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35]"].join(" ");function haystackOf(e){return c([e.label,e.group,...e.keywords??[]])}export function PlCommandPalette({items:c,open:u,defaultOpen:h=!1,onOpenChange:v,onSelect:M,shortcut:O="Mod+K",width:S,maxHeight:_=320,placeholder:H,emptyMessage:K,label:R,size:V,color:E,density:F,className:I,classNames:T,style:B}){const D=t(),L=l(),W=R??L.commandPalette,q=H??L.commandPalettePlaceholder,A=K??L.empty,G=V??D.size??"md",J=E??D.color??"primary",Q=F??D.density??"default",[U,X]=a.useState(h),[Y,Z]=a.useState(""),$=u??U,ee=a.useRef($);a.useEffect(()=>{ee.current&&!$&&Z(""),ee.current=$},[$]);const se=a.useCallback(e=>{void 0===u&&X(e),v?.(e)},[u,v]);n(!1===O?void 0:{[O]:()=>se(!0)},{whileTyping:!0});const ae=a.useMemo(()=>c.map(haystackOf),[c]),te=a.useMemo(()=>{const e=p(Y);return""===e?c:c.filter((s,a)=>ae[a].includes(e))},[c,ae,Y]),le=a.useMemo(()=>te.length>100?te.slice(0,100):te,[te]),oe=te.length-le.length,re=b(S),ie=b(_);return e(r.Root,{open:$,onOpenChange:se,children:s(r.Portal,{children:[e(r.Backdrop,{className:m("plass-portal",w,T?.backdrop)}),e(r.Viewport,{className:"plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center p-4 pt-[12vh]",children:e(r.Popup,{"aria-label":W,className:m(k,g[G],d[G],void 0===re?N[G]:"","self-start",I),style:{...y(J,3),...void 0===re?null:{maxWidth:re},...B},children:s(o.Root,{open:!0,mode:"list",items:le,filter:null,value:Y,onValueChange:e=>Z(e),itemToStringValue:e=>e.label,children:[e("div",{className:m("flex shrink-0 items-center border-b [border-color:var(--plass-glass-line)]",z[G]),children:e(o.Input,{autoFocus:!0,placeholder:q,className:m("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)",j[G])})}),e(o.List,{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:ie},children:(t,l)=>s(a.Fragment,{children:[t.group&&t.group!==le[l-1]?.group?e("div",{role:"presentation",className:m(z[G],"pt-2 pb-1 font-medium text-(--plass-muted-fg)",f[G]),children:t.group}):null,s(o.Item,{index:l,value:t,disabled:t.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),M?.(e),se(!1))})(t),className:m(C,g[G],z[G],P["compact"===Q?"xs":G]),children:[x(t.icon)?e("span",{className:"flex h-[1lh] shrink-0 items-center [&_svg]:size-[1.15em]",children:t.icon}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:t.label}),x(t.description)?e("span",{className:m("truncate text-(--plass-muted-fg)",f[G]),children:t.description}):null]}),t.shortcut?e(i,{size:"xs",keys:t.shortcut,className:"shrink-0"}):null]})]},t.value)}),oe>0?e("div",{className:m(z[G],"shrink-0 border-t py-2 text-(--plass-muted-fg) [border-color:var(--plass-glass-line)]",f[G]),children:L.chartMore(oe)}):null,e(o.Empty,{className:m(z[G],"py-6 text-center text-(--plass-muted-fg)",f[G]),children:A})]})})})]})})}

package/dist/components/confirm/PlConfirmProvider.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{PlButton as o}from"../button/PlButton.js";import{PlModal as t}from"../modal/PlModal.js";import{useLabels as i}from"../../internal/labels.js";const l=/* @__PURE__ */n.createContext(null);export function PlConfirmProvider({size:c,color:s,confirmLabel:u,cancelLabel:a,acknowledgeLabel:d,width:f,children:m}){const h=i(),[p,b]=n.useState(!1),[C,v]=n.useState(null),P=n.useRef(null),w=n.useRef([]),k=n.useRef(0),x=n.useCallback(e=>{const r=P.current;if(!r)return;r.resolve(e);const n=w.current.shift();if(n)return P.current=n,void v(n);P.current=null,b(!1)},[]),z=n.useCallback((e,r)=>new Promise(n=>{k.current+=1;const o={id:k.current,kind:e,options:r,resolve:n};P.current?w.current.push(o):(P.current=o,v(o),b(!0))}),[]),j=n.useMemo(()=>({confirm:e=>z("confirm",e),alert:e=>z("alert",e).then(()=>{})}),[z]);n.useEffect(()=>()=>{P.current?.resolve(!1),w.current.forEach(e=>e.resolve(!1)),P.current=null,w.current=[]},[]);const g=C?.options,L="alert"===C?.kind,F="confirm"===(g?.initialFocus??"cancel")||L;return r(l.Provider,{value:j,children:[m,e(t,{open:p,onOpenChange:e=>{e||x(!1)},size:g?.size??c,color:g?.color??s,width:g?.width??f,dismissible:g?.dismissible??!0,title:g?.title,description:g?.description,actions:r(n.Fragment,{children:[L?null:e(o,{variant:"ghost",color:"secondary",size:g?.size??c,autoFocus:!F,onClick:()=>x(!1),children:g?.cancelLabel??a??h.cancel}),e(o,{color:g?.color??s,size:g?.size??c,autoFocus:F,onClick:()=>x(!0),children:g?.confirmLabel??(L?d??h.acknowledge:u??h.confirm)})]},C?.id),children:g?.children})]})}export function usePlConfirm(){const e=n.useContext(l);if(!e)throw new Error("[plass-ui] usePlConfirm was called outside a <PlConfirmProvider>.");return e}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{PlButton as o}from"../button/PlButton.js";import{PlModal as t}from"../modal/PlModal.js";import{useLabels as i}from"../../internal/labels.js";const l=/* @__PURE__ */n.createContext(null);export function PlConfirmProvider({size:c,color:s,confirmLabel:u,cancelLabel:a,acknowledgeLabel:d,width:f,children:m}){const h=i(),[p,C]=n.useState(!1),[b,v]=n.useState(null),w=n.useRef(null),P=n.useRef([]),k=n.useRef(0),x=n.useCallback(e=>{const r=w.current;if(!r)return;r.resolve(e);const n=P.current.shift();if(n)return w.current=n,void v(n);w.current=null,C(!1)},[]),z=n.useCallback((e,r)=>new Promise(n=>{k.current+=1;const o={id:k.current,kind:e,options:r,resolve:n};w.current?P.current.push(o):(w.current=o,v(o),C(!0))}),[]),j=n.useMemo(()=>({confirm:e=>z("confirm",e),alert:e=>z("alert",e).then(()=>{})}),[z]);n.useEffect(()=>()=>{w.current?.resolve(!1),P.current.forEach(e=>e.resolve(!1)),w.current=null,P.current=[]},[]);const g=b?.options,L="alert"===b?.kind,F="confirm"===(g?.initialFocus??"cancel")||L;return r(l.Provider,{value:j,children:[m,e(t,{open:p,onOpenChange:e=>{e||x(!1)},showClose:!1,size:g?.size??c,color:g?.color??s,width:g?.width??f,dismissible:g?.dismissible??!0,title:g?.title,description:g?.description,actions:r(n.Fragment,{children:[L?null:e(o,{variant:"ghost",color:"secondary",size:g?.size??c,autoFocus:!F,onClick:()=>x(!1),children:g?.cancelLabel??a??h.cancel}),e(o,{color:g?.color??s,size:g?.size??c,autoFocus:F,onClick:()=>x(!0),children:g?.confirmLabel??(L?d??h.acknowledge:u??h.confirm)})]},b?.id),children:g?.children})]})}export function usePlConfirm(){const e=n.useContext(l);if(!e)throw new Error("[plass-ui] usePlConfirm was called outside a <PlConfirmProvider>.");return e}

package/dist/components/data-table/PlDataTable.d.ts

@@ -107,7 +107,8 @@ export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.Compo
      * It defaults to the row's position in `rows`, which survives a sort, a
      * search and a page, and does not survive `rows` changing: a row added at the
      * top moves every other row's key, so a selection made before it belongs to
-     * different rows after it.
+     * different rows after it. With `manual` paging the position is counted from
+     * the first row of the first page, since `rows` is only the page on screen.
      *
      * `index` here, and in every other callback, is that position in `rows`, not
      * the row's place on the screen.
@@ -115,6 +116,16 @@ export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.Compo
     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 there are none left to show. */
     empty?: React.ReactNode;
     /** Tints every other row. @default false */
@@ -213,4 +224,4 @@ export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.Compo
  * Not a `forwardRef`, for `PlTable`'s reason: a component wrapped in
  * `React.forwardRef` loses its type parameter, and `Row` is the whole point.
  */
-export declare function PlDataTable<Row>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, columns, rows, getRowKey, caption, empty: emptyProp, striped, hoverable, stickyHeader, maxHeight, onRowClick, sort: sortProp, defaultSort, onSortChange, searchable, search: searchProp, defaultSearch, onSearchChange, searchPlaceholder, selection, selected: selectedProp, defaultSelected, onSelectedChange, isRowSelectable, paging, pageSize, page: pageProp, defaultPage, onPageChange, rowCount, manual, loading, toolbar, footer, className, style, ...props }: PlDataTableProps<Row>): React.JSX.Element;
+export declare function PlDataTable<Row>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, columns, rows, getRowKey, caption, label, empty: emptyProp, striped, hoverable, stickyHeader, maxHeight, onRowClick, sort: sortProp, defaultSort, onSortChange, searchable, search: searchProp, defaultSearch, onSearchChange, searchPlaceholder, selection, selected: selectedProp, defaultSelected, onSelectedChange, isRowSelectable, paging, pageSize, page: pageProp, defaultPage, onPageChange, rowCount, manual, loading, toolbar, footer, className, style, ...props }: PlDataTableProps<Row>): React.JSX.Element;