plass-ui 1.3.0 → 1.5.0

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 v}from"../../internal/chart-frame.js";import{useDefaults as x}from"../../internal/defaults.js";import{cx as b,srOnlyClasses as k}from"../../internal/styles.js";export const PlSparkline=/* @__PURE__ */r.forwardRef(function PlSparkline({data:M,shape:g="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=x(),G=w??F.size??"md",I=r.useRef(null),q=v(I),A=r.useId().replace(/:/g,""),E=r.useMemo(()=>M.map(f),[M]),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),U=T-Q||1,V="number"==typeof L?L:q,X=d($??"var(--plass-chart-1)"),Y="bar"===g?0:J/2+(N?K:0),Z=Math.max(1,H-2*Y),y=a=>Y+(1-(a-Q)/U)*Z,_=E.length>1?V/(E.length-1):V,aa=E.map((a,e)=>null===a.value?null:{x:e*_,y:y(a.value)}),ea=(()=>{for(let a=E.length-1;a>=0;a--)if(null!==E[a].value)return a;return-1})(),la=V/Math.max(1,E.length),ra=Math.min(n[G]/2,Math.max(1,la-c)),ta=y(Math.min(Math.max(Q,0),T)),barTop=a=>{const e=Math.min(y(a),ta);return Math.abs(y(a)-ta)<1?Math.min(e,H-1):e};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:V>0&&E.length>0?e("svg",{width:V,height:H,viewBox:`0 0 ${V} ${H}`,role:P?"img":"presentation","aria-label":P,"aria-hidden":!P||void 0,className:"block overflow-visible",children:["area"===g?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, ${X} 32%, transparent)`}),a("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${X} 2%, transparent)`})]})}),a("path",{d:t(aa,H,j),fill:`url(#${A}-fill)`})]}):null,void 0!==W?a("line",{x1:0,x2:V,y1:y(W),y2:y(W),stroke:"var(--plass-chart-baseline)",strokeWidth:1}):null,"bar"===g?E.map((e,l)=>null===e.value?null:a("path",{d:i(l*la+(la-ra)/2,barTop(e.value),ra,Math.max(1,Math.abs(y(e.value)-ta)),s/2,e.value>=0?"up":"down"),fill:e.color??X},l)):a("path",{d:m(aa,j),fill:"none",stroke:X,strokeWidth:J,strokeLinecap:"round",strokeLinejoin:"round"}),N&&ea>=0&&"bar"!==g?a("circle",{cx:aa[ea].x,cy:aa[ea].y,r:K,fill:X,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

@@ -32,7 +32,9 @@ export interface PlSpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div
     reversible?: boolean;
     /**
      * Clamps the covered box to this height — a CSS length, or a number in pixels.
-     * Revealing releases it and the content takes whatever height it needs.
+     * Revealing releases it and the content takes whatever height it needs, which
+     * makes this the one thing that changes the sheet's height between the two
+     * states.
      *
      * Left out, the box is exactly as tall as what it holds, which is the right
      * default for a paragraph or a picture. Set it for something long enough that
@@ -80,5 +82,18 @@ 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 every one 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 taller than a one-line
+ * spoiler makes the sheet taller instead of being clipped by it; and neither the
+ * cover nor the `reversible` Hide row is ever taken out of the tree — both are
+ * drawn from the start and merely held `invisible`, so their space is paid for
+ * once instead of arriving on the way in and leaving again on the way out.
+ *
+ * `maxHeight` is the one exception, and it is deliberate: a clamp is released on
+ * reveal, so a spoiler that was holding back four screens of text grows to fit
+ * them. Keeping the clamp would leave the reader a scrollbar where they asked
+ * for the content.
  */
 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 r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{PlButton as l}from"../button/PlButton.js";import{cx as s,hasContent as t,metaTextClasses as n,radiusClasses as o,sheetPaddingXClasses as d,sheetPaddingYClasses as c,sheetRestClasses as m,surfaceSlots as u,transitionClasses as f}from"../../internal/styles.js";export const PlSpoiler=/* @__PURE__ */r.forwardRef(function PlSpoiler({revealed:p,defaultRevealed:v=!1,onRevealedChange:h,label:x="Reveal",hideLabel:y="Hide",description:g="This may contain spoilers",action:b,reversible:j=!1,maxHeight:N,blur:w=10,padded:z=!0,variant:k="glass",size:R,color:_,density:C,elevation:H=0,className:P,style:S,children:$,...B},I){const L=a(),T=R??L.size??"md",q=_??L.color??"primary",A=C??L.density??"default",D=r.useId(),[E,F]=r.useState(v),G=p??E,change=e=>{void 0===p&&F(e),h?.(e)},J=d[A][T],K=c[A][T],M=!1===g?null:g;return i("div",{ref:I,className:s("isolate grid overflow-hidden",o[T],m[k],f,P),style:{...u(q,H),...S},...B,children:[e("div",{id:D,className:s("min-w-0 [grid-area:1/1]",z?`${J} ${K}`:"","[transition:filter_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",G?"":"select-none"),style:{filter:G?void 0:`blur(${w}px)`,maxHeight:G?void 0:N,overflow:G?void 0:"hidden"},inert:!G,children:$}),G?null:i("div",{className:s("z-10 flex flex-col items-center justify-center gap-2 text-center [grid-area:1/1]",J,K,"[background-color:color-mix(in_oklab,var(--plass-surface)_55%,transparent)]"),children:[t(M)?e("p",{className:s("m-0 text-(--plass-muted-fg)",n[T]),children:M}):null,b??e(l,{size:T,color:q,density:A,onClick:()=>change(!0),"aria-expanded":!1,"aria-controls":D,children:x})]}),G&&j?e("div",{className:s("flex justify-end",J,K,"pt-0"),children:e(l,{variant:"ghost",size:T,color:q,density:A,onClick:()=>change(!1),"aria-expanded":!0,"aria-controls":D,children:y})}):null]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{inertProps as t}from"../../internal/inert.js";import{focusablesIn as s}from"../../internal/focusable.js";import{PlButton as a}from"../button/PlButton.js";import{cx as o,hasContent as c,metaTextClasses as d,radiusClasses as u,sheetPaddingXClasses as f,sheetPaddingYClasses as m,sheetRestClasses as p,surfaceSlots as v,transitionClasses as x}from"../../internal/styles.js";export const PlSpoiler=/* @__PURE__ */i.forwardRef(function PlSpoiler({revealed:h,defaultRevealed:b=!1,onRevealedChange:g,label:y,hideLabel:j,description:N,action:R,reversible:w=!1,maxHeight:z,blur:k=10,padded:S=!0,variant:_="glass",size:C,color:P,density:$,elevation:E=0,className:H,style:I,children:L,...B},W){const q=n(),A=l(),D=y??A.reveal,F=j??A.hide,G=void 0===N?A.spoilerWarning:N,J=C??q.size??"md",K=P??q.color??"primary",M=$??q.density??"default",O=i.useId(),Q=i.useRef(null),T=i.useRef(null),U=i.useRef(null),[V,X]=i.useState(b),Y=h??V,change=e=>{void 0===h&&X(e),g?.(e)},Z=i.useRef(Y);i.useLayoutEffect(()=>{if(Z.current===Y)return;Z.current=Y;const e=document.activeElement,r=Y?[T.current]:[U.current,Q.current];if(!e||!r.some(r=>r?.contains(e)))return;const i=Y?Q.current:s(T.current)[0];i?.focus({preventScroll:!0})},[Y]);const ee=f[M][J],re=m[M][J],ie=!1===G?null:G;return r("div",{ref:W,className:o("isolate grid overflow-hidden",u[J],p[_],x,H),style:{...v(K,E),...I},...B,children:[r("div",{className:"flex min-w-0 flex-col [grid-area:1/1]",children:[e("div",{ref:Q,id:O,tabIndex:-1,className:o("min-w-0 outline-none",S?`${ee} ${re}`:"","[transition:filter_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",Y?"":"select-none"),style:{filter:Y?void 0:`blur(${k}px)`,maxHeight:Y?void 0:z,overflow:Y?void 0:"hidden"},...t(!Y),children:L}),w?e("div",{ref:U,className:o("flex justify-end",ee,re,"pt-0",Y?"":"invisible"),...t(!Y),children:e(a,{variant:"ghost",size:J,color:K,density:M,onClick:()=>change(!1),"aria-expanded":!0,"aria-controls":O,children:F})}):null]}),r("div",{ref:T,className:o("z-10 flex flex-col items-center justify-center gap-2 text-center [grid-area:1/1]",ee,re,"[background-color:color-mix(in_oklab,var(--plass-surface)_55%,transparent)]",Y?"invisible":""),...t(Y),children:[c(ie)?e("p",{className:o("m-0 text-(--plass-muted-fg)",d[J]),children:ie}):null,R??e(a,{size:J,color:K,density:M,onClick:()=>change(!0),"aria-expanded":!1,"aria-controls":O,children:D})]})]})});

package/dist/components/stack/PlStack.d.ts

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import type { PlassResponsive, PlassSize } from '../../types.js';
+/** Which way the pile grows. */
+export type PlStackDirection = 'horizontal' | 'vertical' | 'diagonal';
+/** Which end of the list is on top. */
+export type PlStackFront = 'first' | 'last';
+export interface PlStackProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the pile grows.
+     *
+     * `diagonal` is a **fan** rather than a true 45°, and it cannot be anything
+     * else: the horizontal advance is `item width − overlap`, and a component that
+     * takes arbitrary children does not know how wide they are. `drop` is the
+     * vertical step, stated separately, and the two are independent on purpose.
+     * @default 'horizontal'
+     */
+    direction?: PlassResponsive<PlStackDirection>;
+    /**
+     * How far each item sits under the one before it, along the axis the pile
+     * flows on — a number of pixels or any CSS length.
+     *
+     * Left out it is a fraction of `size`, which keeps the overlap looking the
+     * same at every step.
+     */
+    overlap?: number | string;
+    /**
+     * The step on the *other* axis, for `direction="diagonal"` only. Defaults to
+     * whatever `overlap` resolved to, which is a 45° fan for square items and a
+     * shallower one for anything wider than it is tall.
+     */
+    drop?: number | string;
+    /**
+     * Which rung of the ladder the default `overlap` comes off.
+     *
+     * It decides **nothing else**. A stack draws no surface of its own and has no
+     * type in it, so there is no height to set and no ink to colour — the items
+     * are whatever they already were.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** How many items are drawn. Left out, every one of them is. */
+    max?: number;
+    /**
+     * How many there are altogether, when the stack was handed only the first few.
+     * Without it the count is worked out from the children, which is right only
+     * when all of them were passed.
+     */
+    total?: number;
+    /**
+     * Draws a last item standing for the ones that did not fit, given how many
+     * that is: `(n) => <PlAvatar initials={`+${n}`} />`.
+     *
+     * A function rather than a node, because the number **is** the item — a node
+     * would have to be given a count it has no way to work out, and would then be
+     * wrong every time the list changed.
+     */
+    overflow?: (hidden: number) => React.ReactNode;
+    /**
+     * Which end of the list is on top.
+     *
+     * `last` is what the DOM does on its own and what a row of faces wants — the
+     * newest arrival in front. `first` is what a deck of cards is: the top card is
+     * the one you read first.
+     * @default 'last'
+     */
+    front?: PlStackFront;
+    /**
+     * What each item further back is multiplied by, compounding. `0.94` takes four
+     * steps down to about 78%.
+     *
+     * On the standalone `scale` property rather than inside a `transform`, so a
+     * caller's own transform on the same item survives.
+     * @default 1
+     */
+    scaleStep?: number;
+    /** The same, for opacity. @default 1 */
+    opacityStep?: number;
+    /**
+     * Draws a hairline of the page's own surface colour around each item, which
+     * is the *hole* the near item is cut out of rather than an edge on it.
+     *
+     * Two shapes of similar tone laid over each other have no boundary between
+     * them at all and the pile reads as one smeared shape. A translucent line
+     * would not help, because what is behind it is the other item.
+     *
+     * It lands on **the element you passed**, so it takes that element's shape.
+     * Wrap an avatar in something square and the ring is square; there is no way
+     * for a component that accepts arbitrary children to know better.
+     * @default false
+     */
+    ring?: boolean;
+    /** The things in the pile. */
+    children?: React.ReactNode;
+}
+/**
+ * Things piled up, overlapping.
+ *
+ * A row of faces is one arrangement of this and not a component of its own: a
+ * deck of cards, a pile of documents, a fan of thumbnails and a stack of avatars
+ * differ in what is in them, not in how they are laid out. So this takes
+ * whatever it is given and never looks inside.
+ *
+ * Which is also what it gives up. It cannot set an axis on its items the way a
+ * `PlAvatarGroup` used to, because it does not know what they are — put a
+ * `PlassProvider` around it for `size` and `color`, and write anything narrower
+ * on the items themselves.
+ *
+ * Two boxes are drawn per item rather than one, and the second is not spare. The
+ * outer one carries the offset and the stacking order; the inner one carries the
+ * depth, on the standalone `scale` and `opacity` properties. Kept on one box,
+ * an entrance animation that writes `scale` — every keyframe in this library
+ * that grows or zooms does — would overwrite the depth on its first frame.
+ */
+export declare const PlStack: React.ForwardRefExoticComponent<PlStackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/stack/PlStack.js

@@ -0,0 +1 @@
+"use client";import{jsx as r}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{cx as e,toLength as a}from"../../internal/styles.js";import{useResponsiveValue as i}from"../../internal/responsive.js";const n={xs:"0.5rem",sm:"0.625rem",md:"0.875rem",lg:"1rem",xl:"1.25rem"},s={horizontal:/* @__PURE__ */["flex-row","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--p-overlap)*-1)]"].join(" "),vertical:/* @__PURE__ */["flex-col","[&>*:not(:first-child)]:[margin-block-start:calc(var(--p-overlap)*-1)]"].join(" "),diagonal:/* @__PURE__ */["flex-row","[&>*:not(:first-child)]:[margin-inline-start:calc(var(--p-overlap)*-1)]"].join(" ")};export const PlStack=/* @__PURE__ */l.forwardRef(function PlStack({direction:o,overlap:c,drop:m,size:p,max:f,total:d,overflow:h,front:g="last",scaleStep:v=1,opacityStep:x=1,ring:u=!1,className:j,style:y,children:S,...k},z){const w=i(o,"horizontal"),N=t(),M=p??N.size??"md",P=void 0===c?n[M]:a(c),$=void 0===m?P:a(m),b=l.Children.toArray(S),A=void 0===f?b:b.slice(0,Math.max(0,f)),B=d??b.length,C=Math.max(0,B-A.length),I=h&&C>0?[...A,h(C)]:[...A];return r("div",{ref:z,className:e("isolate inline-flex items-start",s[w],u?"[&>*>*>*]:ring-2 [&>*>*>*]:ring-(--plass-surface)":"",j),style:{"--p-overlap":P,...y},...k,children:I.map((l,t)=>{const e="first"===g?t:I.length-1-t;return r("span",{className:"flex shrink-0",style:{zIndex:"first"===g?I.length-t:t+1,..."diagonal"===w&&t>0?{marginBlockStart:`calc(${$} * ${t})`}:null},children:r("span",{className:"flex",style:{...1===v?null:{scale:String(v**e)},...1===x?null:{opacity:x**e}},children:l})},t)})})});

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

@@ -0,0 +1,2 @@
+export { PlStack } from './PlStack.js';
+export type { PlStackDirection, PlStackFront, PlStackProps } from './PlStack.js';

package/dist/components/stack/index.js

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

package/dist/components/stat/PlStat.d.ts

@@ -21,6 +21,10 @@ export interface PlStatProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
     /**
      * How much it moved, as a percentage. Drawn with an arrow, and coloured by
      * whether that is good news rather than by its sign.
+     *
+     * Written to one decimal at most, with a sign on a rise: `+12.4%`, `-3%`. A
+     * change that rounds to 0 at that decimal is `0%`, with no arrow and in the
+     * muted colour.
      */
     change?: number;
     /**

package/dist/components/stat/PlStat.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{PlSkeleton as l}from"../skeleton/PlSkeleton.js";import{useDefaults as a}from"../../internal/defaults.js";import{controlSlots as n,cx as r,hasContent as i,metaTextClasses as c,stackGapClasses as o}from"../../internal/styles.js";const m={xs:"text-xl",sm:"text-2xl",md:"text-3xl",lg:"text-4xl",xl:"text-5xl"};function Arrow({up:t}){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[1em]",children:e("path",{d:t?"M8 12V4m0 0L4.5 7.5M8 4l3.5 3.5":"M8 4v8m0 0 3.5-3.5M8 12l-3.5-3.5",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStat=/* @__PURE__ */s.forwardRef(function PlStat({label:s,value:d,description:u,icon:p,change:x,changeLabel:f,improvesWhen:h="up",loading:g=!1,size:v,color:N,density:j,className:b,style:k,children:y,...w},z){const L=a(),M=v??L.size??"md",P=N??L.color??"primary",S=j??L.density??"default",A=void 0!==x&&0!==x,W=(x??0)>0,$=A&&("up"===h?W:!W),B=void 0!==x||i(f);return t("div",{ref:z,className:r("flex flex-col","compact"===S?"gap-0.5":o[M],b),style:{...n(P,0,"ghost"),...k},...w,children:[i(s)||i(p)?t("div",{className:r("flex items-center gap-1.5 text-(--plass-muted-fg)",c[M]),children:[i(p)?e("span",{"aria-hidden":"true",className:"flex items-center text-(--p-accent) [&_svg]:size-[1.15em]",children:p}):null,s]}):null,t("div",{className:"flex items-baseline gap-2",children:[g?e(l,{shape:"line",size:M,color:P,width:"6ch"}):e("span",{className:r("font-semibold text-(--plass-fg) tabular-nums",m[M]),children:d}),B&&!g?t("span",{className:r("flex items-center gap-0.5 font-medium tabular-nums",c[M],A?$?"text-(--plass-success-accent)":"text-(--plass-danger-accent)":"text-(--plass-muted-fg)"),children:[A?e(Arrow,{up:W}):null,f??`${W?"+":""}${x}%`]}):null]}),i(u)?e("div",{className:r("text-(--plass-muted-fg)",c[M]),children:u}):null,y]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{PlSkeleton as n}from"../skeleton/PlSkeleton.js";import{useDefaults as l}from"../../internal/defaults.js";import{controlSlots as a,cx as r,hasContent as i,metaTextClasses as o,stackGapClasses as c}from"../../internal/styles.js";const d={xs:"text-xl",sm:"text-2xl",md:"text-3xl",lg:"text-4xl",xl:"text-5xl"};function formatChange(e){const t=Number.isInteger(e)?e.toFixed(0):e.toFixed(1);return`${e>0?"+":""}${t}%`}function Arrow({up:t}){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[1em]",children:e("path",{d:t?"M8 12V4m0 0L4.5 7.5M8 4l3.5 3.5":"M8 4v8m0 0 3.5-3.5M8 12l-3.5-3.5",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStat=/* @__PURE__ */s.forwardRef(function PlStat({label:s,value:m,description:u,icon:x,change:p,changeLabel:f,improvesWhen:h="up",loading:g=!1,size:v,color:N,density:b,className:j,style:M,children:k,...y},w){const z=l(),C=v??z.size??"md",L=N??z.color??"primary",P=b??z.density??"default",S=void 0===p?void 0:function roundChange(e){const t=Math.sign(e)*Math.round(10*Math.abs(e))/10;return 0===t?0:t}(p),A=void 0!==S&&0!==S,F=(S??0)>0,W=A&&("up"===h?F:!F),$=void 0!==p||i(f);return t("div",{ref:w,className:r("flex flex-col","compact"===P?"gap-0.5":c[C],j),style:{...a(L,0,"ghost"),...M},...y,children:[i(s)||i(x)?t("div",{className:r("flex items-center gap-1.5 text-(--plass-muted-fg)",o[C]),children:[i(x)?e("span",{"aria-hidden":"true",className:"flex items-center text-(--p-accent) [&_svg]:size-[1.15em]",children:x}):null,s]}):null,t("div",{className:"flex items-baseline gap-2",children:[g?e(n,{shape:"line",size:C,color:L,width:"6ch"}):e("span",{className:r("font-semibold text-(--plass-fg) tabular-nums",d[C]),children:m}),$&&!g?t("span",{className:r("flex items-center gap-0.5 font-medium tabular-nums",o[C],A?W?"text-(--plass-success-accent)":"text-(--plass-danger-accent)":"text-(--plass-muted-fg)"),children:[A?e(Arrow,{up:F}):null,f??formatChange(S??0)]}):null]}),i(u)?e("div",{className:r("text-(--plass-muted-fg)",o[C]),children:u}):null,k]})});

package/dist/components/stepper/PlStepper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.js';
-import type { PlassColor, PlassDensity, PlassOrientation, PlassSize } from '../../types.js';
+import type { PlassColor, PlassDensity, PlassOrientation, PlassResponsive, PlassSize } from '../../types.js';
 /** The same three a `PlTimeline` draws, and the same marks. */
 export type PlStepStatus = PlassStepStatus;
 /** How the line between two steps is drawn. `none` leaves the gap open. */
@@ -22,7 +22,7 @@ export interface PlStepperProps extends Omit<React.ComponentPropsWithoutRef<'div
      */
     linear?: boolean;
     /** @default 'horizontal' */
-    orientation?: PlassOrientation;
+    orientation?: PlassResponsive<PlassOrientation>;
     /** How the line between two steps is drawn. @default 'solid' */
     connector?: PlStepConnector;
     /** @default 'md' */
@@ -57,7 +57,7 @@ export interface PlStepProps extends Omit<React.ComponentPropsWithoutRef<'li'>,
     disabled?: boolean;
     /** Overrides the stepper's family for this one step. */
     color?: PlassColor;
-    /** The panel this step shows while it is the current one. */
+    /** The panel this step shows while the stepper's `active` is on it, whatever `status` says. */
     children?: React.ReactNode;
 }
 /**

package/dist/components/stepper/PlStepper.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as s,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as o,statusAt as c,titleStatusClasses as d}from"../../internal/steps.js";import{cx as u,focusRingClasses as m,hasContent as p,iconClasses as f,metaTextClasses as x,radiusClasses as h,sheetBodyClasses as v,sheetTitleClasses as b,surfaceSlots as N,transitionClasses as w}from"../../internal/styles.js";const y=/* @__PURE__ */t.createContext(null),z=/* @__PURE__ */t.createContext({index:0,last:!1});function StepTick(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[0.7em]",children:e("path",{d:"m3.5 8.5 3 3 6-7",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStepper=/* @__PURE__ */t.forwardRef(function PlStepper({active:n,defaultActive:s=0,onActiveChange:a,linear:i=!0,orientation:o="horizontal",connector:c="solid",size:d,color:m,density:f,className:x,style:h,children:b,...w},k){const C=r(),S=d??C.size??"md",g=m??C.color??"primary",j=f??C.density??"default",[P,$]=t.useState(s),A=n??P,I=t.useId(),L=t.useCallback(e=>{void 0===n&&$(e),a?.(e)},[n,a]),R=t.Children.toArray(b),T=R.length,B=t.useMemo(()=>({size:S,density:j,orientation:o,color:g,active:A,linear:i,connector:c,baseId:I,onSelect:L}),[S,j,o,g,A,i,c,I,L]),M="horizontal"===o,O=M?R[A]?.props?.children:null;return e(y.Provider,{value:B,children:l("div",{ref:k,className:u("flex w-full flex-col",x),style:{...N(g,0),...h},...w,children:[e("ol",{role:"list",className:u("flex w-full",M?"flex-row":"flex-col"),children:R.map((l,t)=>e(z.Provider,{value:{index:t,last:t===T-1},children:l},t))}),p(O)?e("div",{"aria-labelledby":`${I}-${A}`,className:u("mt-4",v[S]),children:O}):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:r,description:k,bullet:C,status:S,optional:g,disabled:j=!1,color:P,className:$,children:A,...I},L){const R=t.useContext(y),{index:T,last:B}=t.useContext(z),M=R?.size??"md",O=R?.orientation??"horizontal",W=P??R?.color??"primary",q=R?.active??null,D=R?.connector??"solid",E=S??c(T,q),F="horizontal"===O,G=!j&&null!==R&&(!R.linear||T<=R.active),H="none"!==D&&!B,J=e("span",{"aria-hidden":"true",className:u("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",a[E],w,f),children:C??("complete"===E?e(StepTick,{}):T+1)}),K=l("span",{className:u("flex min-w-0 flex-col",F?"items-center text-center":""),children:[e("span",{id:R?`${R.baseId}-${T}`:void 0,className:u("font-semibold",b[M],d[E]),children:r}),p(k)?e("span",{className:u("text-(--plass-muted-fg)",x[M]),children:k}):null,g?e("span",{className:u("text-(--plass-muted-fg) italic",x[M]),children:!0===g?"Optional":g}):null]}),Q=l("span",{className:u("flex items-center",F?"flex-col":"flex-row",n[M]),children:[J,F?K:null]}),U=G?l("button",{type:"button","aria-current":"current"===E?"step":void 0,onClick:()=>R?.onSelect(T),className:u("flex cursor-pointer items-center bg-transparent p-1",F?"flex-col":"flex-row",n[M],h[M],m,w,"hover:bg-(--p-soft)"),children:[F?Q:J,F?null:K]}):l("span",{"aria-current":"current"===E?"step":void 0,className:u("flex items-center p-1",F?"flex-col":"flex-row",n[M],j?"opacity-50":""),children:[F?Q:J,F?null:K]});return l("li",{ref:L,className:u("relative flex min-w-0",F?"flex-1 flex-col items-center":"flex-col",$),style:{"--p-bullet":s[M],...N(W,0),"--p-fill":`var(--plass-${W}-fill)`,"--p-on-solid":`var(--plass-${W}-on-solid)`},...I,children:[l("span",{className:u("flex w-full",F?"flex-row items-start":"flex-col"),children:[U,H?e("span",{"aria-hidden":"true",className:u(F?"mt-[calc(var(--p-bullet)/2+0.25rem)] h-0 flex-1 border-t":"ms-[calc(var(--p-bullet)/2+0.25rem)] w-0 flex-1 self-stretch border-s",o[D],i[E],w)}):null]}),!F&&"current"===E&&p(A)?e("div",{className:u("ms-[calc(var(--p-bullet)+0.75rem)] pt-2 pb-4",v[M]),children:A}):null]})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as s,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as o,statusAt as c,titleStatusClasses as d}from"../../internal/steps.js";import{cx as m,focusRingClasses as p,hasContent as u,iconClasses as f,metaTextClasses as x,radiusClasses as h,sheetBodyClasses as v,sheetTitleClasses as b,surfaceSlots as N,transitionClasses as w}from"../../internal/styles.js";import{useLabels as y}from"../../internal/labels.js";import{useResponsiveValue as z}from"../../internal/responsive.js";const j=/* @__PURE__ */t.createContext(null),g=/* @__PURE__ */t.createContext({index:0,last:!1});function StepTick(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[0.7em]",children:e("path",{d:"m3.5 8.5 3 3 6-7",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStepper=/* @__PURE__ */t.forwardRef(function PlStepper({active:n,defaultActive:s=0,onActiveChange:a,linear:i=!0,orientation:o,connector:c="solid",size:d,color:p,density:f,className:x,style:h,children:b,...w},y){const k=z(o,"horizontal"),C=r(),S=d??C.size??"md",P=p??C.color??"primary",$=f??C.density??"default",[A,I]=t.useState(s),L=n??A,R=t.useId(),T=t.useCallback(e=>{void 0===n&&I(e),a?.(e)},[n,a]),B=t.Children.toArray(b),M=B.length,W=t.useMemo(()=>({size:S,density:$,orientation:k,color:P,active:L,linear:i,connector:c,baseId:R,onSelect:T}),[S,$,k,P,L,i,c,R,T]),q="horizontal"===k,D=q?B[L]?.props?.children:null;return e(j.Provider,{value:W,children:l("div",{ref:y,className:m("flex w-full flex-col",x),style:{...N(P,0),...h},...w,children:[e("ol",{role:"list",className:m("flex w-full",q?"flex-row":"flex-col"),children:B.map((l,t)=>e(g.Provider,{value:{index:t,last:t===M-1},children:l},t))}),u(D)?e("div",{role:"group","aria-labelledby":`${R}-${L}`,className:m("mt-4",v[S]),children:D}):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:r,description:z,bullet:k,status:C,optional:S,disabled:P=!1,color:$,className:A,children:I,...L},R){const T=t.useContext(j),{index:B,last:M}=t.useContext(g),W=y(),q=T?.size??"md",D=T?.orientation??"horizontal",E=$??T?.color??"primary",F=T?.active??null,G=T?.connector??"solid",H=C??c(B,F),J="horizontal"===D,K=!P&&null!==T&&(!T.linear||B<=T.active),O="none"!==G&&!M,Q=e("span",{"aria-hidden":"true",className:m("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",a[H],w,f),children:k??("complete"===H?e(StepTick,{}):B+1)}),U=l("span",{className:m("flex min-w-0 flex-col",J?"items-center text-center":""),children:[e("span",{id:T?`${T.baseId}-${B}`:void 0,className:m("font-semibold",b[q],d[H]),children:r}),u(z)?e("span",{className:m("text-(--plass-muted-fg)",x[q]),children:z}):null,S?e("span",{className:m("text-(--plass-muted-fg) italic",x[q]),children:!0===S?W.optional:S}):null]}),V=l("span",{className:m("flex items-center",J?"flex-col":"flex-row",n[q]),children:[Q,J?U:null]}),X=K?l("button",{type:"button","aria-current":"current"===H?"step":void 0,onClick:()=>T?.onSelect(B),className:m("flex cursor-pointer items-center bg-transparent p-1",J?"flex-col":"flex-row",n[q],h[q],p,w,"hover:bg-(--p-soft)"),children:[J?V:Q,J?null:U]}):l("span",{"aria-current":"current"===H?"step":void 0,className:m("flex items-center p-1",J?"flex-col":"flex-row",n[q],P?"opacity-50":""),children:[J?V:Q,J?null:U]});return l("li",{ref:R,className:m("relative flex min-w-0",J?"flex-1 flex-col items-center":"flex-col",A),style:{"--p-bullet":s[q],...N(E,0),"--p-fill":`var(--plass-${E}-fill)`,"--p-on-solid":`var(--plass-${E}-on-solid)`},...L,children:[l("span",{className:m("flex w-full",J?"flex-row items-start":"flex-col"),children:[X,O?e("span",{"aria-hidden":"true",className:m(J?"mt-[calc(var(--p-bullet)/2+0.25rem)] h-0 flex-1 border-t":"ms-[calc(var(--p-bullet)/2+0.25rem)] w-0 flex-1 self-stretch border-s",o[G],i[H],w)}):null]}),!J&&B===F&&u(I)?e("div",{className:m("ms-[calc(var(--p-bullet)+0.75rem)] pt-2 pb-4",v[q]),children:I}):null]})});

package/dist/components/switch/PlSwitch.js

@@ -1 +1 @@
-"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Switch as l}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{controlSlots as c,cx as n,focusRingClasses as o,hasContent as d,metaTextClasses as h,tickRowTextClasses as m}from"../../internal/styles.js";const p={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},u={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},f=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition-property:background-color,background-image,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",o].join(" "),g=/* @__PURE__ */["cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),b=/* @__PURE__ */["cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:shadow-none"].join(" "),x=/* @__PURE__ */["cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[background-image:var(--p-fill)]"].join(" "),k=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:o,label:w,description:v,error:j,invalid:N,labelPlacement:y="end",disabled:_=!1,readOnly:P=!1,className:R,classNames:S,style:$,...z},B){const O=s(),q=t??O.size??"md",D=o??O.color??"primary",E=d(j),F=N??E,L=F?"danger":D,T=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(l.Root,{ref:B,className:n(f,p[q],_?x:P?b:g,S?.control),disabled:_,readOnly:P,...z,children:a(l.Thumb,{className:`${k} ${u[q]}`})})}),A=w||v?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===y?"flex-1":""].filter(Boolean).join(" "),children:[w?a(i.Label,{className:n(_?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",S?.label),children:w}):null,v?a(i.Description,{className:n(h[q],"text-(--plass-muted-fg)",S?.description),children:v}):null]}):null;return e(i.Root,{disabled:_,invalid:F,className:["inline-flex flex-col gap-1 align-top",R??""].filter(Boolean).join(" "),style:{...c(L,0,"solid"),...$},children:[a("div",{className:`flex items-start gap-2.5 ${m[q]}`,children:e(r,"start"===y?{children:[A,T]}:{children:[T,A]})}),a(i.Error,E?{match:!0,className:n(h[q],"text-(--p-accent)",S?.error),children:j}:{className:n(h[q],"text-(--p-accent)",S?.error)})]})});
+"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Switch as s}from"@base-ui/react/switch";import{Field as l}from"@base-ui/react/field";import{controlSlots as c,cx as i,focusRingClasses as n,hasContent as d,metaTextClasses as h,tickRowTextClasses as m}from"../../internal/styles.js";const p={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},f={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},u=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition-property:background-color,background-image,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]",n].join(" "),g=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),b=/* @__PURE__ */[g,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),x=/* @__PURE__ */[g,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:shadow-none"].join(" "),k=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[background-image:var(--p-fill)]"].join(" "),w=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:n,label:g,description:v,error:j,invalid:N,labelPlacement:y="end",disabled:_=!1,readOnly:T=!1,className:P,classNames:R,style:S,...$},z){const B=o(),C=t??B.size??"md",H=n??B.color??"primary",O=d(j),q=N??O,D=q?"danger":H,E=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(s.Root,{ref:z,className:i(u,p[C],_?k:T?x:b,R?.control),disabled:_,readOnly:T,...$,children:a(s.Thumb,{className:`${w} ${f[C]}`})})}),F=g||v?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===y?"flex-1":""].filter(Boolean).join(" "),children:[g?a(l.Label,{className:i(_?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",R?.label),children:g}):null,v?a(l.Description,{className:i(h[C],"text-(--plass-muted-fg)",R?.description),children:v}):null]}):null;return e(l.Root,{disabled:_,invalid:q,className:["inline-flex flex-col gap-1 align-top",P??""].filter(Boolean).join(" "),style:{...c(D,0,"solid"),...S},children:[a("div",{className:`flex items-start gap-2.5 ${m[C]}`,children:e(r,"start"===y?{children:[F,E]}:{children:[E,F]})}),a(l.Error,O?{match:!0,className:i(h[C],"text-(--p-accent)",R?.error),children:j}:{className:i(h[C],"text-(--p-accent)",R?.error)})]})});

package/dist/components/table/PlTable.d.ts

@@ -71,11 +71,11 @@ export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.Component
     /**
      * Pins the header while the rows scroll under it.
      *
-     * It needs something to scroll *in*: a `position: sticky` header in a box
-     * that is as tall as its content has nowhere to stick, so this does nothing
-     * on its own. `maxHeight` is the usual answer and the two are made for each
-     * other; a table inside a pane that already caps its own height works just as
-     * well.
+     * It needs `maxHeight`. A `position: sticky` header sticks to the nearest box
+     * that scrolls, and here that is the table's own horizontal scroller, which
+     * without a cap is as tall as its content and has nowhere to stick. A pane
+     * around the table that scrolls or caps its own height does not change that,
+     * so this does nothing on its own.
      * @default false
      */
     stickyHeader?: boolean;

package/dist/components/table/PlTable.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{controlTextLeadingClasses as a,focusRingInsetClasses as t,metaTextClasses as l,paddingXValues as s,radiusClasses as o,sheetRestClasses as n,srOnlyClasses as i,surfaceSlots as d}from"../../internal/styles.js";const c={default:{xs:"0.375rem",sm:"0.5rem",md:"0.75rem",lg:"0.875rem",xl:"1rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.4375rem",lg:"0.5625rem",xl:"0.6875rem"}},p={display:"table",width:"100%",margin:0,borderCollapse:"collapse",borderSpacing:0},m=/* @__PURE__ */["[--p-row:transparent]","[transition:background-color_var(--plass-duration)_var(--plass-ease)]"].join(" "),g=/* @__PURE__ */["cursor-pointer [outline:none]",t].join(" "),h="1px solid var(--plass-divider)";export function PlTable({variant:t="glass",size:v="md",color:y="primary",density:u="default",elevation:x=0,columns:f,rows:b,getRowKey:w,caption:k,empty:N="No data",striped:j=!1,hoverable:B=!1,stickyHeader:$=!1,maxHeight:A,onRowClick:C,className:H,style:S,...T}){const z=s[u][v],D=c[u][v],K=Boolean(C),R=B||K,_=void 0!==A,E={padding:`${D} ${z}`,border:0,background:"none"},I={...E,...$?{boxShadow:"inset 0 -1px 0 var(--plass-border)"}:{borderBottom:"1px solid var(--plass-border)"},...$?{background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:null},bodyCellStyle=e=>0===e?E:{...E,borderTop:h};return r("div",{className:["overflow-hidden",o[v],n[t],H??""].filter(Boolean).join(" "),style:{...d(y,x),...S},...T,children:[k?e("div",{"aria-hidden":"true",className:`${l[v]} font-semibold text-(--plass-muted-fg)`,style:{...E,borderBottom:h,textAlign:"start"},children:k}):null,e("div",{className:["overflow-x-auto",_?"overflow-y-auto overscroll-contain":""].filter(Boolean).join(" "),style:_?{maxHeight:A}:void 0,children:r("table",{className:`text-start ${a[v]} text-(--plass-fg)`,style:p,children:[k?e("caption",{className:i,children:k}):null,e("colgroup",{children:f.map(r=>e("col",{style:void 0===r.width?void 0:{width:"number"==typeof r.width?`${r.width}px`:r.width}},r.key))}),e("thead",{children:e("tr",{children:f.map(r=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--plass-muted-fg)",$?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...I,textAlign:r.align??"start"},children:r.header??r.key},r.key))})}),e("tbody",{children:0===b.length?e("tr",{className:m,children:e("td",{colSpan:f.length,className:"text-(--plass-muted-fg)",style:{...E,padding:`2rem ${z}`,textAlign:"center"},children:N})}):b.map((r,a)=>e("tr",{className:[m,j&&a%2==1?"[--p-row:var(--plass-stripe)]":"",R?"hover:[--p-row:var(--p-soft)]":"",K?g:""].filter(Boolean).join(" "),style:{backgroundColor:"var(--p-row)"},tabIndex:K?0:void 0,onClick:C?()=>C(r,a):void 0,onKeyDown:C?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),C(r,a)))}:void 0,children:f.map(t=>e("td",{style:{...bodyCellStyle(a),textAlign:t.align??"start"},children:t.render?t.render(r,a):r[t.key]},t.key))},w?w(r,a):a))})]})})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{controlTextLeadingClasses as r,metaTextClasses as a,paddingXValues as l,radiusClasses as o,sheetRestClasses as s,srOnlyClasses as n,surfaceSlots as i}from"../../internal/styles.js";import{cellPaddingYValues as d,clickableRowClasses as c,headRule as p,rowClasses as m,rowRule as h,tableStyle as g}from"../../internal/table.js";export function PlTable({variant:y="glass",size:v="md",color:f="primary",density:u="default",elevation:x=0,columns:b,rows:w,getRowKey:k,caption:N,empty:j="No data",striped:B=!1,hoverable:$=!1,stickyHeader:A=!1,maxHeight:C,onRowClick:H,className:T,style:z,...D}){const K=l[u][v],R=d[u][v],S=Boolean(H),E=$||S,I=void 0!==C,P={padding:`${R} ${K}`,border:0,background:"none"},q={...P,...A?{boxShadow:"inset 0 -1px 0 var(--plass-border)"}:{borderBottom:p},...A?{background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:null},bodyCellStyle=e=>0===e?P:{...P,borderTop:h};return t("div",{className:["overflow-hidden",o[v],s[y],T??""].filter(Boolean).join(" "),style:{...i(f,x),...z},...D,children:[N?e("div",{"aria-hidden":"true",className:`${a[v]} font-semibold text-(--plass-muted-fg)`,style:{...P,borderBottom:h,textAlign:"start"},children:N}):null,e("div",{className:["overflow-x-auto",I?"overflow-y-auto overscroll-contain":""].filter(Boolean).join(" "),style:I?{maxHeight:C}:void 0,children:t("table",{className:`text-start ${r[v]} text-(--plass-fg)`,style:g,children:[N?e("caption",{className:n,children:N}):null,e("colgroup",{children:b.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:b.map(t=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--plass-muted-fg)",A?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...q,textAlign:t.align??"start"},children:t.header??t.key},t.key))})}),e("tbody",{children:0===w.length?e("tr",{className:m,children:e("td",{colSpan:b.length,className:"text-(--plass-muted-fg)",style:{...P,padding:`2rem ${K}`,textAlign:"center"},children:j})}):w.map((t,r)=>e("tr",{className:[m,B&&r%2==1?"[--p-row:var(--plass-stripe)]":"",E?"hover:[--p-row:var(--p-soft)]":"",S?c:""].filter(Boolean).join(" "),style:{backgroundColor:"var(--p-row)"},tabIndex:S?0:void 0,onClick:H?()=>H(t,r):void 0,onKeyDown:H?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),H(t,r)))}:void 0,children:b.map(a=>e("td",{style:{...bodyCellStyle(r),textAlign:a.align??"start"},children:a.render?a.render(t,r):t[a.key]},a.key))},k?k(t,r):r))})]})})]})}

package/dist/components/tabs/PlTabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassOrientation, PlassStyleProps, PlassVariant } from '../../types.js';
+import type { PlassOrientation, PlassOverscroll, PlassResponsive, PlassStyleProps, PlassVariant } from '../../types.js';
 /** A tab's value. The same restraint `PlSelect` puts on its own — an identifier. */
 export type PlTabValue = string | number;
 export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
@@ -28,7 +28,7 @@ export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<Reac
      * UI's doing, and is what makes a vertical tab bar reachable.
      * @default 'horizontal'
      */
-    orientation?: PlassOrientation;
+    orientation?: PlassResponsive<PlassOrientation>;
     /**
      * Whether moving the arrow keys also chooses the tab it lands on.
      *
@@ -45,6 +45,31 @@ export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<Reac
     loopFocus?: boolean;
     /** The tabs share the bar's full width, each taking an equal part of it. */
     fullWidth?: boolean;
+    /**
+     * Whether a vertical wheel over a bar with more tabs than room moves it along.
+     *
+     * A mouse has one wheel and it points down the page, which is the one
+     * direction a tab bar does not run in — so a reader who can see that there are
+     * more tabs has no way of reaching them but the scrollbar that is deliberately
+     * not drawn, or the arrow keys, which also change the selection. The bar is
+     * the same scroller a `PlScrollZone` is and answers the wheel the same way.
+     *
+     * Only while the bar overflows, and only across: a bar that runs down the side
+     * scrolls with the page, and a bar whose tabs all fit is not a scroller at
+     * all.
+     * @default true
+     */
+    wheel?: boolean;
+    /**
+     * What the bar does with a wheel it has run out of tabs for.
+     *
+     * `contain`, the default, keeps it, so a reader working along a long bar is
+     * not thrown down the page by the notch that arrives after the last tab.
+     * `auto` is the browser's own chaining, held only for as long as the gesture
+     * lasts. A bar whose tabs all fit holds nothing back either way.
+     * @default 'contain'
+     */
+    overscroll?: PlassOverscroll;
     children?: React.ReactNode;
 }
 export interface PlTabProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'color'> {

package/dist/components/tabs/PlTabs.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as i,focusRingClasses as n,focusRingInsetClasses as r,gapClasses as c,glassClasses as d,hasContent as h,iconClasses as f,paddingXClasses as u,radiusClasses as p,surfaceSlots as b,transitionClasses as v}from"../../internal/styles.js";const m=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),x={solid:{horizontal:`${d} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`,vertical:`${d} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},g={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},w={solid:`${d} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},z="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:n,endIcon:d,disabled:b=!1,className:x,children:g,...w},y){const{variant:P,size:j,density:N,fullWidth:T}=a.useContext(m);return t(o.Tab,{ref:y,value:l,disabled:b,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]",s[j],i[j],c[j],u[N][j],"solid"===P?p[j]:"",v,f,z,r,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",T?"flex-1":"",x??""].filter(Boolean).join(" "),...w,children:[h(n)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:n}):null,g,h(d)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:d}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:s,children:i,...r},c){const{size:d}=a.useContext(m);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",n,p[d],s??""].filter(Boolean).join(" "),...r,children:i})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:s="glass",size:i,color:n,density:r,value:c,defaultValue:d,onValueChange:h,orientation:f="horizontal",activateOnFocus:u=!1,loopFocus:v=!0,fullWidth:z=!1,className:y,style:P,children:j,...N},T){const k=l(),C=i??k.size??"md",V=n??k.color??"primary",B=r??k.density??"default",F=a.useMemo(()=>({variant:s,size:C,density:B,orientation:f,fullWidth:z}),[s,C,B,f,z]),R=[],W=[];return a.Children.forEach(j,e=>{a.isValidElement(e)&&e.type===PlTabPanel?W.push(e):null!=e&&!1!==e&&R.push(e)}),e(m.Provider,{value:F,children:t(o.Root,{ref:T,value:c,defaultValue:d,onValueChange:e=>h?.(e),orientation:f,className:["flex min-w-0","vertical"===f?"flex-row gap-4":"flex-col gap-4",y??""].filter(Boolean).join(" "),style:{...b(V,0),...P},...N,children:[t(o.List,{activateOnFocus:u,loopFocus:v,className:["relative shrink-0",x[s][f],"solid"===s?p[C]:"",z&&"horizontal"===f?"w-full":"","horizontal"===f?"overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),children:[R,e(o.Indicator,{className:["pointer-events-none",g[s][f],w[s],"solid"===s?p[C]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),W]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as r,focusRingClasses as i,focusRingInsetClasses as n,forcedFieldEdgeClasses as c,forcedFillClasses as d,gapClasses as f,glassClasses as h,hasContent as u,iconClasses as p,paddingXClasses as v,radiusClasses as b,surfaceSlots as m,transitionClasses as g}from"../../internal/styles.js";import{useResponsiveValue as x}from"../../internal/responsive.js";import{overscrollClasses as w,useWheelScroll as y}from"../../internal/wheel.js";const z=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),j={solid:{horizontal:`${h} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`,vertical:`${h} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},P={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},N={solid:`${h} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},T="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:i,endIcon:c,disabled:d=!1,className:h,children:m,...x},w){const{variant:y,size:j,density:P,fullWidth:N}=a.useContext(z);return t(o.Tab,{ref:w,value:l,disabled:d,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]",s[j],r[j],f[j],v[P][j],"solid"===y?b[j]:"",g,p,T,"solid"===y?"forced-colors:data-[active]:[color:HighlightText]":"",n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",N?"flex-1":"",h??""].filter(Boolean).join(" "),...x,children:[u(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,m,u(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:s,children:r,...n},c){const{size:d}=a.useContext(z);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",i,b[d],s??""].filter(Boolean).join(" "),...n,children:r})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:s="glass",size:r,color:i,density:n,value:c,defaultValue:f,onValueChange:h,orientation:u,activateOnFocus:p=!1,loopFocus:v=!0,fullWidth:g=!1,wheel:T=!0,overscroll:k="contain",className:C,style:R,children:S,...V},W){const E=x(u,"horizontal"),F=l(),O=r??F.size??"md",$=i??F.color??"primary",B=n??F.density??"default",L=a.useMemo(()=>({variant:s,size:O,density:B,orientation:E,fullWidth:g}),[s,O,B,E,g]),M=a.useRef(null),I="horizontal"===E,H=function useListOverflow(e,t){const[l,o]=a.useState({start:!1,end:!1,rtl:!1}),s=a.useCallback(()=>{const t=e.current;if(!t)return;const a=t.scrollWidth-t.clientWidth,l=Math.abs(t.scrollLeft),s={start:l>1,end:a-l>1,rtl:"rtl"===getComputedStyle(t).direction};o(e=>e.start===s.start&&e.end===s.end&&e.rtl===s.rtl?e:s)},[e]);return a.useLayoutEffect(()=>{t&&s()}),a.useEffect(()=>{const a=e.current;if(!a||!t||"undefined"==typeof ResizeObserver)return;const l=new ResizeObserver(s);return l.observe(a),()=>l.disconnect()},[t,s,e]),t?{style:{"--p-fade-left":(l.rtl?l.end:l.start)?"var(--p-fade)":void 0,"--p-fade-right":(l.rtl?l.start:l.end)?"var(--p-fade)":void 0},onScroll:s,state:l.start?l.end?"both":"start":l.end?"end":"none"}:{style:void 0,onScroll:void 0,state:void 0}}(M,I);y(M,{enabled:T&&I,overscroll:k});const q=[],A=[],sort=e=>{a.Children.forEach(e,e=>{a.isValidElement(e)&&e.type===a.Fragment?sort(e.props.children):a.isValidElement(e)&&e.type===PlTabPanel?A.push(e):null!=e&&!1!==e&&q.push(e)})};return sort(S),e(z.Provider,{value:L,children:t(o.Root,{ref:W,value:c,defaultValue:f,onValueChange:e=>h?.(e),orientation:E,className:["flex min-w-0","vertical"===E?"flex-row gap-4":"flex-col gap-4",C??""].filter(Boolean).join(" "),style:{...m($,0),...R},...V,children:[t(o.List,{ref:M,activateOnFocus:p,loopFocus:v,className:["relative shrink-0",j[s][E],"solid"===s?b[O]:"",g&&I?"w-full":"",I?"plass-fade-x overflow-x-auto overflow-y-hidden":"",I?w(k,!0):""].filter(Boolean).join(" "),style:H.style,onScroll:H.onScroll,"data-overflow":H.state,children:[q,e(o.Indicator,{className:["pointer-events-none",P[s][E],N[s],d,"solid"===s?b[O]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),A]})})});

package/dist/components/text-link/PlTextLink.js

@@ -1 +1 @@
-"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useRender as i}from"@base-ui/react/use-render";import{ExternalLinkIcon as l,LinkIcon as a}from"../../internal/icons.js";import{controlTextLeadingClasses as o,focusRingClasses as t,srOnlyClasses as c}from"../../internal/styles.js";import{safeRel as p}from"../../internal/link.js";const m={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},d=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),t,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:t,underline:u="always",color:f,size:v,newTab:h=!1,icon:k,startIcon:x,newTabLabel:b="(opens in a new tab)",render:g,className:j,style:y,children:w,..._},N){const T=k??h,L=!0===T?n(h?l:a,{}):T,z=[d,v?o[v]:"",m[u],f?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",j??""].filter(Boolean).join(" "),C={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${f??"primary"}-ring)`,...f?{"--p-accent":`var(--plass-${f}-accent)`}:null},P=s.isValidElement(g)&&void 0!==g.props.href,{rel:$,...B}=_,E=p(h?"_blank":void 0,$);return i({render:g??n("a",{}),ref:N,props:{...P?null:{href:t},target:h?"_blank":void 0,className:z,style:{...C,...y},children:r(e,{children:[x?n("span",{className:"me-[0.25em]",children:x}):null,w,L?n("span",{className:"ms-[0.25em]",children:L}):null,h?r(e,{children:[" ",n("span",{className:c,children:b})]}):null]}),...B,rel:E}})});
+"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as l}from"../../internal/labels.js";import{useRender as i}from"@base-ui/react/use-render";import{ExternalLinkIcon as a,LinkIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as t,focusRingClasses as c,srOnlyClasses as p}from"../../internal/styles.js";import{safeRel as m}from"../../internal/link.js";const d={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},u=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:c,underline:f="always",color:h,size:v,newTab:k=!1,icon:b,startIcon:g,newTabLabel:j,render:x,className:y,style:w,children:_,...N},T){const L=l(),z=j??L.newTab,C=b??k,P=!0===C?n(k?a:o,{}):C,$=[u,v?t[v]:"",d[f],h?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",y??""].filter(Boolean).join(" "),B={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${h??"primary"}-ring)`,...h?{"--p-accent":`var(--plass-${h}-accent)`}:null},E=s.isValidElement(x)&&void 0!==x.props.href,{rel:F,target:I,...R}=N,V=I??(k?"_blank":void 0),q=k||"_blank"===V,A=m(V,F);return i({render:x??n("a",{}),ref:T,props:{...E?null:{href:c},target:V,className:$,style:{...B,...w},children:r(e,{children:[g?n("span",{className:"me-[0.25em]",children:g}):null,_,P?n("span",{className:"ms-[0.25em]",children:P}):null,q?r(e,{children:[" ",n("span",{className:p,children:z})]}):null]}),...R,rel:A}})});

package/dist/components/time-picker/PlTimePicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{useDefaults as l}from"../../internal/defaults.js";import{PlButton as t}from"../button/PlButton.js";import{TimeGrid as s,usePickerLabels as i}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as r,PickerShell as c}from"../../internal/picker.js";import{displaySamples as d,formatDate as u,isHour12 as m,isValidDate as p,secondsOfDay as h,timeUnitSpan as f,toISOTime as g,withPlaceholder as y,withTime as S}from"../../internal/date.js";import{cx as b}from"../../internal/styles.js";export const PlTimePicker=/* @__PURE__ */o.forwardRef(function PlTimePicker({value:v,defaultValue:j,onValueChange:C,open:w,defaultOpen:z,onOpenChange:k,referenceDate:x,minTime:D,maxTime:O,shouldDisableTime:T,hour12:P,showSeconds:M=!1,hourStep:V=1,minuteStep:B=1,secondStep:I=1,locale:N,format:R,placeholder:F,clearable:H=!1,showNowButton:q=!0,closeOnSelect:A=!1,labels:E,name:G,size:J,color:K,density:L,readOnly:Q=!1,disabled:U=!1,startIcon:W,...X},Y){const Z=l(),$=N??Z.locale,_=J??Z.size??"md",ee=K??Z.color??"primary",ne=L??Z.density??"default",oe=i(E),le=P??m($),[te,se]=o.useState(j??null),ie=void 0!==v?v:te,[ae,re]=o.useState(z??!1),ce=w??ae,[de]=o.useState(()=>x??new Date),setOpen=e=>{e&&(Q||U)||(void 0===w&&re(e),k?.(e))},commit=e=>{void 0===v&&se(e),C?.(e)},ue=o.useCallback((e,n)=>{const[o,l]=f(n,e);return!!(p(D)&&l<h(D))||!!(p(O)&&o>h(O))||(T?.(e,n)??!1)},[D,O,T]),me=o.useMemo(()=>R??{hour:"numeric",minute:"2-digit",...M?{second:"2-digit"}:{}},[R,M]),pe=new Date,he=S(x??de,{hours:pe.getHours(),minutes:pe.getMinutes(),seconds:M?pe.getSeconds():0}),fe=q||H||!A,ge=o.useMemo(()=>y(d($,me),F),[$,me,F]);return e(c,{...X,size:_,color:ee,density:ne,readOnly:Q,disabled:U,triggerRef:Y,startIcon:W??e(a,{}),display:p(ie)?u(ie,$,me):F??"",samples:ge,empty:!p(ie),clearable:H,onClear:()=>commit(null),open:ce,onOpenChange:setOpen,labels:oe,hiddenValues:G?[{name:G,value:p(ie)?g(ie,M):""}]:void 0,children:n("div",{className:b("flex flex-col",fe&&"gap-1.5"),children:[e(s,{size:_,density:ne,locale:$,value:p(ie)?ie:null,referenceDate:x??de,onChange:e=>{commit(e),A&&setOpen(!1)},hour12:le,showSeconds:M,hourStep:V,minuteStep:B,secondStep:I,shouldDisableTime:ue,labels:oe,autoFocus:!0}),fe?n(r,{size:_,children:[H?e(t,{variant:"ghost",size:_,color:ee,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:oe.clear}):null,q?e(t,{variant:"ghost",size:_,color:ee,density:"compact",disabled:ue(he,"second"),onClick:()=>{commit(he),setOpen(!1)},children:oe.now}):null,A?null:e(t,{variant:"solid",size:_,color:ee,density:"compact",onClick:()=>setOpen(!1),children:oe.done})]}):null]})})});
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{useDefaults as l}from"../../internal/defaults.js";import{PlButton as t}from"../button/PlButton.js";import{TimeGrid as s,usePickerLabels as r}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{displaySamples as d,formatDate as u,isHour12 as m,isValidDate as p,secondsOfDay as h,timeUnitSpan as f,toISOTime as g,withPlaceholder as y,withTime as S}from"../../internal/date.js";import{cx as b}from"../../internal/styles.js";export const PlTimePicker=/* @__PURE__ */n.forwardRef(function PlTimePicker({value:j,defaultValue:v,onValueChange:C,open:w,defaultOpen:z,onOpenChange:k,referenceDate:x,minTime:D,maxTime:O,shouldDisableTime:T,hour12:P,showSeconds:M=!1,hourStep:V=1,minuteStep:B=1,secondStep:I=1,locale:N,format:R,placeholder:F,clearable:H=!1,showNowButton:q=!0,closeOnSelect:A=!1,labels:E,name:G,size:J,color:K,density:L,readOnly:Q=!1,disabled:U=!1,startIcon:W,...X},Y){const Z=l(),$=N??Z.locale,_=J??Z.size??"md",ee=K??Z.color??"primary",oe=L??Z.density??"default",ne=r(E),le=P??m($),[te,se]=n.useState(v??null),re=void 0!==j?j:te,[ae,ie]=n.useState(z??!1),ce=w??ae,[de]=n.useState(()=>x??new Date),setOpen=e=>{e&&(Q||U)||(void 0===w&&ie(e),k?.(e))},commit=e=>{void 0===j&&se(e),C?.(e)},ue=n.useCallback((e,o)=>{const[n,l]=f(o,e);return!!(p(D)&&l<h(D))||!!(p(O)&&n>h(O))||(T?.(e,o)??!1)},[D,O,T]),me=n.useMemo(()=>R??{hour:"numeric",minute:"2-digit",...M?{second:"2-digit"}:{}},[R,M]),pe=new Date,he=S(x??de,{hours:pe.getHours(),minutes:pe.getMinutes(),seconds:M?pe.getSeconds():0}),fe=q||H||!A,ge=n.useMemo(()=>y(d($,me),F),[$,me,F]);return e(c,{...X,size:_,color:ee,density:oe,readOnly:Q,disabled:U,triggerRef:Y,startIcon:W??e(a,{}),display:p(re)?u(re,$,me):F??"",samples:ge,empty:!p(re),clearable:H,onClear:()=>commit(null),open:ce,onOpenChange:setOpen,labels:ne,name:G,formValue:p(re)?g(re,M):"",children:o("div",{className:b("flex flex-col",fe&&"gap-1.5"),children:[e(s,{size:_,density:oe,locale:$,value:p(re)?re:null,referenceDate:x??de,onChange:e=>{commit(e),A&&setOpen(!1)},hour12:le,showSeconds:M,hourStep:V,minuteStep:B,secondStep:I,shouldDisableTime:ue,labels:ne,autoFocus:!0}),fe?o(i,{size:_,children:[H?e(t,{variant:"ghost",size:_,color:ee,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:ne.clear}):null,q?e(t,{variant:"ghost",size:_,color:ee,density:"compact",disabled:ue(he,"second"),onClick:()=>{commit(he),setOpen(!1)},children:ne.now}):null,A?null:e(t,{variant:"solid",size:_,color:ee,density:"compact",onClick:()=>setOpen(!1),children:ne.done})]}):null]})})});

package/dist/components/timeline/PlTimeline.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.js';
-import type { PlassColor, PlassDensity, PlassOrientation, PlassSize } from '../../types.js';
+import type { PlassColor, PlassDensity, PlassOrientation, PlassResponsive, PlassSize } from '../../types.js';
 /**
  * How far along one item is. The same three a `PlStepper` draws, from
  * `internal/steps.ts`, because a haloed bullet must not mean two things.
@@ -33,7 +33,7 @@ export interface PlTimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol
      * only honest while every label is short.
      * @default 'vertical'
      */
-    orientation?: PlassOrientation;
+    orientation?: PlassResponsive<PlassOrientation>;
     /** Renders something other than an `<ol>` — Base UI's own escape hatch. */
     render?: useRender.RenderProp;
     children?: React.ReactNode;

package/dist/components/timeline/PlTimeline.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as s}from"@base-ui/react/use-render";import{cx as a,hasContent as n,iconClasses as i,metaTextClasses as o,sheetBodyClasses as c,sheetTitleClasses as p,surfaceSlots as d,transitionClasses as m}from"../../internal/styles.js";import{bulletGapClasses as u,bulletSizeValues as f,bulletStatusClasses as x,connectorColorClasses as b,connectorStyleClasses as v,statusAt as h,titleStatusClasses as y}from"../../internal/steps.js";const N=/* @__PURE__ */t.createContext(null),g=/* @__PURE__ */t.createContext({index:0,last:!1}),z={default:{xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},compact:{xs:"pb-3",sm:"pb-3.5",md:"pb-4",lg:"pb-5",xl:"pb-6"}},j={default:{xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},compact:{xs:"pe-3",sm:"pe-3.5",md:"pe-4",lg:"pe-5",xl:"pe-6"}};export const PlTimelineItem=/* @__PURE__ */t.forwardRef(function PlTimelineItem({title:r,meta:s,bullet:w,status:P,color:C,connector:T="solid",className:_,children:I,...R},$){const k=t.useContext(N),{index:A,last:M}=t.useContext(g),q=k?.size??"md",B=k?.density??"default",D=k?.orientation??"vertical",E=C??k?.color??"primary",F=P??h(A,k?.active??null),G="horizontal"===D,H="none"!==T&&!M,J=e("span",{"aria-hidden":"true",className:a("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",x[F],m,i),children:w}),K=H?e("span",{"aria-hidden":"true",className:a("pointer-events-none absolute",G?"top-[calc(var(--p-bullet)/2_-_1px)] end-0 start-(--p-bullet) border-t-2":"top-(--p-bullet) bottom-0 start-[calc(var(--p-bullet)/2_-_1px)] border-s-2",v[T],b[F],m)}):null,L=l("div",{className:a("flex min-w-0 flex-col gap-0.5",G?"mt-2":""),children:[n(r)||n(s)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[n(r)?e("span",{className:a("font-semibold",p[q],y[F],m),children:r}):null,n(s)?e("span",{className:a("text-(--plass-muted-fg)",o[q]),children:s}):null]}):null,n(I)?e("div",{className:a("text-(--plass-muted-fg)",c[q]),children:I}):null]});return l("li",{ref:$,"aria-current":"current"===F?"step":void 0,"data-status":F,className:a("relative",G?a("flex min-w-0 flex-1 flex-col",M?"":j[B][q]):a("flex",u[q],M?"":z[B][q]),_),style:{"--p-bullet":f[q],...d(E,0),"--p-fill":`var(--plass-${E}-fill)`,"--p-on-solid":`var(--plass-${E}-on-solid)`},...R,children:[K,J,L]})});export const PlTimeline=/* @__PURE__ */t.forwardRef(function PlTimeline({active:l,size:n,color:i,density:o,orientation:c="vertical",render:p,className:m,style:u,children:f,...x},b){const v=r(),h=n??v.size??"md",y=i??v.color??"primary",z=o??v.density??"default",j=t.Children.toArray(f),w=j.length,P=t.useMemo(()=>({size:h,density:z,orientation:c,color:y,active:l??null}),[h,z,c,y,l]),C=s({render:p??e("ol",{}),ref:b,props:{role:"list",className:a("flex","horizontal"===c?"flex-row":"flex-col",m),style:{...d(y,0),...u},children:j.map((l,t)=>e(g.Provider,{value:{index:t,last:t===w-1},children:l},t)),...x}});return e(N.Provider,{value:P,children:C})});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as s}from"@base-ui/react/use-render";import{cx as a,hasContent as n,iconClasses as i,metaTextClasses as o,sheetBodyClasses as c,sheetTitleClasses as p,surfaceSlots as d,transitionClasses as m}from"../../internal/styles.js";import{bulletGapClasses as u,bulletSizeValues as f,bulletStatusClasses as x,connectorColorClasses as b,connectorStyleClasses as v,statusAt as h,titleStatusClasses as y}from"../../internal/steps.js";import{useResponsiveValue as N}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__PURE__ */t.createContext({index:0,last:!1}),z={default:{xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},compact:{xs:"pb-3",sm:"pb-3.5",md:"pb-4",lg:"pb-5",xl:"pb-6"}},w={default:{xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},compact:{xs:"pe-3",sm:"pe-3.5",md:"pe-4",lg:"pe-5",xl:"pe-6"}};export const PlTimelineItem=/* @__PURE__ */t.forwardRef(function PlTimelineItem({title:r,meta:s,bullet:N,status:P,color:C,connector:T="solid",className:_,children:k,...I},R){const $=t.useContext(g),{index:A,last:E}=t.useContext(j),M=$?.size??"md",V=$?.density??"default",q=$?.orientation??"vertical",B=C??$?.color??"primary",D=P??h(A,$?.active??null),F="horizontal"===q,G="none"!==T&&!E,H=e("span",{"aria-hidden":"true",className:a("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",x[D],m,i),children:N}),J=G?e("span",{"aria-hidden":"true",className:a("pointer-events-none absolute",F?"top-[calc(var(--p-bullet)/2_-_1px)] end-0 start-(--p-bullet) border-t-2":"top-(--p-bullet) bottom-0 start-[calc(var(--p-bullet)/2_-_1px)] border-s-2",v[T],b[D],m)}):null,K=l("div",{className:a("flex min-w-0 flex-col gap-0.5",F?"mt-2":""),children:[n(r)||n(s)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[n(r)?e("span",{className:a("font-semibold",p[M],y[D],m),children:r}):null,n(s)?e("span",{className:a("text-(--plass-muted-fg)",o[M]),children:s}):null]}):null,n(k)?e("div",{className:a("text-(--plass-muted-fg)",c[M]),children:k}):null]});return l("li",{ref:R,"aria-current":"current"===D?"step":void 0,"data-status":D,className:a("relative",F?a("flex min-w-0 flex-1 flex-col",E?"":w[V][M]):a("flex",u[M],E?"":z[V][M]),_),style:{"--p-bullet":f[M],...d(B,0),"--p-fill":`var(--plass-${B}-fill)`,"--p-on-solid":`var(--plass-${B}-on-solid)`},...I,children:[J,H,K]})});export const PlTimeline=/* @__PURE__ */t.forwardRef(function PlTimeline({active:l,size:n,color:i,density:o,orientation:c,render:p,className:m,style:u,children:f,...x},b){const v=N(c,"vertical"),h=r(),y=n??h.size??"md",z=i??h.color??"primary",w=o??h.density??"default",P=t.Children.toArray(f),C=P.length,T=t.useMemo(()=>({size:y,density:w,orientation:v,color:z,active:l??null}),[y,w,v,z,l]),_=s({render:p??e("ol",{}),ref:b,props:{role:"list",className:a("flex","horizontal"===v?"flex-row":"flex-col",m),style:{...d(z,0),...u},children:P.map((l,r)=>e(j.Provider,{value:{index:r,last:r===C-1},children:l},t.isValidElement(l)?l.key??r:r)),...x}});return e(g.Provider,{value:T,children:_})});