plass-ui 0.0.1 → 1.0.0

package/dist/components/number-field/PlNumberField.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberField as BaseUINumberField } from '@base-ui/react/number-field';
+import { Field } from '@base-ui/react/field';
+import { MinusIcon, PlusIcon } from '../../internal/icons.js';
+import { controlHeightClasses, controlTextLeadingClasses, disabledClasses, fieldReadOnlyClasses, fieldRestClasses, focusRingClasses, focusWithinRingClasses, gapClasses, hasContent, iconClasses, metaTextClasses, paddingXClasses, radiusClasses, stackGapClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
+/** The shell is a `PlTextField`'s, to the pixel — see `fieldRestClasses`. */
+const shellBaseClasses = /* @__PURE__ */ [
+    'group relative flex w-full cursor-text items-center',
+    '[-webkit-tap-highlight-color:transparent]',
+    transitionClasses,
+    'focus-within:[transition-duration:0ms]',
+    focusWithinRingClasses,
+    iconClasses
+].join(' ');
+/**
+ * A stepper. Square, tracking the text rather than the control, so the same
+ * button works at every step of the scale without a table of its own.
+ *
+ * No `transform` on it, the same rule every control in the library keeps: what
+ * moves under the finger is the tint, not the button.
+ */
+const stepperClasses = /* @__PURE__ */ [
+    'inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center',
+    'rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none',
+    '[&_svg]:size-[0.9em] [&_svg]:shrink-0',
+    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
+    '[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]',
+    'active:[transition-duration:0ms]',
+    'hover:bg-(--p-soft) hover:text-(--p-accent)',
+    'active:bg-(--p-soft-press)',
+    focusRingClasses,
+    // A stepper that has run into `min` goes out like everything else that is
+    // unavailable here: the page shows through it.
+    'disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40'
+].join(' ');
+/**
+ * A field that only holds a number.
+ *
+ * The shell is a `PlTextField`'s, to the pixel, because a form where the
+ * quantity box is a different height or radius from the boxes around it is a
+ * form that looks assembled rather than designed. What is added on top is a real
+ * numeric control: arrow keys and the steppers move by `step` (Shift for
+ * `largeStep`, Alt for `smallStep`), the value clamps to `min`/`max`, and
+ * `format` writes it as currency or a percentage while `value` stays a plain
+ * number.
+ *
+ * Base UI owns the hard parts — parsing what was typed against the locale,
+ * clamping, the press-and-hold repeat on the steppers, and the hidden input that
+ * submits with a form.
+ */
+export function PlNumberField({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub = false, format, locale, steppers = 'end', incrementLabel = 'Increase', decrementLabel = 'Decrease', label, description, error, invalid, startIcon, endIcon, fullWidth = false, disabled = false, readOnly = false, required = false, name, placeholder, id, className, style, ...props }) {
+    const hasError = hasContent(error);
+    const isInvalid = invalid ?? hasError;
+    // Invalid re-points the whole slot family at `danger`, so the edge, the ring,
+    // the caret and the message all turn over together.
+    const family = isInvalid ? 'danger' : color;
+    // The steppers bring their own padding; stacking the shell's on top of them
+    // would leave the buttons floating in the middle of a gap. The shell keeps the
+    // padding on whichever side has no button.
+    const padX = paddingXClasses[density][size];
+    const insetClasses = {
+        end: `${padX} pe-1`,
+        split: 'px-1',
+        none: padX
+    };
+    const decrement = (_jsx(BaseUINumberField.Decrement, { "aria-label": decrementLabel, className: stepperClasses, children: _jsx(MinusIcon, {}) }));
+    const increment = (_jsx(BaseUINumberField.Increment, { "aria-label": incrementLabel, className: stepperClasses, children: _jsx(PlusIcon, {}) }));
+    const showSteppers = steppers !== 'none' && !readOnly;
+    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: [
+            'flex-col align-top',
+            stackGapClasses[size],
+            fullWidth ? 'flex w-full' : 'inline-flex',
+            className ?? ''
+        ]
+            .filter(Boolean)
+            .join(' '), style: { ...surfaceSlots(family, elevation), ...style }, ...props, children: [label ? (_jsx(Field.Label, { className: [
+                    metaTextClasses[size],
+                    'font-medium text-(--plass-fg)',
+                    disabled ? 'opacity-50' : ''
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: label })) : null, _jsx(BaseUINumberField.Root, { id: id, name: name, className: "contents", value: value, defaultValue: defaultValue, onValueChange: (next) => onValueChange?.(next), onValueCommitted: (next) => onValueCommitted?.(next), min: min, max: max, step: step, largeStep: largeStep, smallStep: smallStep, snapOnStep: snapOnStep, allowWheelScrub: allowWheelScrub, format: format, locale: locale, disabled: disabled, readOnly: readOnly, required: required, children: _jsxs(BaseUINumberField.Group, { className: [
+                        shellBaseClasses,
+                        controlHeightClasses[size],
+                        controlTextLeadingClasses[size],
+                        radiusClasses[size],
+                        gapClasses[size],
+                        showSteppers ? insetClasses[steppers] : padX,
+                        // An if/else rather than stacked variants: two Tailwind classes of
+                        // equal specificity resolve by their order in the generated sheet.
+                        disabled
+                            ? disabledClasses[variant]
+                            : readOnly
+                                ? fieldReadOnlyClasses[variant]
+                                : fieldRestClasses[variant]
+                    ].join(' '), children: [showSteppers && steppers === 'split' ? decrement : null, startIcon ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, _jsx(BaseUINumberField.Input, { placeholder: placeholder, className: [
+                                'min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit',
+                                // Not `outline-none`: that utility zeroes `--tw-outline-style`, and
+                                // the shell's focus ring is drawn from the same family.
+                                '[outline:none]',
+                                'tabular-nums',
+                                // Split steppers put the number between the two buttons, so it
+                                // belongs in the middle rather than against an edge.
+                                steppers === 'split' && showSteppers ? 'text-center' : '',
+                                'placeholder:text-(--plass-muted-fg)',
+                                'caret-(--p-accent) selection:bg-(--p-soft-press)',
+                                'disabled:cursor-not-allowed'
+                            ]
+                                .filter(Boolean)
+                                .join(' ') }), endIcon ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: endIcon })) : null, showSteppers && steppers === 'end' ? (_jsxs("span", { className: "flex shrink-0 items-center gap-0.5", children: [decrement, increment] })) : null, showSteppers && steppers === 'split' ? increment : null] }) }), description ? (_jsx(Field.Description, { className: `${metaTextClasses[size]} text-(--plass-muted-fg)`, children: description })) : null, hasError ? (_jsx(Field.Error, { match: true, className: `${metaTextClasses[size]} text-(--p-accent)`, children: error })) : null] }));
+}

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,2 @@
+export { PlNumberField } from './PlNumberField.js';
+export type { PlNumberFieldProps, PlNumberFieldSteppers } from './PlNumberField.js';

package/dist/components/number-field/index.js

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

package/dist/components/otp-field/PlOtpField.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * What may be typed into a slot.
+ *
+ * `numeric` is the default because that is what a texted code is, and it is
+ * also what puts a number pad in front of a phone. `any` accepts whatever the
+ * keyboard produces — for a licence key with punctuation in it.
+ */
+export type PlOtpCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
+export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'children'> {
+    /** Drop shadow depth. `0` is the default — a field is cut into the sheet. */
+    elevation?: PlassElevation;
+    /**
+     * How many characters the code has. Clamped to 2–12: a single box is a
+     * `PlTextField`, and past twelve the row stops fitting a phone.
+     * @default 6
+     */
+    length?: number;
+    /**
+     * What may be typed. Anything rejected is dropped rather than shown, and
+     * `onValueInvalid` reports it.
+     * @default 'numeric'
+     */
+    charset?: PlOtpCharset;
+    /** Hides the characters, the way a password field does. @default false */
+    mask?: boolean;
+    /**
+     * Splits the row every `groupSize` slots with a separator. `3` on a six-digit
+     * code gives the familiar two blocks of three.
+     */
+    groupSize?: number;
+    /** What is drawn between two groups. @default '–' */
+    separator?: React.ReactNode;
+    /** The code. Use with `onValueChange` for a controlled field. */
+    value?: string;
+    /** What it starts as, for an uncontrolled one. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fires once every slot is filled — the moment to verify the code. */
+    onComplete?: (value: string) => void;
+    /** Fires when typed or pasted text held characters the charset rejects. */
+    onValueInvalid?: (value: string) => void;
+    /** Submits the owning form as soon as the code is complete. @default false */
+    autoSubmit?: boolean;
+    /** Label above the row, wired to the slots by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text below the row. */
+    description?: React.ReactNode;
+    /** Error message below the row. Its presence also turns the field invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when a form library owns
+     * the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** The form must have a complete code before it submits. @default false */
+    required?: boolean;
+    /** Unavailable. Every slot stops answering. */
+    disabled?: boolean;
+    /** Readable and copyable, but not typeable. @default false */
+    readOnly?: boolean;
+    /** Puts the caret in the first slot on mount. @default false */
+    autoFocus?: boolean;
+}
+/**
+ * A row of one-character slots: a PIN, a texted verification code, an invite
+ * key.
+ *
+ * Base UI owns everything that makes this harder than it looks — one hidden
+ * value behind however many inputs, paste spread across the slots from wherever
+ * the caret was, backspace stepping back a box, a click landing on the first
+ * empty slot rather than the one under the pointer, and the autofill hook that
+ * lets a phone offer the code straight from the message.
+ *
+ * What is here is the ladder a slot is drawn on and the field shell it shares
+ * with `PlTextField` and `PlSelect` — a slot is a field-shaped box, and a form
+ * holding both should not look like two form kits stacked on each other.
+ */
+export declare const PlOtpField: React.ForwardRefExoticComponent<PlOtpFieldProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/otp-field/PlOtpField.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Field } from '@base-ui/react/field';
+import { OTPField } from '@base-ui/react/otp-field';
+import { cx, disabledClasses, fieldReadOnlyClasses, fieldRestClasses, hasContent, metaTextClasses, stackGapClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
+/** How many slots a code may have. Two is the shortest thing worth splitting. */
+const MIN_LENGTH = 2;
+const MAX_LENGTH = 12;
+/**
+ * A slot's box.
+ *
+ * Its own ladder rather than `controlHeightClasses`, for the reason a tick box
+ * has one: a slot is not a control in a row of controls, it is a character
+ * standing on its own, and an `md` slot the height of an `md` `PlButton` would
+ * be too small to read a code out of across a desk. Every step is taller than it
+ * is wide, which is what makes a row of them read as places for one character
+ * each rather than as a row of tiny fields.
+ */
+const slotSizeClasses = {
+    xs: 'h-7 w-6',
+    sm: 'h-8 w-7',
+    md: 'h-10 w-8',
+    lg: 'h-12 w-10',
+    xl: 'h-14 w-12'
+};
+/**
+ * And its own radius, for the reason a tick box has one.
+ *
+ * `radiusClasses` is a percentage of a *control's height*, which is a cut corner
+ * on something wide and a lozenge on something nearly square: `md` is 12px, and
+ * a 12px corner on a 32px-wide box is most of the way to a pill. These are
+ * ~22% of the slot's width instead, which is the same amount of cut on this
+ * shape — a sheet with the corners taken off, never a pill.
+ */
+const slotRadiusClasses = {
+    xs: 'rounded-[0.3125rem]',
+    sm: 'rounded-[0.375rem]',
+    md: 'rounded-[0.4375rem]',
+    lg: 'rounded-[0.5625rem]',
+    xl: 'rounded-[0.6875rem]'
+};
+/**
+ * And its own type scale, two steps up the control ladder. A verification code
+ * is read out loud off a phone and typed with the other hand; it is the one
+ * piece of text in a form that should be bigger than the label above it.
+ */
+const slotTextClasses = {
+    xs: 'text-[0.8125rem]',
+    sm: 'text-[0.9375rem]',
+    md: 'text-[1.0625rem]',
+    lg: 'text-[1.25rem]',
+    xl: 'text-[1.5rem]'
+};
+/**
+ * Between the slots, and the only thing `density` touches here — spacing, never
+ * the box and never the type scale, exactly as everywhere else in the library.
+ */
+const slotGapClasses = {
+    default: { xs: 'gap-1', sm: 'gap-1', md: 'gap-1.5', lg: 'gap-2', xl: 'gap-2.5' },
+    compact: { xs: 'gap-0.5', sm: 'gap-0.5', md: 'gap-1', lg: 'gap-1', xl: 'gap-1.5' }
+};
+/** `charset` is the library's word; Base UI's is `validationType`. */
+const validationTypes = {
+    numeric: 'numeric',
+    alpha: 'alpha',
+    alphanumeric: 'alphanumeric',
+    any: 'none'
+};
+/**
+ * A row of one-character slots: a PIN, a texted verification code, an invite
+ * key.
+ *
+ * Base UI owns everything that makes this harder than it looks — one hidden
+ * value behind however many inputs, paste spread across the slots from wherever
+ * the caret was, backspace stepping back a box, a click landing on the first
+ * empty slot rather than the one under the pointer, and the autofill hook that
+ * lets a phone offer the code straight from the message.
+ *
+ * What is here is the ladder a slot is drawn on and the field shell it shares
+ * with `PlTextField` and `PlSelect` — a slot is a field-shaped box, and a form
+ * holding both should not look like two form kits stacked on each other.
+ */
+export const PlOtpField = /* @__PURE__ */ React.forwardRef(function PlOtpField({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, length = 6, charset = 'numeric', mask = false, groupSize, separator = '–', value, defaultValue, onValueChange, onComplete, onValueInvalid, autoSubmit = false, label, description, error, invalid, name, required = false, disabled = false, readOnly = false, autoFocus = false, className, style, ...props }, ref) {
+    const slots = Math.min(MAX_LENGTH, Math.max(MIN_LENGTH, Math.round(length)));
+    const hasError = hasContent(error);
+    const isInvalid = invalid ?? hasError;
+    // Invalid re-points the whole slot family at `danger`, exactly as on
+    // PlTextField, so the edge, the ring, the caret and the message all turn over
+    // together and no state needs tokens of its own.
+    const family = isInvalid ? 'danger' : color;
+    const slotClassNames = cx(
+    // `font-family` rather than the `font` shorthand: the shorthand would take
+    // the inherited font *size* with it and undo the ladder set on the next
+    // line.
+    'text-center font-medium [font-family:inherit]', slotSizeClasses[size], slotTextClasses[size], slotRadiusClasses[size], transitionClasses, 'caret-(--p-accent) selection:bg-(--p-soft-press)', 
+    // `focus` rather than `focus-visible`: a slot is put in focus by clicking it
+    // as often as by typing into it, and the ring is the only thing saying which
+    // character the next keystroke lands on.
+    'focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]', 'focus:[transition-duration:0ms]', 
+    // An if/else rather than stacked variants: two Tailwind classes of equal
+    // specificity resolve by their order in the generated stylesheet.
+    disabled
+        ? disabledClasses[variant]
+        : readOnly
+            ? fieldReadOnlyClasses[variant]
+            : fieldRestClasses[variant]);
+    const separatorEvery = groupSize && groupSize > 0 ? Math.round(groupSize) : 0;
+    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: cx('inline-flex flex-col align-top', stackGapClasses[size], className), style: { ...surfaceSlots(family, elevation), ...style }, children: [hasContent(label) ? (_jsx(Field.Label, { className: cx(metaTextClasses[size], 'font-medium', disabled ? 'text-(--plass-muted-fg)' : 'text-(--plass-fg)'), children: label })) : null, _jsx(OTPField.Root, { ref: ref, length: slots, validationType: validationTypes[charset], mask: mask, name: name, required: required, disabled: disabled, readOnly: readOnly, autoSubmit: autoSubmit, value: value, defaultValue: defaultValue, onValueChange: (next) => onValueChange?.(next), onValueComplete: (next) => onComplete?.(next), onValueInvalid: (next) => onValueInvalid?.(next), className: cx('flex items-center', slotGapClasses[density][size]), ...props, children: Array.from({ length: slots }, (_, index) => (_jsxs(React.Fragment, { children: [separatorEvery > 0 && index > 0 && index % separatorEvery === 0 ? (_jsx("span", { "aria-hidden": "true", className: cx('select-none px-0.5 text-(--plass-muted-fg)', slotTextClasses[size]), children: separator })) : null, _jsx(OTPField.Input, { className: slotClassNames, autoFocus: autoFocus && index === 0 })] }, index))) }), hasContent(description) ? (_jsx(Field.Description, { className: cx(metaTextClasses[size], 'text-(--plass-muted-fg)'), children: description })) : null, hasError ? (_jsx(Field.Error, { match: true, className: cx(metaTextClasses[size], 'text-(--p-accent)'), children: error })) : null] }));
+});

package/dist/components/otp-field/index.d.ts

@@ -0,0 +1,2 @@
+export { PlOtpField } from './PlOtpField.js';
+export type { PlOtpCharset, PlOtpFieldProps } from './PlOtpField.js';

package/dist/components/otp-field/index.js

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

package/dist/components/overlay/PlOverlay.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import type { PlassAlign, PlassColor, PlassSize } from '../../types.js';
+/**
+ * How much of the page the overlay takes away.
+ *
+ * The four steps are one axis — how legible is what is behind — and they are
+ * tuned with the blur radius as much as with the alpha, because past about 16px
+ * a backdrop smears into flat colour and the scrim reads opaque no matter how
+ * low its alpha goes.
+ *
+ * - `scrim` — the neutral dim a `PlModal` puts behind itself. The page is still
+ *   there and still readable; it has only stopped being reachable.
+ * - `glass` — the house material at full strength, turned on the whole page. A
+ *   lighter dim over a real blur, so what is behind is present as shape and
+ *   colour but not as words. For "this is being replaced".
+ * - `solid` — the page surface, opaque. For a screen that is genuinely gone.
+ * - `clear` — nothing drawn at all. Still blocks the pointer, which is the whole
+ *   reason to reach for it: an invisible sheet that catches a click.
+ */
+export type PlOverlayTone = 'scrim' | 'glass' | 'solid' | 'clear';
+/**
+ * An overlay takes `size`, `color` and `align` and stops there.
+ *
+ * There is no `variant` — the three materials answer "how much does this surface
+ * assert itself against the page", and an overlay has taken the page; `tone` is
+ * the question it actually has to answer. There is no `elevation` either: the
+ * overlay *is* the plane everything else floats above, and a scrim with a drop
+ * shadow is a scrim with an edge.
+ */
+export interface PlOverlayProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /** The overlay is shown. Use with `onOpenChange` for a controlled overlay. */
+    open?: boolean;
+    /** Whether the overlay starts shown, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * How much of the page is taken away.
+     * @default 'scrim'
+     */
+    tone?: PlOverlayTone;
+    /**
+     * Whether clicking the overlay or pressing Escape closes it.
+     *
+     * Off by default, which is the other way round from `PlModal`. A modal asks a
+     * question and Escape is the universal "no"; an overlay is not asking anything
+     * — it is saying *wait* — and a save that can be dismissed by a stray click is
+     * a save the user will think finished. Turn it on for the overlay whose job is
+     * to catch a click outside something.
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Whether the page behind is taken away for the keyboard too. `'trap-focus'`
+     * leaves the page scrollable and clickable while still holding focus inside,
+     * which is what a `clear` overlay usually wants.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Where the content sits down the viewport.
+     * @default 'center'
+     */
+    align?: PlassAlign;
+    /**
+     * Scale of the padding around the content.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** Semantic colour role. Reaches the focus ring and whatever the content reads. */
+    color?: PlassColor;
+    /**
+     * The accessible name of the overlay. Never drawn.
+     *
+     * An overlay that holds nothing readable — a bare spinner, a `clear` sheet —
+     * still has to say what it is, which is why this has a default rather than
+     * being left empty.
+     * @default 'Overlay'
+     */
+    label?: string;
+    /** What sits on top of the scrim — a spinner, a line of text, a small card. */
+    children?: React.ReactNode;
+}
+/**
+ * A sheet over the whole page that stops it being used.
+ *
+ * The difference from a `PlModal` is what is *not* here: no surface, no border,
+ * no title, no actions. An overlay is the scrim on its own, with whatever the
+ * caller puts on top of it — most often a spinner and a line saying what is
+ * being waited for.
+ *
+ * It is not dismissible by default, and that is the one prop worth reading
+ * twice. Everything else Base UI owns: the portal, the scroll lock, the focus
+ * held inside, the page behind going inert, and focus returning to wherever it
+ * came from when the overlay closes.
+ */
+export declare function PlOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, color, label, className, style, children, ...props }: PlOverlayProps): React.JSX.Element;

package/dist/components/overlay/PlOverlay.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as BaseUIDialog } from '@base-ui/react/dialog';
+import { surfaceSlots } from '../../internal/styles.js';
+/**
+ * The four tones.
+ *
+ * `scrim` matches `PlModal`'s backdrop exactly — the two have to, or a modal
+ * opened over an overlay would show a seam. `clear` draws nothing and still
+ * covers the viewport, so it goes on catching pointer events.
+ */
+const toneClasses = {
+    scrim: 'bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]',
+    glass: /* @__PURE__ */ [
+        '[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]',
+        '[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]'
+    ].join(' '),
+    solid: 'bg-(--plass-surface)',
+    clear: ''
+};
+const alignClasses = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end'
+};
+/** The padding between the content and the edge of the viewport. */
+const insetClasses = {
+    xs: 'p-3',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8',
+    xl: 'p-10'
+};
+/**
+ * Opacity only, on both the scrim and the content. An overlay that scales or
+ * slides drags whatever is written on it across the screen, which is the one
+ * thing the house style is against — and unlike a control, this one is usually
+ * carrying a sentence.
+ */
+const fadeClasses = /* @__PURE__ */ [
+    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
+    'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0'
+].join(' ');
+/**
+ * A sheet over the whole page that stops it being used.
+ *
+ * The difference from a `PlModal` is what is *not* here: no surface, no border,
+ * no title, no actions. An overlay is the scrim on its own, with whatever the
+ * caller puts on top of it — most often a spinner and a line saying what is
+ * being waited for.
+ *
+ * It is not dismissible by default, and that is the one prop worth reading
+ * twice. Everything else Base UI owns: the portal, the scroll lock, the focus
+ * held inside, the page behind going inert, and focus returning to wherever it
+ * came from when the overlay closes.
+ */
+export function PlOverlay({ open, defaultOpen, onOpenChange, tone = 'scrim', dismissible = false, modal = true, align = 'center', size = 'md', color = 'primary', label = 'Overlay', className, style, children, ...props }) {
+    return (_jsx(BaseUIDialog.Root, { open: open, defaultOpen: defaultOpen, modal: modal, disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
+            // `disablePointerDismissal` covers the click; Escape has no prop of its
+            // own, so it is cancelled here by the reason the change arrives with.
+            if (!dismissible && !next && details.reason === 'escape-key') {
+                details.cancel();
+                return;
+            }
+            onOpenChange?.(next);
+        }, children: _jsxs(BaseUIDialog.Portal, { children: [_jsx(BaseUIDialog.Backdrop, { className: `plass-portal fixed inset-0 z-50 ${fadeClasses} ${toneClasses[tone]}` }), _jsx(BaseUIDialog.Viewport, { className: [
+                        'plass-portal fixed inset-0 z-50 flex justify-center',
+                        alignClasses[align],
+                        insetClasses[size]
+                    ].join(' '), children: _jsx(BaseUIDialog.Popup, { "aria-label": label, className: [
+                            'flex max-h-full max-w-full flex-col items-center justify-center',
+                            '[outline:none]',
+                            fadeClasses,
+                            className ?? ''
+                        ]
+                            .filter(Boolean)
+                            .join(' '), style: { ...surfaceSlots(color, 0), ...style }, ...props, children: children }) })] }) }));
+}

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

@@ -0,0 +1,2 @@
+export { PlOverlay } from './PlOverlay.js';
+export type { PlOverlayProps, PlOverlayTone } from './PlOverlay.js';

package/dist/components/overlay/index.js

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

package/dist/components/pagination/PlPagination.d.ts

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlPaginationProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'onChange'> {
+    /** How many pages there are. Fewer than two and the whole control renders nothing. */
+    count: number;
+    /** The current page, 1-based. Use with `onPageChange` for a controlled row. */
+    page?: number;
+    /** Which page starts current, for an uncontrolled one. @default 1 */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /**
+     * How many pages are always shown on either side of the current one.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * How many pages are always shown at each end, whatever the current page is.
+     * `0` drops the first and last page from the row, leaving only the window.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /** Shows the jump-to-first and jump-to-last steppers. @default false */
+    showEdges?: boolean;
+    /** Shows the previous and next steppers. @default true */
+    showArrows?: boolean;
+    /**
+     * Drop shadow depth of the page buttons. `0` is the default: a row of nine
+     * keys each casting its own shadow is nine shadows.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Unavailable. Every button in the row stops answering. */
+    disabled?: boolean;
+    /**
+     * The address of a page, which turns every number in the row into a real
+     * link.
+     *
+     * Without it the row is buttons, and a crawler cannot press one — so a paged
+     * list of articles, products or search results exists for a reader and stops
+     * at page one for everything else. With it the numbers are `<a href>`, the
+     * two arrows carry `rel="prev"` / `rel="next"`, and the browser's own
+     * behaviour comes back: open in a new tab, copy the address, see where a
+     * press is going before making it.
+     *
+     * `onPageChange` still fires and the press is still cancelled first, so a
+     * client-side router keeps the page it already has. A link with nowhere to go
+     * — the current page, a stepper at the end of the row — stays a `<button>`,
+     * because `disabled` is not something an `<a>` can be.
+     */
+    getPageHref?: (page: number) => string;
+    /**
+     * The accessible names, none of which is ever drawn.
+     *
+     * They are props rather than being read from a message catalogue for the same
+     * reason `PlTable` takes its `empty` line as one: a library that shipped
+     * translations would have to be told which language a page is in, and the page
+     * already knows.
+     */
+    label?: string;
+    /** Accessible name of a page button. @default `Page {n}` */
+    pageLabel?: (page: number) => string;
+    previousLabel?: string;
+    nextLabel?: string;
+    firstLabel?: string;
+    lastLabel?: string;
+    /** The live-region sentence a screen reader hears when the page changes. */
+    statusLabel?: (page: number, count: number) => string;
+}
+/**
+ * A row of page numbers.
+ *
+ * Every button in it is a real `PlButton`, which is the point: a pagination is
+ * not a new kind of control, it is buttons in a row that happen to know about
+ * each other. Reusing the component means the row inherits the glass, the
+ * pointer bloom, the press signature, the focus ring and every future change to
+ * any of them for free — and it means an `lg` pagination lines up with an `lg`
+ * button beside it, because it *is* one.
+ *
+ * `variant` sets how the pages at rest look; the current page is always `solid`,
+ * which is the one thing the row has to say without being read. That is why the
+ * default here is `ghost` rather than the `solid` a lone PlButton takes — nine
+ * panes of tinted glass in a row say that all nine are the primary action.
+ *
+ * The markup is a `<nav>` around a `<ul>` because that is what a screen reader
+ * needs to hear: a named landmark it can skip, holding a list whose length says
+ * how far the pages go, with `aria-current="page"` marking where it is.
+ */
+export declare const PlPagination: React.ForwardRefExoticComponent<PlPaginationProps & React.RefAttributes<HTMLElement>>;