plass-ui 1.6.0 → 1.7.0

package/dist/components/area-chart/PlAreaChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type CartesianChartProps } from '../../internal/chart-frame.js';
 import { type ChartMarkers } from '../../internal/chart-line.js';
-import type { PlassChartCurve, PlassChartValueLabels } from '../../types.js';
+import type { PlassChartCurve, PlassChartLabelColor, PlassChartNulls, PlassChartValueLabels } from '../../types.js';
 export interface PlAreaChartProps extends CartesianChartProps {
     /**
      * How the edge of the band gets from one point to the next. The same three
@@ -30,10 +30,39 @@ export interface PlAreaChartProps extends CartesianChartProps {
     /** @default 'none' */
     valueLabels?: PlassChartValueLabels;
     /**
-     * Draws the band straight through a `null` instead of breaking at it. Off,
-     * and on an area it matters more than on a line: a fill that closes across a
-     * missing month paints a made-up number over a larger part of the chart.
-     * @default false
+     * What colour those numbers are written in.
+     *
+     * `series` — the default — gives each label the colour of the band it is
+     * sitting on, so a plot with four labelled series says which number belongs
+     * to which without the reader tracing it back. `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;
+    /**
+     * What a gap in a series does to the band.
+     *
+     * - `gap` — it breaks at the `null`. The default, and the only answer that
+     *   claims nothing the data did not: the blank says the reading is missing.
+     * - `connect` — the two sides are joined. Only when the gap is an artefact of
+     *   how the data was collected; otherwise the segment is a number the chart
+     *   made up.
+     * - `zero` — the gap is read as a zero, everywhere: on the axis, in the
+     *   tooltip and in the table as well as under the band. For a missing row
+     *   that genuinely means none.
+     * @default 'gap'
+     */
+    nulls?: PlassChartNulls;
+    /**
+     * Bridges a gap instead of breaking at it. It matters more on an area than on
+     * a line: a fill that closes across a missing month paints the made-up number
+     * over a larger part of the chart.
+     * @deprecated Use `nulls`. `connectNulls` is `nulls="connect"`, and `nulls`
+     * also has the third answer — reading the gap as a zero — which a boolean
+     * cannot express. It is still honoured when `nulls` is not given.
      */
     connectNulls?: boolean;
 }
@@ -51,4 +80,4 @@ export interface PlAreaChartProps extends CartesianChartProps {
  * so two of them overlapping stay readable. Stacked bands are opaquer, because
  * there the fill *is* the mark rather than a hint at the line above it.
  */
-export declare function PlAreaChart({ curve, stacked, markers, valueLabels, connectNulls, series, yAxis, format, locale, ...props }: PlAreaChartProps): React.JSX.Element;
+export declare function PlAreaChart({ curve, stacked, markers, valueLabels, valueLabelColor, nulls: nullsProp, connectNulls, series, yAxis, format, locale, ...props }: PlAreaChartProps): React.JSX.Element;

package/dist/components/area-chart/PlAreaChart.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as a}from"../../internal/chart-line.js";import{stackToFull as n,writeChartValue as o}from"../../internal/chart.js";import{useDefaults as l}from"../../internal/defaults.js";export function PlAreaChart({curve:s="linear",stacked:i=!1,markers:c="none",valueLabels:m="none",connectNulls:u=!1,series:f,yAxis:d,format:p,locale:x,...h}){const j=l(),k=x??j.locale,v=r.useId().replace(/:/g,""),A="full"===i,b=r.useMemo(()=>A?n(f,e=>o(e,p,k)):f,[f,A,p,k]);return e(t,{...h,series:b,format:p,locale:x,yAxis:A?{min:0,max:100,tickFormat:e=>`${e}%`,...d}:d,stacked:!1!==i,inset:!0,includeZero:!0,headroom:"none"===m?0:10,children:r=>e(a,{context:r,curve:s,filled:!0,stacked:!1!==i,markers:c,valueLabels:m,connectNulls:u,gradient:!1,idPrefix:v})})}
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as a}from"../../internal/chart-frame.js";import{LineSeries as t}from"../../internal/chart-line.js";import{stackToFull as l,writeChartValue as o,zeroNulls as n}from"../../internal/chart.js";import{useDefaults as s}from"../../internal/defaults.js";export function PlAreaChart({curve:i="linear",stacked:c=!1,markers:m="none",valueLabels:u="none",valueLabelColor:f="series",nulls:d,connectNulls:p=!1,series:x,yAxis:k,format:h,locale:j,...v}){const b=s(),L=j??b.locale,g=r.useId().replace(/:/g,""),A="full"===c,C=d??(p?"connect":"gap"),y=r.useMemo(()=>{const e="zero"===C?n(x):x;return A?l(e,e=>o(e,h,L)):e},[x,C,A,h,L]);return e(a,{...v,series:y,format:h,locale:j,yAxis:A?{min:0,max:100,tickFormat:e=>`${e}%`,...k}:k,stacked:!1!==c,stroked:!1===c,inset:!0,includeZero:!0,headroom:"none"===u?0:10,children:r=>e(t,{context:r,curve:i,filled:!0,stacked:!1!==c,markers:m,valueLabels:u,valueLabelColor:f,nulls:C,gradient:!1,idPrefix:g})})}

package/dist/components/aspect-ratio/PlAspectRatio.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{cx as t,radiusClasses as c}from"../../internal/styles.js";const l=/* @__PURE__ */["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none","scale-down":"[&>img]:object-scale-down [&>video]:object-scale-down [&>picture>img]:object-scale-down"};export const PlAspectRatio=/* @__PURE__ */e.forwardRef(function PlAspectRatio({ratio:e=1,fit:n="cover",rounded:s=!1,size:a,render:f,className:m,style:d,children:u,...j},b){const p=i(),v=a??p.size??"md",g=t("relative block w-full overflow-hidden",l,r[n],s?c[v]:"",m);return o({render:f,ref:b,props:{className:g,style:{aspectRatio:e,...d},children:u,...j}})});
+"use client";import*as e from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{cx as t,focusRingClasses as c,radiusClasses as r}from"../../internal/styles.js";const l=/* @__PURE__ */["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),n={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none","scale-down":"[&>img]:object-scale-down [&>video]:object-scale-down [&>picture>img]:object-scale-down"};export const PlAspectRatio=/* @__PURE__ */e.forwardRef(function PlAspectRatio({ratio:e=1,fit:s="cover",rounded:a=!1,size:m,render:f,className:d,style:u,children:p,...j},b){const v=i(),g=m??v.size??"md",z=v.color??"primary",w=t("relative block w-full overflow-hidden",l,n[s],a?r[g]:"",c,d);return o({render:f,ref:b,props:{className:w,style:{aspectRatio:e,"--p-ring":`var(--plass-${z}-ring)`,...u},children:p,...j}})});

package/dist/components/avatar/PlAvatar.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{Avatar as s}from"@base-ui/react/avatar";import{controlHeightClasses as o,controlSlots as l,controlSquareClasses as n,forcedFieldEdgeClasses as i,glassClasses as c,hasContent as d,radiusClasses as m,srOnlyClasses as p,transitionClasses as f}from"../../internal/styles.js";const g={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},v={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",i].join(" "),glass:/* @__PURE__ */[c,"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) [box-shadow:var(--p-elev)]"},h=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",f].join(" ");function PersonIcon(){return r("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */a.forwardRef(function PlAvatar({src:a,srcSet:i,alt:c,name:f,initials:u,shape:x,variant:b,size:j,color:y,elevation:w,delay:N,imageProps:z,onLoadingStatusChange:A,className:C,style:P,children:k,...B},S){const I=t(),L=x??"circle",F=b??"ghost",M=j??I.size??"md",R=y??I.color??"primary",Z=w??0,_=f?function initialsOf(e){const r=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===r.length?"":((Array.from(r[0])[0]??"")+(r.length>1?Array.from(r[r.length-1])[0]??"":"")).toLocaleUpperCase()}(f):"",O=c??f,U=d(k)?k:(u??_)||e(PersonIcon,{}),q=d(k)||Boolean(u??_),D=[h,o[M],n[M],g[M],"circle"===L?"rounded-full":m[M],v[F],C??""].filter(Boolean).join(" ");return r(s.Root,{ref:S,className:D,style:{...l(R,Z,F),...P},...B,children:[a?e(s.Image,{src:a,srcSet:i,alt:O??"",className:"size-full object-cover",onLoadingStatusChange:A,...z}):null,r(s.Fallback,{delay:a?N:void 0,className:"flex size-full items-center justify-center",children:[O&&q?e("span",{className:p,children:O}):null,e("span",{"aria-hidden":!(!O||!q)||void 0,className:"contents",children:U})]})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{Avatar as a}from"@base-ui/react/avatar";import{controlHeightClasses as s,controlSlots as i,controlSquareClasses as l,hasContent as o,markRestClasses as c,pictureSlotClasses as m,radiusClasses as d,srOnlyClasses as f,transitionClasses as u}from"../../internal/styles.js";const h={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},p=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",u].join(" ");function PersonIcon(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */r.forwardRef(function PlAvatar({src:r,srcSet:u,alt:g,name:v,initials:x,shape:j,variant:y,size:N,color:w,elevation:z,delay:A,imageProps:C,onLoadingStatusChange:P,className:b,style:B,children:S,...k},I){const L=n(),F=j??"circle",M=y??"ghost",R=N??L.size??"md",Z=w??L.color??"primary",_=z??0,O=v?function initialsOf(e){const t=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===t.length?"":((Array.from(t[0])[0]??"")+(t.length>1?Array.from(t[t.length-1])[0]??"":"")).toLocaleUpperCase()}(v):"",U=g??v,$=o(S)?S:(x??O)||e(PersonIcon,{}),q=o(S)||Boolean(x??O),D=[p,s[R],l[R],h[R],"circle"===F?"rounded-full":d[R],c[M],b??""].filter(Boolean).join(" ");return t(a.Root,{ref:I,className:D,style:{...i(Z,_,M),...B},...k,children:[r?e(a.Image,{src:r,srcSet:u,alt:U??"",className:"size-full object-cover",onLoadingStatusChange:P,...C}):null,t(a.Fallback,{delay:r?A:void 0,className:"flex size-full items-center justify-center",children:[U&&q?e("span",{className:f,children:U}):null,e("span",{"aria-hidden":!(!U||!q)||void 0,className:`contents ${m}`,children:$})]})]})});

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}from"../../internal/defaults.js";import{useLabels as p}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:b,series:g,categories:y,yAxis:z,format:k,locale:M,size:j,density:L,...C}){const B=x(),P=j??B.size??"md",S=L??B.density??"default",A=M??B.locale,N="horizontal"===a,W="full"===l,w=p(),F=b??w.chartOther,I=t.useMemo(()=>h(g,y,{sort:d,max:m,other:F}),[g,y,d,m,F]),O=t.useMemo(()=>W?f(I.series,e=>v(e,k,A)):I.series,[I.series,W,k,A]);return e(r,{...C,series:O,categories:I.categories,format:k,locale:M,size:P,density:S,horizontal:N,stacked:!1!==l,yAxis:W?{min:0,max:100,tickFormat:e=>`${e}%`,...z}:z,includeZero:!0,bandRatio:o[S],headroom:"none"===c?0:12,children:a=>e(Bars,{context:a,stacked:!1!==l,rounded:i,barSize:n??s[P],valueLabels:c,valueLabelColor:u,size:P})})}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.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 t,jsxs as a}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 c,iconSizeClasses as d,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:t="glass",size:a,color:o,density:c,elevation:d=0,value:m,defaultValue:g=null,onValueChange:z,position:w="fixed",labels:j="all",divider:k=!0,safeArea:C=!0,disabled:P=!1,label:B,render:R,className:I,style:V,children:A,...D},F){const M=s(),S=a??M.size??"md",q=o??M.color??"primary",E=c??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:j,disabled:P}),[K,L,S,E,j,P]),Q=l.useRef(null);r(Q,"fixed"===w);const T=n("w-full min-w-0","static"===w?u[S]:"",f[t],"glass"===t&&"static"!==w?"border-0":"",k?p:"",v[w],C?"pb-[env(safe-area-inset-bottom)]":"",x,I);return i({render:R??e("nav",{}),ref:[F,Q],props:{"aria-label":B,className:T,style:{...h(q,d),...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:i,href:r,disabled:p=!1,className:f,children:h,onClick:v,...y},N){const w=l.useContext(b),j=p||w.disabled,k=null!==w.value&&w.value===s,C="all"===w.labels||"selected"===w.labels&&k,P=n("flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5",z[w.size],u[w.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",x,o,j?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":k?"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)",f),B=a(t,{children:[c(i)?e("span",{className:n("flex shrink-0 items-center justify-center",d[w.size]),children:i}):null,c(h)?e("span",{className:C?n("max-w-full truncate leading-tight",m[w.size]):g,children:h}):null]}),press=e=>{j?e.preventDefault():(w.change(s),v?.(e))};return r?e("a",{ref:N,href:j?void 0:r,"aria-current":k?"page":void 0,"aria-disabled":j||void 0,className:P,onClick:press,...y,children:B}):e("button",{ref:N,type:"button",disabled:j,"aria-current":k?"page":void 0,className:P,onClick:press,...y,children:B})});

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","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}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-0",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