plass-ui 0.0.1 → 1.0.0

package/dist/components/collapsible/PlCollapsible.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Collapsible as BaseUICollapsible } from '@base-ui/react/collapsible';
+import { ChevronIcon } from '../../internal/icons.js';
+import { cx, focusRingInsetClasses, gapClasses, hasContent, iconClasses, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, sheetTitleClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
+/**
+ * The space between the header and the body it opened.
+ *
+ * The header's own padding does not pay for it, which is the correction
+ * `PlAccordion` already carries: an open header is a tinted band with its own
+ * bottom edge, the body begins at that edge, and its first line lands against
+ * it with only half a leading in between — so the title and the paragraph
+ * explaining it read as one run of text broken by a colour change.
+ */
+const panelPaddingTopClasses = {
+    default: { xs: 'pt-1.5', sm: 'pt-2', md: 'pt-3', lg: 'pt-3.5', xl: 'pt-4' },
+    compact: { xs: 'pt-1', sm: 'pt-1.5', md: 'pt-2', lg: 'pt-2.5', xl: 'pt-3' }
+};
+/** And the space under it, on the same two tracks. */
+const panelPaddingBottomClasses = {
+    default: { xs: 'pb-2.5', sm: 'pb-3', md: 'pb-5', lg: 'pb-6', xl: 'pb-7' },
+    compact: { xs: 'pb-2', sm: 'pb-2.5', md: 'pb-3.5', lg: 'pb-4', xl: 'pb-5' }
+};
+/**
+ * One section that folds, standing on its own.
+ *
+ * A `PlAccordion` is a *set* of these and owns which one of them is open; this
+ * is the same fold with nothing else beside it, so what it needs is an `open` of
+ * its own rather than a place in somebody's list. Reach for it for a "Show more"
+ * on a form, an optional block of settings, the details under a row.
+ *
+ * Base UI owns the parts that are genuinely hard: the `button` / panel pairing
+ * and the `aria-controls` / `aria-expanded` wiring between them,
+ * `hidden="until-found"`, and measuring the panel so it has a height to animate
+ * from.
+ *
+ * The panel's height *is* animated, which looks like an exception to the rule
+ * against moving things and is not: nothing is transformed, no text is
+ * resampled, and the content does not shift relative to the panel it is in — the
+ * panel is a window opening onto it. Content that appears instantly is a page
+ * that jumps, which is the failure the rule exists to prevent.
+ */
+export const PlCollapsible = /* @__PURE__ */ React.forwardRef(function PlCollapsible({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, open, defaultOpen = false, onOpenChange, title, subtitle, startIcon, action, trigger, indicator = true, disabled = false, padded = true, hiddenUntilFound = false, keepMounted = false, className, style, children, ...props }, ref) {
+    const padX = sheetPaddingXClasses[density][size];
+    const padY = sheetPaddingYClasses[density][size];
+    return (_jsxs(BaseUICollapsible.Root, { ref: ref, open: open, defaultOpen: defaultOpen, onOpenChange: (next) => onOpenChange?.(next), disabled: disabled, className: cx(
+        // `overflow-hidden` is what makes the panel a window rather than
+        // something that spills past the sheet's own corners while it moves.
+        'flex flex-col overflow-hidden', radiusClasses[size], sheetRestClasses[variant], transitionClasses, className), style: { ...surfaceSlots(color, elevation), ...style }, ...props, children: [trigger ? (_jsx(BaseUICollapsible.Trigger, { render: trigger })) : (_jsxs("div", { className: "flex w-full items-center", children: [_jsxs(BaseUICollapsible.Trigger, { className: cx('flex min-w-0 flex-1 cursor-pointer items-center text-start', padX, padY, gapClasses[size], transitionClasses, iconClasses, 
+                        // Inset rather than offset. The sheet clips its children so the
+                        // panel can be a window, and `overflow: hidden` clips a
+                        // descendant's outline along with everything else — an offset
+                        // ring on a trigger that fills the top of the sheet would be
+                        // shaved off on three sides.
+                        focusRingInsetClasses, 'hover:bg-(--p-soft)', 'data-[panel-open]:bg-(--p-soft) data-[panel-open]:text-(--p-accent)', 'disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50'), children: [hasContent(startIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, _jsxs("span", { className: cx('flex min-w-0 flex-1 flex-col', sheetHeaderGapClasses[size]), children: [hasContent(title) ? (_jsx("span", { className: cx('plass-title truncate font-semibold', sheetTitleClasses[size]), children: title })) : null, hasContent(subtitle) ? (_jsx("span", { className: cx('truncate text-(--plass-muted-fg)', metaTextClasses[size]), children: subtitle })) : null] }), indicator ? (_jsx("span", { className: cx('flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)', '[transition:rotate_var(--plass-duration)_var(--plass-ease)]', 'data-[panel-open]:rotate-180'), children: _jsx(ChevronIcon, {}) })) : null] }), hasContent(action) ? (_jsx("span", { className: cx('flex shrink-0 items-center', padX), children: action })) : null] })), _jsx(BaseUICollapsible.Panel, { hiddenUntilFound: hiddenUntilFound, keepMounted: keepMounted, className: cx('h-(--collapsible-panel-height) overflow-hidden', '[transition:height_var(--plass-duration-slow)_var(--plass-ease)]', 'data-[starting-style]:h-0 data-[ending-style]:h-0'), children: _jsx("div", { className: cx('min-w-0 text-(--plass-muted-fg)', sheetBodyClasses[size], padded ? padX : '', 
+                    // The default header already paid for the space above, so the
+                    // body only owes what goes under it — otherwise a closed
+                    // collapsible would look padded. A caller's own `trigger` has paid
+                    // for nothing, so there the panel owes both.
+                    padded
+                        ? trigger
+                            ? `${panelPaddingTopClasses[density][size]} ${panelPaddingBottomClasses[density][size]}`
+                            : panelPaddingBottomClasses[density][size]
+                        : ''), children: children }) })] }));
+});

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

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

package/dist/components/collapsible/index.js

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

package/dist/components/combobox/PlCombobox.d.ts

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * What a combobox's value may be — the same two types a PlSelect submits, and
+ * for the same reason: a form control's value is what a form sends, and every
+ * escape from that buys flexibility by making the common case harder to write.
+ *
+ * A value the list does not contain is a `string`: it is what the user typed.
+ */
+export type PlComboboxValue = string | number;
+export interface PlComboboxOption {
+    /** Submitted, and what `value` / `onValueChange` speak in. */
+    value: PlComboboxValue;
+    /**
+     * Shown in the list, in the input and on the chip. Defaults to the value.
+     *
+     * A `string` rather than a `ReactNode`, which is the one place this differs
+     * from PlSelect: the label is typed against by the filter and written into a
+     * text input, and neither of those can be done to an element.
+     */
+    label?: string;
+    /** Unavailable, but still listed — the option exists, it just cannot be picked. */
+    disabled?: boolean;
+}
+/** One value, or an array of them, depending on `multiple`. */
+type Selection<Multiple extends boolean | undefined> = Multiple extends true ? PlComboboxValue[] : PlComboboxValue | null;
+export interface PlComboboxProps<Multiple extends boolean | undefined = false> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /**
+     * The options, as data — the same shape PlSelect takes, and for the same
+     * reason: what a caller has is almost always an array already.
+     */
+    items: readonly PlComboboxOption[];
+    /**
+     * Whether more than one value may be held. The chosen ones become chips
+     * inside the field, and the input goes on filtering after each.
+     * @default false
+     */
+    multiple?: Multiple;
+    /** The chosen value. Use with `onValueChange` for a controlled combobox. */
+    value?: Selection<Multiple> | null;
+    /** The initially chosen value, for an uncontrolled combobox. */
+    defaultValue?: Selection<Multiple> | null;
+    onValueChange?: (value: Selection<Multiple>) => void;
+    /** Called as the text in the input changes — the filter query, not the value. */
+    onInputValueChange?: (inputValue: string) => void;
+    /**
+     * Whether a value the list does not contain may be committed.
+     *
+     * On by default, and it is what separates this from a searchable PlSelect: the
+     * typed text is offered as its own row at the end of the list, so committing
+     * it is a choice the user makes rather than something that happens to them on
+     * blur. Turn it off for a field whose values are a closed set.
+     * @default true
+     */
+    allowCustom?: boolean;
+    /**
+     * What that row says. Receives the trimmed query.
+     * @default (query) => `Add “${query}”`
+     */
+    customLabel?: (query: string) => React.ReactNode;
+    /**
+     * Shows a × that empties the field. Off by default — a field that can be
+     * cleared in one click is a field that can be emptied by accident.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Shown in the popup when nothing matched and no value may be added.
+     * @default 'No matches'
+     */
+    emptyMessage?: React.ReactNode;
+    /** The most rows the list will show at once. `-1` is all of them. @default -1 */
+    limit?: number;
+    /** Shown in the input while nothing is typed. */
+    placeholder?: string;
+    /**
+     * Drop shadow depth of the *field*. `0`, like a PlTextField: a field is cut
+     * into the sheet rather than resting on it. The popup has its own, fixed at
+     * `3` — it genuinely floats above the page.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Label above the field, wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text below the field. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the combobox invalid. */
+    error?: React.ReactNode;
+    /** Forces the invalid state without a message. Defaults to whether `error` has content. */
+    invalid?: boolean;
+    /** Content placed before the input. Sized in `em`, so it tracks the text. */
+    startIcon?: React.ReactNode;
+    /** Stretches to the width of the container. */
+    fullWidth?: boolean;
+    /** Unavailable. */
+    disabled?: boolean;
+    /** The value is shown but cannot be changed. */
+    readOnly?: boolean;
+    /** Whether a value must be chosen before the form is submitted. */
+    required?: boolean;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** The popup is open. Use with `onOpenChange` for a controlled popup. */
+    open?: boolean;
+    /** Whether the popup starts open. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Accessible name of the button that opens the list. @default 'Open' */
+    openLabel?: string;
+    /** Accessible name of the clear button. @default 'Clear' */
+    clearLabel?: string;
+    /**
+     * Accessible name of a chip's remove button. Receives the chip's label.
+     * @default (label) => `Remove ${label}`
+     */
+    removeLabel?: (label: string) => string;
+    /** A ref to the text input the user types into. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    id?: string;
+}
+/**
+ * A field you can type into and also choose from.
+ *
+ * The shell is a PlTextField's wearing a chevron, exactly as PlSelect's trigger
+ * is — the three have to be indistinguishable in a form, or the form looks
+ * assembled rather than designed. What is different is what the text does: it
+ * filters the list, and — unless `allowCustom` is off — it can become the value
+ * itself, offered as the last row rather than committed silently on blur.
+ *
+ * With `multiple` the chosen values become PlChips inside the field and the
+ * input goes on filtering after each one, so a set of tags is built without the
+ * field ever closing.
+ *
+ * Base UI owns everything hard about this: the filtering and its collator, the
+ * popup's positioning and flipping, the `combobox`/`listbox` wiring, arrow-key
+ * navigation across both the list and the chips, and the hidden input that makes
+ * the whole thing submit with a form.
+ */
+export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size, color, density, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel, clearLabel, removeLabel, inputRef, id, className, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
+export {};

package/dist/components/combobox/PlCombobox.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Combobox as BaseUICombobox } from '@base-ui/react/combobox';
+import { Field } from '@base-ui/react/field';
+import { PlChip } from '../chip/PlChip.js';
+import { CheckIcon, ChevronIcon, CloseIcon, PlusIcon } from '../../internal/icons.js';
+import { chipRemoveClasses, controlHeightClasses, controlTextLeadingClasses, cx, disabledClasses, fieldReadOnlyClasses, fieldRestClasses, focusWithinRingClasses, gapClasses, glassClasses, hasContent, iconClasses, metaTextClasses, paddingXClasses, radiusClasses, stackGapClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
+/** The field, and it is a PlTextField's shell to the pixel. */
+const shellBaseClasses = /* @__PURE__ */ [
+    'group relative flex w-full cursor-text items-center',
+    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
+    transitionClasses,
+    focusWithinRingClasses,
+    iconClasses
+].join(' ');
+/**
+ * With chips in it the field cannot have a fixed height — the chips wrap. The
+ * padding is `(control height − chip height) / 2` instead, which makes a one-row
+ * combobox exactly as tall as the field beside it, and `min-h-*` catches the
+ * variant that carries no border.
+ *
+ * Keyed by `size` and never by `density`: density is horizontal padding only.
+ */
+const chipsInsetClasses = {
+    xs: 'min-h-6 py-0',
+    sm: 'min-h-8 py-0.5',
+    md: 'min-h-10 py-1',
+    lg: 'min-h-12 py-1.5',
+    xl: 'min-h-14 py-2'
+};
+/**
+ * The popup is one of the few surfaces in the library that is *supposed* to
+ * float, so unlike everything else it carries a shadow by default — at level 3.
+ * Identical to PlSelect's, because a combobox's list and a select's list are the
+ * same list.
+ *
+ * Every `--p-*` it reads is set on the popup itself rather than inherited from
+ * the Field around it. A portalled popup renders at the end of `<body>`, so it
+ * is outside the element the slots were declared on, and a `var()` with nothing
+ * to resolve to is not a fallback — `border-color` collapses to `currentColor`
+ * and `background-color` to transparent.
+ */
+const popupClasses = /* @__PURE__ */ [
+    glassClasses,
+    'max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain',
+    'w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1',
+    '[border-color:var(--plass-glass-line)]',
+    '[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]',
+    '[outline:none]'
+].join(' ');
+const itemClasses = /* @__PURE__ */ [
+    'relative flex cursor-pointer items-center gap-2 select-none',
+    'rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7',
+    transitionClasses,
+    // `data-highlighted` rather than `:hover`: it is also what the arrow keys
+    // move, so the mouse and the keyboard light the same row.
+    'data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)',
+    'data-[selected]:font-semibold data-[selected]:text-(--p-accent)',
+    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+    '[outline:none]'
+].join(' ');
+/** The chevron and the ×, which sit in the field rather than in the list. */
+const adornmentClasses = /* @__PURE__ */ [
+    'inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center',
+    'rounded-(--plass-radius-xs) text-(--plass-muted-fg)',
+    '[transition:color_var(--plass-duration)_var(--plass-ease)]',
+    'hover:text-(--p-accent)',
+    'focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]',
+    'disabled:cursor-not-allowed disabled:opacity-50'
+].join(' ');
+/** Always an array inside, however the caller spells it. */
+function toArray(value) {
+    if (value === null || value === undefined) {
+        return [];
+    }
+    return Array.isArray(value) ? value.slice() : [value];
+}
+/**
+ * A field you can type into and also choose from.
+ *
+ * The shell is a PlTextField's wearing a chevron, exactly as PlSelect's trigger
+ * is — the three have to be indistinguishable in a form, or the form looks
+ * assembled rather than designed. What is different is what the text does: it
+ * filters the list, and — unless `allowCustom` is off — it can become the value
+ * itself, offered as the last row rather than committed silently on blur.
+ *
+ * With `multiple` the chosen values become PlChips inside the field and the
+ * input goes on filtering after each one, so a set of tags is built without the
+ * field ever closing.
+ *
+ * Base UI owns everything hard about this: the filtering and its collator, the
+ * popup's positioning and flipping, the `combobox`/`listbox` wiring, arrow-key
+ * navigation across both the list and the chips, and the hidden input that makes
+ * the whole thing submit with a form.
+ */
+export function PlCombobox({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom = true, customLabel, clearable = false, emptyMessage = 'No matches', limit, placeholder, label, description, error, invalid, startIcon, fullWidth = false, disabled = false, readOnly = false, required = false, name, open, defaultOpen, onOpenChange, openLabel = 'Open', clearLabel = 'Clear', removeLabel = (chip) => `Remove ${chip}`, inputRef, 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;
+    const isMultiple = multiple === true;
+    const options = React.useMemo(() => items.map((item) => ({
+        value: item.value,
+        label: item.label ?? String(item.value),
+        disabled: item.disabled
+    })), [items]);
+    // The selection is mirrored internally even when the caller controls it. The
+    // "add this" row has to know what has already been chosen — otherwise a tag
+    // that was just added goes on being offered — and in uncontrolled mode there
+    // is nowhere else that knowledge lives.
+    const [ownSelection, setOwnSelection] = React.useState(() => toArray(defaultValue));
+    const selection = value === undefined ? ownSelection : toArray(value);
+    const [query, setQuery] = React.useState('');
+    /* A map rather than a `find`: this is called once per chosen item, and a
+       multi-select with a hundred options and twenty chips in it would otherwise
+       walk the list twenty times on every render. */
+    const byValue = React.useMemo(() => new Map(options.map((option) => [option.value, option])), [options]);
+    const entryFor = React.useCallback((item) => byValue.get(item) ?? { value: item, label: String(item), custom: true }, [byValue]);
+    // The row that offers what was typed. It is a real item rather than a special
+    // case in the keyboard handling, so Enter, a click and the arrow keys all
+    // reach it the same way every other row is reached — and Base UI's own filter
+    // keeps it visible, because its label *is* the query.
+    const trimmed = query.trim();
+    const folded = trimmed.toLocaleLowerCase();
+    const alreadyKnown = trimmed === '' ||
+        options.some((option) => option.label.toLocaleLowerCase() === folded ||
+            String(option.value).toLocaleLowerCase() === folded) ||
+        selection.some((item) => String(item).toLocaleLowerCase() === folded);
+    const customValue = allowCustom && !readOnly && !disabled && !alreadyKnown ? trimmed : null;
+    const listItems = React.useMemo(() => customValue === null
+        ? options
+        : [...options, { value: customValue, label: customValue, custom: true }], [options, customValue]);
+    const baseValue = isMultiple
+        ? selection.map(entryFor)
+        : selection.length > 0
+            ? entryFor(selection[0])
+            : null;
+    function commit(next) {
+        if (value === undefined) {
+            setOwnSelection(next);
+        }
+        onValueChange?.((isMultiple ? next : (next[0] ?? null)));
+    }
+    const shellClasses = cx(shellBaseClasses, controlTextLeadingClasses[size], radiusClasses[size], gapClasses[size], isMultiple ? chipsInsetClasses[size] : controlHeightClasses[size], 
+    // The chevron brings its own hit area; stacking the field's padding on top
+    // of it would leave the glyph floating in the middle of a gap.
+    `${paddingXClasses[density][size]} pe-1.5`, 
+    // 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 inputClasses = /* @__PURE__ */ [
+        // `self-stretch` and no height of its own, in both modes. An input centres
+        // its own text in its box, so letting the box be the full height of the row
+        // it sits on — the field in single mode, the chip line in multiple — is what
+        // puts the placeholder on the same baseline as the chips beside it.
+        '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 variable family.
+        '[outline:none]',
+        'placeholder:text-(--plass-muted-fg)',
+        'caret-(--p-accent) selection:bg-(--p-soft-press)',
+        'disabled:cursor-not-allowed'
+    ].join(' ');
+    /**
+     * `afterChips` is the space between the last chip and where typing starts.
+     *
+     * The row's own `gap-1` is the distance between two chips, which is right
+     * between two things of the same kind and too little between a chip and a
+     * caret — the query reads as another chip's label rather than as the field's
+     * own text. It is only added when there is a chip to be clear of, so an empty
+     * multi-select lines its placeholder up with every other field in the form.
+     */
+    const renderInput = (afterChips) => (_jsx(BaseUICombobox.Input, { ref: inputRef, placeholder: placeholder, className: cx(inputClasses, isMultiple && 'min-w-16', isMultiple && afterChips && 'ms-1.5') }));
+    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: cx('flex-col align-top', stackGapClasses[size], fullWidth ? 'flex w-full' : 'inline-flex', className), style: { ...surfaceSlots(family, elevation), ...style }, ...props, children: [label ? (_jsx(Field.Label, { className: cx(metaTextClasses[size], 'font-semibold', disabled ? 'text-(--plass-muted-fg)' : 'text-(--plass-fg)'), children: label })) : null, _jsxs(BaseUICombobox.Root, { id: id, name: name, items: listItems, multiple: isMultiple, value: baseValue, onValueChange: (next) => {
+                    const chosen = next === null ? [] : Array.isArray(next) ? next : [next];
+                    commit(chosen.map((entry) => entry.value));
+                }, 
+                // The text is Base UI's to own, not ours: in single mode it is the
+                // chosen option's label, which has to be there from the first paint, and
+                // in multiple mode it empties itself after each pick. What is kept here
+                // is a copy, and only so the "add this" row knows what was typed.
+                onInputValueChange: (next) => {
+                    setQuery(next);
+                    onInputValueChange?.(next);
+                }, open: open, defaultOpen: defaultOpen, onOpenChange: (next) => onOpenChange?.(next), 
+                // The first match lights up as you type, so Enter commits without an
+                // arrow key first. This is what makes the "add this" row reachable from
+                // the keyboard at all: a value the list does not have is the only match
+                // there is, so it is the one Enter lands on.
+                autoHighlight: true, itemToStringLabel: (entry) => entry.label, itemToStringValue: (entry) => String(entry.value), isItemEqualToValue: (a, b) => a.value === b.value, limit: limit, disabled: disabled, readOnly: readOnly, required: required, children: [_jsxs(BaseUICombobox.InputGroup, { className: shellClasses, children: [startIcon ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, isMultiple ? (_jsx(BaseUICombobox.Chips, { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: _jsx(BaseUICombobox.Value, { children: (chosen) => (_jsxs(React.Fragment, { children: [chosen.map((entry) => (_jsx(BaseUICombobox.Chip, { render: _jsx(PlChip, { variant: "glass", size: size, color: family, density: "compact", disabled: disabled, endIcon: readOnly || disabled ? null : (_jsx(BaseUICombobox.ChipRemove, { "aria-label": removeLabel(entry.label), className: chipRemoveClasses, children: _jsx(CloseIcon, {}) })) }), children: entry.label }, String(entry.value)))), renderInput(chosen.length > 0)] })) }) })) : (renderInput(false)), clearable && !readOnly ? (_jsx(BaseUICombobox.Clear, { "aria-label": clearLabel, className: adornmentClasses, children: _jsx(CloseIcon, {}) })) : null, _jsx(BaseUICombobox.Trigger, { "aria-label": openLabel, className: adornmentClasses, children: _jsx(BaseUICombobox.Icon, { className: cx(
+                                    // The chevron is the one thing here that may turn: it is a
+                                    // glyph, not a label, and nothing about it resamples.
+                                    'flex items-center', '[transition:rotate_var(--plass-duration)_var(--plass-ease)]', 'data-[popup-open]:rotate-180'), children: _jsx(ChevronIcon, {}) }) })] }), _jsx(BaseUICombobox.Portal, { children: _jsx(BaseUICombobox.Positioner, { className: "plass-portal z-50 [outline:none]", sideOffset: 6, children: _jsxs(BaseUICombobox.Popup, { className: cx(popupClasses, radiusClasses[size], controlTextLeadingClasses[size]), style: surfaceSlots(family, 3), children: [_jsx(BaseUICombobox.Empty, { className: "px-2 py-1.5 text-(--plass-muted-fg) empty:hidden", children: emptyMessage }), _jsx(BaseUICombobox.List, { children: (entry) => (_jsx(BaseUICombobox.Item, { value: entry, disabled: entry.disabled, className: itemClasses, children: entry.custom ? (_jsxs(React.Fragment, { children: [_jsx("span", { className: "absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4", children: _jsx(PlusIcon, {}) }), _jsx("span", { className: "truncate", children: customLabel ? customLabel(entry.label) : `Add “${entry.label}”` })] })) : (_jsxs(React.Fragment, { children: [_jsx(BaseUICombobox.ItemIndicator, { className: "absolute start-1.5 flex size-4 items-center justify-center", children: _jsx(CheckIcon, {}) }), _jsx("span", { className: "truncate", children: entry.label })] })) }, `${entry.custom ? 'custom:' : ''}${String(entry.value)}`)) })] }) }) })] }), 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/combobox/index.d.ts

@@ -0,0 +1,2 @@
+export { PlCombobox } from './PlCombobox.js';
+export type { PlComboboxOption, PlComboboxProps, PlComboboxValue } from './PlCombobox.js';

package/dist/components/combobox/index.js

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

package/dist/components/container/PlContainer.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassDensity, PlassSize } from '../../types.js';
+/**
+ * How wide the content is allowed to get.
+ *
+ * `none` is the extra step and the default, because a `PlContainer`'s job is
+ * the gutter — a measure is a second decision, and a page should have to ask
+ * for one.
+ */
+export type PlContainerWidth = PlassSize | 'none';
+export interface PlContainerProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How wide the content is allowed to get, on the same ladder the breakpoints
+     * use — `xs` 30rem, `sm` 40rem, `md` 48rem, `lg` 64rem, `xl` 80rem.
+     * @default 'none'
+     */
+    maxWidth?: PlContainerWidth;
+    /**
+     * The gutter, on the `size`/`density` scale. Turn it off to keep the centring
+     * and the measure without the padding.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The gutter's scale.
+     *
+     * `size` here is the size of the *sheet* — it never touches a height or the
+     * type scale — and it is independent of `maxWidth`, which is how wide the
+     * content gets rather than how far it sits from the edge.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** @default 'default' */
+    density?: PlassDensity;
+    /**
+     * Centres the content once `maxWidth` is narrower than the page. No effect
+     * while `maxWidth` is `none`, because there is nothing left over to centre in.
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<main />}`,
+     * `render={<section />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Horizontal breathing room, and optionally a measure.
+ *
+ * It draws nothing — no sheet, no hairline, no shadow — for the same reason
+ * `PlAspectRatio` does not. The outermost element on a page is the one thing
+ * that must not decide what the page looks like, and a container that carried a
+ * `variant` would put a second pane behind every card on it.
+ *
+ * The two questions it answers are deliberately separate from how the content
+ * inside divides itself up: a container holds a `PlGrid` as happily as it holds
+ * a single paragraph, and a grid needs no container around it.
+ *
+ * The gutter is the **sheet** padding track rather than the control one. What
+ * sits inside a container is a page, and the margin a page keeps from the edge
+ * of a window is the margin a card keeps around a paragraph — not the room a
+ * label needs beside the edge of the key it is printed on.
+ */
+export declare const PlContainer: React.ForwardRefExoticComponent<PlContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/container/PlContainer.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { cx, sheetPaddingXClasses } from '../../internal/styles.js';
+/**
+ * The measure ladder, in `rem` rather than in Tailwind's named `max-w-*` steps,
+ * so that a container's `lg` and an `lg:` utility are the same 64rem.
+ *
+ * Tailwind's own container scale is a different set of numbers, and having two
+ * ladders called `lg` on one page is how a layout drifts by a few pixels for no
+ * reason anybody can find later.
+ */
+const maxWidthClasses = {
+    xs: 'max-w-[30rem]',
+    sm: 'max-w-[40rem]',
+    md: 'max-w-[48rem]',
+    lg: 'max-w-[64rem]',
+    xl: 'max-w-[80rem]'
+};
+/**
+ * Horizontal breathing room, and optionally a measure.
+ *
+ * It draws nothing — no sheet, no hairline, no shadow — for the same reason
+ * `PlAspectRatio` does not. The outermost element on a page is the one thing
+ * that must not decide what the page looks like, and a container that carried a
+ * `variant` would put a second pane behind every card on it.
+ *
+ * The two questions it answers are deliberately separate from how the content
+ * inside divides itself up: a container holds a `PlGrid` as happily as it holds
+ * a single paragraph, and a grid needs no container around it.
+ *
+ * The gutter is the **sheet** padding track rather than the control one. What
+ * sits inside a container is a page, and the margin a page keeps from the edge
+ * of a window is the margin a card keeps around a paragraph — not the room a
+ * label needs beside the edge of the key it is printed on.
+ */
+export const PlContainer = /* @__PURE__ */ React.forwardRef(function PlContainer({ maxWidth = 'none', padded = true, size = 'md', density = 'default', centered = true, render, className, children, ...props }, ref) {
+    const classNames = cx('block w-full', maxWidth === 'none' ? '' : maxWidthClasses[maxWidth], centered ? 'mx-auto' : '', padded ? sheetPaddingXClasses[density][size] : '', className);
+    return useRender({
+        render,
+        ref,
+        props: {
+            className: classNames,
+            children,
+            ...props
+        }
+    });
+});

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

@@ -0,0 +1,2 @@
+export { PlContainer } from './PlContainer.js';
+export type { PlContainerProps, PlContainerWidth } from './PlContainer.js';

package/dist/components/container/index.js

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

package/dist/components/date-picker/PlDatePicker.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { type PlassPickerLabels } from '../../internal/calendar.js';
+import { type PlassPickerShellProps } from '../../internal/picker.js';
+import type { PlassWeekday } from '../../types.js';
+/** The strings a picker says that `Intl` has no opinion about. */
+export type PlPickerLabels = PlassPickerLabels;
+export interface PlDatePickerProps extends PlassPickerShellProps {
+    /** The chosen day. Use with `onValueChange` for a controlled picker. */
+    value?: Date | null;
+    /** The day the picker starts on, for an uncontrolled one. */
+    defaultValue?: Date | null;
+    onValueChange?: (value: Date | null) => void;
+    /** Whether the calendar is open. Use with `onOpenChange` to control it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which month the calendar opens on when there is no value. @default this one */
+    defaultMonth?: Date;
+    /** The earliest day that may be chosen. Day-granular — the time is ignored. */
+    minDate?: Date | null;
+    /** The latest day that may be chosen. */
+    maxDate?: Date | null;
+    /**
+     * Blocks individual days that are inside the range but still not available —
+     * weekends, holidays, a room that is already booked.
+     */
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * BCP 47 tag deciding the month and weekday names, the order of the header's
+     * two buttons, and how the trigger writes the date. Defaults to the browser's.
+     */
+    locale?: string;
+    /** Which day the week starts on. Defaults to whatever the locale says. */
+    weekStartsOn?: PlassWeekday;
+    /**
+     * How the trigger writes the chosen date. Passed straight to `Intl`, so
+     * `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
+     * @default { dateStyle: 'medium' }
+     */
+    format?: Intl.DateTimeFormatOptions;
+    /** Shown in the trigger while nothing is chosen. */
+    placeholder?: React.ReactNode;
+    /** Offers the × that empties the control. @default false */
+    clearable?: boolean;
+    /** Offers the shortcut to today in the footer. @default true */
+    showTodayButton?: boolean;
+    /** Closes the popup as soon as a day is chosen. @default true */
+    closeOnSelect?: boolean;
+    /** The strings the picker says. Every one has an English default. */
+    labels?: Partial<PlassPickerLabels>;
+    /** Identifies the field when a form is submitted, as `YYYY-MM-DD`. */
+    name?: string;
+}
+/**
+ * One day, chosen from a calendar.
+ *
+ * The trigger is a `PlTextField`'s shell wearing a calendar glyph, on purpose
+ * and for the reason a `PlSelect`'s is: a form where the date field is a
+ * different height, radius or material from the fields around it is a form that
+ * looks assembled.
+ *
+ * What the calendar is actually for is the header. A picker that only steps a
+ * month at a time puts a birthday thirty years back a hundred and eighty clicks
+ * away, so the month name and the year are each a button that opens a grid of
+ * its own — twelve months, then twelve years at a time. Any month of the year on
+ * screen is two clicks; any year at all is three.
+ *
+ * There is no typing into the trigger. Parsing a date out of free text is
+ * locale-dependent in a way that cannot be done honestly without a date library,
+ * and a field that understands `27/7/26` in one browser and not in the next is
+ * worse than one that never claimed to.
+ */
+export declare const PlDatePicker: React.ForwardRefExoticComponent<PlDatePickerProps & React.RefAttributes<HTMLButtonElement>>;