plass-ui 1.6.0 → 1.8.0

package/dist/components/back-top/PlBackTop.d.ts

@@ -28,11 +28,11 @@ export interface PlBackTopProps extends Omit<React.ComponentPropsWithoutRef<'but
      * the button somewhere of your own — the end of an article, a toolbar — and
      * keep the appearing and the scrolling.
      *
-     * A pinned button sits 24px off the bottom end corner, and
-     * `env(safe-area-inset-bottom)` on top of that, so it clears the home
-     * indicator or the navigation bar of an edge-to-edge screen. The pinning is
-     * an inline `position: fixed` with logical insets, so a `style` of your own
-     * replaces it and a class of your own cannot.
+     * A pinned button sits 24px off the bottom end corner, and the safe area on
+     * both of those edges on top of that, so it clears the home indicator, the
+     * navigation bar or a landscape camera cutout of an edge-to-edge screen. The
+     * pinning is an inline `position: fixed` with logical insets, so a `style` of
+     * your own replaces it and a class of your own cannot.
      * @default true
      */
     floating?: boolean;

package/dist/components/back-top/PlBackTop.js

@@ -1 +1 @@
-"use client";import{jsx as o}from"react/jsx-runtime";import*as e from"react";import{PlIconButton as t}from"../icon-button/PlIconButton.js";import{useDefaults as n}from"../../internal/defaults.js";import{resolveScrollTarget as r}from"../../internal/scroll-target.js";import{useLabels as i}from"../../internal/labels.js";import{focusablesIn as s}from"../../internal/focusable.js";import{usePrefersReducedMotion as l}from"../../internal/media.js";import{cx as a,transitionClasses as c}from"../../internal/styles.js";const d="1.5rem";function ChevronUp(){return o("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:o("path",{d:"M4.5 9.5 8 6l3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlBackTop=/* @__PURE__ */e.forwardRef(function PlBackTop({target:f,visibilityHeight:m=400,label:p,icon:u,floating:v=!0,variant:b="glass",size:h,color:j,elevation:k=2,className:y,style:T,onClick:g,...x},E){const w=n(),B=i(),C=p??B.backToTop,z=h??w.size??"md",L=j??w.color??"primary",P=l(),[I,N]=e.useState(!1);e.useEffect(()=>{const o=r(f);if(!o)return;const read=()=>N(function scrollTopOf(o){return o instanceof Window?o.scrollY:o.scrollTop}(o)>m);return read(),o.addEventListener("scroll",read,{passive:!0}),()=>o.removeEventListener("scroll",read)},[f,m]);const S=v?{position:"fixed",insetInlineEnd:d,insetBlockEnd:`calc(${d} + env(safe-area-inset-bottom, 0px))`}:{};return o(t,{ref:E,label:C,icon:u??o(ChevronUp,{}),variant:b,size:z,color:L,elevation:k,onClick:o=>{if(g?.(o),o.defaultPrevented)return;const e=r(f);e?.scrollTo({top:0,behavior:P?"instant":"smooth"});const t=o.currentTarget;if(e&&document.activeElement===t){const o=e===window?document.body:e,n=s(o).find(o=>o!==t&&!o.closest('[aria-hidden="true"]'));n?n.focus({preventScroll:!0}):t.blur()}},"aria-hidden":!I||void 0,tabIndex:I?void 0:-1,className:a(v?"z-30":"",c,I?"opacity-100":"pointer-events-none opacity-0",y),style:{...S,...T},...x})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as o from"react";import{PlIconButton as t}from"../icon-button/PlIconButton.js";import{useDefaults as n}from"../../internal/defaults.js";import{resolveScrollTarget as r}from"../../internal/scroll-target.js";import{useLabels as i}from"../../internal/labels.js";import{focusablesIn as s}from"../../internal/focusable.js";import{usePrefersReducedMotion as l}from"../../internal/media.js";import{cx as a,safeInlineClasses as c,transitionClasses as d}from"../../internal/styles.js";const f="1.5rem";function ChevronUp(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M4.5 9.5 8 6l3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlBackTop=/* @__PURE__ */o.forwardRef(function PlBackTop({target:m,visibilityHeight:p=400,label:u,icon:v,floating:b=!0,variant:h="glass",size:j,color:k,elevation:x=2,className:y,style:T,onClick:g,...E},w){const B=n(),C=i(),z=u??C.backToTop,L=j??B.size??"md",P=k??B.color??"primary",I=l(),[N,S]=o.useState(!1);o.useEffect(()=>{const e=r(m);if(!e)return;const read=()=>S(function scrollTopOf(e){return e instanceof Window?e.scrollY:e.scrollTop}(e)>p);return read(),e.addEventListener("scroll",read,{passive:!0}),()=>e.removeEventListener("scroll",read)},[m,p]);const U=b?{position:"fixed",insetInlineEnd:`calc(${f} + var(--p-safe-inline, 0px))`,insetBlockEnd:`calc(${f} + env(safe-area-inset-bottom, 0px))`}:{};return e(t,{ref:w,label:z,icon:v??e(ChevronUp,{}),variant:h,size:L,color:P,elevation:x,onClick:e=>{if(g?.(e),e.defaultPrevented)return;const o=r(m);o?.scrollTo({top:0,behavior:I?"instant":"smooth"});const t=e.currentTarget;if(o&&document.activeElement===t){const e=o===window?document.body:o,n=s(e).find(e=>e!==t&&!e.closest('[aria-hidden="true"]'));n?n.focus({preventScroll:!0}):t.blur()}},"aria-hidden":!N||void 0,tabIndex:N?void 0:-1,className:a(b?"z-30":"",b&&c.End,d,N?"opacity-100":"pointer-events-none opacity-0",y),style:{...U,...T},...E})});

package/dist/components/badge/PlBadge.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import*as m from"react";import{useDefaults as o}from"../../internal/defaults.js";import{controlSlots as a,forcedFieldEdgeClasses as l,glassClasses as n,hasContent as r,srOnlyClasses as i,transitionClasses as d}from"../../internal/styles.js";const p={xs:"h-3.5 min-w-3.5",sm:"h-4 min-w-4",md:"h-4.5 min-w-4.5",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},b={xs:"size-1.5",sm:"size-2",md:"size-2.5",lg:"size-2.5",xl:"size-3"},x={xs:"text-[0.5625rem]",sm:"text-[0.625rem]",md:"text-[0.6875rem]",lg:"text-[0.75rem]",xl:"text-[0.8125rem]"},c={default:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},compact:{xs:"px-0.5",sm:"px-0.5",md:"px-1",lg:"px-1",xl:"px-1.5"}},g="rounded-full",f={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},u={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},h={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},v={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",l].join(" "),glass:/* @__PURE__ */[n,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft-press)"};export const PlBadge=/* @__PURE__ */m.forwardRef(function PlBadge({variant:m="solid",size:l,color:n,density:w,elevation:j=0,content:y,max:z=99,dot:N=!1,showZero:k=!1,invisible:B=!1,placement:P="top-end",overlap:$="square",label:q,className:C,style:F,children:R,...Z},A){const D=o(),E=l??D.size??"md",G=n??D.color??"primary",H=w??D.density??"default",I=r(R),J=!r(y)||0===y&&!k,K=N||J,L=B||J&&!N,M=["pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","font-semibold tabular-nums whitespace-nowrap",g,d,v[m],K?b[E]:[p[E],x[E],c[H][E]].join(" "),I?`absolute ${u[P]}`:"relative align-middle",I?K?f[E].dot:f[E].badge:"",I&&"circle"===$?h[P]:"",L?"invisible":"",C??""].filter(Boolean).join(" "),O=function capContent(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(y,z),Q=e("span",{ref:A,className:M,style:{...a(G,j,m),...F},"aria-hidden":!!L||void 0,...Z,children:L?null:s(t,{children:[K||q?e("span",{className:i,children:q??O}):null,K?null:e("span",{"aria-hidden":!!q||void 0,children:O})]})});return I?s("span",{className:"relative inline-flex shrink-0 align-middle",children:[R,Q]}):Q});
+"use client";import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as s from"react";import{useDefaults as n}from"../../internal/defaults.js";import{controlSlots as i,hasContent as l,markRestClasses as o,srOnlyClasses as a,transitionClasses as r}from"../../internal/styles.js";const d={xs:"h-3.5 min-w-3.5",sm:"h-4 min-w-4",md:"h-4.5 min-w-4.5",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},p={xs:"size-1.5",sm:"size-2",md:"size-2.5",lg:"size-2.5",xl:"size-3"},x={xs:"text-[0.5625rem]",sm:"text-[0.625rem]",md:"text-[0.6875rem]",lg:"text-[0.75rem]",xl:"text-[0.8125rem]"},b={default:{xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},compact:{xs:"px-0.5",sm:"px-0.5",md:"px-1",lg:"px-1",xl:"px-1.5"}},c="rounded-full",u={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},f={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},g={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"};export const PlBadge=/* @__PURE__ */s.forwardRef(function PlBadge({variant:s="solid",size:h,color:v,density:w,elevation:j=0,content:y,max:z=99,dot:N=!1,showZero:B=!1,invisible:k=!1,placement:P="top-end",overlap:$="square",label:q,className:C,style:F,children:R,...Z},A){const D=n(),E=h??D.size??"md",G=v??D.color??"primary",H=w??D.density??"default",I=l(R),J=!l(y)||0===y&&!B,K=N||J,L=k||J&&!N,M=["pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","font-semibold tabular-nums whitespace-nowrap",c,r,o[s],K?p[E]:[d[E],x[E],b[H][E]].join(" "),I?`absolute ${f[P]}`:"relative align-middle",I?K?u[E].dot:u[E].badge:"",I&&"circle"===$?g[P]:"",L?"invisible":"",C??""].filter(Boolean).join(" "),O=function capContent(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(y,z),Q=e("span",{ref:A,className:M,style:{...i(G,j,s),...F},"aria-hidden":!!L||void 0,...Z,children:L?null:m(t,{children:[K||q?e("span",{className:a,children:q??O}):null,K?null:e("span",{"aria-hidden":!!q||void 0,children:O})]})});return I?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[R,Q]}):Q});

package/dist/components/bar-chart/PlBarChart.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type CartesianChartProps } from '../../internal/chart-frame.js';
-import type { PlassChartValueLabels, PlassOrientation } from '../../types.js';
+import type { PlassChartCategory, PlassChartLabelColor, PlassChartSort, PlassChartValueLabels, PlassOrientation } from '../../types.js';
 export interface PlBarChartProps extends CartesianChartProps {
     /**
      * Which way the bars run.
@@ -46,6 +46,58 @@ export interface PlBarChartProps extends CartesianChartProps {
      * @default 'none'
      */
     valueLabels?: PlassChartValueLabels;
+    /**
+     * What colour those numbers are written in.
+     *
+     * `series` — the default — gives each label the colour of the bar it is
+     * sitting past, so a group of four labelled bars says which number belongs to
+     * which series without the reader counting along the group. `ink` writes them
+     * all in the page's own foreground: the chart palette clears 4:1 against the
+     * sheet, which is the floor a *mark* is held to rather than the 4.5:1 body
+     * text wants, so reach for it where the labels have to meet the text contrast
+     * rule on their own.
+     * @default 'series'
+     */
+    valueLabelColor?: PlassChartLabelColor;
+    /**
+     * Puts the categories in order of size rather than leaving them in the order
+     * they were given.
+     *
+     * A bar chart is the one shape whose categories can be shuffled without
+     * losing anything — that is the test for reaching for it over a line chart —
+     * so sorting them is free, and it is what turns a wall of bars into a ranking
+     * a reader can scan down. Leave it alone where the order already means
+     * something: months, sizes, a funnel's steps.
+     *
+     * With more than one series the size of a category is the **total** across
+     * all of them, and each series' magnitude rather than its signed value — a
+     * category whose two series are +50 and −50 is a hundred units of chart, not
+     * nothing. A series hidden from the legend is still counted, because a chart
+     * whose columns rearranged themselves when an entry was clicked is one a
+     * reader cannot use.
+     * @default 'none'
+     */
+    sort?: PlassChartSort;
+    /**
+     * Keeps the largest this many categories and sums the rest into one.
+     *
+     * The answer to a chart of ninety countries: a bar too short to see is a bar
+     * costing width without saying anything, and eighty of them is a chart of
+     * nothing but noise. What is folded is decided by size and never by `sort`,
+     * so `ascending` shows the small ones it kept rather than keeping the small
+     * ones — and the fold is always last, wherever the sort would otherwise have
+     * put it, because it is not a category but what is left.
+     *
+     * A fold of nothing but gaps stays a gap rather than becoming a zero.
+     */
+    maxCategories?: number;
+    /**
+     * What that fold is called. Falls back to the label pack's own word, which is
+     * "Other" in English.
+     */
+    otherLabel?: string;
+    /** The category axis' labels. Points may carry their own `x` instead. */
+    categories?: readonly PlassChartCategory[];
 }
 /**
  * Lengths, compared.
@@ -60,4 +112,4 @@ export interface PlBarChartProps extends CartesianChartProps {
  * is this total made of". They are different questions and the chart should be
  * asked only one of them at a time.
  */
-export declare function PlBarChart({ orientation, stacked, rounded, barSize, valueLabels, series, yAxis, format, locale, size: sizeProp, density: densityProp, ...props }: PlBarChartProps): React.JSX.Element;
+export declare function PlBarChart({ orientation, stacked, rounded, barSize, valueLabels, valueLabelColor, sort, maxCategories, otherLabel, series, categories, yAxis, format, locale, size: sizeProp, density: densityProp, ...props }: PlBarChartProps): React.JSX.Element;

package/dist/components/bar-chart/PlBarChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as l,markTransitionClasses as r}from"../../internal/chart-frame.js";import{barBandRatio as n,barMaxThickness as i,barPath as o,barRadius as s,chartFontSizes as c,dimmedByHover as u,labelledPoints as d,markGap as m,stackToFull as h,writeChartValue as f}from"../../internal/chart.js";import{useDefaults as v}from"../../internal/defaults.js";export function PlBarChart({orientation:a="vertical",stacked:r=!1,rounded:o=!0,barSize:s,valueLabels:c="none",series:u,yAxis:d,format:m,locale:x,size:p,density:b,...y}){const z=v(),g=p??z.size??"md",k=b??z.density??"default",M=x??z.locale,j="horizontal"===a,B="full"===r,P=t.useMemo(()=>B?h(u,e=>f(e,m,M)):u,[u,B,m,M]);return e(l,{...y,series:P,format:m,locale:x,size:g,density:k,horizontal:j,stacked:!1!==r,yAxis:B?{min:0,max:100,tickFormat:e=>`${e}%`,...d}:d,includeZero:!0,bandRatio:n[k],headroom:"none"===c?0:12,children:a=>e(Bars,{context:a,stacked:!1!==r,rounded:o,barSize:s??i[g],valueLabels:c,size:g})})}function Bars({context:t,stacked:l,rounded:n,barSize:i,valueLabels:h,size:f}){const{values:v,visible:x,colors:p,hovered:b,activeIndex:y,plot:z,band:g,horizontal:k,valuePx:M,categoryPx:j,zeroPx:B,format:P}=t,S=v.map((e,a)=>({one:e,index:a})).filter(e=>x[e.index]),A=l?1:Math.max(1,S.length),L=Math.min(i,Math.max(1,(g.band-m*(A-1))/A)),N=L*A+m*(A-1),W=[],w=[],C=c[f];return a("g",{children:[S.map(({one:t,index:i},c)=>{const f=p[i],v=u(b,i,x),g=d(t,h);return e("g",{opacity:v?.28:1,className:r,children:t.map((t,i)=>{if(null===t.value)return null;const u=j(i),d=l?0:c*(L+m)-N/2+L/2,h=l?t.value>=0?W[i]??0:w[i]??0:0,v=M(h),x=M(h+t.value);l&&(t.value>=0?W[i]=h+t.value:w[i]=h+t.value);const p=l&&0!==h?m:0,b=Math.abs(x-v)-p;if(b<=0)return null;const B=x<v,S=i===y,A=k?o(Math.min(v,x)+(B?0:p),z.top+u+d-L/2,b,L,n&&!l?s:n?s/2:0,t.value>=0?"right":"left"):o(z.left+u+d-L/2,Math.min(v,x)+(B?0:p),L,b,n&&!l?s:n?s/2:0,t.value>=0?"up":"down");return a("g",{children:[e("path",{d:A,fill:t.color??f,opacity:S?1:.92,className:r}),g(i)?e("text",{x:k?x+(t.value>=0?5:-5):z.left+u+d,y:k?z.top+u+d:t.value>=0?x-5:x+C+2,textAnchor:k?t.value>=0?"start":"end":"middle",dominantBaseline:k?"central":void 0,fontSize:C,fontWeight:500,fill:"var(--plass-fg)",className:"tabular-nums",children:t.label??P(t.value)}):null]},i)})},i)}),e("line",k?{x1:B,x2:B,y1:z.top,y2:z.top+z.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:z.left,x2:z.left+z.width,y1:B,y2:B,stroke:"var(--plass-chart-baseline)",strokeWidth:1})]})}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as r,markTransitionClasses as l}from"../../internal/chart-frame.js";import{barBandRatio as o,barMaxThickness as s,barPath as i,barRadius as n,chartFontSizes as c,dimmedByHover as u,labelledPoints as d,markGap as m,rankCategories as h,stackToFull as f,writeChartValue as v}from"../../internal/chart.js";import{useDefaults as x,useLocale as p}from"../../internal/defaults.js";import{useLabels as b}from"../../internal/labels.js";export function PlBarChart({orientation:a="vertical",stacked:l=!1,rounded:i=!0,barSize:n,valueLabels:c="none",valueLabelColor:u="series",sort:d="none",maxCategories:m,otherLabel:g,series:y,categories:z,yAxis:k,format:M,locale:j,size:L,density:C,...B}){const P=x(),S=L??P.size??"md",A=C??P.density??"default",N=p(j),W="horizontal"===a,w="full"===l,F=b(),I=g??F.chartOther,O=t.useMemo(()=>h(y,z,{sort:d,max:m,other:I}),[y,z,d,m,I]),R=t.useMemo(()=>w?f(O.series,e=>v(e,M,N)):O.series,[O.series,w,M,N]);return e(r,{...B,series:R,categories:O.categories,format:M,locale:j,size:S,density:A,horizontal:W,stacked:!1!==l,yAxis:w?{min:0,max:100,tickFormat:e=>`${e}%`,...k}:k,includeZero:!0,bandRatio:o[A],headroom:"none"===c?0:12,children:a=>e(Bars,{context:a,stacked:!1!==l,rounded:i,barSize:n??s[S],valueLabels:c,valueLabelColor:u,size:S})})}function Bars({context:t,stacked:r,rounded:o,barSize:s,valueLabels:h,valueLabelColor:f,size:v}){const{values:x,visible:p,colors:b,hovered:g,activeIndex:y,plot:z,band:k,horizontal:M,valuePx:j,categoryPx:L,zeroPx:C,format:B}=t,P=x.map((e,a)=>({one:e,index:a})).filter(e=>p[e.index]),S=r?1:Math.max(1,P.length),A=Math.min(s,Math.max(1,(k.band-m*(S-1))/S)),N=A*S+m*(S-1),W=[],w=[],F=c[v];return a("g",{children:[P.map(({one:t,index:s},c)=>{const v=b[s],x=u(g,s,p),k=d(t,h);return e("g",{opacity:x?.28:1,className:l,children:t.map((t,s)=>{if(null===t.value)return null;const u=L(s),d=r?0:c*(A+m)-N/2+A/2,h=r?t.value>=0?W[s]??0:w[s]??0:0,x=j(h),p=j(h+t.value);r&&(t.value>=0?W[s]=h+t.value:w[s]=h+t.value);const b=r&&0!==h?m:0,g=Math.abs(p-x)-b;if(g<=0)return null;const C=p<x,P=s===y,S=M?i(Math.min(x,p)+(C?0:b),z.top+u+d-A/2,g,A,o&&!r?n:o?n/2:0,t.value>=0?"right":"left"):i(z.left+u+d-A/2,Math.min(x,p)+(C?0:b),A,g,o&&!r?n:o?n/2:0,t.value>=0?"up":"down");return a("g",{children:[e("path",{d:S,fill:t.color??v,opacity:P?1:.92,className:l}),k(s)?e("text",{x:M?p+(t.value>=0?5:-5):z.left+u+d,y:M?z.top+u+d:t.value>=0?p-5:p+F+2,textAnchor:M?t.value>=0?"start":"end":"middle",dominantBaseline:M?"central":void 0,fontSize:F,fontWeight:600,fill:"ink"===f?"var(--plass-fg)":t.color??v,className:"tabular-nums",children:t.label??B(t.value)}):null]},s)})},s)}),e("line",M?{x1:C,x2:C,y1:z.top,y2:z.top+z.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:z.left,x2:z.left+z.width,y1:C,y2:C,stroke:"var(--plass-chart-baseline)",strokeWidth:1})]})}

package/dist/components/blockquote/PlBlockquote.d.ts

@@ -53,8 +53,8 @@ export interface PlBlockquoteProps extends PlassStyleProps, Omit<React.Component
  * name. VitePress's `.vp-doc blockquote` sets a grey `border-left`, a
  * `padding-left` and a `color`, all at a specificity a one-class utility cannot
  * outrank, so a rule drawn on the quote itself would silently come out grey and
- * a pixel too thin. Moving the drawing onto a wrapper is what lets the docs undo
- * VitePress's version without also undoing this one.
+ * a pixel too thin. Drawn on a wrapper, the quote looks the same whatever a host
+ * stylesheet does to `blockquote`.
  *
  * The wrapper is a `<figure>` when there is an attribution and a `<div>` when
  * there is not, because the HTML spec is explicit that the attribution goes

package/dist/components/blockquote/PlBlockquote.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{glassClasses as t,hasContent as a,metaTextClasses as o,radiusClasses as n,sheetPaddingXClasses as i,sheetPaddingYClasses as c,surfaceSlots as m,transitionClasses as d}from"../../internal/styles.js";const p={xs:"text-[0.75rem]/[1.25rem]",sm:"text-[0.8125rem]/[1.375rem]",md:"text-[0.9375rem]/[1.625rem]",lg:"text-[1.0625rem]/[1.875rem]",xl:"text-[1.25rem]/[2.125rem]"},f="border-s-2 [border-inline-start-color:var(--p-accent)]",u={solid:/* @__PURE__ */[t,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[t,"border border-s-2 bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"bg-transparent"};function QuoteMarkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const PlBlockquote=/* @__PURE__ */r.forwardRef(function PlBlockquote({variant:r="ghost",size:t,color:g,density:x,elevation:h=0,author:v,source:b,cite:j,icon:N,className:y,style:k,children:w,...z},B){const M=l(),q=t??M.size??"md",I=g??M.color??"primary",P=x??M.density??"default",Q=a(v)||a(b),Z=void 0===N?e(QuoteMarkIcon,{}):N,$=["m-0 flex flex-col text-(--plass-fg)",f,"ghost"===r?"":`${n[q]} rounded-s-none`,u[r],i[P][q],c[P][q],d,y??""].filter(Boolean).join(" "),C=s("blockquote",{cite:j,className:`m-0 ${p[q]}`,children:[a(Z)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--p-soft-press) [&>svg]:size-full",children:Z}):null,w]}),R={...m(I,h),...k};return Q?s("figure",{ref:B,className:$,style:R,...z,children:[C,s("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--plass-muted-fg)",o[q]].join(" "),children:[a(v)?s("span",{className:"font-medium text-(--plass-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),v]}):null,a(b)?e("cite",{className:"not-italic",children:b}):null]})]}):e("div",{ref:B,className:$,style:R,...z,children:C})});
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{glassClasses as t,hasContent as a,metaTextClasses as o,radiusClasses as n,sheetPaddingXClasses as i,sheetPaddingYClasses as c,surfaceSlots as m,transitionClasses as d}from"../../internal/styles.js";const p={xs:"text-[0.75rem]/[1.25rem]",sm:"text-[0.8125rem]/[1.375rem]",md:"text-[0.9375rem]/[1.625rem]",lg:"text-[1.0625rem]/[1.875rem]",xl:"text-[1.25rem]/[2.125rem]"},f="border-s-2 [border-inline-start-color:var(--p-accent)]",u={solid:/* @__PURE__ */[t,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[t,"border border-s-2 bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"bg-transparent"};function QuoteMarkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const PlBlockquote=/* @__PURE__ */r.forwardRef(function PlBlockquote({variant:r="ghost",size:t,color:g,density:x,elevation:h=0,author:v,source:b,cite:j,icon:N,className:k,style:y,children:w,...z},B){const M=l(),q=t??M.size??"md",I=g??M.color??"primary",P=x??M.density??"default",Q=a(v)||a(b),Z=void 0===N?e(QuoteMarkIcon,{}):N,$=["m-0 flex flex-col text-(--plass-fg)",f,"ghost"===r?"":`${n[q]} rounded-s-none`,u[r],i[P][q],c[P][q],d,k??""].filter(Boolean).join(" "),C=s("blockquote",{cite:j,className:`m-0 ${p[q]}`,children:[a(Z)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--p-soft-press) [&>svg]:block [&>svg]:size-full",children:Z}):null,w]}),R={...m(I,h),...y};return Q?s("figure",{ref:B,className:$,style:R,...z,children:[C,s("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--plass-muted-fg)",o[q]].join(" "),children:[a(v)?s("span",{className:"font-medium text-(--plass-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),v]}):null,a(b)?e("cite",{className:"not-italic",children:b}):null]})]}):e("div",{ref:B,className:$,style:R,...z,children:C})});

package/dist/components/bottom-navigation/PlBottomNavigation.d.ts

@@ -77,6 +77,16 @@ export interface PlBottomNavigationItemProps extends Omit<React.ComponentPropsWi
     icon?: React.ReactNode;
     /** Renders the item as a link rather than as a button. */
     href?: string;
+    /**
+     * Renders the item's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, as on `PlTextLink`.
+     *
+     * Giving one makes the item a link, as an `href` does, and an `href` on the
+     * element wins over the item's own. A disabled item is drawn on a plain `<a>`
+     * with no address instead, since the element's own `href` would keep it
+     * going somewhere.
+     */
+    render?: useRender.RenderProp;
     /** Unavailable, but still part of the set. */
     disabled?: boolean;
     /** The destination's name. Read out even when `labels` keeps it undrawn. */
@@ -105,10 +115,10 @@ export declare const PlBottomNavigation: React.ForwardRefExoticComponent<PlBotto
  * the bar, which is the only place they can be set once and mean the same thing
  * for every item.
  *
- * With an `href` it is a real `<a>`, which is what makes a long press offer
- * "open in a new tab" and what puts the destination in the status bar — neither
- * of which a `<button>` that calls `router.push` can do. Without one it is a
- * `<button>`, because a `<div>` carrying a click handler is invisible to a
- * keyboard.
+ * With an `href` or a `render` it is a real `<a>`, which is what makes a long
+ * press offer "open in a new tab" and what puts the destination in the status
+ * bar — neither of which a `<button>` that calls `router.push` can do. Without
+ * either it is a `<button>`, because a `<div>` carrying a click handler is
+ * invisible to a keyboard.
  */
 export declare const PlBottomNavigationItem: React.ForwardRefExoticComponent<PlBottomNavigationItemProps & React.RefAttributes<HTMLElement>>;

package/dist/components/bottom-navigation/PlBottomNavigation.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{cx as r,focusRingInsetClasses as n,hasContent as o,iconSizeClasses as c,metaTextClasses as d,radiusClasses as m,sheetLineClasses as u,sheetRestClasses as p,srOnlyClasses as f,surfaceSlots as g,transitionClasses as h}from"../../internal/styles.js";const x=/* @__PURE__ */l.createContext({value:null,change:()=>{},size:"md",density:"default",labels:"all",disabled:!1}),v={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},b={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},y={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},N={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const PlBottomNavigation=/* @__PURE__ */l.forwardRef(function PlBottomNavigation({variant:a="glass",size:t,color:n,density:o,elevation:c=0,value:d,defaultValue:f=null,onValueChange:N,position:z="fixed",labels:w="all",divider:k=!0,safeArea:j=!0,disabled:C=!1,label:P,render:B,className:I,style:R,children:V,...A},D){const F=s(),M=t??F.size??"md",S=n??F.color??"primary",q=o??F.density??"default",[E,G]=l.useState(f),H=void 0!==d,J=H?d:E,K=l.useCallback(e=>{H||G(e),N?.(e)},[H,N]),L=l.useMemo(()=>({value:J??null,change:K,size:M,density:q,labels:w,disabled:C}),[J,K,M,q,w,C]),O=r("w-full min-w-0","static"===z?m[M]:"",p[a],"glass"===a&&"static"!==z?"border-0":"",k?u:"",v[z],j?"pb-[env(safe-area-inset-bottom)]":"",h,I);return i({render:B??e("nav",{}),ref:D,props:{"aria-label":P,className:O,style:{...g(S,c),...R},children:e(x.Provider,{value:L,children:e("div",{className:r("flex w-full items-stretch",b[M],y[q][M]),children:V})}),...A}})});export const PlBottomNavigationItem=/* @__PURE__ */l.forwardRef(function PlBottomNavigationItem({value:s,icon:i,href:u,disabled:p=!1,className:g,children:v,onClick:b,...y},z){const w=l.useContext(x),k=p||w.disabled,j=null!==w.value&&w.value===s,C="all"===w.labels||"selected"===w.labels&&j,P=r("flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5",N[w.size],m[w.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,n,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":j?"cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",g),B=t(a,{children:[o(i)?e("span",{className:r("flex shrink-0 items-center justify-center",c[w.size]),children:i}):null,o(v)?e("span",{className:C?r("max-w-full truncate leading-tight",d[w.size]):f,children:v}):null]}),press=e=>{k?e.preventDefault():(w.change(s),b?.(e))};return u?e("a",{ref:z,href:k?void 0:u,"aria-current":j?"page":void 0,"aria-disabled":k||void 0,className:P,onClick:press,...y,children:B}):e("button",{ref:z,type:"button",disabled:k,"aria-current":j?"page":void 0,className:P,onClick:press,...y,children:B})});
+"use client";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{useBottomBarHeight as r}from"../../internal/bottom-bar.js";import{cx as n,focusRingInsetClasses as o,hasContent as d,iconSizeClasses as c,metaTextClasses as m,radiusClasses as u,sheetLineClasses as p,sheetRestClasses as f,srOnlyClasses as g,surfaceSlots as h,transitionClasses as x}from"../../internal/styles.js";const b=/* @__PURE__ */l.createContext({value:null,change:()=>{},size:"md",density:"default",labels:"all",disabled:!1}),v={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},y={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},N={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},z={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const PlBottomNavigation=/* @__PURE__ */l.forwardRef(function PlBottomNavigation({variant:a="glass",size:t,color:o,density:d,elevation:c=0,value:m,defaultValue:g=null,onValueChange:z,position:k="fixed",labels:w="all",divider:j=!0,safeArea:C=!0,disabled:B=!1,label:P,render:R,className:I,style:V,children:A,...D},F){const M=s(),S=t??M.size??"md",q=o??M.color??"primary",E=d??M.density??"default",[G,H]=l.useState(g),J=void 0!==m,K=J?m:G,L=l.useCallback(e=>{J||H(e),z?.(e)},[J,z]),O=l.useMemo(()=>({value:K??null,change:L,size:S,density:E,labels:w,disabled:B}),[K,L,S,E,w,B]),Q=l.useRef(null);r(Q,"fixed"===k);const T=n("w-full min-w-0","static"===k?u[S]:"",f[a],"glass"===a&&"static"!==k?"border-0":"",j?p:"",v[k],C?"pb-[env(safe-area-inset-bottom)]":"",x,I);return i({render:R??e("nav",{}),ref:[F,Q],props:{"aria-label":P,className:T,style:{...h(q,c),...V},children:e(b.Provider,{value:O,children:e("div",{className:n("flex w-full items-stretch",y[S],N[E][S]),children:A})}),...D}})});export const PlBottomNavigationItem=/* @__PURE__ */l.forwardRef(function PlBottomNavigationItem({value:s,icon:r,href:p,render:f,disabled:h=!1,className:v,children:y,onClick:N,...k},w){const j=l.useContext(b),C=h||j.disabled,B=null!==j.value&&j.value===s,P="all"===j.labels||"selected"===j.labels&&B,R=n("flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5",z[j.size],u[j.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",x,o,C?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":B?"cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",v),I=t(a,{children:[d(r)?e("span",{className:n("flex shrink-0 items-center justify-center",c[j.size]),children:r}):null,d(y)?e("span",{className:P?n("max-w-full truncate leading-tight",m[j.size]):g,children:y}):null]}),press=e=>{C?e.preventDefault():(j.change(s),N?.(e))};return i({render:C?e("a",{}):f??e("a",{}),enabled:Boolean(p||f),ref:w,props:{href:C?void 0:p,role:C?"link":void 0,"aria-current":B?"page":void 0,"aria-disabled":C||void 0,className:R,onClick:press,...k,children:I}})||e("button",{ref:w,type:"button",disabled:C,"aria-current":B?"page":void 0,className:R,onClick:press,...k,children:I})});

package/dist/components/breadcrumb/PlBreadcrumb.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
 /**
  * What is drawn between two steps of the trail.
@@ -106,6 +107,16 @@ export interface PlBreadcrumbItemProps extends Omit<React.ComponentPropsWithoutR
     current?: boolean;
     /** Unavailable. Stops answering, keeps its place in the trail. */
     disabled?: boolean;
+    /**
+     * Renders the step's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, as on `PlTextLink`.
+     *
+     * Giving one makes the step a link, as an `href` does, and an `href` on the
+     * element wins over the step's own, both on the anchor and in
+     * `structuredData`. The current step is not a link and a disabled one goes
+     * nowhere, so neither uses it.
+     */
+    render?: useRender.RenderProp;
     /** The step's label. */
     children?: React.ReactNode;
 }
@@ -131,8 +142,10 @@ export declare const PlBreadcrumb: React.ForwardRefExoticComponent<PlBreadcrumbP
  * One step of the trail.
  *
  * It renders three different things and the caller picks by what they pass: an
- * `<a>` with an `href`, a `<button>` with an `onClick`, and a plain `<span>` with
- * neither — which is what the last step is, because the page you are already on
- * is not somewhere to go.
+ * `<a>` with an `href` or a `render`, a `<button>` with an `onClick`, and a
+ * plain `<span>` with neither — which is what the last step is, because the
+ * page you are already on is not somewhere to go. A disabled link is still an
+ * `<a>`, with no address, and a disabled button is still a `<button>`, with
+ * `disabled`.
  */
 export declare const PlBreadcrumbItem: React.ForwardRefExoticComponent<PlBreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/breadcrumb/PlBreadcrumb.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{ArrowRightIcon as l,ChevronIcon as c,EllipsisIcon as i}from"../../internal/icons.js";import{textOf as o}from"../../internal/text.js";import{controlTextClasses as m,cx as u,focusRingClasses as d,gapClasses as p,hasContent as f,iconClasses as h,radiusClasses as x,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */a.createContext({size:"md",last:!1}),y={default:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},compact:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"}},N={xs:x.xs,sm:x.xs,md:x.xs,lg:x.sm,xl:x.sm},v=["chevron","arrow","slash","dot"];function absoluteHref(e,t){if(!t)return e;try{return new URL(e,t).href}catch{return e}}function breadcrumbListData(e,t){const r=e.map((e,r)=>{const{href:a,children:s}=e.props;return{"@type":"ListItem",position:r+1,name:o(s),...a?{item:absoluteHref(a,t)}:null}});return JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r}).replace(/</g,"\\u003c")}export const PlBreadcrumb=/* @__PURE__ */a.forwardRef(function PlBreadcrumb({size:r,color:o,density:p,separator:f="chevron",maxItems:x,itemsBeforeCollapse:N=1,itemsAfterCollapse:k=1,expandable:w=!0,label:j,expandLabel:C,structuredData:L=!1,baseUrl:B,className:I,style:M,children:z,...P},R){const S=s(),A=n(),E=j??A.breadcrumb,D=C??A.breadcrumbExpand,H=r??S.size??"md",$=o??S.color??"primary",F=p??S.density??"default",[U,_]=a.useState(!1),q=a.useRef(null),J=a.useRef(!1);a.useEffect(()=>{if(!U||!J.current)return;J.current=!1;const e=Array.from(q.current?.children??[]).filter(e=>"true"!==e.getAttribute("aria-hidden"));for(const t of e.slice(Math.max(0,N))){const e=t.querySelector("a[href], button:not(:disabled)");if(e)return void e.focus()}},[U,N]);const O=a.Children.toArray(z).filter(a.isValidElement),T=O.length,V=O.some(e=>!0===e.props.current),G=!U&&void 0!==x&&T>Math.max(x,1)&&T-N-k>1?[...O.slice(0,Math.max(0,N)),null,...O.slice(T-Math.max(0,k))]:O,K=function isSeparatorName(e){return"string"==typeof e&&v.includes(e)}(f)?function separatorMark(t){switch(t){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(c,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(l,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(f):f,Q=u("inline-flex items-center rounded-(--plass-radius-xs) px-0.5","text-(--plass-muted-fg)",g,h,w?u("cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)",d):"");return t("nav",{ref:R,"aria-label":E,className:u("flex",m[H],h,I),style:{"--p-accent":`var(--plass-${$}-accent)`,"--p-soft":`var(--plass-${$}-soft)`,"--p-ring":`var(--plass-${$}-ring)`,...M},...P,children:[L&&T>0?e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:breadcrumbListData(O,B)}}):null,e("ol",{ref:q,role:"list",className:u("m-0 flex list-none flex-wrap items-center p-0",y[F][H]),children:G.map((r,s)=>t(a.Fragment,{children:[s>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) select-none",children:K}):null,r?e(b.Provider,{value:{size:H,last:!V&&s===G.length-1},children:r}):e("li",{className:"flex shrink-0 items-center",children:w?e("button",{type:"button",className:Q,"aria-label":D,onClick:()=>{J.current=!0,_(!0)},children:e(i,{})}):e("span",{className:Q,"aria-hidden":"true",children:e(i,{})})})]},r?r.key??s:"fold"))})]})});export const PlBreadcrumbItem=/* @__PURE__ */a.forwardRef(function PlBreadcrumbItem({href:s,onClick:n,startIcon:l,endIcon:c,current:i,disabled:o=!1,className:m,children:h,...x},y){const{size:v,last:k}=a.useContext(b),w=i??k,j=Boolean(s||n)&&!w&&!o,C=u("inline-flex min-w-0 items-center px-1",p[v],N[v],g,o?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":w?"font-medium text-(--plass-fg)":j?u("cursor-pointer text-(--plass-muted-fg)","hover:bg-(--p-soft) hover:text-(--p-accent)",d):"text-(--plass-muted-fg)"),L=t(r,{children:[f(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",children:h}),f(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]});return e("li",{ref:y,className:u("flex min-w-0 items-center",m),...x,children:j&&s?e("a",{href:s,className:C,onClick:n,children:L}):j?e("button",{type:"button",className:C,onClick:n,children:L}):e("span",{className:C,"aria-current":w?"page":void 0,"aria-disabled":o||void 0,children:L})})});
+"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{useRender as s}from"@base-ui/react/use-render";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{ArrowRightIcon as i,ChevronIcon as c,EllipsisIcon as o}from"../../internal/icons.js";import{textOf as m}from"../../internal/text.js";import{controlTextClasses as d,cx as p,focusRingClasses as u,gapClasses as f,hasContent as h,iconClasses as x,radiusClasses as b,transitionClasses as g}from"../../internal/styles.js";const y=/* @__PURE__ */a.createContext({size:"md",last:!1}),v={default:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},compact:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"}},N={xs:b.xs,sm:b.xs,md:b.xs,lg:b.sm,xl:b.sm},k=["chevron","arrow","slash","dot"];function absoluteHref(e,r){if(!r)return e;try{return new URL(e,r).href}catch{return e}}function breadcrumbListData(e,r){const t=e.map((e,t)=>{const s=function stepHref({href:e,render:r}){const t=a.isValidElement(r)?r.props.href:void 0;return"string"==typeof t&&t?t:e}(e.props),{children:n}=e.props;return{"@type":"ListItem",position:t+1,name:m(n),...s?{item:absoluteHref(s,r)}:null}});return JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:t}).replace(/</g,"\\u003c")}export const PlBreadcrumb=/* @__PURE__ */a.forwardRef(function PlBreadcrumb({size:t,color:s,density:m,separator:f="chevron",maxItems:h,itemsBeforeCollapse:b=1,itemsAfterCollapse:N=1,expandable:w=!0,label:j,expandLabel:B,structuredData:C=!1,baseUrl:L,className:I,style:M,children:z,...E},P){const R=n(),S=l(),A=j??S.breadcrumb,H=B??S.breadcrumbExpand,D=t??R.size??"md",$=s??R.color??"primary",F=m??R.density??"default",[U,V]=a.useState(!1),_=a.useRef(null),q=a.useRef(!1);a.useEffect(()=>{if(!U||!q.current)return;q.current=!1;const e=Array.from(_.current?.children??[]).filter(e=>"true"!==e.getAttribute("aria-hidden"));for(const r of e.slice(Math.max(0,b))){const e=r.querySelector("a[href], button:not(:disabled)");if(e)return void e.focus()}},[U,b]);const J=a.Children.toArray(z).filter(a.isValidElement),O=J.length,T=J.some(e=>!0===e.props.current),G=!U&&void 0!==h&&O>Math.max(h,1)&&O-b-N>1?[...J.slice(0,Math.max(0,b)),null,...J.slice(O-Math.max(0,N))]:J,K=function isSeparatorName(e){return"string"==typeof e&&k.includes(e)}(f)?function separatorMark(r){switch(r){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(c,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(i,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(f):f,Q=p("inline-flex items-center rounded-(--plass-radius-xs) px-0.5 py-0","text-(--plass-muted-fg)",g,x,w?p("cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)",u):"");return r("nav",{ref:P,"aria-label":A,className:p("flex",d[D],x,I),style:{"--p-accent":`var(--plass-${$}-accent)`,"--p-soft":`var(--plass-${$}-soft)`,"--p-ring":`var(--plass-${$}-ring)`,...M},...E,children:[C&&O>0?e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:breadcrumbListData(J,L)}}):null,e("ol",{ref:_,role:"list",className:p("m-0 flex list-none flex-wrap items-center p-0",v[F][D]),children:G.map((t,s)=>r(a.Fragment,{children:[s>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) select-none",children:K}):null,t?e(y.Provider,{value:{size:D,last:!T&&s===G.length-1},children:t}):e("li",{className:"flex shrink-0 items-center",children:w?e("button",{type:"button",className:Q,"aria-label":H,onClick:()=>{q.current=!0,V(!0)},children:e(o,{})}):e("span",{className:Q,"aria-hidden":"true",children:e(o,{})})})]},t?t.key??s:"fold"))})]})});export const PlBreadcrumbItem=/* @__PURE__ */a.forwardRef(function PlBreadcrumbItem({href:n,onClick:l,startIcon:i,endIcon:c,current:o,disabled:m=!1,render:d,className:x,children:b,...v},k){const{size:w,last:j}=a.useContext(y),B=o??j,C=Boolean(n||d),L=Boolean(l)&&!C&&!B,I=(C||Boolean(l))&&!B&&!m,M=p("inline-flex min-w-0 items-center px-1 py-0",f[w],N[w],g,m?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":B?"font-medium text-(--plass-fg)":I?p("cursor-pointer text-(--plass-muted-fg)","hover:bg-(--p-soft) hover:text-(--p-accent)",u):"text-(--plass-muted-fg)"),z=r(t,{children:[h(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,e("span",{className:"truncate",children:b}),h(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]}),E=s({render:m?e("a",{}):d??e("a",{}),enabled:C&&!B,props:{href:m?void 0:n,role:m?"link":void 0,"aria-disabled":m||void 0,className:M,onClick:m?void 0:l,children:z}});return e("li",{ref:k,className:p("flex min-w-0 items-center",x),...v,children:E||(L?e("button",{type:"button",className:M,disabled:m,onClick:l,children:z}):e("span",{className:M,"aria-current":B?"page":void 0,"aria-disabled":m||void 0,children:z}))})});

package/dist/components/button/PlButton.d.ts

@@ -17,8 +17,15 @@ export interface PlButtonProps extends PlassStyleProps, Omit<React.ComponentProp
     /**
      * Shows a spinner in place of `startIcon` and stops the button from
      * activating, while keeping it focusable and visually unchanged otherwise.
+     * A screen reader hears the label set's `loading` word after its name.
      */
     loading?: boolean;
+    /**
+     * The word a screen reader hears after the name while `loading` — "Saving",
+     * "Sending". It takes the place of the label set's `loading` for this button.
+     * @default 'Loading'
+     */
+    loadingLabel?: string;
     /** Inert but not dimmed — the action exists, it just is not available here. */
     readOnly?: boolean;
     /**

package/dist/components/button/PlButton.js

@@ -1 +1 @@
-"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Button as l}from"@base-ui/react/button";import{useRender as t}from"@base-ui/react/use-render";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{glowPointerMove as n}from"../../internal/glow.js";import{Spinner as d}from"../../internal/icons.js";import{controlHeightClasses as p,controlSlots as c,controlSquareClasses as g,controlTextClasses as v,disabledClasses as m,focusRingClasses as b,forcedEdgeClasses as x,gapClasses as h,glassClasses as u,hasContent as f,iconClasses as $,paddingXClasses as j,radiusClasses as w,readOnlyFilterClasses as y,transitionClasses as k}from"../../internal/styles.js";const P={xs:`${p.xs} ${h.xs} ${w.xs} ${v.xs}`,sm:`${p.sm} ${h.sm} ${w.sm} ${v.sm}`,md:`${p.md} ${h.md} ${w.md} ${v.md}`,lg:`${p.lg} ${h.lg} ${w.lg} ${v.lg}`,xl:`${p.xl} ${h.xl} ${w.xl} ${v.xl}`},B={xs:`${g.xs} px-0`,sm:`${g.sm} px-0`,md:`${g.md} px-0`,lg:`${g.lg} px-0`,xl:`${g.xl} px-0`},z=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",k,b,$].join(" "),C={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[u,"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-transparent"},D={solid:/* @__PURE__ */["hover:brightness-105","hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95","active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) active:bg-(--p-soft-hover)"},W={solid:/* @__PURE__ */["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`shadow-none ${y}`].join(" "),glass:/* @__PURE__ */[u,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${y}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${y}`};export const PlButton=/* @__PURE__ */r.forwardRef(function PlButton({variant:p,size:g,color:v,density:b,elevation:x,startIcon:h,endIcon:u,loading:$=!1,readOnly:w=!1,fullWidth:y=!1,disabled:k,focusableWhenDisabled:I=!1,render:M,className:N,style:F,children:O,onClick:R,onPointerMove:q,...A},E){const G=a(),H=r.useContext(i),J=p??H?.variant??"solid",K=g??H?.size??G.size??"md",L=v??H?.color??G.color??"primary",Q=b??H?.density??G.density??"default",S=x??H?.elevation??1,T=k??H?.disabled??!1,U=!f(O),V=$||w,X=!T&&!V,Y=[z,P[K],U?B[K]:j[Q][K],T?m[J]:w?W[J]:C[J],X?`${D[J]} cursor-pointer`:"",X?"plass-glow":"",$?"cursor-progress":"",y?"w-full":"",N??""].filter(Boolean).join(" ");return t({render:M??s(l,{disabled:T,focusableWhenDisabled:I}),ref:E,props:{className:Y,style:{...c(L,S,J),...F},"aria-disabled":V||T&&I||void 0,"aria-busy":$||void 0,"data-loading":$||void 0,"data-readonly":w||void 0,onClick:s=>{if(V)return s.preventDefault(),void s.stopPropagation();R?.(s)},onPointerMove:n(X,q),...A,children:o(e,{children:[$?s(d,{}):h,O,u]})}})});
+"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Button as l}from"@base-ui/react/button";import{useRender as t}from"@base-ui/react/use-render";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{useDisabled as n}from"../../internal/form.js";import{glowPointerMove as d}from"../../internal/glow.js";import{Spinner as p}from"../../internal/icons.js";import{loadingLabel as c}from"../../internal/loading.js";import{controlHeightClasses as g,controlSlots as v,controlSquareClasses as m,controlTextClasses as b,cx as f,disabledClasses as h,focusRingClasses as u,forcedEdgeClasses as x,gapClasses as $,glassClasses as j,hasContent as w,iconClasses as y,paddingXClasses as k,radiusClasses as P,readOnlyFilterClasses as B,transitionClasses as z}from"../../internal/styles.js";const C={xs:`${g.xs} ${$.xs} ${P.xs} ${b.xs}`,sm:`${g.sm} ${$.sm} ${P.sm} ${b.sm}`,md:`${g.md} ${$.md} ${P.md} ${b.md}`,lg:`${g.lg} ${$.lg} ${P.lg} ${b.lg}`,xl:`${g.xl} ${$.xl} ${P.xl} ${b.xl}`},D={xs:`${m.xs} px-0`,sm:`${m.sm} px-0`,md:`${m.md} px-0`,lg:`${m.lg} px-0`,xl:`${m.xl} px-0`},I=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center p-0","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",z,u,y].join(" "),W={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[j,"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-transparent"},M={solid:/* @__PURE__ */["hover:brightness-105","hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95","active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) active:bg-(--p-soft-hover)"},N={solid:/* @__PURE__ */["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`shadow-none ${B}`].join(" "),glass:/* @__PURE__ */[j,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${B}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${B}`};export const PlButton=/* @__PURE__ */r.forwardRef(function PlButton({variant:g,size:m,color:b,density:u,elevation:x,startIcon:$,endIcon:j,loading:y=!1,loadingLabel:P,readOnly:B=!1,fullWidth:z=!1,disabled:F,focusableWhenDisabled:L=!1,render:O,className:R,style:q,children:A,onClick:E,onPointerMove:G,"aria-describedby":H,...J},K){const Q=a(),S=r.useId(),T=r.useContext(i),U=g??T?.variant??"solid",V=m??T?.size??Q.size??"md",X=b??T?.color??Q.color??"primary",Y=u??T?.density??Q.density??"default",Z=x??T?.elevation??1,_=n(!1),ss=(F??T?.disabled??!1)||_&&!O,es=!w(A),os=y||B,rs=!ss&&!os,as=[I,C[V],es?D[V]:k[Y][V],ss?h[U]:B?N[U]:W[U],rs?`${M[U]} cursor-pointer`:"",rs?"plass-glow":"",y?"cursor-progress":"",z?"w-full":"",R??""].filter(Boolean).join(" ");return t({render:O??s(l,{disabled:ss,focusableWhenDisabled:L}),ref:K,props:{className:as,style:{...v(X,Z,U),...q},"aria-disabled":os||ss&&L||void 0,"aria-busy":y||void 0,"aria-describedby":y?f(H,S):H,"data-loading":y||void 0,"data-readonly":B||void 0,onClick:s=>{if(os)return s.preventDefault(),void s.stopPropagation();E?.(s)},onPointerMove:d(rs,G),...J,children:o(e,{children:[y?s(p,{}):$,A,j,y?s("span",{id:S,hidden:!0,children:P??Q.labels?.loading??c}):null]})}})});

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

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

@@ -20,7 +20,8 @@ export interface PlCardProps extends PlassStyleProps, Omit<React.ComponentPropsW
     subtitle?: React.ReactNode;
     /**
      * Content pinned to the end of the header row — a menu button, a status
-     * chip. Stays on the title's line while the title wraps beside it.
+     * chip. Centred on the title's first line, and stays there while the title
+     * wraps beside it. The header grows to hold whichever of the two is taller.
      */
     headerAction?: React.ReactNode;
     /**
@@ -51,15 +52,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/card/PlCard.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useRender as l}from"@base-ui/react/use-render";import{focusRingClasses as t,hasContent as n,metaTextClasses as i,radiusClasses as c,sheetBodyClasses as d,sheetHeaderGapClasses as v,sheetLineClasses as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as h,sheetSectionGapClasses as u,sheetTitleClasses as g,surfaceSlots as x}from"../../internal/styles.js";const y=/* @__PURE__ */["[transition-property:background-color,border-color,box-shadow,color,transform]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),b={solid:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)","hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)"};export const PlCard=/* @__PURE__ */a.forwardRef(function PlCard({variant:a="glass",size:N,color:j,density:$,elevation:w=1,title:k,subtitle:z,headerAction:B,footer:C,dividers:P=!1,padded:A=!0,interactive:F=!1,render:R,className:q,style:D,children:E,...G},H){const I=o(),J=N??I.size??"md",K=j??I.color??"primary",L=$??I.density??"default",M=A?m[L][J]:"",O=A?f[L][J]:"",Q=P?`${M} ${O}`:M,S=n(k)||n(z)||n(B),T=s(r,{children:[n(k)||n(z)?s("div",{className:`flex min-w-0 flex-1 flex-col ${v[J]}`,children:[n(k)?e("div",{className:`plass-title font-semibold ${g[J]}`,children:k}):null,n(z)?e("div",{className:`text-(--plass-muted-fg) ${i[J]}`,children:z}):null]}):null,n(B)?e("div",{className:"ms-auto shrink-0",children:B}):null]}),U=[S?{key:"header",className:"flex items-start gap-3",content:T}:null,n(E)?{key:"content",className:d[J],content:E}:null,n(C)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${d[J]}`,content:C}:null].filter(e=>null!==e),V=["flex flex-col",c[J],h[a],y,F?`${b[a]} ${t}`:"",P?"overflow-hidden":`${O} ${u[J]}`,q??""].filter(Boolean).join(" ");return l({render:R??e("div",{}),ref:H,props:{className:V,style:{...x(K,w),...D},...G,children:U.map((s,r)=>e("div",{className:[Q,s.className,P&&r>0?p:""].filter(Boolean).join(" "),children:s.content},s.key))}})});
+"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{focusRingClasses as t,hasContent as n,metaTextClasses as i,radiusClasses as c,sheetBodyClasses as d,sheetHeaderGapClasses as v,sheetLineClasses as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as u,sheetSectionGapClasses as h,sheetTitleClasses as g,surfaceSlots as x}from"../../internal/styles.js";const b=/* @__PURE__ */["[transition-property:background-color,border-color,box-shadow,color,transform]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),y={solid:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)","hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)"};export const PlCard=/* @__PURE__ */a.forwardRef(function PlCard({variant:a="glass",size:N,color:$,density:j,elevation:w=1,title:k,subtitle:z,headerAction:B,footer:C,dividers:P=!1,padded:A=!0,interactive:F=!1,render:R,className:q,style:D,children:E,...G},H){const I=l(),J=N??I.size??"md",K=$??I.color??"primary",L=j??I.density??"default",M=A?m[L][J]:"",O=A?f[L][J]:"",Q=P?`${M} ${O}`:M,S=n(k)||n(z)||n(B),T=`font-semibold ${g[J]}`,U=i[J],V=n(k)?T:n(z)?U:null,W=s(r,{children:[n(k)||n(z)?s("div",{className:`flex min-w-0 flex-1 flex-col ${v[J]}`,children:[n(k)?e("div",{className:`plass-title ${T}`,children:k}):null,n(z)?e("div",{className:`text-(--plass-muted-fg) ${U}`,children:z}):null]}):null,n(B)?s("div",{className:"ms-auto flex shrink-0 items-center",children:[V?e("span",{"aria-hidden":"true",className:`plass-strut w-0 ${V}`}):null,B]}):null]}),X=[S?{key:"header",className:"flex items-baseline gap-3",content:W}:null,n(E)?{key:"content",className:d[J],content:E}:null,n(C)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${d[J]}`,content:C}:null].filter(e=>null!==e),Y=["flex flex-col",c[J],u[a],b,F?`${y[a]} ${t}`:"",P?"overflow-hidden":`${O} ${h[J]}`,q??""].filter(Boolean).join(" ");return o({render:R??e("div",{}),ref:H,props:{className:Y,style:{...x(K,w),...D},...G,children:X.map((s,r)=>e("div",{className:[Q,s.className,P&&r>0?p:""].filter(Boolean).join(" "),children:s.content},s.key))}})});

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{layoutBox as u}from"../../internal/layout-box.js";import{usePrefersReducedMotion as d}from"../../internal/media.js";import{cx as f,pictureSlotClasses as m,radiusClasses as h,sheetRestClasses as p,srOnlyClasses as v,surfaceSlots as b,transitionClasses as g}from"../../internal/styles.js";const w={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"},x={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"},y={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){const{perPixel:n}=u(e,!0),s=t.getBoundingClientRect().left-e.getBoundingClientRect().left;e.scrollTo({left:e.scrollLeft+s*n,behavior:r})}export const PlCarousel=/* @__PURE__ */r.forwardRef(function PlCarousel({variant:u="glass",size:R,color:T,density:N,elevation:k=0,value:j,defaultValue:C=0,onValueChange:L,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(C),ae=Math.min(Math.max(j??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=d(),Ne=ye??Te,ke=S&&!Ne,je=r.useRef(null),Ce=r.useRef(!1),Le=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===j&&oe(r),r!==ae&&L?.(r)},[ne,E,j,ae,L]),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(Le);r.useEffect(()=>{Se.current=Le}),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&&!Ce.current&&Re(!0)},steer=e=>{hold(),Le(e)},ze=ae<=0,Pe=ae>=ne-1;return t("div",{ref:D,role:"region","aria-roledescription":H.carousel,"aria-label":J,className:f("flex flex-col",$),style:{...b(Z,k),...A},...n(q,{onPointerEnter:()=>be(!0),onPointerLeave:()=>be(!1),onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||(Ce.current=!1),e.target!==je.current&&hold()},onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(Ce.current=!1)}}),children:[t("div",{className:f("relative min-w-0 overflow-hidden",h[Y],p[u],g),children:[S&&ne>1?e("div",{className:f("absolute z-10 flex",x[Y]),children:e(a,{ref:je,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),Ce.current=!e}})}):null,e("div",{ref:le,tabIndex:0,role:"group","aria-label":J,className:f("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&&Le(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:f("w-full shrink-0 grow-0 basis-full snap-start",m),children:t},r.isValidElement(t)?t.key??n:n))}),P&&ne>1?t("div",{className:f("pointer-events-none absolute inset-y-0 flex items-center",w[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:f("group flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-full p-0","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0"),onClick:()=>steer(r),children:e("span",{"aria-hidden":"true",className:f("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?`${y[Y].current} bg-(--p-accent)`:`${y[Y].rest} bg-(--plass-border) group-hover:bg-(--p-accent)`)})},r))}):null,e("span",{className:v,"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})}