plass-ui 1.3.0 → 1.5.0

package/dist/components/rating/PlRating.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{StarIcon as r,StarOutlineIcon as l}from"../../internal/icons.js";import{controlSlots as i,cx as s,focusWithinRingClasses as o,gapClasses as c,iconSizeClasses as d,radiusClasses as u,srOnlyClasses as m,transitionClasses as h}from"../../internal/styles.js";const f="flex items-center justify-center";function defaultValueLabel(e,a){return e<=0?"No rating":`${e} out of ${a}`}export const PlRating=/* @__PURE__ */t.forwardRef(function PlRating({value:p,defaultValue:y=0,onValueChange:b,count:x=5,precision:v=1,icon:g,emptyIcon:N,clearable:M=!0,readOnly:j=!1,disabled:w=!1,name:L,required:P=!1,size:k,color:R,label:V="Rating",valueLabel:q=defaultValueLabel,className:C,style:I,onPointerLeave:S,...z},A){const $=n(),E=k??$.size??"md",F=R??$.color??"warning",O=t.useId(),B=L??O,[D,G]=t.useState(y),H=void 0!==p,J=H?p:D,[K,Q]=t.useState(null),T=Math.max(1,Math.floor(x)),U=v>0&&v<=1?v:1,W=Math.round(1/U),X=Math.max(0,Math.min(T,K??J)),change=e=>{H||G(e),b?.(e)},Y=Array.from({length:T},(t,n)=>{const i=Math.max(0,Math.min(1,X-n));return a("span",{className:s("relative inline-flex shrink-0",d[E],u.xs,j||w?"":o),children:[e("span",{className:s(f,d[E],"text-(--p-empty)"),children:N??e(l,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*i+"%"},children:e("span",{className:s(f,d[E],"text-(--p-accent)",h),children:g??e(r,{})})}),j?null:Array.from({length:W},(a,t)=>{const r=Number((n+(t+1)*U).toFixed(4));return e("label",{className:s("absolute inset-y-0",w?"cursor-not-allowed":"cursor-pointer"),style:{insetInlineStart:100*t/W+"%",width:100/W+"%"},onPointerEnter:()=>{w||Q(r)},children:e("input",{type:"radio",className:m,name:B,value:r,checked:J===r,disabled:w,required:P,"aria-label":q(r,T),onChange:()=>change(r),onClick:()=>{M&&J===r&&change(0)}})},r)})]},n)}),Z=s("inline-flex items-center align-middle",c[E],w?"cursor-not-allowed opacity-50 saturate-[0.35]":"",C),_={...i(F,0,"solid"),"--p-empty":"color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)",...I};return e("div",j?{ref:A,role:"img","aria-label":q(Math.max(0,Math.min(T,J)),T),className:Z,style:_,onPointerLeave:S,...z,children:Y}:{ref:A,role:"radiogroup","aria-label":V,"aria-disabled":w||void 0,"aria-required":P||void 0,className:Z,style:_,onPointerLeave:e=>{Q(null),S?.(e)},...z,children:Y})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{StarIcon as l,StarOutlineIcon as i}from"../../internal/icons.js";import{controlSlots as s,cx as o,focusWithinRingClasses as c,gapClasses as m,iconSizeClasses as d,radiusClasses as u,srOnlyClasses as h,transitionClasses as p}from"../../internal/styles.js";const f="flex items-center justify-center";export const PlRating=/* @__PURE__ */r.forwardRef(function PlRating({value:y,defaultValue:x=0,onValueChange:b,count:g=5,precision:v=1,icon:N,emptyIcon:M,clearable:j=!0,readOnly:w=!1,disabled:P=!1,name:k,required:L=!1,size:q,color:C,label:I,valueLabel:R,className:S,style:V,onPointerLeave:z,...A},E){const F=t(),O=n(),B=I??O.rating,D=R??((e,a)=>e<=0?O.ratingNone:O.ratingValue(e,a)),G=q??F.size??"md",H=C??F.color??"warning",J=r.useId(),K=k??J,[Q,T]=r.useState(x),U=void 0!==y,W=U?y:Q,[X,Y]=r.useState(null),Z=Math.max(1,Math.floor(g)),$=v>0&&v<=1?v:1,_=Math.round(1/$),ee=Math.max(0,Math.min(Z,X??W)),change=e=>{U||T(e),b?.(e)},ae=Array.from({length:Z},(r,t)=>{const n=Math.max(0,Math.min(1,ee-t));return a("span",{className:o("relative inline-flex shrink-0",d[G],u.xs,w||P?"":c),children:[e("span",{className:o(f,d[G],"text-(--p-empty)"),children:M??e(i,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*n+"%"},children:e("span",{className:o(f,d[G],"text-(--p-accent)",p),children:N??e(l,{})})}),w?null:Array.from({length:_},(a,r)=>{const n=Number((t+(r+1)*$).toFixed(4));return e("label",{className:o("absolute inset-y-0",P?"cursor-not-allowed":"cursor-pointer"),style:{insetInlineStart:100*r/_+"%",width:100/_+"%"},onPointerEnter:()=>{P||Y(n)},children:e("input",{type:"radio",className:h,name:K,value:n,checked:W===n,disabled:P,required:L,"aria-label":D(n,Z),onChange:()=>change(n),onClick:()=>{j&&W===n&&change(0)}})},n)})]},t)}),re=o("inline-flex items-center align-middle",m[G],P?"cursor-not-allowed opacity-50 saturate-[0.35]":"",S),te={...s(H,0,"solid"),"--p-empty":"color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)",...V};return e("div",w?{ref:E,role:"img","aria-label":D(Math.max(0,Math.min(Z,W)),Z),className:re,style:te,onPointerLeave:z,...A,children:ae}:{ref:E,role:"radiogroup","aria-label":B,"aria-disabled":P||void 0,"aria-required":L||void 0,className:re,style:te,onPointerLeave:e=>{Y(null),z?.(e)},...A,children:ae})});

package/dist/components/scatter-chart/PlScatterChart.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import { type MarkShape } from '../../internal/chart.js';
+export interface PlScatterChartProps extends CartesianChartProps {
+    /**
+     * What each mark is drawn as.
+     *
+     * - `auto` — the default. A circle while colour alone can carry identity, and
+     *   a shape per series from the fourth on, because past three it cannot: two
+     *   of the palette's hues are indistinguishable under deuteranopia, and a
+     *   shape is the one channel a dot has going spare.
+     * - `varied` — a shape per series always, in the fixed order circle, square,
+     *   triangle, diamond, cross. Reach for it when the chart will be printed or
+     *   read in greyscale.
+     * - one of the five names — every mark the same shape. On four or more series
+     *   this is opting out of the second channel; do it only when each series
+     *   carries a `color` of its own.
+     * @default 'auto'
+     */
+    shape?: MarkShape | 'varied' | 'auto';
+    /**
+     * The radius of a mark with no `z`, in pixels.
+     * @default the `size` ladder — 4 at `md`
+     */
+    pointRadius?: number;
+    /**
+     * The radius of the largest bubble, in pixels. Everything else is scaled
+     * under it by area.
+     * @default a twelfth of the chart's height
+     */
+    maxRadius?: number;
+}
+/**
+ * Two numbers per point, and whether they move together.
+ *
+ * Both axes measure, which is what makes this the only chart in the library
+ * with no categories: there is no column a mark belongs to and no order the
+ * points could be shuffled out of. A point with a `z` is drawn as a bubble and
+ * one without it as a dot, so a scatter and a bubble chart are the same
+ * component reading the same data — the third number is simply present or not.
+ *
+ * `x` must be a number or a `Date`. A string has no place on a number line, and
+ * a chart of named things against one measure is a
+ * [`PlBarChart`](./bar-chart).
+ */
+export declare function PlScatterChart({ shape, pointRadius, maxRadius, series, categories, size: sizeProp, xAxis, ...props }: PlScatterChartProps): React.JSX.Element;

package/dist/components/scatter-chart/PlScatterChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{CartesianChart as t,markTransitionClasses as l}from"../../internal/chart-frame.js";import{bubbleRadius as s,dimmedByHover as i,formatCategory as o,markerRadii as c,markGap as n,markPath as u,markShapes as d,plotHeights as h,pointX as m}from"../../internal/chart.js";import{useDefaults as x}from"../../internal/defaults.js";import{cx as f,srOnlyClasses as p}from"../../internal/styles.js";export function PlScatterChart({shape:r="auto",pointRadius:l,maxRadius:i,series:o,categories:n,size:f,xAxis:p,...b}){const v=x(),y=f??v.size??"md",g=l??c[y],z=i??Math.max(g+2,("number"==typeof b.height?b.height:h[y])/12),k=o.reduce((e,r)=>r.color?e:e+1,0),j="auto"===r||"varied"===r?"circle":r,M="varied"===r||"auto"===r&&k>3,w=a.useCallback(e=>M?d[e%d.length]:j,[M,j]),N=a.useCallback(e=>{const r=[];let a=0;return e.values.forEach(e=>{e.forEach(e=>{null!==e.value&&void 0!==e.z&&Number.isFinite(e.z)&&(a=Math.max(a,e.z))})}),e.values.forEach((t,l)=>{e.visible[l]&&t.forEach((t,i)=>{if(null===t.value)return;const o=m(t,i,n);null!==o&&r.push({series:l,index:i,x:e.categoryValuePx(o),y:e.valuePx(t.value),r:void 0===t.z?g:s(t.z,a,z,2)})})}),r},[n,g,z]);return e(t,{...b,series:o,categories:n,size:y,xScale:"value",xAxis:p,marks:N,markInset:z,includeZero:!1,swatch:(r,a)=>e("svg",{viewBox:"0 0 10 10",className:"size-2.5 overflow-visible","aria-hidden":"true",children:e("path",{d:u(w(r),5,5,4),fill:a})}),table:r=>e(ScatterTable,{id:r,series:o,categories:n,label:b.label,xLabel:p?.label,yLabel:b.yAxis?.label,locale:b.locale??v.locale,format:b.format}),children:r=>e(ScatterMarks,{context:r,shapeOf:w})})}function ScatterMarks({context:r,shapeOf:t}){const{marks:s,values:o,colors:c,visible:d,hovered:h,activeMark:m}=r,x=a.useMemo(()=>[...s].sort((e,r)=>r.r-e.r),[s]);return e("g",{children:x.map(r=>{const a=o[r.series]?.[r.index],s=i(h,r.series,d),x=m?.series===r.series&&m?.index===r.index;return e("path",{d:u(t(r.series),r.x,r.y,r.r),fill:a?.color??c[r.series],stroke:"var(--plass-chart-gap)",strokeWidth:n,opacity:s?.28:1,className:l,style:{transformBox:"view-box",transformOrigin:`${r.x}px ${r.y}px`,scale:x&&r.r>0?(r.r+1)/r.r:1}},`${r.series}-${r.index}`)})})}function ScatterTable({id:t,series:l,categories:s,label:i,xLabel:c,yLabel:n,locale:u,format:d}){const h=a.useMemo(()=>new Intl.NumberFormat(u,d??{maximumFractionDigits:2}),[u,d]),m=l.some(e=>e.data.some(e=>"object"==typeof e&&null!==e&&void 0!==e.z));return r("table",{id:t,className:f(p),children:[i?e("caption",{children:i}):null,e("thead",{children:r("tr",{children:[e("th",{scope:"col"}),e("th",{scope:"col",children:c??"x"}),e("th",{scope:"col",children:n??"y"}),m?e("th",{scope:"col",children:"z"}):null]})}),e("tbody",{children:l.flatMap((a,t)=>a.data.map((l,i)=>{const c="object"==typeof l&&null!==l?l:null,n=c?c.y:"number"==typeof l?l:null,d=c?.x??s?.[i]??i;return r("tr",{children:[e("th",{scope:"row",children:a.name??t+1}),e("td",{children:o(d,u)}),e("td",{children:null!==n&&Number.isFinite(n)?h.format(n):""}),m?e("td",{children:void 0===c?.z?"":h.format(c.z)}):null]},`${t}-${i}`)}))})]})}

package/dist/components/scatter-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { PlScatterChart } from './PlScatterChart.js';
+export type { PlScatterChartProps } from './PlScatterChart.js';

package/dist/components/scatter-chart/index.js

@@ -0,0 +1 @@
+export{PlScatterChart}from"./PlScatterChart.js";

package/dist/components/scroll-area/PlScrollArea.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import type { PlassOrientation, PlassSize } from '../../types.js';
+/**
+ * Which axes may scroll.
+ *
+ * `PlassOrientation` plus a third value rather than the shared type widened,
+ * because "both" is meaningless everywhere else it is used — a `PlDivider`, a
+ * `PlButtonGroup` and a `PlSlider` each run one way — and widening it there to
+ * say it here would be a fourth value nobody can answer.
+ */
+export type PlScrollAreaAxis = PlassOrientation | 'both';
+/** Classes for the parts a `className` does not reach. */
+export interface PlScrollAreaClassNames {
+    /** The scrolling element itself — the one that takes the focus and the keys. */
+    viewport?: string;
+    /** The lane a scrollbar runs in. */
+    scrollbar?: string;
+    /** The bar inside it. */
+    thumb?: string;
+}
+export interface PlScrollAreaProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which axes may scroll.
+     * @default 'vertical'
+     */
+    orientation?: PlScrollAreaAxis;
+    /**
+     * A fixed height. A number is pixels; a string is any CSS length.
+     *
+     * **A vertical scroll area has to be bounded by something**, or there is
+     * nothing for the content to overflow and the box simply grows. This is that
+     * something, and it is a prop rather than a `className` because it is the one
+     * measurement without which the component does nothing at all.
+     */
+    height?: number | string;
+    /** The height it stops growing at, for a box that should shrink to short content. */
+    maxHeight?: number | string;
+    /** The same two for a horizontal area. */
+    width?: number | string;
+    maxWidth?: number | string;
+    /**
+     * When the scrollbars are drawn.
+     *
+     * - `auto` — while the pointer is over the box or the content is moving, and
+     *   never otherwise. The default, and what a reader is used to on a Mac.
+     * - `always` — kept at full strength. For a panel whose whole point is that
+     *   there is more below, where a bar that appears on hover is a signal
+     *   nobody standing back from the screen ever sees.
+     *
+     * Either way the lane is **overlaid**, so turning it on does not reflow the
+     * content underneath.
+     * @default 'auto'
+     */
+    scrollbars?: 'auto' | 'always';
+    /**
+     * A name for the region.
+     *
+     * Worth giving, and the reason is not obvious: a scrollable box **is a tab
+     * stop** when there is nothing focusable inside it, because a keyboard reader
+     * has to be able to scroll it. A tab stop with no name is announced as
+     * nothing at all, so a name is what turns it from a mystery landing point
+     * into "Release notes, region".
+     */
+    label?: string;
+    /** Thickness of the scrollbars and the corner the box is cut to. @default 'md' */
+    size?: PlassSize;
+    /** Classes on the parts a `className` does not reach. */
+    classNames?: PlScrollAreaClassNames;
+    /** What scrolls. */
+    children?: React.ReactNode;
+}
+/**
+ * A bounded box that scrolls, with the library's own scrollbar in it.
+ *
+ * The reason to reach for it over `overflow: auto` is the **bar**. A platform
+ * scrollbar is either an overlay that vanishes the moment the content stops
+ * moving, or fifteen pixels of permanent grey furniture, and neither of them
+ * belongs beside a translucent sheet. This one is the library's own material:
+ * the thumb is `--plass-track`, the same neutral ink a slider's rail and a
+ * progress groove are cut in, and the lane is overlaid so drawing it costs the
+ * content no width.
+ *
+ * It is **not** a [PlScrollZone](./scroll-zone), which is the other answer to
+ * the same fact. A scroll zone is a strip that runs off the end of its box: it
+ * takes the scrollbar away entirely, fades the end that still has something
+ * behind it and adds a pair of buttons. That is right for a row of tabs or
+ * chips, where a bar under one line of labels is heavier than the labels. This
+ * is right for a panel of content, where the bar is the honest signal and where
+ * a reader wants to know **how far through** they are, which a fade cannot say.
+ *
+ * There is no fade here for that reason: two signals for one fact, one of which
+ * is measured and one of which is not, is one more than the box needs.
+ *
+ * Base UI owns the behaviour — the overlay measurement, the thumb's size and
+ * position, the drag, and making the viewport a tab stop exactly while there is
+ * something to scroll.
+ */
+export declare const PlScrollArea: React.ForwardRefExoticComponent<PlScrollAreaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-area/PlScrollArea.js

@@ -0,0 +1 @@
+"use client";import{jsx as a,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{ScrollArea as r}from"@base-ui/react/scroll-area";import{useDefaults as l}from"../../internal/defaults.js";import{cx as e,focusRingInsetClasses as i,radiusClasses as n,toLength as s}from"../../internal/styles.js";const c={xs:"w-2 data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-auto",sm:"w-2.5 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:w-auto",md:"w-3 data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:w-auto",lg:"w-3.5 data-[orientation=horizontal]:h-3.5 data-[orientation=horizontal]:w-auto",xl:"w-4 data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-auto"},h="flex-1 rounded-full bg-(--plass-track) forced-colors:[background-color:CanvasText]";export const PlScrollArea=/* @__PURE__ */t.forwardRef(function PlScrollArea({orientation:t="vertical",height:d,maxHeight:m,width:u,maxWidth:w,scrollbars:f="auto",label:p,size:z,classNames:v,className:b,style:x,children:g,...y},N){const j=l(),S=z??j.size??"md",C="horizontal"!==t,T="vertical"!==t,k=e("flex touch-none select-none","p-[0.125rem]",c[S],"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","always"===f?"opacity-100":"opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100",v?.scrollbar);return o(r.Root,{ref:N,className:e("plass-scroll-area relative overflow-hidden",n[S],b),style:{height:s(d),maxHeight:s(m),width:s(u),maxWidth:s(w),...x},...y,children:[a(r.Viewport,{role:p?"region":void 0,"aria-label":p,className:e("size-full overscroll-contain",n[S],i,v?.viewport),style:{overflowX:T?"scroll":"hidden",overflowY:C?"scroll":"hidden"},children:a(r.Content,{children:g})}),C?a(r.Scrollbar,{orientation:"vertical",className:k,children:a(r.Thumb,{className:e(h,v?.thumb)})}):null,T?a(r.Scrollbar,{orientation:"horizontal",className:k,children:a(r.Thumb,{className:e(h,v?.thumb)})}):null,C&&T?a(r.Corner,{}):null]})});

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export { PlScrollArea } from './PlScrollArea.js';
+export type { PlScrollAreaAxis, PlScrollAreaClassNames, PlScrollAreaProps } from './PlScrollArea.js';

package/dist/components/scroll-area/index.js

@@ -0,0 +1 @@
+export{PlScrollArea}from"./PlScrollArea.js";

package/dist/components/scroll-zone/PlScrollZone.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
-import type { PlassOrientation, PlassStyleProps } from '../../types.js';
+import type { PlassOrientation, PlassOverscroll, PlassResponsive, PlassStyleProps } from '../../types.js';
 /**
  * When the scroll buttons are drawn.
  *
- * - `auto` — only the one that has somewhere to go, and neither of them while
- *   everything fits. The default: a control that cannot do anything is worse
- *   than no control, and a row that does not overflow is not a scroller.
+ * - `auto` — neither of them while everything fits, which is the whole of what
+ *   it decides: a row that does not overflow is not a scroller. Once it is one,
+ *   both lanes are drawn and the one with nowhere to go is `disabled`, exactly
+ *   as `always` draws it. What `auto` removes is a **pair of controls on a
+ *   strip that has nothing to scroll**, not one control on a strip that does.
+ *   `overlay` still drops the spare button outright, because there its lane
+ *   costs nothing to give up.
  * - `always` — both, from the first paint, with the one that has nowhere to go
  *   `disabled` rather than gone. What a row whose content arrives later wants,
  *   since the buttons do not appear under the pointer half a second in.
@@ -48,7 +52,7 @@ export interface PlScrollZoneProps extends PlassStyleProps, Omit<React.Component
      * Which way the children run, and therefore which way the zone scrolls.
      * @default 'horizontal'
      */
-    orientation?: PlassOrientation;
+    orientation?: PlassResponsive<PlassOrientation>;
     /**
      * How many rows a horizontal zone lays its children out in before it starts a
      * new column — and how many columns a vertical one uses. `2` is the shelf
@@ -100,14 +104,27 @@ export interface PlScrollZoneProps extends PlassStyleProps, Omit<React.Component
      * reader happens to be in. The pointer being on the strip is them saying
      * which of the two things under it they meant to move.
      *
-     * Only the vertical half of a gesture, and only while the strip has somewhere
-     * to go. A trackpad's two fingers, a tilt wheel and Shift held down already
-     * scroll it sideways and are left alone; and the moment it reaches an end the
-     * wheel goes back to the page, so a reader on their way down a long page is
-     * held up by one shelf rather than caught in it.
+     * Only the vertical half of a gesture: a trackpad's two fingers, a tilt wheel
+     * and Shift held down already scroll the strip sideways and are left alone.
+     * What happens once the strip has nowhere left to go is `overscroll`.
      * @default true
      */
     wheel?: boolean;
+    /**
+     * What the strip does with a gesture it has run out of room for.
+     *
+     * `contain`, the default, keeps it: the pointer being on the shelf is the
+     * reader saying which of the two things under it they meant to move, and a
+     * page that starts moving the instant the last card arrives is that answer
+     * being overruled halfway through a flick. `auto` is the browser's own
+     * chaining, held only for as long as the gesture lasts.
+     *
+     * A strip everything fits in is never a scroller and holds nothing back
+     * either way, and only the axis the strip runs on is contained — a shelf that
+     * kept the other one would be a box a finger cannot scroll the page from.
+     * @default 'contain'
+     */
+    overscroll?: PlassOverscroll;
     /** Shows the native scrollbar. @default false */
     scrollbar?: boolean;
     /** What the scrollable region is called — "Categories", "Recent files". */

package/dist/components/scroll-zone/PlScrollZone.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{PlIconButton as o}from"../icon-button/PlIconButton.js";import{spacingValue as s}from"../../internal/grid.js";import{ChevronIcon as l}from"../../internal/icons.js";import{cx as i}from"../../internal/styles.js";const a={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},c={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const PlScrollZone=/* @__PURE__ */n.forwardRef(function PlScrollZone({orientation:u="horizontal",lines:d=1,spacing:f=2,buttons:p="auto",buttonPlacement:m="inline",mode:v="item",step:b=1,speed:w=900,snap:g=!1,drag:h=!0,wheel:y=!0,scrollbar:x=!1,variant:E="glass",size:L,color:k,density:M,label:C,previousLabel:P="Previous",nextLabel:D="Next",className:R,style:j,children:A,...B},N){const T=r(),z=L??T.size??"md",S=k??T.color??"primary",W=M??T.density??"default",Y="horizontal"===u,_=Math.max(1,Math.round(d)),H=Math.max(1,Math.round(b)),F=n.useRef(null),I=n.useRef(null),[O,X]=n.useState({back:!1,forward:!1}),$=n.useCallback(()=>{const e=F.current;if(!e)return;const t=Y?e.clientWidth:e.clientHeight,n=Y?e.scrollWidth:e.scrollHeight,r=Math.abs(Y?e.scrollLeft:e.scrollTop);X(e=>{const o=r>1,s=n-t-r>1;return e.back===o&&e.forward===s?e:{back:o,forward:s}})},[Y]);n.useEffect(()=>{const e=F.current,t=I.current;if(!e)return;if($(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver($);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[$]);const q=n.useCallback(()=>{const e=F.current;return e&&Y&&"rtl"===getComputedStyle(e).direction?-1:1},[Y]),Z=n.useCallback((e,t)=>{const n=F.current;if(!n)return;const r=t?function scrollBehavior(){return"undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}():"auto";n.scrollBy(Y?{left:e,behavior:r}:{top:e,behavior:r})},[Y]);n.useEffect(()=>{const e=F.current;if(!e||!y||!Y)return;const onWheel=t=>{if(Math.abs(t.deltaY)<=Math.abs(t.deltaX))return;const n=t.deltaMode===t.DOM_DELTA_LINE?16*t.deltaY:t.deltaMode===t.DOM_DELTA_PAGE?t.deltaY*e.clientWidth:t.deltaY,r=Math.abs(e.scrollLeft);(n>0?e.scrollWidth-e.clientWidth-r>1:r>1)&&(t.preventDefault(),Z(n*q(),!1))};return e.addEventListener("wheel",onWheel,{passive:!1}),()=>e.removeEventListener("wheel",onWheel)},[q,Y,Z,y]);const G=n.useCallback(()=>{const e=F.current,t=I.current;if(!e||!t)return[];const n=Y&&"rtl"===getComputedStyle(e).direction,r=Y?n?"right":"left":"top",o=n?-1:1,s=e.getBoundingClientRect()[r],l=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-s)*o);l.includes(t)||l.push(t)}return l.sort((e,t)=>e-t)},[Y]),K=n.useCallback((e,t=v)=>{const n=F.current;if(!n)return;const r=q(),o=Y?n.clientWidth:n.clientHeight;if("page"===t)return void Z(o*(e?1:-1)*r,!0);const s=G(),l=s.filter(e=>e>1),i=s.filter(e=>e<-1),a=e?l[H-1]:i[i.length-H];Z(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[q,Y,G,H,v,Z]),V=n.useRef(null);n.useEffect(()=>()=>V.current?.(),[]);const J=n.useCallback((e,t)=>{if(V.current)return;const n=q(),r=performance.now();let o=r,s=0;const tick=t=>{const r=t-o;o=t,Z(w*r/1e3*(e?1:-1)*n,!1),s=requestAnimationFrame(tick)};s=requestAnimationFrame(tick);const release=()=>{cancelAnimationFrame(s),V.current=null,window.removeEventListener(t,release),window.removeEventListener("pointercancel",release),window.removeEventListener("blur",release),performance.now()-r<140&&K(e,"item")};V.current=release,window.addEventListener(t,release),window.addEventListener("pointercancel",release),window.addEventListener("blur",release)},[K,q,Z,w]),Q=n.useRef(null);function pressHandlers(e){return"hold"!==v?{onClick:()=>K(e)}:{onPointerDown:t=>{0===t.button&&J(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),J(e,"keyup"))}}}n.useEffect(()=>()=>Q.current?.(),[]);const U="none"!==p&&("always"===p||O.back||O.forward),ee="inline"===m;function scrollButton(t){const n=t?O.forward:O.back;if("auto"===p&&!n&&!ee)return e("span",{});const r="auto"===p&&!n,s=e(o,{variant:E,size:z,color:S,density:W,elevation:1,label:t?D:P,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:i("flex items-center",Y?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180"),children:e(l,{})}),...pressHandlers(t)});return ee?e("span",{className:i("flex shrink-0 items-center justify-center",r?"invisible":""),inert:r,children:s}):s}return t("div",{ref:N,className:i("relative flex min-w-0",ee&&Y?"flex-row items-stretch":"flex-col",ee?c[z]:"",R),style:{"--p-ring":`var(--plass-${S}-ring)`,...j},...B,children:[U&&ee?scrollButton(!1):null,e("div",{ref:F,tabIndex:0,role:C?"group":void 0,"aria-label":C,className:i("min-h-0 min-w-0 grow",Y?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",g?Y?"snap-x snap-mandatory":"snap-y snap-mandatory":"",x?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",h&&(O.back||O.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:$,onPointerDown:function beginDrag(e){if(!h||"touch"===e.pointerType||0!==e.button)return;Q.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,s=t.scrollTop;let l=!1;const i=document.body.style.getPropertyValue("-webkit-user-select"),move=e=>{const i=e.clientX-n,a=e.clientY-r;if(!l){if(Math.abs(Y?i:a)<4)return;l=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}Y?t.scrollLeft=o-i:t.scrollTop=s-a},release=()=>{Q.current=null,t.removeEventListener("pointermove",move),t.removeEventListener("pointerup",end),t.removeEventListener("pointercancel",release),delete t.dataset.dragging,i?document.body.style.setProperty("-webkit-user-select",i):document.body.style.removeProperty("-webkit-user-select")},end=()=>{const e=l;if(release(),!e)return;const swallow=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",swallow,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",swallow,!0),0)};Q.current=release,t.addEventListener("pointermove",move),t.addEventListener("pointerup",end),t.addEventListener("pointercancel",release)},children:e("div",{ref:I,className:i(g?"[&>*]:snap-start":""),style:{display:"grid",gap:s(f),gridAutoFlow:Y?"column":"row",...Y?{width:"max-content",gridTemplateRows:`repeat(${_}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${_}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:A})}),U&&ee?scrollButton(!0):null,U&&!ee?t("div",{className:i("pointer-events-none absolute inset-0 flex justify-between",Y?"items-center":"flex-col items-center",a[z]),children:[scrollButton(!1),scrollButton(!0)]}):null]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{takeSelection as i}from"../../internal/drag.js";import{PlIconButton as s}from"../icon-button/PlIconButton.js";import{spacingValue as l}from"../../internal/grid.js";import{ChevronIcon as a}from"../../internal/icons.js";import{cx as c}from"../../internal/styles.js";import{useResponsiveValue as u}from"../../internal/responsive.js";import{overscrollClasses as d,useWheelScroll as f}from"../../internal/wheel.js";const p={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},m={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const PlScrollZone=/* @__PURE__ */n.forwardRef(function PlScrollZone({orientation:v,lines:g=1,spacing:w=2,buttons:b="auto",buttonPlacement:h="inline",mode:x="item",step:y=1,speed:k=900,snap:L=!1,drag:E=!0,wheel:j=!0,overscroll:C="contain",scrollbar:R=!1,variant:B="glass",size:M,color:N,density:P,label:T,previousLabel:z,nextLabel:A,className:D,style:S,children:H,...F},I){const W=u(v,"horizontal"),$=r(),q=o(),O=z??q.previous,X=A??q.next,Y=M??$.size??"md",Z=N??$.color??"primary",_=P??$.density??"default",K="horizontal"===W,G=Math.max(1,Math.round(g)),J=Math.max(1,Math.round(y)),Q=n.useRef(null),U=n.useRef(null),[V,ee]=n.useState({back:!1,forward:!1}),te=n.useCallback(()=>{const e=Q.current;if(!e)return;const t=K?e.clientWidth:e.clientHeight,n=K?e.scrollWidth:e.scrollHeight,r=Math.abs(K?e.scrollLeft:e.scrollTop);ee(e=>{const o=r>1,i=n-t-r>1;return e.back===o&&e.forward===i?e:{back:o,forward:i}})},[K]);n.useEffect(()=>{const e=Q.current,t=U.current;if(!e)return;if(te(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(te);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[te]);const ne=n.useCallback(()=>{const e=Q.current;return e&&K&&"rtl"===getComputedStyle(e).direction?-1:1},[K]),re=n.useCallback((e,t)=>{const n=Q.current;if(!n)return;const r=t?function scrollBehavior(){return"undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches?"instant":"smooth"}():"instant";n.scrollBy(K?{left:e,behavior:r}:{top:e,behavior:r})},[K]);f(Q,{enabled:j&&K,overscroll:C});const oe=n.useCallback(()=>{const e=Q.current,t=U.current;if(!e||!t)return[];const n=K&&"rtl"===getComputedStyle(e).direction,r=K?n?"right":"left":"top",o=n?-1:1,i=e.getBoundingClientRect()[r],s=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-i)*o);s.includes(t)||s.push(t)}return s.sort((e,t)=>e-t)},[K]),ie=n.useCallback((e,t=x)=>{const n=Q.current;if(!n)return;const r=ne(),o=K?n.clientWidth:n.clientHeight;if("page"===t)return void re(o*(e?1:-1)*r,!0);const i=oe(),s=i.filter(e=>e>1),l=i.filter(e=>e<-1),a=e?s[J-1]:l[l.length-J];re(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[ne,K,oe,J,x,re]),se=n.useRef(null);n.useEffect(()=>()=>se.current?.(),[]);const le=n.useCallback((e,t)=>{if(se.current)return;const n=ne(),r=performance.now();let o=r,i=0;const tick=t=>{const r=t-o;o=t,re(k*r/1e3*(e?1:-1)*n,!1),i=requestAnimationFrame(tick)};i=requestAnimationFrame(tick);const release=()=>{cancelAnimationFrame(i),se.current=null,window.removeEventListener(t,release),window.removeEventListener("pointercancel",release),window.removeEventListener("blur",release),performance.now()-r<140&&ie(e,"item")};se.current=release,window.addEventListener(t,release),window.addEventListener("pointercancel",release),window.addEventListener("blur",release)},[ie,ne,re,k]),ae=n.useRef(null);function pressHandlers(e){return"hold"!==x?{onClick:()=>ie(e)}:{onPointerDown:t=>{0===t.button&&le(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),le(e,"keyup"))}}}n.useEffect(()=>()=>ae.current?.(),[]);const ce="none"!==b&&("always"===b||V.back||V.forward),ue="inline"===h;function scrollButton(t){const n=t?V.forward:V.back;if("auto"===b&&!n&&!ue)return e("span",{});const r=e(s,{variant:B,size:Y,color:Z,density:_,elevation:1,label:t?X:O,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:c("flex items-center",K?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180"),children:e(a,{})}),...pressHandlers(t)});return ue?e("span",{className:"flex shrink-0 items-center justify-center",children:r}):r}return t("div",{ref:I,className:c("relative flex min-w-0",ue&&K?"flex-row items-stretch":"flex-col",ue?m[Y]:"",D),style:{"--p-ring":`var(--plass-${Z}-ring)`,...S},...F,children:[ce&&ue?scrollButton(!1):null,e("div",{ref:Q,tabIndex:V.back||V.forward?0:void 0,role:T?"group":void 0,"aria-label":T,className:c("min-h-0 min-w-0 grow",K?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",d(C,K),L?K?"snap-x snap-mandatory":"snap-y snap-mandatory":"",R?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",E&&(V.back||V.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:te,onPointerDown:function beginDrag(e){if(!E||"touch"===e.pointerType||0!==e.button)return;ae.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,s=t.scrollTop;let l=!1,a=null;const move=e=>{if(0===e.buttons)return void end();const c=e.clientX-n,u=e.clientY-r;if(!l){if(Math.abs(K?c:u)<4)return;l=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",a=i()}K?t.scrollLeft=o-c:t.scrollTop=s-u},release=()=>{ae.current=null,t.removeEventListener("pointermove",move),t.removeEventListener("pointerup",end),t.removeEventListener("pointercancel",release),delete t.dataset.dragging,a?.(),a=null},end=()=>{const e=l;if(release(),!e)return;const swallow=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",swallow,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",swallow,!0),0)};ae.current=release,t.addEventListener("pointermove",move),t.addEventListener("pointerup",end),t.addEventListener("pointercancel",release)},children:e("div",{ref:U,className:c(L?"[&>*]:snap-start":""),style:{display:"grid",gap:l(w),gridAutoFlow:K?"column":"row",...K?{width:"max-content",gridTemplateRows:`repeat(${G}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${G}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:H})}),ce&&ue?scrollButton(!0):null,ce&&!ue?t("div",{className:c("pointer-events-none absolute inset-0 flex justify-between",K?"items-center":"flex-col items-center",p[Y]),children:[scrollButton(!1),scrollButton(!0)]}):null]})});

package/dist/components/segmented-button/PlSegmentedButton.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as t from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Radio as r}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{controlHeightClasses as n,controlSlots as o,controlTextClasses as i,focusRingInsetClasses as d,gapClasses as u,glassClasses as c,hasContent as p,iconClasses as f,paddingXClasses as h,transitionClasses as g}from"../../internal/styles.js";const m=/* @__PURE__ */t.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1}),v={solid:`${c} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)]`,glass:`${c} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},y={solid:"[background-image:var(--p-fill)] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${c} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${c} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`},b={solid:"data-[checked]:text-(--p-on-solid)",glass:"data-[checked]:text-(--p-accent)",ghost:"data-[checked]:text-(--p-accent)"};export const PlSegment=/* @__PURE__ */t.forwardRef(function PlSegment({value:a,startIcon:l,endIcon:o,disabled:c=!1,className:v,children:y,...x},w){const{variant:k,size:j,density:P,fullWidth:R}=t.useContext(m);return s(r.Root,{ref:w,value:a,disabled:c,"data-segment":"",className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",n[j],i[j],u[j],h[P][j],"rounded-full",g,f,"text-(--plass-muted-fg) hover:text-(--plass-fg)",b[k],d,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[readonly]:cursor-default",R?"flex-1":"",v??""].filter(Boolean).join(" "),...x,children:[p(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,y,p(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]})});export const PlSegmentedButton=/* @__PURE__ */t.forwardRef(function PlSegmentedButton({variant:r="glass",size:n,color:i,density:d,elevation:u=0,value:c,defaultValue:p=null,onValueChange:f,disabled:h=!1,readOnly:b=!1,name:x,fullWidth:w=!1,className:k,style:j,children:P,...R},$){const z=a(),N=n??z.size??"md",S=i??z.color??"primary",W=d??z.density??"default",[C,B]=t.useState(p),A=void 0!==c,O=A?c:C,V=t.useRef(null),E=t.useRef(null),I=t.useCallback(e=>{const s=V.current,t=E.current;if(!s||!t)return;const a=s.querySelector("[data-segment][data-checked]");if(!a)return;const r=!e||!t.hasAttribute("data-ready");r&&t.removeAttribute("data-ready"),t.style.setProperty("--p-seg-x",`${a.offsetLeft}px`),t.style.setProperty("--p-seg-y",`${a.offsetTop}px`),t.style.setProperty("--p-seg-w",`${a.offsetWidth}px`),t.style.setProperty("--p-seg-h",`${a.offsetHeight}px`),r&&t.offsetWidth,t.setAttribute("data-ready","")},[]);t.useLayoutEffect(()=>{I(!0)},[I,O,r,N,W,w,P]),t.useEffect(()=>{const e=V.current;if(!e)return;const s=new ResizeObserver(()=>I(!1));return s.observe(e),()=>s.disconnect()},[I]);const L=t.useMemo(()=>({variant:r,size:N,density:W,fullWidth:w}),[r,N,W,w]);return e(m.Provider,{value:L,children:s(l,{ref:e=>{V.current=e,"function"==typeof $?$(e):$&&($.current=e)},value:O,onValueChange:e=>{const s=e??null;A||B(s),f?.(s)},disabled:h,readOnly:b,name:x,className:["relative inline-flex items-center rounded-full",v[r],g,b?"saturate-[0.55]":"",h?"opacity-50 saturate-[0.35]":"",w?"flex w-full":"",k??""].filter(Boolean).join(" "),style:{...o(S,u,r),...j},...R,children:[null!=O?e("span",{ref:E,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","top-(--p-seg-y) left-(--p-seg-x) h-(--p-seg-h) w-(--p-seg-w)",y[r],"[transition-property:left,top,width,height]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ")}):null,P]})})});
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as t from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Radio as r}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{controlHeightClasses as n,controlSlots as o,controlTextClasses as i,focusRingInsetClasses as d,forcedCheckedTextClasses as u,forcedFieldEdgeClasses as c,forcedFillClasses as p,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as m,paddingXClasses as v,transitionClasses as y}from"../../internal/styles.js";const b=/* @__PURE__ */t.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1}),x={solid:`${h} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)] ${c}`,glass:`${h} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},w={solid:"[background-image:var(--p-fill)] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${h} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${h} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`},k={solid:"data-[checked]:text-(--p-on-solid)",glass:"data-[checked]:text-(--p-accent)",ghost:"data-[checked]:text-(--p-accent)"};export const PlSegment=/* @__PURE__ */t.forwardRef(function PlSegment({value:a,startIcon:l,endIcon:o,disabled:c=!1,className:p,children:h,...x},w){const{variant:j,size:P,density:$,fullWidth:R}=t.useContext(b);return s(r.Root,{ref:w,value:a,disabled:c,"data-segment":"",className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",n[P],i[P],f[P],v[$][P],"rounded-full",y,m,"text-(--plass-muted-fg) hover:text-(--plass-fg)",k[j],u,d,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[readonly]:cursor-default",R?"flex-1":"",p??""].filter(Boolean).join(" "),...x,children:[g(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,h,g(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]})});export const PlSegmentedButton=/* @__PURE__ */t.forwardRef(function PlSegmentedButton({variant:r="glass",size:n,color:i,density:d,elevation:u=0,value:c,defaultValue:f=null,onValueChange:h,disabled:g=!1,readOnly:m=!1,name:v,fullWidth:k=!1,className:j,style:P,children:$,...R},z){const N=a(),S=n??N.size??"md",W=i??N.color??"primary",C=d??N.density??"default",[B,A]=t.useState(f),O=void 0!==c,V=O?c:B,E=t.useRef(null),I=t.useRef(null),L=t.useCallback(e=>{const s=E.current,t=I.current;if(!s||!t)return;const a=s.querySelector("[data-segment][data-checked]");if(!a)return;const r=!e||!t.hasAttribute("data-ready");r&&t.removeAttribute("data-ready"),t.style.setProperty("--p-seg-x",`${a.offsetLeft}px`),t.style.setProperty("--p-seg-y",`${a.offsetTop}px`),t.style.setProperty("--p-seg-w",`${a.offsetWidth}px`),t.style.setProperty("--p-seg-h",`${a.offsetHeight}px`),r&&t.offsetWidth,t.setAttribute("data-ready","")},[]);t.useLayoutEffect(()=>{L(!0)},[L,V,r,S,C,k,$]),t.useEffect(()=>{const e=E.current;if(!e)return;const s=new ResizeObserver(()=>L(!1));return s.observe(e),()=>s.disconnect()},[L]);const q=t.useMemo(()=>({variant:r,size:S,density:C,fullWidth:k}),[r,S,C,k]);return e(b.Provider,{value:q,children:s(l,{ref:e=>{E.current=e,"function"==typeof z?z(e):z&&(z.current=e)},value:V,onValueChange:e=>{const s=e??null;O||A(s),h?.(s)},disabled:g,readOnly:m,name:v,className:["relative inline-flex items-center rounded-full",x[r],y,m?"saturate-[0.55]":"",g?"opacity-50 saturate-[0.35]":"",k?"flex w-full":"",j??""].filter(Boolean).join(" "),style:{...o(W,u,r),...P},...R,children:[null!=V?e("span",{ref:I,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","top-(--p-seg-y) left-(--p-seg-x) h-(--p-seg-h) w-(--p-seg-w)",w[r],p,"[transition-property:left,top,width,height]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ")}):null,$]})})});

package/dist/components/select/PlSelect.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Select as s}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{CheckIcon as i,ChevronIcon as n}from"../../internal/icons.js";import{WidthSizer as o}from"../../internal/sizer.js";import{hotKeyHandler as c}from"../../internal/keys.js";import{controlHeightClasses as d,controlTextLeadingClasses as m,cx as p,disabledClasses as u,fieldReadOnlyClasses as f,fieldRestClasses as h,focusWithinRingClasses as g,gapClasses as x,glassClasses as v,hasContent as b,iconClasses as N,metaTextClasses as j,paddingXClasses as y,radiusClasses as w,stackGapClasses as I,surfaceSlots as S,transitionClasses as z}from"../../internal/styles.js";const P=/* @__PURE__ */["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",z,g,N].join(" "),V=/* @__PURE__ */[v,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]"].join(" "),k=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",z,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)","data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" ");export const PlSelect=/* @__PURE__ */l.forwardRef(function PlSelect({variant:g="glass",size:v,color:N,density:z,elevation:$=0,items:O,value:R,defaultValue:T,onValueChange:q,placeholder:B,label:C,description:D,error:K,invalid:M,startIcon:W,fullWidth:_=!1,disabled:E=!1,readOnly:L=!1,required:A=!1,name:F,id:G,className:H,hotKeys:J,classNames:Q,style:U,...X},Y){const Z=t(),ee=v??Z.size??"md",ae=N??Z.color??"primary",le=z??Z.density??"default",te=b(K),se=M??te,re=se?"danger":ae,ie=l.useMemo(()=>O.map(e=>({label:e.label??String(e.value),value:e.value})),[O]),ne=l.useMemo(()=>[...O.map(e=>e.label??String(e.value)),...b(B)?[B]:[]],[O,B]);return a(r.Root,{disabled:E,invalid:se,className:["flex-col align-top",I[ee],_?"flex w-full":"inline-flex",H??""].filter(Boolean).join(" "),style:{...S(re,$),...U},...X,children:[C?e(r.Label,{className:p(j[ee],"font-semibold",E?"text-(--plass-muted-fg)":"text-(--plass-fg)",Q?.label),children:C}):null,a(s.Root,{id:G,name:F,items:ie,value:R,defaultValue:T,onValueChange:e=>q?.(e),disabled:E,readOnly:L,required:A,children:[a(s.Trigger,{ref:Y,onKeyDown:c(J,void 0),className:[P,d[ee],m[ee],w[ee],x[ee],y[le][ee],E?u[g]:L?`${f[g]} cursor-default`:h[g],Q?.control].filter(Boolean).join(" "),children:[W?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:W}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(s.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--plass-muted-fg)"].join(" "),placeholder:B}),e(o,{samples:ne})]}),e(s.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(n,{})})]}),e(s.Portal,{children:e(s.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(s.Popup,{className:`${V} ${w[ee]} ${m[ee]}`,style:S(re,3),children:O.map(l=>a(s.Item,{value:l.value,disabled:l.disabled,className:k,children:[e(s.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(i,{})}),e(s.ItemText,{className:"truncate",children:l.label??String(l.value)})]},String(l.value)))})})})]}),D?e(r.Description,{className:p(j[ee],"text-(--plass-muted-fg)",Q?.description),children:D}):null,e(r.Error,te?{match:!0,className:p(j[ee],"text-(--p-accent)",Q?.error),children:K}:{className:p(j[ee],"text-(--p-accent)",Q?.error)})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Select as s}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{CheckIcon as i,ChevronIcon as n}from"../../internal/icons.js";import{WidthSizer as o}from"../../internal/sizer.js";import{hotKeyHandler as c}from"../../internal/keys.js";import{controlHeightClasses as d,controlTextLeadingClasses as p,cx as m,disabledClasses as u,fieldReadOnlyClasses as f,fieldRestClasses as h,focusWithinRingClasses as g,forcedHighlightedClasses as v,gapClasses as x,glassClasses as b,hasContent as y,iconClasses as N,metaTextClasses as j,paddingXClasses as w,radiusClasses as S,stackGapClasses as I,surfaceSlots as z,transitionClasses as P}from"../../internal/styles.js";const V=/* @__PURE__ */["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",P,g,N].join(" "),k=/* @__PURE__ */[b,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),O=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",P,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",v,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" ");export const PlSelect=/* @__PURE__ */l.forwardRef(function PlSelect({variant:g="glass",size:v,color:b,density:N,elevation:P=0,items:$,value:_,defaultValue:C,onValueChange:R,placeholder:T,label:q,description:B,error:D,invalid:E,startIcon:K,fullWidth:M=!1,disabled:W=!1,readOnly:L=!1,required:A=!1,name:F,id:G,className:H,hotKeys:J,classNames:Q,style:U,...X},Y){const Z=t(),ee=v??Z.size??"md",ae=b??Z.color??"primary",le=N??Z.density??"default",te=y(D),se=E??te,re=se?"danger":ae,ie=l.useMemo(()=>$.map(e=>({label:e.label??String(e.value),value:e.value})),[$]),[ne,oe]=l.useState(!1);l.useEffect(()=>{L&&oe(!1)},[L]);const ce=l.useMemo(()=>M?[]:[...$.map(e=>e.label??String(e.value)),...y(T)?[T]:[]],[M,$,T]);return a(r.Root,{disabled:W,invalid:se,className:["flex-col align-top",I[ee],M?"flex w-full":"inline-flex",H??""].filter(Boolean).join(" "),style:{...z(re,P),...U},...X,children:[q?e(r.Label,{className:m(j[ee],"font-semibold",W?"text-(--plass-muted-fg)":"text-(--plass-fg)",Q?.label),children:q}):null,a(s.Root,{id:G,name:F,items:ie,value:_,defaultValue:C,onValueChange:e=>R?.(e),disabled:W,readOnly:L,required:A,open:ne&&!L,onOpenChange:e=>oe(e&&!L),children:[a(s.Trigger,{ref:Y,onKeyDown:c(J,void 0),className:[V,d[ee],p[ee],S[ee],x[ee],w[le][ee],W?u[g]:L?`${f[g]} cursor-default`:h[g],Q?.control].filter(Boolean).join(" "),children:[K?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:K}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(s.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--plass-muted-fg)"].join(" "),placeholder:T}),e(o,{samples:ce})]}),e(s.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(n,{})})]}),e(s.Portal,{children:e(s.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(s.Popup,{className:`${k} ${S[ee]} ${p[ee]}`,style:z(re,3),children:$.map(l=>a(s.Item,{value:l.value,disabled:l.disabled,className:O,children:[e(s.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(i,{})}),e(s.ItemText,{className:"truncate",children:l.label??String(l.value)})]},String(l.value)))})})})]}),B?e(r.Description,{className:m(j[ee],"text-(--plass-muted-fg)",Q?.description),children:B}):null,e(r.Error,te?{match:!0,className:m(j[ee],"text-(--p-accent)",Q?.error),children:D}:{className:m(j[ee],"text-(--p-accent)",Q?.error)})]})});

package/dist/components/show/PlShow.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassBreakpointFloor } from '../../types.js';
+export interface PlShowProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The narrowest width this is drawn at. Below it, nothing.
+     *
+     * There is no `xs`: everything is at or above the bottom rung, so `from="xs"`
+     * would mean "always" — which is what leaving the prop out already means.
+     */
+    from?: PlassBreakpointFloor;
+    /**
+     * The width it stops being drawn at. From that rung up, nothing.
+     *
+     * Exclusive, and it has to be: `until="md"` on one element and `from="md"` on
+     * another are then the two halves of one decision, with no width that draws
+     * both and none that draws neither.
+     */
+    until?: PlassBreakpointFloor;
+    /**
+     * Renders something other than a `<div>`: `render={<span />}`. Base UI's own
+     * escape hatch.
+     *
+     * A paragraph cannot hold a `<div>`, so inside a `<p>` an HTML parser closes
+     * the paragraph in front of it and a page rendered on a server no longer
+     * hydrates. A gate in a line of text wants a `<span>`, and gates the same way.
+     */
+    render?: useRender.RenderProp;
+    /** What is shown, at the widths it is shown at. */
+    children?: React.ReactNode;
+}
+/**
+ * Content at some widths and not others.
+ *
+ * ```tsx
+ * <PlShow from="md">
+ *   <PlTable columns={columns} rows={rows} />
+ * </PlShow>
+ * <PlShow until="md">
+ *   <PlList>…</PlList>
+ * </PlShow>
+ * ```
+ *
+ * **It is not a box.** While it is showing it is `display: contents`, so its
+ * children take part in the layout around it exactly as they would have without
+ * it — a gate inside a flex row does not become a flex item, and one inside a
+ * grid does not become a cell. Which also means a `className` carrying a margin
+ * or a width does nothing here: there is no box for it to land on. Put your own
+ * element inside.
+ *
+ * **It decides in CSS, and that is the whole point.** A media query answered in
+ * JavaScript is `false` on a server and on the first frame a browser renders,
+ * so a `useMediaQuery` and a ternary draw the wrong half of a responsive layout
+ * and then throw it away — a flash on every page load rather than an edge case.
+ * The stylesheet knows the width before React has been asked anything.
+ *
+ * What follows from that is the trade worth knowing: **both halves are in the
+ * document**. Hiding is `display: none`, which takes the subtree off the
+ * accessibility tree and out of the layout, so nothing is read twice and
+ * nothing is drawn — but both were rendered and both were sent. That is right
+ * for two arrangements of the same content and wrong for a subtree that is
+ * expensive to build or that must not mount at all; for those,
+ * `usePlBreakpointValue` picks one and only that one is mounted, at the cost of
+ * a server rendering the `xs` answer.
+ *
+ * **A layer that portals out is not hidden with its half.** A `PlModal`, a
+ * `PlDrawer` or a popover renders at the end of `<body>`, outside the box that
+ * `display: none` hides, so an open one in the closed half shows. Two halves
+ * that read the same `open` open two windows. Keep layers outside `PlShow`, or
+ * choose between them with `usePlBreakpointValue`.
+ *
+ * There is no `PlHide`, deliberately. `until` is the inverse of `from` and the
+ * two together are a band, so a second component would be a second way to spell
+ * the same three cases.
+ */
+export declare const PlShow: React.ForwardRefExoticComponent<PlShowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/show/PlShow.js

@@ -0,0 +1 @@
+import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{cx as o}from"../../internal/styles.js";export const PlShow=/* @__PURE__ */r.forwardRef(function PlShow({from:r,until:a,render:s,className:t,children:n,...l},i){return e({render:s,ref:i,props:{className:o("plass-show",t),"data-from":r,"data-until":a,children:n,...l}})});

package/dist/components/show/index.d.ts

@@ -0,0 +1,2 @@
+export { PlShow } from './PlShow.js';
+export type { PlShowProps } from './PlShow.js';

package/dist/components/show/index.js

@@ -0,0 +1 @@
+export{PlShow}from"./PlShow.js";

package/dist/components/sidebar/PlSidebar.js

@@ -1 +1 @@
-"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{PlDrawer as o}from"../drawer/PlDrawer.js";import{drawerSide as s,expandedOnlyClasses as i,PlPageLayoutContext as l,PlassSidebarSideContext as a,useCollapsed as d}from"../../internal/page-layout.js";import{cx as c,sheetPaddingXClasses as u,sheetPaddingYClasses as p,sheetRestClasses as m,surfaceSlots as f,toLength as y,transitionClasses as b}from"../../internal/styles.js";const v={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},g=m;function toPixels(e,t){if(null==e)return t;if("number"==typeof e)return e;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return t;const n=Number(r[1]);if(Number.isNaN(n))return t;switch(r[2]){case"px":return n;case"%":return"undefined"==typeof window?t:window.innerWidth*n/100;default:return n*parseFloat(("undefined"==typeof document?"":getComputedStyle(document.documentElement).fontSize)||"16")}}export const PlSidebar=/* @__PURE__ */r.forwardRef(function PlSidebar({side:m,width:w,minWidth:h=160,maxWidth:x=480,resizable:P=!1,onResize:C,onResizeEnd:k,collapseBelow:z,open:L,defaultOpen:R=!1,onOpenChange:E,sticky:N=!0,title:S,variant:j="glass",size:B,color:D,density:O,elevation:A=0,divider:M=!0,padded:W=!0,label:I="Sidebar",closeLabel:T="Close sidebar",resizeLabel:X="Resize sidebar",className:$,style:_,children:F,...K},V){const q=n(),G=B??q.size??"md",H=D??q.color??"primary",J=O??q.density??"default",Q=r.useContext(l),U=r.useContext(a),Y=m??U??"start",Z=z??(Q.present?Q.collapseBelow:"none"),ee=d(Z),[te,re]=r.useState(R),ne=void 0!==L,oe=ne?L:Q.present?Q.open[Y]:te,se=y(w)??v[G],ie=r.useRef(null),le=r.useCallback(e=>{ie.current=e,"function"==typeof V?V(e):V&&(V.current=e)},[V]),ae=r.useRef(null);r.useEffect(()=>()=>ae.current?.(),[]);const applyWidth=e=>{const t=ie.current;if(!t)return e;const r=Math.min(toPixels(x,480),Math.max(toPixels(h,160),Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),r};return ee?e(o,{side:s(Y),mode:"overlay",open:oe,onOpenChange:e=>{ne||(Q.present?Q.setOpen(Y,e):re(e)),E?.(e)},title:S,size:G,color:H,density:J,closeLabel:T,extent:void 0===w?void 0:se,"aria-label":S?void 0:I,className:$,style:_,children:F}):t("aside",{ref:le,"aria-label":I,className:c("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",g[j],M?c("start"===Y?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===Q.scroll?"h-full":N?c("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",i[Z],b,$),style:{...f(H,A),"--p-sidebar-w":se,..._},...K,children:[e("div",{className:c("min-h-0 flex-1 overflow-y-auto overscroll-contain",W?c(u[J][G],p[J][G]):""),children:F}),P?e("div",{role:"separator","aria-orientation":"vertical","aria-label":X,tabIndex:0,className:c("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===Y?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",b,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=ie.current;if(!t||0!==e.button)return;const r=e.currentTarget;r.setPointerCapture(e.pointerId),r.dataset.dragging="true";const n=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const o=e.clientX,s=t.getBoundingClientRect().width,i="rtl"===getComputedStyle(t).direction,l="start"===Y===i?-1:1;let a=s;const move=e=>{a=applyWidth(s+(e.clientX-o)*l),C?.(a)},release=()=>{ae.current=null,r.removeEventListener("pointermove",move),r.removeEventListener("pointerup",end),r.removeEventListener("pointercancel",end),delete r.dataset.dragging,n?document.body.style.setProperty("-webkit-user-select",n):document.body.style.removeProperty("-webkit-user-select")},end=()=>{release(),k?.(a)};ae.current=release,r.addEventListener("pointermove",move),r.addEventListener("pointerup",end),r.addEventListener("pointercancel",end)},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===Y===t?-1:1;(e=>{const t=ie.current;if(!t)return;const r=applyWidth(t.getBoundingClientRect().width+e);C?.(r),k?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});
+"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{useLabels as o}from"../../internal/labels.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{PlDrawer as a}from"../drawer/PlDrawer.js";import{drawerSide as s,expandedOnlyClasses as l,PlPageLayoutContext as u,PlassSidebarSideContext as d,useCollapsed as c}from"../../internal/page-layout.js";import{cx as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as b,surfaceSlots as h,toLength as v,transitionClasses as x}from"../../internal/styles.js";const y={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},g=b;function toPixels(e,t){if(null==e)return t;if("number"==typeof e)return e;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return t;const n=Number(r[1]);if(Number.isNaN(n))return t;switch(r[2]){case"px":return n;case"%":return"undefined"==typeof window?t:window.innerWidth*n/100;default:return n*parseFloat(("undefined"==typeof document?"":getComputedStyle(document.documentElement).fontSize)||"16")}}export const PlSidebar=/* @__PURE__ */r.forwardRef(function PlSidebar({side:b,width:w,minWidth:z=160,maxWidth:C=480,resizable:R=!1,onResize:j,onResizeEnd:N,collapseBelow:P,open:S,defaultOpen:k=!1,onOpenChange:M,sticky:A=!0,title:B,variant:D="glass",size:E,color:L,density:O,elevation:I=0,divider:W=!0,padded:T=!0,label:X,closeLabel:$,resizeLabel:_,className:F,style:K,children:q,...G},H){const J=n(),Q=o(),U=X??Q.sidebar,V=$??Q.sidebarClose,Y=_??Q.sidebarResize,Z=E??J.size??"md",ee=L??J.color??"primary",te=O??J.density??"default",re=r.useContext(u),ne=r.useContext(d),oe=b??ne??"start",ie=P??(re.present?re.collapseBelow:"none"),ae=c(ie),[se,le]=r.useState(k),ue=void 0!==S,de=ue?S:re.present?re.open[oe]:se,ce=v(w)??y[Z],pe=r.useRef(null),me=r.useCallback(e=>{pe.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),fe=r.useRef(null);r.useEffect(()=>()=>fe.current?.(),[]);const be=r.useRef(null),he=toPixels(z,160),ve=toPixels(C,480),xe=Math.min(ve,Math.max(he,Math.round(toPixels(ce,he)))),applyWidth=e=>{const t=pe.current;if(!t)return e;const r=Math.min(ve,Math.max(he,Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),be.current?.setAttribute("aria-valuenow",String(r)),r};return ae?e(a,{side:s(oe,J.direction),mode:"overlay",open:de,onOpenChange:e=>{ue||(re.present?re.setOpen(oe,e):le(e)),M?.(e)},title:B,size:Z,color:ee,density:te,closeLabel:V,extent:void 0===w?void 0:ce,"aria-label":B?void 0:U,className:F,style:K,children:q}):t("aside",{ref:me,"aria-label":U,className:p("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",g[D],W?p("start"===oe?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===re.scroll?"h-full":A?p("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",l[ie],x,F),style:{...h(ee,I),"--p-sidebar-w":ce,...K},...G,children:[e("div",{className:p("min-h-0 flex-1 overflow-y-auto overscroll-contain",T?p(m[te][Z],f[te][Z]):""),children:q}),R?e("div",{ref:be,role:"separator","aria-orientation":"vertical","aria-label":Y,"aria-valuenow":xe,"aria-valuemin":he,"aria-valuemax":ve,tabIndex:0,className:p("absolute inset-y-0 z-1 w-2 cursor-col-resize touch-none","start"===oe?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=pe.current;if(!t||0!==e.button)return;const r=e.clientX,n=t.getBoundingClientRect().width,o="rtl"===getComputedStyle(t).direction,a="start"===oe===o?-1:1;let s=n;fe.current=i({target:e.currentTarget,pointerId:e.pointerId,onMove:e=>{s=applyWidth(n+(e.clientX-r)*a),j?.(s)},onEnd:()=>{fe.current=null,N?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===oe===t?-1:1;(e=>{const t=pe.current;if(!t)return;const r=applyWidth(t.getBoundingClientRect().width+e);j?.(r),N?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});

package/dist/components/sidebar/PlSidebarTrigger.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{PlIconButton as n}from"../icon-button/PlIconButton.js";import{collapsedOnlyClasses as o,PlPageLayoutContext as t}from"../../internal/page-layout.js";import{cx as i}from"../../internal/styles.js";function MenuIcon(){return e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2","aria-hidden":"true",children:e("path",{d:"M4 7h16M4 12h16M4 17h16",strokeLinecap:"round"})})}export const PlSidebarTrigger=/* @__PURE__ */r.forwardRef(function PlSidebarTrigger({side:a="start",collapseBelow:s,icon:l,label:c,variant:u="ghost",className:p,onClick:d,...m},f){const h=r.useContext(t);if(!h.present)return null;const b=s??h.collapseBelow,g=h.open[a];return e(n,{ref:f,variant:u,icon:l??e(MenuIcon,{}),label:c??(g?"Close sidebar":"Open sidebar"),"aria-expanded":g,className:i(o[b],p),onClick:e=>{h.setOpen(a,!g),d?.(e)},...m})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{PlIconButton as n}from"../icon-button/PlIconButton.js";import{useLabels as o}from"../../internal/labels.js";import{collapsedOnlyClasses as t,PlPageLayoutContext as i}from"../../internal/page-layout.js";import{cx as a}from"../../internal/styles.js";function MenuIcon(){return e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2","aria-hidden":"true",children:e("path",{d:"M4 7h16M4 12h16M4 17h16",strokeLinecap:"round"})})}export const PlSidebarTrigger=/* @__PURE__ */r.forwardRef(function PlSidebarTrigger({side:s="start",collapseBelow:l,icon:c,label:p,variant:u="ghost",className:m,onClick:d,...f},b){const h=r.useContext(i),g=o();if(!h.present)return null;const j=l??h.collapseBelow,x=h.open[s];return e(n,{ref:b,variant:u,icon:c??e(MenuIcon,{}),label:p??(x?g.sidebarClose:g.sidebarOpen),"aria-expanded":x,className:a(t[j],m),onClick:e=>{h.setOpen(s,!x),d?.(e)},...f})});

package/dist/components/skeleton/PlSkeleton.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useRender as s}from"@base-ui/react/use-render";import{controlHeightClasses as o,controlSquareClasses as d,surfaceSlots as n}from"../../internal/styles.js";const a={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},m={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},i={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},t={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},u={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"},h="relative overflow-hidden bg-(--p-soft-hover)";function length(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const PlSkeleton=/* @__PURE__ */r.forwardRef(function PlSkeleton({shape:r="line",lines:f=1,size:p,color:c,width:g,height:x,animated:w=!0,label:y,render:$,className:b,style:j,...v},k){const N=l(),z=p??N.size??"md",B=c??N.color??"secondary",P=w?"plass-skeleton":"",S="circle"===r?`shrink-0 rounded-full ${o[z]} ${d[z]}`:"rect"===r?`w-full ${u[z]} ${void 0===x?t[z]:""}`:`w-full ${i[z]} ${a[z]}`,A=y?{role:"status","aria-busy":!0,"aria-label":y}:{"aria-hidden":!0},R="line"===r&&f>1;return s({render:$,ref:k,props:{className:(R?["flex w-full flex-col",m[z],b??""]:[h,P,S,b??""]).filter(Boolean).join(" "),style:{...n(B,0),width:length(g),height:length(x),...j},...A,...R?{children:Array.from({length:f},(r,l)=>e("div",{className:[h,P,i[z],a[z],l===f-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...v}})});
+"use client";import{jsx as e,Fragment as r,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useRender as d}from"@base-ui/react/use-render";import{controlHeightClasses as o,controlSquareClasses as a,srOnlyClasses as m,surfaceSlots as t}from"../../internal/styles.js";const i={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},u={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},h={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},f={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},p={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"},c="relative overflow-hidden bg-(--p-soft-hover)";function length(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const PlSkeleton=/* @__PURE__ */s.forwardRef(function PlSkeleton({shape:s="line",lines:g=1,size:x,color:w,width:j,height:$,animated:v=!0,label:y,render:b,className:k,style:N,...z},B){const P=n(),S=x??P.size??"md",A=w??P.color??"secondary",F=v?"plass-skeleton":"",R="circle"===s?`shrink-0 rounded-full ${o[S]} ${a[S]}`:"rect"===s?`w-full ${p[S]} ${void 0===$?f[S]:""}`:`w-full ${h[S]} ${i[S]}`,q=y?{role:"status"}:{"aria-hidden":!0},C=y?e("span",{className:m,children:y}):null,D="line"===s&&g>1;return d({render:b,ref:B,props:{className:(D?["flex w-full flex-col",u[S],k??""]:[c,F,R,k??""]).filter(Boolean).join(" "),style:{...t(A,0),width:length(j),height:length($),...N},...q,...D||C?{children:l(r,{children:[D?Array.from({length:g},(r,l)=>e("div",{className:[c,F,h[S],i[S],l===g-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l)):null,C]})}:null,...z}})});

package/dist/components/slider/PlSlider.d.ts

@@ -21,8 +21,20 @@ export interface PlSliderProps extends BaseSliderProps {
     orientation?: PlassOrientation;
     /** The label above the track. */
     label?: React.ReactNode;
-    /** Helper text below the track. */
+    /** Helper text below the track. Each thumb is described by it. */
     description?: React.ReactNode;
+    /**
+     * The name of the thumb at `index`, for a range whose two ends need names of
+     * their own, such as "Minimum price" and "Maximum price". Left out, every
+     * thumb is named by `label`.
+     */
+    getAriaLabel?: (index: number) => string;
+    /**
+     * What a screen reader says for the value of the thumb at `index`, given the
+     * value formatted for the locale and the raw number. Left out, it is the
+     * formatted number.
+     */
+    getAriaValueText?: (formattedValue: string, value: number, index: number) => string;
     /**
      * Shows the current value beside the label. Pass a function to format it —
      * the raw numbers and Base UI's already-localised strings are both handed in.

package/dist/components/slider/PlSlider.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{Slider as a}from"@base-ui/react/slider";import{controlSlots as o,focusRingClasses as t,metaTextClasses as i,transitionClasses as n}from"../../internal/styles.js";const c={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},d={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},m={xs:"size-3",sm:"size-3.5",md:"size-4.5",lg:"size-5",xl:"size-6"},f={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},u={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},h="rounded-full bg-(--plass-track)",p=`rounded-full [background-image:var(--p-fill)] ${n}`,x=/* @__PURE__ */["rounded-full border-2 [background-image:var(--p-fill)]","[border-color:var(--plass-surface)]","[box-shadow:var(--p-elev),var(--p-lift)]","cursor-grab select-none active:cursor-grabbing",n,"hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover),0_0_0_4px_var(--p-soft)]",t,"data-[dragging]:[box-shadow:var(--p-elev-press),var(--p-lift-press),0_0_0_6px_var(--p-soft-hover)]"].join(" ");export const PlSlider=/* @__PURE__ */s.forwardRef(function PlSlider({size:s,color:t,elevation:n=1,orientation:g="horizontal",label:v,description:w,showValue:b=!1,disabled:j=!1,className:y,style:N,...$},_){const z=r(),k=s??z.size??"md",A=t??z.color??"primary",S="vertical"===g,V=$.value??$.defaultValue,P=Array.isArray(V)?V.length:1;return l(a.Root,{ref:_,orientation:g,disabled:j,className:["flex",S?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",j?"opacity-50 saturate-[0.35] [&_*]:cursor-not-allowed":"",y??""].filter(Boolean).join(" "),style:{...o(A,n,"solid"),...N},...$,children:[v||b?l("div",{className:`flex w-full items-baseline gap-2 ${i[k]}`,children:[v?e(a.Label,{className:"font-semibold text-(--plass-fg)",children:v}):null,b?e(a.Value,{className:"ms-auto tabular-nums text-(--plass-muted-fg)",children:"function"==typeof b?b:null}):null]}):null,e(a.Control,{className:["flex touch-none items-center justify-center select-none",S?`${u[k]} h-40 flex-col`:`w-full ${f[k]}`].join(" "),children:l(a.Track,{className:[h,S?`${d[k]} h-full`:`${c[k]} w-full`].join(" "),children:[e(a.Indicator,{className:p}),Array.from({length:P},(l,s)=>e(a.Thumb,{index:s,className:`${x} ${m[k]}`},s))]})}),w?e("div",{className:`${i[k]} text-(--plass-muted-fg)`,children:w}):null]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Slider as o}from"@base-ui/react/slider";import{controlSlots as s,focusRingClasses as t,forcedFieldEdgeClasses as i,forcedFillClasses as n,metaTextClasses as d}from"../../internal/styles.js";const c={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},u={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},m={xs:"size-3",sm:"size-3.5",md:"size-4.5",lg:"size-5",xl:"size-6"},f={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},p={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},g=`rounded-full bg-(--plass-track) ${i}`,h=/* @__PURE__ */["[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","data-[dragging]:[transition-duration:0ms]","motion-reduce:[transition-duration:0ms]"].join(" "),x=/* @__PURE__ */["rounded-full [background-image:var(--p-fill)]",n,"forced-colors:data-[disabled]:[background-color:GrayText]","[transition-property:width,height,inset-inline-start,bottom,filter,opacity]",h].join(" "),b=/* @__PURE__ */["rounded-full border-2 [background-image:var(--p-fill)]","[border-color:var(--plass-surface)]","forced-colors:[background-color:CanvasText] forced-colors:[border-color:Canvas]","forced-colors:data-[disabled]:[background-color:GrayText]","[box-shadow:var(--p-elev),var(--p-lift)]","cursor-grab select-none active:cursor-grabbing","[transition-property:box-shadow,inset-inline-start,bottom,filter,opacity]",h,"hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover),0_0_0_4px_var(--p-soft)]",t,"data-[dragging]:[box-shadow:var(--p-elev-press),var(--p-lift-press),0_0_0_6px_var(--p-soft-hover)]"].join(" ");export const PlSlider=/* @__PURE__ */r.forwardRef(function PlSlider({size:t,color:i,elevation:n=1,orientation:h="horizontal",label:v,description:w,getAriaLabel:y,getAriaValueText:j,showValue:N=!1,disabled:$=!1,className:_,style:z,...k},A){const T=r.useId(),V=l(),C=t??V.size??"md",L=i??V.color??"primary",S="vertical"===h,G=k.value??k.defaultValue,I=Array.isArray(G)?G.length:1;return a(o.Root,{ref:A,orientation:h,disabled:$,className:["flex",S?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",$?"opacity-50 saturate-[0.35] [&_*]:cursor-not-allowed":"",_??""].filter(Boolean).join(" "),style:{...s(L,n,"solid"),...z},...k,children:[v||N?a("div",{className:`flex w-full items-baseline gap-2 ${d[C]}`,children:[v?e(o.Label,{className:"font-semibold text-(--plass-fg)",children:v}):null,N?e(o.Value,{className:"ms-auto tabular-nums text-(--plass-muted-fg)",children:"function"==typeof N?N:null}):null]}):null,e(o.Control,{className:["flex touch-none items-center justify-center select-none",S?`${p[C]} h-40 flex-col`:`w-full ${f[C]}`].join(" "),children:a(o.Track,{className:[g,S?`${u[C]} h-full`:`${c[C]} w-full`].join(" "),children:[e(o.Indicator,{className:x}),Array.from({length:I},(a,r)=>e(o.Thumb,{index:r,getAriaLabel:y,getAriaValueText:j,"aria-describedby":w?T:void 0,className:`${b} ${m[C]}`},r))]})}),w?e("div",{id:T,className:`${d[C]} text-(--plass-muted-fg)`,children:w}):null]})});