plass-ui 1.2.0 → 1.4.0

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 t}from"react/jsx-runtime";import*as o from"react";import{ScrollArea as r}from"@base-ui/react/scroll-area";import{useDefaults as l}from"../../internal/defaults.js";import{cx as i,focusRingInsetClasses as e,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"};export const PlScrollArea=/* @__PURE__ */o.forwardRef(function PlScrollArea({orientation:o="vertical",height:h,maxHeight:d,width:m,maxWidth:u,scrollbars:p="auto",label:f,size:w,classNames:z,className:b,style:x,children:v,...g},y){const N=l(),j=w??N.size??"md",S="horizontal"!==o,k="vertical"!==o,A=i("flex touch-none select-none","p-[0.125rem]",c[j],"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","always"===p?"opacity-100":"opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100",z?.scrollbar);return t(r.Root,{ref:y,className:i("plass-scroll-area relative overflow-hidden",n[j],b),style:{height:s(h),maxHeight:s(d),width:s(m),maxWidth:s(u),...x},...g,children:[a(r.Viewport,{role:f?"region":void 0,"aria-label":f,className:i("size-full overscroll-contain",n[j],e,z?.viewport),children:a(r.Content,{children:v})}),S?a(r.Scrollbar,{orientation:"vertical",className:A,children:a(r.Thumb,{className:i("flex-1 rounded-full bg-(--plass-track)",z?.thumb)})}):null,k?a(r.Scrollbar,{orientation:"horizontal",className:A,children:a(r.Thumb,{className:i("flex-1 rounded-full bg-(--plass-track)",z?.thumb)})}):null,S&&k?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, 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

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{PlIconButton as r}from"../icon-button/PlIconButton.js";import{spacingValue as o}from"../../internal/grid.js";import{ChevronIcon as s}from"../../internal/icons.js";import{cx as l}from"../../internal/styles.js";const i={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},a={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:c="horizontal",lines:u=1,spacing:d=2,buttons:f="auto",buttonPlacement:p="inline",mode:m="item",step:v=1,speed:b=900,snap:w=!1,drag:g=!0,wheel:h=!0,scrollbar:y=!1,variant:x="glass",size:E="md",color:L="primary",density:k="default",label:M,previousLabel:C="Previous",nextLabel:P="Next",className:D,style:R,children:A,...B},N){const T="horizontal"===c,j=Math.max(1,Math.round(u)),z=Math.max(1,Math.round(v)),S=n.useRef(null),W=n.useRef(null),[Y,_]=n.useState({back:!1,forward:!1}),H=n.useCallback(()=>{const e=S.current;if(!e)return;const t=T?e.clientWidth:e.clientHeight,n=T?e.scrollWidth:e.scrollHeight,r=Math.abs(T?e.scrollLeft:e.scrollTop);_(e=>{const o=r>1,s=n-t-r>1;return e.back===o&&e.forward===s?e:{back:o,forward:s}})},[T]);n.useEffect(()=>{const e=S.current,t=W.current;if(!e)return;if(H(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(H);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[H]);const F=n.useCallback(()=>{const e=S.current;return e&&T&&"rtl"===getComputedStyle(e).direction?-1:1},[T]),I=n.useCallback((e,t)=>{const n=S.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(T?{left:e,behavior:r}:{top:e,behavior:r})},[T]);n.useEffect(()=>{const e=S.current;if(!e||!h||!T)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(),I(n*F(),!1))};return e.addEventListener("wheel",onWheel,{passive:!1}),()=>e.removeEventListener("wheel",onWheel)},[F,T,I,h]);const O=n.useCallback(()=>{const e=S.current,t=W.current;if(!e||!t)return[];const n=T&&"rtl"===getComputedStyle(e).direction,r=T?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)},[T]),X=n.useCallback((e,t=m)=>{const n=S.current;if(!n)return;const r=F(),o=T?n.clientWidth:n.clientHeight;if("page"===t)return void I(o*(e?1:-1)*r,!0);const s=O(),l=s.filter(e=>e>1),i=s.filter(e=>e<-1),a=e?l[z-1]:i[i.length-z];I(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[F,T,O,z,m,I]),$=n.useRef(null);n.useEffect(()=>()=>$.current?.(),[]);const q=n.useCallback((e,t)=>{if($.current)return;const n=F(),r=performance.now();let o=r,s=0;const tick=t=>{const r=t-o;o=t,I(b*r/1e3*(e?1:-1)*n,!1),s=requestAnimationFrame(tick)};s=requestAnimationFrame(tick);const release=()=>{cancelAnimationFrame(s),$.current=null,window.removeEventListener(t,release),window.removeEventListener("pointercancel",release),window.removeEventListener("blur",release),performance.now()-r<140&&X(e,"item")};$.current=release,window.addEventListener(t,release),window.addEventListener("pointercancel",release),window.addEventListener("blur",release)},[X,F,I,b]),Z=n.useRef(null);function pressHandlers(e){return"hold"!==m?{onClick:()=>X(e)}:{onPointerDown:t=>{0===t.button&&q(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),q(e,"keyup"))}}}n.useEffect(()=>()=>Z.current?.(),[]);const G="none"!==f&&("always"===f||Y.back||Y.forward),K="inline"===p;function scrollButton(t){const n=t?Y.forward:Y.back;if("auto"===f&&!n&&!K)return e("span",{});const o="auto"===f&&!n,i=e(r,{variant:x,size:E,color:L,density:k,elevation:1,label:t?P:C,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:l("flex items-center",T?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180"),children:e(s,{})}),...pressHandlers(t)});return K?e("span",{className:l("flex shrink-0 items-center justify-center",o?"invisible":""),inert:o,children:i}):i}return t("div",{ref:N,className:l("relative flex min-w-0",K&&T?"flex-row items-stretch":"flex-col",K?a[E]:"",D),style:{"--p-ring":`var(--plass-${L}-ring)`,...R},...B,children:[G&&K?scrollButton(!1):null,e("div",{ref:S,tabIndex:0,role:M?"group":void 0,"aria-label":M,className:l("min-h-0 min-w-0 grow",T?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",w?T?"snap-x snap-mandatory":"snap-y snap-mandatory":"",y?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",g&&(Y.back||Y.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:H,onPointerDown:function beginDrag(e){if(!g||"touch"===e.pointerType||0!==e.button)return;Z.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(T?i:a)<4)return;l=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}T?t.scrollLeft=o-i:t.scrollTop=s-a},release=()=>{Z.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)};Z.current=release,t.addEventListener("pointermove",move),t.addEventListener("pointerup",end),t.addEventListener("pointercancel",release)},children:e("div",{ref:W,className:l(w?"[&>*]:snap-start":""),style:{display:"grid",gap:o(d),gridAutoFlow:T?"column":"row",...T?{width:"max-content",gridTemplateRows:`repeat(${j}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${j}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:A})}),G&&K?scrollButton(!0):null,G&&!K?t("div",{className:l("pointer-events-none absolute inset-0 flex justify-between",T?"items-center":"flex-col items-center",i[E]),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{PlIconButton as s}from"../icon-button/PlIconButton.js";import{spacingValue as l}from"../../internal/grid.js";import{ChevronIcon as i}from"../../internal/icons.js";import{cx as a}from"../../internal/styles.js";import{useResponsiveValue as c}from"../../internal/responsive.js";const u={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},d={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:p,lines:f=1,spacing:m=2,buttons:v="auto",buttonPlacement:b="inline",mode:w="item",step:g=1,speed:h=900,snap:y=!1,drag:x=!0,wheel:E=!0,scrollbar:L=!1,variant:k="glass",size:M,color:C,density:P,label:j,previousLabel:D,nextLabel:R,className:A,style:B,children:T,...N},z){const S=c(p,"horizontal"),W=r(),Y=o(),_=D??Y.previous,H=R??Y.next,F=M??W.size??"md",I=C??W.color??"primary",O=P??W.density??"default",X="horizontal"===S,$=Math.max(1,Math.round(f)),q=Math.max(1,Math.round(g)),Z=n.useRef(null),G=n.useRef(null),[K,V]=n.useState({back:!1,forward:!1}),J=n.useCallback(()=>{const e=Z.current;if(!e)return;const t=X?e.clientWidth:e.clientHeight,n=X?e.scrollWidth:e.scrollHeight,r=Math.abs(X?e.scrollLeft:e.scrollTop);V(e=>{const o=r>1,s=n-t-r>1;return e.back===o&&e.forward===s?e:{back:o,forward:s}})},[X]);n.useEffect(()=>{const e=Z.current,t=G.current;if(!e)return;if(J(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(J);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[J]);const Q=n.useCallback(()=>{const e=Z.current;return e&&X&&"rtl"===getComputedStyle(e).direction?-1:1},[X]),U=n.useCallback((e,t)=>{const n=Z.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(X?{left:e,behavior:r}:{top:e,behavior:r})},[X]);n.useEffect(()=>{const e=Z.current;if(!e||!E||!X)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(),U(n*Q(),!1))};return e.addEventListener("wheel",onWheel,{passive:!1}),()=>e.removeEventListener("wheel",onWheel)},[Q,X,U,E]);const ee=n.useCallback(()=>{const e=Z.current,t=G.current;if(!e||!t)return[];const n=X&&"rtl"===getComputedStyle(e).direction,r=X?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)},[X]),te=n.useCallback((e,t=w)=>{const n=Z.current;if(!n)return;const r=Q(),o=X?n.clientWidth:n.clientHeight;if("page"===t)return void U(o*(e?1:-1)*r,!0);const s=ee(),l=s.filter(e=>e>1),i=s.filter(e=>e<-1),a=e?l[q-1]:i[i.length-q];U(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[Q,X,ee,q,w,U]),ne=n.useRef(null);n.useEffect(()=>()=>ne.current?.(),[]);const re=n.useCallback((e,t)=>{if(ne.current)return;const n=Q(),r=performance.now();let o=r,s=0;const tick=t=>{const r=t-o;o=t,U(h*r/1e3*(e?1:-1)*n,!1),s=requestAnimationFrame(tick)};s=requestAnimationFrame(tick);const release=()=>{cancelAnimationFrame(s),ne.current=null,window.removeEventListener(t,release),window.removeEventListener("pointercancel",release),window.removeEventListener("blur",release),performance.now()-r<140&&te(e,"item")};ne.current=release,window.addEventListener(t,release),window.addEventListener("pointercancel",release),window.addEventListener("blur",release)},[te,Q,U,h]),oe=n.useRef(null);function pressHandlers(e){return"hold"!==w?{onClick:()=>te(e)}:{onPointerDown:t=>{0===t.button&&re(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),re(e,"keyup"))}}}n.useEffect(()=>()=>oe.current?.(),[]);const se="none"!==v&&("always"===v||K.back||K.forward),le="inline"===b;function scrollButton(t){const n=t?K.forward:K.back;if("auto"===v&&!n&&!le)return e("span",{});const r=e(s,{variant:k,size:F,color:I,density:O,elevation:1,label:t?H:_,disabled:!n,className:"pointer-events-auto",icon:e("span",{className:a("flex items-center",X?t?"-rotate-90 rtl:rotate-90":"rotate-90 rtl:-rotate-90":t?"":"rotate-180"),children:e(i,{})}),...pressHandlers(t)});return le?e("span",{className:"flex shrink-0 items-center justify-center",children:r}):r}return t("div",{ref:z,className:a("relative flex min-w-0",le&&X?"flex-row items-stretch":"flex-col",le?d[F]:"",A),style:{"--p-ring":`var(--plass-${I}-ring)`,...B},...N,children:[se&&le?scrollButton(!1):null,e("div",{ref:Z,tabIndex:0,role:j?"group":void 0,"aria-label":j,className:a("min-h-0 min-w-0 grow",X?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",y?X?"snap-x snap-mandatory":"snap-y snap-mandatory":"",L?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",x&&(K.back||K.forward)?"cursor-grab data-[dragging]:cursor-grabbing":"","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:J,onPointerDown:function beginDrag(e){if(!x||"touch"===e.pointerType||0!==e.button)return;oe.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(X?i:a)<4)return;l=!0,t.setPointerCapture(e.pointerId),t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}X?t.scrollLeft=o-i:t.scrollTop=s-a},release=()=>{oe.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)};oe.current=release,t.addEventListener("pointermove",move),t.addEventListener("pointerup",end),t.addEventListener("pointercancel",release)},children:e("div",{ref:G,className:a(y?"[&>*]:snap-start":""),style:{display:"grid",gap:l(m),gridAutoFlow:X?"column":"row",...X?{width:"max-content",gridTemplateRows:`repeat(${$}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${$}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:T})}),se&&le?scrollButton(!0):null,se&&!le?t("div",{className:a("pointer-events-none absolute inset-0 flex justify-between",X?"items-center":"flex-col items-center",u[F]),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{Radio as a}from"@base-ui/react/radio";import{RadioGroup as r}from"@base-ui/react/radio-group";import{controlHeightClasses as l,controlSlots as n,controlTextClasses as o,focusRingInsetClasses as i,gapClasses as d,glassClasses as u,hasContent as c,iconClasses as p,paddingXClasses as f,transitionClasses as h}from"../../internal/styles.js";const g=/* @__PURE__ */t.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1}),m={solid:`${u} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)]`,glass:`${u} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},v={solid:"[background-image:var(--p-fill)] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${u} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${u} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`},y={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:r,startIcon:n,endIcon:u,disabled:m=!1,className:v,children:b,...x},w){const{variant:k,size:P,density:j,fullWidth:R}=t.useContext(g);return s(a.Root,{ref:w,value:r,disabled:m,"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]",l[P],o[P],d[P],f[j][P],"rounded-full",h,p,"text-(--plass-muted-fg) hover:text-(--plass-fg)",y[k],i,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[readonly]:cursor-default",R?"flex-1":"",v??""].filter(Boolean).join(" "),...x,children:[c(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:n}):null,b,c(u)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:u}):null]})});export const PlSegmentedButton=/* @__PURE__ */t.forwardRef(function PlSegmentedButton({variant:a="glass",size:l="md",color:o="primary",density:i="default",elevation:d=0,value:u,defaultValue:c=null,onValueChange:p,disabled:f=!1,readOnly:y=!1,name:b,fullWidth:x=!1,className:w,style:k,children:P,...j},R){const[$,N]=t.useState(c),z=void 0!==u,S=z?u:$,W=t.useRef(null),C=t.useRef(null),B=t.useCallback(e=>{const s=W.current,t=C.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(()=>{B(!0)},[B,S,a,l,i,x,P]),t.useEffect(()=>{const e=W.current;if(!e)return;const s=new ResizeObserver(()=>B(!1));return s.observe(e),()=>s.disconnect()},[B]);const A=t.useMemo(()=>({variant:a,size:l,density:i,fullWidth:x}),[a,l,i,x]);return e(g.Provider,{value:A,children:s(r,{ref:e=>{W.current=e,"function"==typeof R?R(e):R&&(R.current=e)},value:S,onValueChange:e=>{const s=e??null;z||N(s),p?.(s)},disabled:f,readOnly:y,name:b,className:["relative inline-flex items-center rounded-full",m[a],h,y?"saturate-[0.55]":"",f?"opacity-50 saturate-[0.35]":"",x?"flex w-full":"",w??""].filter(Boolean).join(" "),style:{...n(o,d,a),...k},...j,children:[null!=S?e("span",{ref:C,"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)",v[a],"[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,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]})})});

package/dist/components/select/PlSelect.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
 /**
  * What a select's value may be.
  *
@@ -21,6 +21,15 @@ export interface PlSelectOption {
 export interface PlSelectProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
+    /**
+     * Chords this field answers to, in the vocabulary `PlHotKeys` draws.
+     *
+     * `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
+     * beside the field would print, so the cap and the binding cannot drift. A
+     * chord that matches is **consumed**: the handler runs and the key reaches
+     * neither the control's own behaviour nor the form around it.
+     */
+    hotKeys?: PlassHotKeys;
     /**
      * The options, as data. There is no `<PlSelect.Option>` to compose: what a
      * caller has is almost always an array already, and the list has to be

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{Select as t}from"@base-ui/react/select";import{Field as s}from"@base-ui/react/field";import{CheckIcon as r,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as n}from"../../internal/sizer.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as m,fieldReadOnlyClasses as p,fieldRestClasses as u,focusWithinRingClasses as h,gapClasses as f,glassClasses as g,hasContent as x,iconClasses as v,metaTextClasses as b,paddingXClasses as N,radiusClasses as j,stackGapClasses as w,surfaceSlots as y,transitionClasses as I}from"../../internal/styles.js";const S=/* @__PURE__ */["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",I,h,v].join(" "),z=/* @__PURE__ */[g,"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(" "),P=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",I,"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:h="glass",size:g="md",color:v="primary",density:I="default",elevation:V=0,items:$,value:k,defaultValue:O,onValueChange:R,placeholder:T,label:q,description:B,error:C,invalid:M,startIcon:W,fullWidth:_=!1,disabled:D=!1,readOnly:E=!1,required:L=!1,name:A,id:F,className:G,classNames:H,style:J,...K},Q){const U=x(C),X=M??U,Y=X?"danger":v,Z=l.useMemo(()=>$.map(e=>({label:e.label??String(e.value),value:e.value})),[$]),ee=l.useMemo(()=>[...$.map(e=>e.label??String(e.value)),...x(T)?[T]:[]],[$,T]);return a(s.Root,{disabled:D,invalid:X,className:["flex-col align-top",w[g],_?"flex w-full":"inline-flex",G??""].filter(Boolean).join(" "),style:{...y(Y,V),...J},...K,children:[q?e(s.Label,{className:d(b[g],"font-semibold",D?"text-(--plass-muted-fg)":"text-(--plass-fg)",H?.label),children:q}):null,a(t.Root,{id:F,name:A,items:Z,value:k,defaultValue:O,onValueChange:e=>R?.(e),disabled:D,readOnly:E,required:L,children:[a(t.Trigger,{ref:Q,className:[S,o[g],c[g],j[g],f[g],N[I][g],D?m[h]:E?`${p[h]} cursor-default`:u[h],H?.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(t.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--plass-muted-fg)"].join(" "),placeholder:T}),e(n,{samples:ee})]}),e(t.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(i,{})})]}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(t.Popup,{className:`${z} ${j[g]} ${c[g]}`,style:y(Y,3),children:$.map(l=>a(t.Item,{value:l.value,disabled:l.disabled,className:P,children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e(t.ItemText,{className:"truncate",children:l.label??String(l.value)})]},String(l.value)))})})})]}),B?e(s.Description,{className:d(b[g],"text-(--plass-muted-fg)",H?.description),children:B}):null,e(s.Error,U?{match:!0,className:d(b[g],"text-(--p-accent)",H?.error),children:C}:{className:d(b[g],"text-(--p-accent)",H?.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,gapClasses as v,glassClasses as x,hasContent as b,iconClasses as y,metaTextClasses as N,paddingXClasses as j,radiusClasses as w,stackGapClasses as S,surfaceSlots as I,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,y].join(" "),V=/* @__PURE__ */[x,"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(" "),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:x,color:y,density:z,elevation:O=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=x??Z.size??"md",ae=y??Z.color??"primary",le=z??Z.density??"default",te=b(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(()=>[...$.map(e=>e.label??String(e.value)),...b(T)?[T]:[]],[$,T]);return a(r.Root,{disabled:W,invalid:se,className:["flex-col align-top",S[ee],M?"flex w-full":"inline-flex",H??""].filter(Boolean).join(" "),style:{...I(re,O),...U},...X,children:[q?e(r.Label,{className:m(N[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:[P,d[ee],p[ee],w[ee],v[ee],j[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:`${V} ${w[ee]} ${p[ee]}`,style:I(re,3),children:$.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)))})})})]}),B?e(r.Description,{className:m(N[ee],"text-(--plass-muted-fg)",Q?.description),children:B}):null,e(r.Error,te?{match:!0,className:m(N[ee],"text-(--p-accent)",Q?.error),children:D}:{className:m(N[ee],"text-(--p-accent)",Q?.error)})]})});

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+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;
+    /** 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.
+ *
+ * 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{jsx as r}from"react/jsx-runtime";import*as t from"react";import{cx as a}from"../../internal/styles.js";export const PlShow=/* @__PURE__ */t.forwardRef(function PlShow({from:t,until:o,className:s,children:e,...i},l){return r("div",{ref:l,className:a("plass-show",s),"data-from":t,"data-until":o,...i,children:e})});

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{PlDrawer as n}from"../drawer/PlDrawer.js";import{drawerSide as o,expandedOnlyClasses as s,PlPageLayoutContext as i,PlassSidebarSideContext as a,useCollapsed as l}from"../../internal/page-layout.js";import{cx as d,sheetPaddingXClasses as c,sheetPaddingYClasses as u,sheetRestClasses as p,surfaceSlots as m,toLength as f,transitionClasses as y}from"../../internal/styles.js";const b={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},v=p;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:p,width:g,minWidth:w=160,maxWidth:h=480,resizable:x=!1,onResize:P,onResizeEnd:C,collapseBelow:k,open:z,defaultOpen:L=!1,onOpenChange:R,sticky:E=!0,title:N,variant:S="glass",size:j="md",color:B="primary",density:D="default",elevation:O=0,divider:A=!0,padded:M=!0,label:W="Sidebar",closeLabel:I="Close sidebar",resizeLabel:T="Resize sidebar",className:X,style:$,children:_,...F},K){const V=r.useContext(i),q=r.useContext(a),G=p??q??"start",H=k??(V.present?V.collapseBelow:"none"),J=l(H),[Q,U]=r.useState(L),Y=void 0!==z,Z=Y?z:V.present?V.open[G]:Q,ee=f(g)??b[j],te=r.useRef(null),re=r.useCallback(e=>{te.current=e,"function"==typeof K?K(e):K&&(K.current=e)},[K]),ne=r.useRef(null);r.useEffect(()=>()=>ne.current?.(),[]);const applyWidth=e=>{const t=te.current;if(!t)return e;const r=Math.min(toPixels(h,480),Math.max(toPixels(w,160),Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),r};return J?e(n,{side:o(G),mode:"overlay",open:Z,onOpenChange:e=>{Y||(V.present?V.setOpen(G,e):U(e)),R?.(e)},title:N,size:j,color:B,density:D,closeLabel:I,extent:void 0===g?void 0:ee,"aria-label":N?void 0:W,className:X,style:$,children:_}):t("aside",{ref:re,"aria-label":W,className:d("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",v[S],A?d("start"===G?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===V.scroll?"h-full":E?d("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",s[H],y,X),style:{...m(B,O),"--p-sidebar-w":ee,...$},...F,children:[e("div",{className:d("min-h-0 flex-1 overflow-y-auto overscroll-contain",M?d(c[D][j],u[D][j]):""),children:_}),x?e("div",{role:"separator","aria-orientation":"vertical","aria-label":T,tabIndex:0,className:d("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===G?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",y,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=te.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,a="start"===G===i?-1:1;let l=s;const move=e=>{l=applyWidth(s+(e.clientX-o)*a),P?.(l)},release=()=>{ne.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(),C?.(l)};ne.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"===G===t?-1:1;(e=>{const t=te.current;if(!t)return;const r=applyWidth(t.getBoundingClientRect().width+e);P?.(r),C?.(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{PlDrawer as s}from"../drawer/PlDrawer.js";import{drawerSide as i,expandedOnlyClasses as l,PlPageLayoutContext as a,PlassSidebarSideContext as d,useCollapsed as c}from"../../internal/page-layout.js";import{cx as u,sheetPaddingXClasses as p,sheetPaddingYClasses as m,sheetRestClasses as f,surfaceSlots as y,toLength as b,transitionClasses as v}from"../../internal/styles.js";const g={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},w=f;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:f,width:h,minWidth:x=160,maxWidth:P=480,resizable:C=!1,onResize:k,onResizeEnd:z,collapseBelow:L,open:R,defaultOpen:E=!1,onOpenChange:N,sticky:j=!0,title:S,variant:B="glass",size:D,color:O,density:A,elevation:M=0,divider:W=!0,padded:I=!0,label:T,closeLabel:X,resizeLabel:$,className:_,style:F,children:K,...V},q){const G=n(),H=o(),J=T??H.sidebar,Q=X??H.sidebarClose,U=$??H.sidebarResize,Y=D??G.size??"md",Z=O??G.color??"primary",ee=A??G.density??"default",te=r.useContext(a),re=r.useContext(d),ne=f??re??"start",oe=L??(te.present?te.collapseBelow:"none"),se=c(oe),[ie,le]=r.useState(E),ae=void 0!==R,de=ae?R:te.present?te.open[ne]:ie,ce=b(h)??g[Y],ue=r.useRef(null),pe=r.useCallback(e=>{ue.current=e,"function"==typeof q?q(e):q&&(q.current=e)},[q]),me=r.useRef(null);r.useEffect(()=>()=>me.current?.(),[]);const applyWidth=e=>{const t=ue.current;if(!t)return e;const r=Math.min(toPixels(P,480),Math.max(toPixels(x,160),Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),r};return se?e(s,{side:i(ne),mode:"overlay",open:de,onOpenChange:e=>{ae||(te.present?te.setOpen(ne,e):le(e)),N?.(e)},title:S,size:Y,color:Z,density:ee,closeLabel:Q,extent:void 0===h?void 0:ce,"aria-label":S?void 0:J,className:_,style:F,children:K}):t("aside",{ref:pe,"aria-label":J,className:u("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",w[B],W?u("start"===ne?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===te.scroll?"h-full":j?u("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",l[oe],v,_),style:{...y(Z,M),"--p-sidebar-w":ce,...F},...V,children:[e("div",{className:u("min-h-0 flex-1 overflow-y-auto overscroll-contain",I?u(p[ee][Y],m[ee][Y]):""),children:K}),C?e("div",{role:"separator","aria-orientation":"vertical","aria-label":U,tabIndex:0,className:u("absolute inset-y-0 z-1 w-2 cursor-col-resize","start"===ne?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",v,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=ue.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"===ne===i?-1:1;let a=s;const move=e=>{a=applyWidth(s+(e.clientX-o)*l),k?.(a)},release=()=>{me.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(),z?.(a)};me.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"===ne===t?-1:1;(e=>{const t=ue.current;if(!t)return;const r=applyWidth(t.getBoundingClientRect().width+e);k?.(r),z?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});

package/dist/components/skeleton/PlSkeleton.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{controlHeightClasses as s,controlSquareClasses as d,surfaceSlots as n}from"../../internal/styles.js";const o={xs:"h-[0.6875rem]",sm:"h-[0.75rem]",md:"h-[0.8125rem]",lg:"h-[0.9375rem]",xl:"h-[1.0625rem]"},a={xs:"gap-[0.3125rem]",sm:"gap-[0.375rem]",md:"gap-[0.5625rem]",lg:"gap-[0.5625rem]",xl:"gap-[0.6875rem]"},m={xs:"rounded-[0.3125rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},t={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)"},u="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:h=1,size:f="md",color:p="secondary",width:c,height:g,animated:x=!0,label:w,render:y,className:$,style:b,...v},j){const k=x?"plass-skeleton":"",N="circle"===r?`shrink-0 rounded-full ${s[f]} ${d[f]}`:"rect"===r?`w-full ${t[f]} ${void 0===g?i[f]:""}`:`w-full ${m[f]} ${o[f]}`,B=w?{role:"status","aria-busy":!0,"aria-label":w}:{"aria-hidden":!0},P="line"===r&&h>1;return l({render:y,ref:j,props:{className:(P?["flex w-full flex-col",a[f],$??""]:[u,k,N,$??""]).filter(Boolean).join(" "),style:{...n(p,0),width:length(c),height:length(g),...b},...B,...P?{children:Array.from({length:h},(r,l)=>e("div",{className:[u,k,m[f],o[f],l===h-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...v}})});
+"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}})});

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

package/dist/components/sparkline/PlSparkline.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { PlassChartCurve, PlassChartDatum, PlassColor, PlassSize } from '../../types.js';
+export interface PlSparklineProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /** The values. `null` is a gap, exactly as it is on every other chart. */
+    data: readonly PlassChartDatum[];
+    /**
+     * Which mark. A line for a trend, an area for a quantity, bars for a count of
+     * discrete things — the same three sentences the full charts say, at a size
+     * where nothing else is being said at all.
+     * @default 'line'
+     */
+    shape?: 'line' | 'area' | 'bar';
+    /** How the line gets from one point to the next. @default 'linear' */
+    curve?: PlassChartCurve;
+    /**
+     * How tall the strip is. Sized against the line of text it sits beside rather
+     * than against the page — a sparkline is a word in a sentence, not a picture.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * The mark's colour. A `PlassColor` family, or any CSS colour.
+     *
+     * Unlike the full charts this one takes it directly: a sparkline has exactly
+     * one series and no legend, so there is nothing for a palette to hand out.
+     * @default the first chart slot
+     */
+    color?: PlassColor | (string & {});
+    /**
+     * Puts a dot on the last point. The one direct label a strip this small has
+     * room for, and it says where the series ended up.
+     * @default false
+     */
+    endDot?: boolean;
+    /**
+     * Draws a rule across the strip at this value — a target, a budget, last
+     * year's average. The one piece of context a sparkline can carry.
+     */
+    baseline?: number;
+    /**
+     * The bottom of the scale. Left out, the strip fills itself with its own
+     * range, which is what makes a sparkline legible at twenty pixels tall — and
+     * what makes two of them side by side incomparable. Pass the same `min` and
+     * `max` to a row of them and they become a small-multiples chart.
+     */
+    min?: number;
+    /** And the top of it. */
+    max?: number;
+    /** How wide. Fills its container by default. */
+    width?: number | string;
+    /** A name for the strip, read out in place of it. */
+    label?: string;
+}
+/**
+ * A chart with everything taken away except the shape.
+ *
+ * No axes, no grid, no legend, no tooltip — it is not a small chart, it is a
+ * different thing: a word-sized picture that goes inside a sentence, beside a
+ * [`PlStat`](../display/stat), or in a table cell, and says which way something
+ * has been going. Every number it could label is one the surrounding text
+ * already has, which is why it labels none of them.
+ *
+ * It scales itself to its own range, so the strip is always full. That is what
+ * makes it readable this small and it is also the trap: two sparklines side by
+ * side are drawn on two different scales unless they are given the same `min`
+ * and `max`.
+ */
+export declare const PlSparkline: React.ForwardRefExoticComponent<PlSparklineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sparkline/PlSparkline.js

@@ -0,0 +1 @@
+"use client";import{jsx as a,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as r from"react";import{areaPath as t,barMaxThickness as n,barPath as i,barRadius as s,extentOf as o,linePath as m,lineWidths as h,markerRadii as u,markGap as c,resolveColor as d,sparklineHeights as p,toValue as f}from"../../internal/chart.js";import{useMeasuredWidth as x}from"../../internal/chart-frame.js";import{useDefaults as v}from"../../internal/defaults.js";import{cx as b,srOnlyClasses as k}from"../../internal/styles.js";export const PlSparkline=/* @__PURE__ */r.forwardRef(function PlSparkline({data:g,shape:M="line",curve:j="linear",size:w,color:$,endDot:N=!1,baseline:W,min:z,max:C,width:L,label:P,className:R,style:S,...B},D){const F=v(),G=w??F.size??"md",I=r.useRef(null),q=x(I),A=r.useId().replace(/:/g,""),E=r.useMemo(()=>g.map(f),[g]),H=p[G],J=h[G],K=u[G],O=o([E],!1),Q=z??(O?Math.min(O.min,W??O.min):0),T=(C??(O?Math.max(O.max,W??O.max):1))-Q||1,U="number"==typeof L?L:q,V=d($??"var(--plass-chart-1)"),X="bar"===M?0:J/2+(N?K:0),Y=Math.max(1,H-2*X),y=a=>X+(1-(a-Q)/T)*Y,Z=E.length>1?U/(E.length-1):U,_=E.map((a,e)=>null===a.value?null:{x:e*Z,y:y(a.value)}),aa=(()=>{for(let a=E.length-1;a>=0;a--)if(null!==E[a].value)return a;return-1})(),ea=U/Math.max(1,E.length),la=Math.min(n[G]/2,Math.max(1,ea-c));return e("div",{ref:D,className:b("relative block",R??void 0),style:{width:L??"100%",height:H,...S},...B,children:[a("div",{ref:I,className:"absolute inset-0",children:U>0&&E.length>0?e("svg",{width:U,height:H,viewBox:`0 0 ${U} ${H}`,role:P?"img":"presentation","aria-label":P,"aria-hidden":!P||void 0,className:"block overflow-visible",children:["area"===M?e(l,{children:[a("defs",{children:e("linearGradient",{id:`${A}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[a("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${V} 32%, transparent)`}),a("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${V} 2%, transparent)`})]})}),a("path",{d:t(_,H,j),fill:`url(#${A}-fill)`})]}):null,void 0!==W?a("line",{x1:0,x2:U,y1:y(W),y2:y(W),stroke:"var(--plass-chart-baseline)",strokeWidth:1}):null,"bar"===M?E.map((e,l)=>null===e.value?null:a("path",{d:i(l*ea+(ea-la)/2,Math.min(y(e.value),y(Math.max(Q,0))),la,Math.max(1,Math.abs(y(e.value)-y(Math.max(Q,0)))),s/2,e.value>=0?"up":"down"),fill:e.color??V},l)):a("path",{d:m(_,j),fill:"none",stroke:V,strokeWidth:J,strokeLinecap:"round",strokeLinejoin:"round"}),N&&aa>=0&&"bar"!==M?a("circle",{cx:_[aa].x,cy:_[aa].y,r:K,fill:V,stroke:"var(--plass-chart-gap)",strokeWidth:c}):null]}):null}),P?a("span",{className:k,children:E.map(a=>null===a.value?"—":a.value).join(", ")}):null]})});

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

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

package/dist/components/sparkline/index.js

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

package/dist/components/spoiler/PlSpoiler.d.ts

@@ -80,5 +80,13 @@ export interface PlSpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div
  * The sheet is never dyed, exactly as on a `PlCard`: what a spoiler holds is a
  * photograph, a paragraph, a plot twist, and it arrives with its own colours.
  * The family shows up on the button and in the hairline and stops there.
+ *
+ * **The box is the same height covered and uncovered**, which takes both of the
+ * things that could move it. The cover shares a grid cell with what it covers
+ * rather than being positioned over it, so a cover that is taller than a
+ * one-line spoiler makes the sheet taller instead of being clipped by it; and
+ * the `reversible` Hide row is drawn from the start and merely held invisible,
+ * so it is not a button's worth of height that arrives on the way in and leaves
+ * again on the way out.
  */
 export declare const PlSpoiler: React.ForwardRefExoticComponent<PlSpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/PlSpoiler.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import*as a from"react";import{PlButton as r}from"../button/PlButton.js";import{cx as l,hasContent as s,metaTextClasses as t,radiusClasses as n,sheetPaddingXClasses as o,sheetPaddingYClasses as d,sheetRestClasses as c,surfaceSlots as m,transitionClasses as u}from"../../internal/styles.js";export const PlSpoiler=/* @__PURE__ */a.forwardRef(function PlSpoiler({revealed:p,defaultRevealed:f=!1,onRevealedChange:v,label:h="Reveal",hideLabel:x="Hide",description:g="This may contain spoilers",action:y,reversible:b=!1,maxHeight:j,blur:N=10,padded:w=!0,variant:k="glass",size:z="md",color:R="primary",density:_="default",elevation:C=0,className:H,style:P,children:S,...$},B){const I=a.useId(),[L,T]=a.useState(f),q=p??L,change=e=>{void 0===p&&T(e),v?.(e)},A=o[_][z],D=d[_][z],E=!1===g?null:g;return i("div",{ref:B,className:l("isolate grid overflow-hidden",n[z],c[k],u,H),style:{...m(R,C),...P},...$,children:[e("div",{id:I,className:l("min-w-0 [grid-area:1/1]",w?`${A} ${D}`:"","[transition:filter_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",q?"":"select-none"),style:{filter:q?void 0:`blur(${N}px)`,maxHeight:q?void 0:j,overflow:q?void 0:"hidden"},inert:!q,children:S}),q?null:i("div",{className:l("z-10 flex flex-col items-center justify-center gap-2 text-center [grid-area:1/1]",A,D,"[background-color:color-mix(in_oklab,var(--plass-surface)_55%,transparent)]"),children:[s(E)?e("p",{className:l("m-0 text-(--plass-muted-fg)",t[z]),children:E}):null,y??e(r,{size:z,color:R,density:_,onClick:()=>change(!0),"aria-expanded":!1,"aria-controls":I,children:h})]}),q&&b?e("div",{className:l("flex justify-end",A,D,"pt-0"),children:e(r,{variant:"ghost",size:z,color:R,density:_,onClick:()=>change(!1),"aria-expanded":!0,"aria-controls":I,children:x})}):null]})});
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import*as l from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{PlButton as s}from"../button/PlButton.js";import{cx as t,hasContent as n,metaTextClasses as o,radiusClasses as d,sheetPaddingXClasses as c,sheetPaddingYClasses as m,sheetRestClasses as f,surfaceSlots as u,transitionClasses as p}from"../../internal/styles.js";export const PlSpoiler=/* @__PURE__ */l.forwardRef(function PlSpoiler({revealed:v,defaultRevealed:h=!1,onRevealedChange:x,label:y,hideLabel:g,description:b="This may contain spoilers",action:j,reversible:N=!1,maxHeight:w,blur:z=10,padded:k=!0,variant:_="glass",size:C,color:P,density:R,elevation:S=0,className:$,style:H,children:B,...I},L){const T=r(),q=a(),A=y??q.reveal,D=g??q.hide,E=C??T.size??"md",F=P??T.color??"primary",G=R??T.density??"default",J=l.useId(),[K,M]=l.useState(h),O=v??K,change=e=>{void 0===v&&M(e),x?.(e)},Q=c[G][E],U=m[G][E],V=!1===b?null:b;return i("div",{ref:L,className:t("isolate grid overflow-hidden",d[E],f[_],p,$),style:{...u(F,S),...H},...I,children:[i("div",{className:"flex min-w-0 flex-col [grid-area:1/1]",children:[e("div",{id:J,className:t("min-w-0",k?`${Q} ${U}`:"","[transition:filter_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",O?"":"select-none"),style:{filter:O?void 0:`blur(${z}px)`,maxHeight:O?void 0:w,overflow:O?void 0:"hidden"},inert:!O,children:B}),N?e("div",{className:t("flex justify-end",Q,U,"pt-0",O?"":"invisible"),inert:!O,children:e(s,{variant:"ghost",size:E,color:F,density:G,onClick:()=>change(!1),"aria-expanded":!0,"aria-controls":J,children:D})}):null]}),O?null:i("div",{className:t("z-10 flex flex-col items-center justify-center gap-2 text-center [grid-area:1/1]",Q,U,"[background-color:color-mix(in_oklab,var(--plass-surface)_55%,transparent)]"),children:[n(V)?e("p",{className:t("m-0 text-(--plass-muted-fg)",o[E]),children:V}):null,j??e(s,{size:E,color:F,density:G,onClick:()=>change(!0),"aria-expanded":!1,"aria-controls":J,children:A})]})]})});