plass-ui 1.2.0 → 1.4.0

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

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+/** Which way a change has to go to be good news. */
+export type PlStatDirection = 'up' | 'down';
+export interface PlStatProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** What the figure is of. The line above it. */
+    label?: React.ReactNode;
+    /**
+     * The figure itself, already formatted.
+     *
+     * A node rather than a number, and deliberately: how a figure is written —
+     * the currency, the grouping, the decimals, the locale — is the page's
+     * decision and `Intl.NumberFormat` already makes it. A component that took a
+     * number would have to guess at all four.
+     */
+    value?: React.ReactNode;
+    /** A line under the figure. What it is compared with, usually. */
+    description?: React.ReactNode;
+    /** A glyph beside the label. */
+    icon?: React.ReactNode;
+    /**
+     * How much it moved, as a percentage. Drawn with an arrow, and coloured by
+     * whether that is good news rather than by its sign.
+     */
+    change?: number;
+    /**
+     * What the change says, instead of the formatted percentage. For a figure
+     * that moved by a count rather than by a proportion — "+1,204 this week".
+     */
+    changeLabel?: React.ReactNode;
+    /**
+     * Which way is good news.
+     *
+     * `up` by default and worth setting on about a third of the figures a
+     * dashboard has: for churn, for a bounce rate, for a p95 latency, a rise is
+     * the bad one, and a component that painted it green would be reading the
+     * number and not the meaning.
+     * @default 'up'
+     */
+    improvesWhen?: PlStatDirection;
+    /** Draws a skeleton where the figure will be. */
+    loading?: boolean;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** The family the icon takes. @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+}
+/**
+ * One figure, and what has happened to it.
+ *
+ * A row of these is the top of every dashboard, and the whole of what makes
+ * them worth a component rather than three `<div>`s is the **change**: a number
+ * on its own says what things are, and a number with a movement beside it says
+ * whether that is going anywhere.
+ *
+ * The colour of that movement is decided by `improvesWhen` and not by the
+ * sign, which is the one thing a naive version of this gets wrong. Churn going
+ * up is not good news, and a green arrow on it is a dashboard lying to
+ * somebody.
+ *
+ * It draws **no surface**. A figure sits in a `PlCard` or in a row of them, and
+ * a sheet inside a sheet is two sheets.
+ */
+export declare const PlStat: React.ForwardRefExoticComponent<PlStatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/stat/PlStat.js

@@ -0,0 +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]})});

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

@@ -0,0 +1,2 @@
+export { PlStat } from './PlStat.js';
+export type { PlStatDirection, PlStatProps } from './PlStat.js';

package/dist/components/stat/index.js

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

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

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.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. */
+export type PlStepConnector = PlassStepConnector;
+export interface PlStepperProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** Which step the reader is on. Use with `onActiveChange` for a controlled stepper. */
+    active?: number;
+    /** Which step it starts on, for an uncontrolled one. @default 0 */
+    defaultActive?: number;
+    onActiveChange?: (active: number) => void;
+    /**
+     * Whether a step ahead of the current one can be jumped to.
+     *
+     * On by default, because that is what makes it a process rather than a set of
+     * tabs: the third step of a sign-up cannot be filled in before the second.
+     * Turn it off for a review screen, where every step has already been answered
+     * and the reader is going back to check one.
+     * @default true
+     */
+    linear?: boolean;
+    /** @default 'horizontal' */
+    orientation?: PlassResponsive<PlassOrientation>;
+    /** How the line between two steps is drawn. @default 'solid' */
+    connector?: PlStepConnector;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** @default 'default' */
+    density?: PlassDensity;
+    children?: React.ReactNode;
+}
+export interface PlStepProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color'> {
+    /** What the step is called. */
+    label?: React.ReactNode;
+    /** A second line under it — what the step asks for. */
+    description?: React.ReactNode;
+    /**
+     * What is drawn in the bullet. The step's own number by default, and a tick
+     * once it is complete.
+     */
+    bullet?: React.ReactNode;
+    /**
+     * Overrides where the sequence says this step is. For the one that failed
+     * validation while the reader was three steps further on.
+     */
+    status?: PlStepStatus;
+    /**
+     * Marks the step as skippable. `true` draws the word "Optional"; a node draws
+     * that node instead, which is how the word is translated.
+     */
+    optional?: boolean | React.ReactNode;
+    /** Cannot be reached, whatever `linear` says. */
+    disabled?: boolean;
+    /** Overrides the stepper's family for this one step. */
+    color?: PlassColor;
+    /** The panel this step shows while it is the current one. */
+    children?: React.ReactNode;
+}
+/**
+ * A process the reader is moving through, and where they are in it.
+ *
+ * It draws the same rail a [`PlTimeline`](../display/timeline) does — the same
+ * three bullet states, the same connector — and the difference is what the two
+ * are *for*, which is also the whole of when to reach for which. A timeline
+ * **reports**: it is an `<ol>` of text about a sequence that already happened,
+ * and nothing on it can be pressed. A stepper **is** the sequence: its steps are
+ * buttons, the current one owns a panel, and pressing one moves the reader.
+ *
+ * `active` is an index rather than a value, exactly as a timeline's is, because
+ * a stepper has no selection: everything before it is done, the step at it is
+ * where you are, everything after it is ahead.
+ */
+export declare const PlStepper: React.ForwardRefExoticComponent<PlStepperProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One step.
+ *
+ * Its index is not a prop and cannot be: a step that had to be told where it
+ * was would be one every caller could put in the wrong place, and `active={2}`
+ * would stop meaning anything. The stepper numbers its children as it walks
+ * them and hands each one its index through a context.
+ */
+export declare const PlStep: React.ForwardRefExoticComponent<PlStepProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/stepper/PlStepper.js

@@ -0,0 +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";import{useResponsiveValue as y}from"../../internal/responsive.js";const z=/* @__PURE__ */t.createContext(null),j=/* @__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:m,density:f,className:x,style:h,children:b,...w},k){const C=y(o,"horizontal"),S=r(),g=d??S.size??"md",P=m??S.color??"primary",$=f??S.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,O=t.useMemo(()=>({size:g,density:$,orientation:C,color:P,active:L,linear:i,connector:c,baseId:R,onSelect:T}),[g,$,C,P,L,i,c,R,T]),W="horizontal"===C,q=W?B[L]?.props?.children:null;return e(z.Provider,{value:O,children:l("div",{ref:k,className:u("flex w-full flex-col",x),style:{...N(P,0),...h},...w,children:[e("ol",{role:"list",className:u("flex w-full",W?"flex-row":"flex-col"),children:B.map((l,t)=>e(j.Provider,{value:{index:t,last:t===M-1},children:l},t))}),p(q)?e("div",{"aria-labelledby":`${R}-${L}`,className:u("mt-4",v[g]),children:q}):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:r,description:y,bullet:k,status:C,optional:S,disabled:g=!1,color:P,className:$,children:A,...I},L){const R=t.useContext(z),{index:T,last:B}=t.useContext(j),M=R?.size??"md",O=R?.orientation??"horizontal",W=P??R?.color??"primary",q=R?.active??null,D=R?.connector??"solid",E=C??c(T,q),F="horizontal"===O,G=!g&&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:k??("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(y)?e("span",{className:u("text-(--plass-muted-fg)",x[M]),children:y}):null,S?e("span",{className:u("text-(--plass-muted-fg) italic",x[M]),children:!0===S?"Optional":S}):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],g?"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]})});

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

@@ -0,0 +1,2 @@
+export { PlStep, PlStepper } from './PlStepper.js';
+export type { PlStepConnector, PlStepProps, PlStepStatus, PlStepperProps } from './PlStepper.js';

package/dist/components/stepper/index.js

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

package/dist/components/switch/PlSwitch.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{Switch as l}from"@base-ui/react/switch";import{Field as s}from"@base-ui/react/field";import{controlSlots as c,cx as i,focusRingClasses as n,hasContent as o,metaTextClasses as d,tickRowTextClasses as h}from"../../internal/styles.js";const m={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"},p={xs:"data-[checked]:left-[calc(100%-0.75rem)]",sm:"data-[checked]:left-[calc(100%-0.875rem)]",md:"data-[checked]:left-[calc(100%-1.125rem)]",lg:"data-[checked]:left-[calc(100%-1.375rem)]",xl:"data-[checked]:left-[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)]",n].join(" "),u=/* @__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(" "),g=/* @__PURE__ */["cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)]","data-[checked]:shadow-none"].join(" "),b=/* @__PURE__ */["cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[background-image:var(--p-fill)]"].join(" "),x=/* @__PURE__ */["absolute inset-y-0.5 left-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","[transition:left_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t="md",color:n="primary",label:k,description:w,error:v,invalid:N,labelPlacement:j="end",disabled:y=!1,readOnly:_=!1,className:P,classNames:R,style:S,...$},B){const O=o(v),q=N??O,z=q?"danger":n,D=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:B,className:i(f,m[t],y?b:_?g:u,R?.control),disabled:y,readOnly:_,...$,children:e(l.Thumb,{className:`${x} ${p[t]}`})})}),E=k||w?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===j?"flex-1":""].filter(Boolean).join(" "),children:[k?e(s.Label,{className:i(y?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",R?.label),children:k}):null,w?e(s.Description,{className:i(d[t],"text-(--plass-muted-fg)",R?.description),children:w}):null]}):null;return a(s.Root,{disabled:y,invalid:q,className:["inline-flex flex-col gap-1 align-top",P??""].filter(Boolean).join(" "),style:{...c(z,0,"solid"),...S},children:[e("div",{className:`flex items-start gap-2.5 ${h[t]}`,children:a(r,"start"===j?{children:[E,D]}:{children:[D,E]})}),e(s.Error,O?{match:!0,className:i(d[t],"text-(--p-accent)",R?.error),children:v}:{className:i(d[t],"text-(--p-accent)",R?.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 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)})]})});

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, 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.
      *

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{Tabs as l}from"@base-ui/react/tabs";import{controlHeightClasses as o,controlTextClasses as s,focusRingClasses as i,focusRingInsetClasses as n,gapClasses as r,glassClasses as c,hasContent as d,iconClasses as h,paddingXClasses as f,radiusClasses as u,surfaceSlots as p,transitionClasses as b}from"../../internal/styles.js";const v=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",fullWidth:!1}),m={solid:{horizontal:`${c} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)]`,vertical:`${c} 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"}},x={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"}},g={solid:`${c} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},w="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)";export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:i,startIcon:c,endIcon:p,disabled:m=!1,className:x,children:g,...z},y){const{variant:P,size:j,density:N,fullWidth:T}=a.useContext(v);return t(l.Tab,{ref:y,value:i,disabled:m,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]",o[j],s[j],r[j],f[N][j],"solid"===P?u[j]:"",b,h,w,n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",T?"flex-1":"",x??""].filter(Boolean).join(" "),...z,children:[d(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null,g,d(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:p}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:o=!1,className:s,children:n,...r},c){const{size:d}=a.useContext(v);return e(l.Panel,{ref:c,value:t,keepMounted:o,className:["min-w-0 flex-1 text-(--plass-fg)",i,u[d],s??""].filter(Boolean).join(" "),...r,children:n})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:o="glass",size:s="md",color:i="primary",density:n="default",value:r,defaultValue:c,onValueChange:d,orientation:h="horizontal",activateOnFocus:f=!1,loopFocus:b=!0,fullWidth:w=!1,className:z,style:y,children:P,...j},N){const T=a.useMemo(()=>({variant:o,size:s,density:n,orientation:h,fullWidth:w}),[o,s,n,h,w]),k=[],C=[];return a.Children.forEach(P,e=>{a.isValidElement(e)&&e.type===PlTabPanel?C.push(e):null!=e&&!1!==e&&k.push(e)}),e(v.Provider,{value:T,children:t(l.Root,{ref:N,value:r,defaultValue:c,onValueChange:e=>d?.(e),orientation:h,className:["flex min-w-0","vertical"===h?"flex-row gap-4":"flex-col gap-4",z??""].filter(Boolean).join(" "),style:{...p(i,0),...y},...j,children:[t(l.List,{activateOnFocus:f,loopFocus:b,className:["relative shrink-0",m[o][h],"solid"===o?u[s]:"",w&&"horizontal"===h?"w-full":"","horizontal"===h?"overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),children:[k,e(l.Indicator,{className:["pointer-events-none",x[o][h],g[o],"solid"===o?u[s]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),C]})})});
+"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,gapClasses as c,glassClasses as d,hasContent as f,iconClasses as h,paddingXClasses as u,radiusClasses as p,surfaceSlots as v,transitionClasses as b}from"../../internal/styles.js";import{useResponsiveValue as m}from"../../internal/responsive.js";const g=/* @__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"}},w={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"}},y={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:i,endIcon:d,disabled:v=!1,className:m,children:x,...w},y){const{variant:j,size:P,density:N,fullWidth:T}=a.useContext(g);return t(o.Tab,{ref:y,value:l,disabled:v,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[P],r[P],c[P],u[N][P],"solid"===j?p[P]:"",b,h,z,n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",T?"flex-1":"",m??""].filter(Boolean).join(" "),...w,children:[f(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,x,f(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:r,...n},c){const{size:d}=a.useContext(g);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",i,p[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:d,onValueChange:f,orientation:h,activateOnFocus:u=!1,loopFocus:b=!0,fullWidth:z=!1,className:j,style:P,children:N,...T},k){const C=m(h,"horizontal"),R=l(),S=r??R.size??"md",W=i??R.color??"primary",O=n??R.density??"default",V=a.useMemo(()=>({variant:s,size:S,density:O,orientation:C,fullWidth:z}),[s,S,O,C,z]),B=a.useRef(null),E=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}}(B,"horizontal"===C),F=[],L=[];return a.Children.forEach(N,e=>{a.isValidElement(e)&&e.type===PlTabPanel?L.push(e):null!=e&&!1!==e&&F.push(e)}),e(g.Provider,{value:V,children:t(o.Root,{ref:k,value:c,defaultValue:d,onValueChange:e=>f?.(e),orientation:C,className:["flex min-w-0","vertical"===C?"flex-row gap-4":"flex-col gap-4",j??""].filter(Boolean).join(" "),style:{...v(W,0),...P},...T,children:[t(o.List,{ref:B,activateOnFocus:u,loopFocus:b,className:["relative shrink-0",x[s][C],"solid"===s?p[S]:"",z&&"horizontal"===C?"w-full":"","horizontal"===C?"plass-fade-x overflow-x-auto overflow-y-hidden":""].filter(Boolean).join(" "),style:E.style,onScroll:E.onScroll,"data-overflow":E.state,children:[F,e(o.Indicator,{className:["pointer-events-none",w[s][C],y[s],"solid"===s?p[S]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ")})]}),L]})})});

package/dist/components/text-field/PlTextField.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';
 /** How the multiline control may be resized by the user. Ignored when single line. */
 export type PlTextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
 /**
@@ -11,6 +11,15 @@ type NativeControlProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'color'
 export interface PlTextFieldProps extends PlassStyleProps, NativeControlProps {
     /** 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;
     /**
      * Drop shadow depth. `0` is the default — a field is a well cut into the
      * sheet, not a key resting on it, and the one place in the library where a

package/dist/components/text-field/PlTextField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Field as s}from"@base-ui/react/field";import{Input as r}from"@base-ui/react/input";import{Spinner as n}from"../../internal/icons.js";import{controlHeightClasses as a,controlTextLeadingClasses as i,cx as o,disabledClasses as c,fieldReadOnlyClasses as m,fieldRestClasses as d,focusWithinRingClasses as p,gapClasses as x,hasContent as u,iconClasses as f,metaTextClasses as h,paddingXClasses as g,radiusClasses as $,stackGapClasses as b,surfaceSlots as y,transitionClasses as N}from"../../internal/styles.js";const v={xs:`${x.xs} ${$.xs} ${i.xs}`,sm:`${x.sm} ${$.sm} ${i.sm}`,md:`${x.md} ${$.md} ${i.md}`,lg:`${x.lg} ${$.lg} ${i.lg}`,xl:`${x.xl} ${$.xl} ${i.xl}`},w={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},j={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},z=/* @__PURE__ */["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",N,p,f].join(" "),k=d,D=m;export const PlTextField=/* @__PURE__ */l.forwardRef(function PlTextField({variant:i="glass",size:m="md",color:d="primary",density:p="default",elevation:x=0,multiline:f=!1,rows:$=3,resize:N="vertical",label:P,description:R,error:T,invalid:B,startIcon:F,endIcon:I,loading:O=!1,fullWidth:C=!1,readOnly:E=!1,disabled:L=!1,type:W="text",className:q,classNames:A,style:G,...H},J){const K=u(T),M=B??K,Q=M?"danger":d,S=l.useRef(null),U=l.useCallback(e=>{S.current=e,"function"==typeof J?J(e):J&&(J.current=e)},[J]),V=[z,v[m],f?`${w[m]} items-start`:`${a[m]} items-center`,g[p][m],L?c[i]:E?D[i]:k[i]].filter(Boolean).join(" "),X=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",f?`block ${j[N]}`:"self-stretch"].join(" "),Y="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg) transition-[color] duration-(--plass-duration) group-focus-within:text-(--p-accent)";return t(s.Root,{disabled:L,invalid:M,className:["flex-col align-top",b[m],C?"flex w-full":"inline-flex",q??""].filter(Boolean).join(" "),style:{...y(Q,x),...G},children:[P?e(s.Label,{className:o(h[m],"font-semibold",L?"text-(--plass-muted-fg)":"text-(--plass-fg)",A?.label),children:P}):null,t("span",{className:o(V,A?.control),onPointerDown:e=>{e.target!==e.currentTarget||L||(e.preventDefault(),S.current?.focus())},children:[F?e("span",{className:Y,children:F}):null,e(r,{ref:U,className:X,disabled:L,readOnly:E,"aria-busy":O||void 0,"data-loading":O||void 0,...f?{render:e("textarea",{rows:$})}:{type:W},...H}),O?e("span",{className:Y,children:e(n,{})}):I?e("span",{className:Y,children:I}):null]}),R?e(s.Description,{className:o(h[m],"text-(--plass-muted-fg)",A?.description),children:R}):null,e(s.Error,K?{match:!0,className:o(h[m],"text-(--p-accent)",A?.error),children:T}:{className:o(h[m],"text-(--p-accent)",A?.error)})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Field as r}from"@base-ui/react/field";import{Input as n}from"@base-ui/react/input";import{Spinner as i}from"../../internal/icons.js";import{hotKeyHandler as a}from"../../internal/keys.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as m,disabledClasses as d,fieldReadOnlyClasses as p,fieldRestClasses as f,focusWithinRingClasses as u,gapClasses as x,hasContent as h,iconClasses as g,metaTextClasses as y,paddingXClasses as $,radiusClasses as b,stackGapClasses as w,surfaceSlots as N,transitionClasses as j}from"../../internal/styles.js";const v={xs:`${x.xs} ${b.xs} ${c.xs}`,sm:`${x.sm} ${b.sm} ${c.sm}`,md:`${x.md} ${b.md} ${c.md}`,lg:`${x.lg} ${b.lg} ${c.lg}`,xl:`${x.xl} ${b.xl} ${c.xl}`},z={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},k={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},D=/* @__PURE__ */["group relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",j,u,g].join(" "),K=f,P=p;export const PlTextField=/* @__PURE__ */l.forwardRef(function PlTextField({variant:c="glass",size:p,color:f,density:u,elevation:x=0,multiline:g=!1,rows:b=3,resize:j="vertical",label:R,description:T,error:B,invalid:F,startIcon:I,endIcon:O,loading:C=!1,fullWidth:E=!1,readOnly:L=!1,disabled:W=!1,type:q="text",hotKeys:A,onKeyDown:G,className:H,classNames:J,style:M,...Q},S){const U=s(),V=p??U.size??"md",X=f??U.color??"primary",Y=u??U.density??"default",Z=h(B),_=F??Z,ee=_?"danger":X,te=l.useRef(null),le=l.useCallback(e=>{te.current=e,"function"==typeof S?S(e):S&&(S.current=e)},[S]),se=[D,v[V],g?`${z[V]} items-start`:`${o[V]} items-center`,$[Y][V],W?d[c]:L?P[c]:K[c]].filter(Boolean).join(" "),re=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",g?`block ${k[j]}`:"self-stretch"].join(" "),ne="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg) transition-[color] duration-(--plass-duration) group-focus-within:text-(--p-accent)";return t(r.Root,{disabled:W,invalid:_,className:["flex-col align-top",w[V],E?"flex w-full":"inline-flex",H??""].filter(Boolean).join(" "),style:{...N(ee,x),...M},children:[R?e(r.Label,{className:m(y[V],"font-semibold",W?"text-(--plass-muted-fg)":"text-(--plass-fg)",J?.label),children:R}):null,t("span",{className:m(se,J?.control),onPointerDown:e=>{e.target!==e.currentTarget||W||(e.preventDefault(),te.current?.focus())},children:[I?e("span",{className:ne,children:I}):null,e(n,{ref:le,className:re,disabled:W,readOnly:L,"aria-busy":C||void 0,"data-loading":C||void 0,onKeyDown:a(A,G),...g?{render:e("textarea",{rows:b})}:{type:q},...Q}),C?e("span",{className:ne,children:e(i,{})}):O?e("span",{className:ne,children:O}):null]}),T?e(r.Description,{className:m(y[V],"text-(--plass-muted-fg)",J?.description),children:T}):null,e(r.Error,Z?{match:!0,className:m(y[V],"text-(--p-accent)",J?.error),children:B}:{className:m(y[V],"text-(--p-accent)",J?.error)})]})});

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:v,size:h,newTab:k=!1,icon:b,startIcon:j,newTabLabel:x,render:g,className:y,style:w,children:_,...N},T){const L=l(),z=x??L.newTab,C=b??k,P=!0===C?n(k?a:o,{}):C,$=[u,h?t[h]:"",d[f],v?"[&.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-${v??"primary"}-ring)`,...v?{"--p-accent":`var(--plass-${v}-accent)`}:null},E=s.isValidElement(g)&&void 0!==g.props.href,{rel:F,...I}=N,R=m(k?"_blank":void 0,F);return i({render:g??n("a",{}),ref:T,props:{...E?null:{href:c},target:k?"_blank":void 0,className:$,style:{...B,...w},children:r(e,{children:[j?n("span",{className:"me-[0.25em]",children:j}):null,_,P?n("span",{className:"ms-[0.25em]",children:P}):null,k?r(e,{children:[" ",n("span",{className:p,children:z})]}):null]}),...I,rel:R}})});

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

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

@@ -1,17 +1,14 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassColor, PlassDensity, PlassOrientation, PlassSize } from '../../types.js';
+import { type PlassStepConnector, type PlassStepStatus } from '../../internal/steps.js';
+import type { PlassColor, PlassDensity, PlassOrientation, PlassResponsive, PlassSize } from '../../types.js';
 /**
- * How far along one item is.
- *
- * Three states rather than two, because "the one you are on" is not the same
- * claim as "done", and a sequence that cannot say which step is current is a
- * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
- * around it, an empty one — rather than three shades of the same thing.
+ * 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.
  */
-export type PlTimelineStatus = 'complete' | 'current' | 'upcoming';
+export type PlTimelineStatus = PlassStepStatus;
 /** How the line between two items is drawn. `none` leaves the gap open. */
-export type PlTimelineConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+export type PlTimelineConnector = PlassStepConnector;
 export interface PlTimelineProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'color'> {
     /**
      * How far the sequence has got: the index of the item being worked on now.
@@ -36,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 r from"react";import{useRender as t}from"@base-ui/react/use-render";import{cx as a,hasContent as s,iconClasses as o,metaTextClasses as n,sheetBodyClasses as i,sheetTitleClasses as d,surfaceSlots as p,transitionClasses as c}from"../../internal/styles.js";const m=/* @__PURE__ */r.createContext(null),u=/* @__PURE__ */r.createContext({index:0,last:!1}),x={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"},f={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},b={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"}},g={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"}},v={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""},h={complete:"[background-image:var(--p-fill)] text-(--p-on-solid)",current:"[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:0_0_0_0.25rem_var(--p-soft)]",upcoming:"border-2 bg-(--plass-surface) text-(--plass-muted-fg) [border-color:var(--plass-border)]"},y={complete:"[border-color:var(--p-line-hover)]",current:"[border-color:var(--plass-border)]",upcoming:"[border-color:var(--plass-border)]"},N={complete:"text-(--plass-fg)",current:"text-(--p-accent)",upcoming:"text-(--plass-muted-fg)"};export const PlTimelineItem=/* @__PURE__ */r.forwardRef(function PlTimelineItem({title:t,meta:_,bullet:w,status:z,color:P,connector:j="solid",className:C,children:T,...k},I){const R=r.useContext(m),{index:$,last:A}=r.useContext(u),M=R?.size??"md",q=R?.density??"default",B=R?.orientation??"vertical",D=P??R?.color??"primary",E=R?.active??null,F=z??(null===E?"upcoming":$<E?"complete":$===E?"current":"upcoming"),G="horizontal"===B,H="none"!==j&&!A,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",h[F],c,o),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[j],y[F],c)}):null,L=l("div",{className:a("flex min-w-0 flex-col gap-0.5",G?"mt-2":""),children:[s(t)||s(_)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[s(t)?e("span",{className:a("font-semibold",d[M],N[F],c),children:t}):null,s(_)?e("span",{className:a("text-(--plass-muted-fg)",n[M]),children:_}):null]}):null,s(T)?e("div",{className:a("text-(--plass-muted-fg)",i[M]),children:T}):null]});return l("li",{ref:I,"aria-current":"current"===F?"step":void 0,"data-status":F,className:a("relative",G?a("flex min-w-0 flex-1 flex-col",A?"":g[q][M]):a("flex",f[M],A?"":b[q][M]),C),style:{"--p-bullet":x[M],...p(D,0),"--p-fill":`var(--plass-${D}-fill)`,"--p-on-solid":`var(--plass-${D}-on-solid)`},...k,children:[K,J,L]})});export const PlTimeline=/* @__PURE__ */r.forwardRef(function PlTimeline({active:l,size:s="md",color:o="primary",density:n="default",orientation:i="vertical",render:d,className:c,style:x,children:f,...b},g){const v=r.Children.toArray(f),h=v.length,y=r.useMemo(()=>({size:s,density:n,orientation:i,color:o,active:l??null}),[s,n,i,o,l]),N=t({render:d??e("ol",{}),ref:g,props:{role:"list",className:a("flex","horizontal"===i?"flex-row":"flex-col",c),style:{...p(o,0),...x},children:v.map((l,r)=>e(u.Provider,{value:{index:r,last:r===h-1},children:l},r)),...b}});return e(m.Provider,{value:y,children:N})});
+"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:I,...R},$){const k=t.useContext(g),{index:A,last:M}=t.useContext(j),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:N}),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?"":w[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,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,t)=>e(j.Provider,{value:{index:t,last:t===C-1},children:l},t)),...x}});return e(g.Provider,{value:T,children:_})});