plass-ui 0.0.1 → 1.0.0

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Slider as BaseUISlider } from '@base-ui/react/slider';
+import type { PlassColor, PlassElevation, PlassOrientation, PlassSize } from '../../types.js';
+type BaseSliderProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISlider.Root>, 'className' | 'style' | 'render' | 'children' | 'orientation'>;
+export interface PlSliderProps extends BaseSliderProps {
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Drop shadow depth of the **thumb**. `1`, like a PlButton: the thumb is the
+     * one part of a slider you press, and it rests on the sheet.
+     * @default 1
+     */
+    elevation?: PlassElevation;
+    /**
+     * Which way the slider runs. A vertical slider has no length of its own, so
+     * give it a height — the default `h-40` is a starting point, not a rule.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /** The label above the track. */
+    label?: React.ReactNode;
+    /** Helper text below the track. */
+    description?: React.ReactNode;
+    /**
+     * Shows the current value beside the label. Pass a function to format it —
+     * the raw numbers and Base UI's already-localised strings are both handed in.
+     * @default false
+     */
+    showValue?: boolean | ((formatted: readonly string[], values: readonly number[]) => React.ReactNode);
+    /** Class names for the wrapper, not for the track. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * A value chosen along a range.
+ *
+ * Pass an array to `value` or `defaultValue` and it becomes a range slider with
+ * one thumb per entry — there is no separate `range` prop, because the shape of
+ * the value already says which one this is.
+ */
+export declare const PlSlider: React.ForwardRefExoticComponent<PlSliderProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/slider/PlSlider.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slider as BaseUISlider } from '@base-ui/react/slider';
+import { controlSlots, focusRingClasses, metaTextClasses, transitionClasses } from '../../internal/styles.js';
+/**
+ * Groove thickness and thumb diameter.
+ *
+ * The thumb is deliberately far bigger than the groove — it is the only part of
+ * the control you can actually hit, and a thumb sized to match a 6px rail is a
+ * thumb nobody catches on a touchscreen.
+ */
+const trackThicknessClasses = {
+    xs: 'h-1',
+    sm: 'h-1.5',
+    md: 'h-1.5',
+    lg: 'h-2',
+    xl: 'h-2.5'
+};
+const verticalThicknessClasses = {
+    xs: 'w-1',
+    sm: 'w-1.5',
+    md: 'w-1.5',
+    lg: 'w-2',
+    xl: 'w-2.5'
+};
+const thumbSizeClasses = {
+    xs: 'size-3',
+    sm: 'size-3.5',
+    md: 'size-4.5',
+    lg: 'size-5',
+    xl: 'size-6'
+};
+/**
+ * The control is taller than the groove it holds so that the whole strip is a
+ * pointer target, not just the rail. Base UI presses the track wherever you
+ * click, and a 6px hit area would make that unusable.
+ */
+const trackBoxHeightClasses = {
+    xs: 'h-4',
+    sm: 'h-4.5',
+    md: 'h-5',
+    lg: 'h-6',
+    xl: 'h-7'
+};
+const trackBoxWidthClasses = {
+    xs: 'w-4',
+    sm: 'w-4.5',
+    md: 'w-5',
+    lg: 'w-6',
+    xl: 'w-7'
+};
+/**
+ * The rail is `--plass-track`, the same groove a PlSwitch's off state is — one
+ * neutral ink, so the two controls in a settings panel are visibly made of the
+ * same thing.
+ *
+ * It used to be the glass at its most opaque with `--plass-well` cut into it,
+ * on the reading that a rail and a filled field are the same recessed object.
+ * They are not: a field is a box you look *into* and a rail is a line you look
+ * *along*, and the part of it that matters is the part with nothing on it. A
+ * 4px white-on-white line with a shadow in it is the run a reader is supposed
+ * to be judging the value against, and on a light page there was nothing there
+ * to judge it against at all.
+ *
+ * The indicator over it is the gradient, so the filled part of the run is made
+ * of exactly the same material as the button that submits the form it is in.
+ *
+ * Both are pills rather than taking the radius ladder: this is a channel
+ * something travels along, not a sheet.
+ */
+const railClasses = 'rounded-full bg-(--plass-track)';
+const indicatorClasses = `rounded-full [background-image:var(--p-fill)] ${transitionClasses}`;
+/**
+ * The thumb is a key of tinted glass on the same gradient as the run behind it,
+ * separated from it by a ring in the page's own surface colour — white on a
+ * light page, near-black on a dark one — so it never dissolves into the
+ * indicator it is sitting on.
+ *
+ * It grows a halo on hover and while dragging rather than growing itself. The
+ * no-transform rule is not relaxed just because this particular part carries no
+ * label.
+ */
+const thumbClasses = /* @__PURE__ */ [
+    'rounded-full border-2 [background-image:var(--p-fill)]',
+    '[border-color:var(--plass-surface)]',
+    '[box-shadow:var(--p-elev),var(--p-lift)]',
+    'cursor-grab select-none active:cursor-grabbing',
+    transitionClasses,
+    'hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover),0_0_0_4px_var(--p-soft)]',
+    focusRingClasses,
+    'data-[dragging]:[box-shadow:var(--p-elev-press),var(--p-lift-press),0_0_0_6px_var(--p-soft-hover)]'
+].join(' ');
+/**
+ * Disabled is the light going out, exactly as it is on every other control: the
+ * shape and the place stay, the saturation and half the opacity go.
+ */
+const disabledSliderClasses = 'opacity-50 saturate-[0.35] [&_*]:cursor-not-allowed';
+/**
+ * A value chosen along a range.
+ *
+ * Pass an array to `value` or `defaultValue` and it becomes a range slider with
+ * one thumb per entry — there is no separate `range` prop, because the shape of
+ * the value already says which one this is.
+ */
+export const PlSlider = /* @__PURE__ */ React.forwardRef(function PlSlider({ size = 'md', color = 'primary', elevation = 1, orientation = 'horizontal', label, description, showValue = false, disabled = false, className, style, ...props }, ref) {
+    const vertical = orientation === 'vertical';
+    // One thumb per value. The count comes off whichever of the two was given, so
+    // an uncontrolled range slider works without being told it is one.
+    const values = props.value ?? props.defaultValue;
+    const thumbCount = Array.isArray(values) ? values.length : 1;
+    return (_jsxs(BaseUISlider.Root, { ref: ref, orientation: orientation, disabled: disabled, className: [
+            'flex',
+            vertical ? 'w-fit flex-col items-center gap-2' : 'w-full flex-col gap-1.5',
+            disabled ? disabledSliderClasses : '',
+            className ?? ''
+        ]
+            .filter(Boolean)
+            .join(' '), 
+        // `solid`, always: the run and the thumb are the coloured thing, so the
+        // interaction light on them is white rather than the family's own tint.
+        style: { ...controlSlots(color, elevation, 'solid'), ...style }, ...props, children: [label || showValue ? (_jsxs("div", { className: `flex w-full items-baseline gap-2 ${metaTextClasses[size]}`, children: [label ? (_jsx(BaseUISlider.Label, { className: "font-semibold text-(--plass-fg)", children: label })) : null, showValue ? (_jsx(BaseUISlider.Value, { className: "ms-auto tabular-nums text-(--plass-muted-fg)", children: typeof showValue === 'function' ? showValue : null })) : null] })) : null, _jsx(BaseUISlider.Control, { className: [
+                    'flex touch-none items-center justify-center select-none',
+                    vertical
+                        ? `${trackBoxWidthClasses[size]} h-40 flex-col`
+                        : `w-full ${trackBoxHeightClasses[size]}`
+                ].join(' '), children: _jsxs(BaseUISlider.Track, { className: [
+                        railClasses,
+                        vertical
+                            ? `${verticalThicknessClasses[size]} h-full`
+                            : `${trackThicknessClasses[size]} w-full`
+                    ].join(' '), children: [_jsx(BaseUISlider.Indicator, { className: indicatorClasses }), Array.from({ length: thumbCount }, (_, index) => (_jsx(BaseUISlider.Thumb, { index: index, className: `${thumbClasses} ${thumbSizeClasses[size]}` }, index)))] }) }), description ? (_jsx("div", { className: `${metaTextClasses[size]} text-(--plass-muted-fg)`, children: description })) : null] }));
+});

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

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

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export { PlSlider } from './PlSlider.js';

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

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
+export interface PlSpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onChange'> {
+    /** Whether the content is uncovered. Use with `onRevealedChange` for a controlled one. */
+    revealed?: boolean;
+    /** Where an uncontrolled spoiler starts. @default false */
+    defaultRevealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    /** The reveal button's label. @default 'Reveal' */
+    label?: React.ReactNode;
+    /** The hide button's label, when `reversible` is on. @default 'Hide' */
+    hideLabel?: React.ReactNode;
+    /**
+     * The line above the button, saying why the content is covered. Pass `false`
+     * for a cover with nothing written on it.
+     * @default 'This may contain spoilers'
+     */
+    description?: React.ReactNode | false;
+    /**
+     * Replaces the default reveal button entirely.
+     *
+     * The replacement is yours to wire up: pass `revealed` and `onRevealedChange`
+     * and drive it from your own control. `label` is the prop for the far
+     * commoner case of wanting different words on the button that is already
+     * there.
+     */
+    action?: React.ReactNode;
+    /**
+     * Keeps the content coverable: once revealed, a hide button appears under it.
+     * @default false
+     */
+    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.
+     *
+     * 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
+     * a page of blurred content would be a page of nothing.
+     */
+    maxHeight?: number | string;
+    /** How hard the content is blurred, in pixels. @default 10 */
+    blur?: number;
+    /**
+     * Inner padding around the content, on the sheet's `size` / `density` scale.
+     * Turn it off for something that should reach the edges — a picture, a video.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * What the sheet is made of. `ghost` draws no box at all, which is what a
+     * spoiler sitting inside running prose usually wants.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /** The sheet's radius, and the size of the button on it. @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** Padding around the cover's own text and button. @default 'default' */
+    density?: PlassDensity;
+    /** Drop shadow depth. `0` is the default and it is flat. @default 0 */
+    elevation?: PlassElevation;
+    /** What is being covered. */
+    children?: React.ReactNode;
+}
+/**
+ * Content that is covered until somebody asks for it.
+ *
+ * The cover is a **blur** rather than a `display: none`, which is the whole
+ * point: a reader can see that there is something there, roughly how much of it
+ * there is, and — with `maxHeight` — that it has been clamped. What they cannot
+ * do is read it by accident, which is the one thing a spoiler is for.
+ *
+ * While it is covered the content is `inert`, so it is not tabbable, not
+ * readable by a screen reader and not selectable by a drag across the page. A
+ * spoiler that could be defeated by <kbd>Ctrl</kbd>+<kbd>A</kbd> is not a
+ * spoiler.
+ *
+ * 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.
+ */
+export declare const PlSpoiler: React.ForwardRefExoticComponent<PlSpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/PlSpoiler.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { PlButton } from '../button/PlButton.js';
+import { cx, hasContent, metaTextClasses, radiusClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
+/**
+ * The wash between the blurred content and the words on top of it.
+ *
+ * Blur alone is not cover. It takes a paragraph apart but leaves its colour and
+ * its rhythm — a photograph blurred at 10px is still recognisably a photograph
+ * of a face — and it leaves the button standing on whatever happened to be
+ * underneath it. Mixing the page's own surface over the top settles both: the
+ * content goes to a wash of its own colours, and the button gets something to
+ * stand on.
+ */
+const scrimClasses = '[background-color:color-mix(in_oklab,var(--plass-surface)_55%,transparent)]';
+/**
+ * Content that is covered until somebody asks for it.
+ *
+ * The cover is a **blur** rather than a `display: none`, which is the whole
+ * point: a reader can see that there is something there, roughly how much of it
+ * there is, and — with `maxHeight` — that it has been clamped. What they cannot
+ * do is read it by accident, which is the one thing a spoiler is for.
+ *
+ * While it is covered the content is `inert`, so it is not tabbable, not
+ * readable by a screen reader and not selectable by a drag across the page. A
+ * spoiler that could be defeated by <kbd>Ctrl</kbd>+<kbd>A</kbd> is not a
+ * spoiler.
+ *
+ * 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.
+ */
+export const PlSpoiler = /* @__PURE__ */ React.forwardRef(function PlSpoiler({ revealed, defaultRevealed = false, onRevealedChange, label = 'Reveal', hideLabel = 'Hide', description = 'This may contain spoilers', action, reversible = false, maxHeight, blur = 10, padded = true, variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, className, style, children, ...props }, ref) {
+    const contentId = React.useId();
+    const [uncontrolled, setUncontrolled] = React.useState(defaultRevealed);
+    const open = revealed ?? uncontrolled;
+    const change = (next) => {
+        if (revealed === undefined) {
+            setUncontrolled(next);
+        }
+        onRevealedChange?.(next);
+    };
+    const insetX = sheetPaddingXClasses[density][size];
+    const insetY = sheetPaddingYClasses[density][size];
+    const notice = description === false ? null : description;
+    return (_jsxs("div", { ref: ref, className: cx(
+        // A grid rather than a box with an absolutely positioned cover on it,
+        // and the difference is what happens to a *short* spoiler: an
+        // absolute cover is laid out against a box the content alone decided
+        // the height of, so a one-line spoiler clips its own Reveal button.
+        // Both children are put in the same cell instead, so the row is as
+        // tall as whichever of them needs more and they stretch to match.
+        'isolate grid overflow-hidden', radiusClasses[size], sheetRestClasses[variant], transitionClasses, className), style: { ...surfaceSlots(color, elevation), ...style }, ...props, children: [_jsx("div", { id: contentId, className: cx('min-w-0 [grid-area:1/1]', padded ? `${insetX} ${insetY}` : '', '[transition:filter_var(--plass-duration-slow)_var(--plass-ease)]', 'motion-reduce:[transition-duration:0ms]', open ? '' : 'select-none'), style: {
+                    filter: open ? undefined : `blur(${blur}px)`,
+                    // The clamp is only ever on the covered state: revealing something
+                    // and leaving it in a box with a scrollbar is answering the wrong
+                    // question.
+                    maxHeight: open ? undefined : maxHeight,
+                    overflow: open ? undefined : 'hidden'
+                }, 
+                // `inert` rather than `aria-hidden`: it takes the content out of the
+                // tab order, off the accessibility tree and out of the selection in
+                // one attribute — and `aria-hidden` alone would leave a keyboard
+                // reader tabbing into a link their screen reader has been told is not
+                // there.
+                inert: !open, children: children }), open ? null : (_jsxs("div", { className: cx('z-10 flex flex-col items-center justify-center gap-2 text-center [grid-area:1/1]', insetX, insetY, scrimClasses), children: [hasContent(notice) ? (_jsx("p", { className: cx('m-0 text-(--plass-muted-fg)', metaTextClasses[size]), children: notice })) : null, action ?? (_jsx(PlButton, { size: size, color: color, density: density, onClick: () => change(true), "aria-expanded": false, "aria-controls": contentId, children: label }))] })), open && reversible ? (_jsx("div", { className: cx('flex justify-end', insetX, 
+                // The row takes the sheet's padding on both axes and then gives
+                // the top back: `padded` content already ends with a full gap, and
+                // two of them stacked is a hole between the text and the way back
+                // out. `pt-0` beating `py-*` is Tailwind's own
+                // longhand-after-shorthand ordering rather than an accident of how
+                // these are concatenated.
+                insetY, 'pt-0'), children: _jsx(PlButton, { variant: "ghost", size: size, color: color, density: density, onClick: () => change(false), "aria-expanded": true, "aria-controls": contentId, children: hideLabel }) })) : null] }));
+});

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

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

package/dist/components/spoiler/index.js

@@ -0,0 +1 @@
+export { PlSpoiler } from './PlSpoiler.js';

package/dist/components/switch/PlSwitch.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Switch as BaseUISwitch } from '@base-ui/react/switch';
+import type { PlassAlign, PlassColor, PlassSize } from '../../types.js';
+/** Which side of the track the label sits on. */
+export type PlSwitchLabelPlacement = Extract<PlassAlign, 'start' | 'end'>;
+type BaseSwitchProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUISwitch.Root>, 'className' | 'style' | 'render' | 'children'>;
+export interface PlSwitchProps extends BaseSwitchProps {
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** The text beside the track. Wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the switch invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when an external form
+     * library owns the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    /**
+     * Which side the label sits on. `end` reads as a caption for the control;
+     * `start` is for a settings list, where the labels form a column and every
+     * switch lines up on the right.
+     * @default 'end'
+     */
+    labelPlacement?: PlSwitchLabelPlacement;
+    /** Class names for the field wrapper, not for the track. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * An immediate on/off.
+ *
+ * The difference from a PlCheckbox is not visual, it is temporal: a checkbox is
+ * a value that gets submitted with a form, a switch takes effect the moment it
+ * moves. If there is a Save button underneath, it should have been a checkbox.
+ */
+export declare const PlSwitch: React.ForwardRefExoticComponent<PlSwitchProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/switch/PlSwitch.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Switch as BaseUISwitch } from '@base-ui/react/switch';
+import { Field } from '@base-ui/react/field';
+import { controlSlots, focusRingClasses, hasContent, metaTextClasses, tickRowTextClasses } from '../../internal/styles.js';
+/**
+ * Track and thumb.
+ *
+ * The thumb is inset 2px on every side, so its diameter is the track's height
+ * minus 4 and the `left` it travels to is `100% − 2px − diameter`. That is the
+ * one number per step that has to be written out; everything else falls out of
+ * `inset-y-0.5` and `aspect-square`.
+ */
+const trackClasses = {
+    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'
+};
+const thumbTravelClasses = {
+    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)]'
+};
+/**
+ * A pill, and one of the two places in the library that is right.
+ *
+ * Everywhere else the radius stops well short of 50%, because the flat run
+ * along the top and bottom edge is what reads as a sheet with its corners cut
+ * off. A switch is not a sheet — it is a track something runs along, and a
+ * track with corners is a track the thumb would have to climb out of.
+ */
+const trackBaseClasses = /* @__PURE__ */ [
+    'relative inline-flex shrink-0 rounded-full',
+    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
+    // `background-image` is in the list because the on state is the gradient, and
+    // `left` deliberately is not: it belongs to the thumb, which is the one thing
+    // in the library that actually moves.
+    '[transition-property:background-color,background-image,box-shadow,filter]',
+    '[transition-duration:var(--plass-duration)]',
+    '[transition-timing-function:var(--plass-ease)]',
+    focusRingClasses
+].join(' ');
+/**
+ * Off, the track is the **groove** — `--plass-track`, the one neutral ink in the
+ * library whose job is to be seen from across a room. On, it is the family's
+ * gradient.
+ *
+ * Off used to be the glass at its most opaque with `--plass-well` falling into
+ * it, and it was wrong twice over. It was invisible: a 88%-white pill with a
+ * white thumb in it, set on a near-white page, is a switch a reader cannot find
+ * until they have already flipped it — and the off state is the one a settings
+ * list is mostly made of. And where it *was* visible, in the dark, an inset
+ * shadow under a thumb carrying a drop shadow of its own was a moulded rocker
+ * in a bevelled slot, which is the one picture this design language exists to
+ * not draw.
+ *
+ * So there is no well, no gloss and no edge either. A groove that is a *tone*
+ * rather than a recess needs no hairline to say where it ends, and the hairline
+ * it used to have was the second of two lines round the same object once the
+ * focus ring arrived.
+ *
+ * Dropping the border also squares the thumb's travel. `inset-y-0.5` and
+ * `left-0.5` are measured from the padding box; the `left` a checked thumb
+ * travels to is measured from the track's *width*. With a 1px edge between
+ * them the two disagreed, and every switch in the library sat 2px from its
+ * track on the left and 4px from it on the right.
+ */
+const restTrackClasses = /* @__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(' ');
+const readOnlyTrackClasses = /* @__PURE__ */ [
+    'cursor-default bg-(--plass-track) saturate-[0.55]',
+    'data-[checked]:[background-image:var(--p-fill)]',
+    'data-[checked]:shadow-none'
+].join(' ');
+const disabledTrackClasses = /* @__PURE__ */ [
+    'cursor-not-allowed bg-(--plass-track)',
+    'opacity-50 saturate-[0.35] shadow-none',
+    'data-[checked]:[background-image:var(--p-fill)]'
+].join(' ');
+/**
+ * The thumb is white in both themes — not `--plass-surface`, which is a near
+ * navy in the dark and left the off state as a grey lozenge in a grey slot.
+ *
+ * It keeps a shadow, and it is the smallest one on the ladder rather than the
+ * `--plass-shadow-1` it used to carry: the thumb is the one part of a switch
+ * that genuinely is above the surface it moves along, so it casts something —
+ * but a 14px disc under a 4px-blurred, 14px-wide shadow is a knob, not a light.
+ */
+const thumbClasses = /* @__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(' ');
+/**
+ * An immediate on/off.
+ *
+ * The difference from a PlCheckbox is not visual, it is temporal: a checkbox is
+ * a value that gets submitted with a form, a switch takes effect the moment it
+ * moves. If there is a Save button underneath, it should have been a checkbox.
+ */
+export const PlSwitch = /* @__PURE__ */ React.forwardRef(function PlSwitch({ size = 'md', color = 'primary', label, description, error, invalid, labelPlacement = 'end', disabled = false, readOnly = false, className, style, ...props }, ref) {
+    const hasError = hasContent(error);
+    const isInvalid = invalid ?? hasError;
+    const family = isInvalid ? 'danger' : color;
+    const track = (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: _jsx(BaseUISwitch.Root, { ref: ref, className: [
+                trackBaseClasses,
+                trackClasses[size],
+                disabled ? disabledTrackClasses : readOnly ? readOnlyTrackClasses : restTrackClasses
+            ].join(' '), disabled: disabled, readOnly: readOnly, ...props, children: _jsx(BaseUISwitch.Thumb, { className: `${thumbClasses} ${thumbTravelClasses[size]}` }) }) }));
+    const text = label || description ? (_jsxs("span", { className: [
+            'flex min-w-0 flex-col gap-0.5',
+            // With the label on the left it has to take the slack, or the switch
+            // sits against the text instead of against the edge of the row.
+            labelPlacement === 'start' ? 'flex-1' : ''
+        ]
+            .filter(Boolean)
+            .join(' '), children: [label ? (_jsx(Field.Label, { className: disabled ? 'text-(--plass-muted-fg)' : 'cursor-pointer text-(--plass-fg)', children: label })) : null, description ? (_jsx(Field.Description, { className: `${metaTextClasses[size]} text-(--plass-muted-fg)`, children: description })) : null] })) : null;
+    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: ['inline-flex flex-col gap-1 align-top', className ?? '']
+            .filter(Boolean)
+            .join(' '), 
+        // `solid`, because an on track *is* the coloured thing.
+        style: { ...controlSlots(family, 0, 'solid'), ...style }, children: [_jsx("div", { className: `flex items-start gap-2.5 ${tickRowTextClasses[size]}`, children: labelPlacement === 'start' ? (_jsxs(_Fragment, { children: [text, track] })) : (_jsxs(_Fragment, { children: [track, text] })) }), hasError ? (_jsx(Field.Error, { match: true, className: `${metaTextClasses[size]} text-(--p-accent)`, children: error })) : null] }));
+});

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

@@ -0,0 +1,2 @@
+export { PlSwitch } from './PlSwitch.js';
+export type { PlSwitchLabelPlacement, PlSwitchProps } from './PlSwitch.js';

package/dist/components/switch/index.js

@@ -0,0 +1 @@
+export { PlSwitch } from './PlSwitch.js';

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

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import type { PlassAlign, PlassElevation, PlassStyleProps } from '../../types.js';
+/** Which edge the text in a column lines up against. */
+export type PlTableAlign = PlassAlign;
+/**
+ * A column: its heading, its default width, and how to get a cell out of a row.
+ *
+ * This is the whole reason a table takes data rather than markup. A `<td>`
+ * written out per row can silently disagree with the `<th>` above it about how
+ * many there are or what order they come in; a column list cannot.
+ */
+export interface PlTableColumn<Row> {
+    /**
+     * Identifies the column, and — unless `render` says otherwise — names the
+     * property to read off each row.
+     */
+    key: string;
+    /** The heading. Defaults to the `key`, which is usually not what you want. */
+    header?: React.ReactNode;
+    /**
+     * The column's default width. A number is pixels; a string is any CSS length
+     * (`'30%'`, `'12rem'`).
+     *
+     * "Default" is meant: the table still balances its columns to fill the sheet,
+     * so this is a starting proportion rather than a guarantee.
+     */
+    width?: number | string;
+    /**
+     * Text alignment. Numbers usually want `end` so their digits line up in a
+     * column; everything else wants `start`.
+     * @default 'start'
+     */
+    align?: PlTableAlign;
+    /**
+     * Renders the cell. Without it the cell is `row[key]` rendered as-is, which
+     * covers strings and numbers and nothing else.
+     */
+    render?: (row: Row, index: number) => React.ReactNode;
+}
+export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` is the default — a table is a grid set into the page
+     * rather than a panel floating over it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** The columns, in the order they appear. */
+    columns: readonly PlTableColumn<Row>[];
+    /** The rows. */
+    rows: readonly Row[];
+    /**
+     * A stable key per row. Defaults to the row's index, which is fine for a
+     * static table and wrong for one that sorts or filters.
+     */
+    getRowKey?: (row: Row, index: number) => React.Key;
+    /** Shown above the grid, and read out as the table's accessible name. */
+    caption?: React.ReactNode;
+    /**
+     * What to show instead of rows when `rows` is empty.
+     * @default 'No data'
+     */
+    empty?: React.ReactNode;
+    /**
+     * Tints every other row. Useful on a wide table where the eye has to track
+     * across; noise on a narrow one.
+     * @default false
+     */
+    striped?: boolean;
+    /** Lights the row under the pointer. @default false */
+    hoverable?: boolean;
+    /**
+     * 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.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * A hard cap on the grid's height. A number is pixels; a string is any CSS
+     * length (`'24rem'`, `'60vh'`).
+     *
+     * Past it the rows scroll inside the sheet rather than the page growing, and
+     * the sheet keeps the size the layout around it was drawn for. It is the
+     * other half of `stickyHeader`: capped without pinning, the column names
+     * scroll away and the rest of the table is a grid of unlabelled numbers.
+     *
+     * The **grid** and not the sheet: a `caption` sits above the rows and outside
+     * what is capped, because a caption that scrolled away would take the table's
+     * accessible name with it.
+     */
+    maxHeight?: number | string;
+    /** Makes rows activatable. Also turns on the hover treatment. */
+    onRowClick?: (row: Row, index: number) => void;
+}
+/**
+ * A grid of data on a sheet of glass.
+ *
+ * The sheet is the ordinary Plass container — `variant`, `size`, `color`,
+ * `density` and `elevation` all mean what they mean everywhere else, and it is
+ * never dyed. What the table adds is the part that is genuinely tabular: the
+ * columns, the rows, and the fact that the two cannot drift apart.
+ *
+ * Not a `forwardRef`, because it is generic: a component wrapped in
+ * `React.forwardRef` loses its type parameter, and `Row` is the whole point of
+ * the API. `ref` is not offered rather than being offered with `Row` widened to
+ * `any`.
+ */
+export declare function PlTable<Row>({ variant, size, color, density, elevation, columns, rows, getRowKey, caption, empty, striped, hoverable, stickyHeader, maxHeight, onRowClick, className, style, ...props }: PlTableProps<Row>): React.JSX.Element;