plass-ui 1.0.0 → 1.0.2

package/dist/components/checkbox/PlCheckbox.js

@@ -1,100 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Checkbox as BaseUICheckbox } from '@base-ui/react/checkbox';
-import { Field } from '@base-ui/react/field';
-import { controlSlots, focusRingClasses, glassClasses, hasContent, metaTextClasses, tickRadiusClasses, tickRowTextClasses, tickSizeClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * The tick.
- *
- * Unchecked it is a small pane of clear glass with a hairline round it — the
- * same material a `glass` button is. Checked it fills with the family's
- * gradient, which is the one place this library expresses a state by swapping
- * the whole surface rather than shifting it a step: "on" and "off" are not two
- * strengths of the same thing.
- */
-const tickBaseClasses = /* @__PURE__ */ [
-    'relative inline-flex shrink-0 items-center justify-center border',
-    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
-    transitionClasses,
-    focusRingClasses
-].join(' ');
-/**
- * No gloss line on a tick, and no tinted lift under it.
- *
- * `--plass-gloss-glass` is a 1px white edge along the top of a pane. On a 40px
- * button that reads as light catching a cut edge; on an 18px square it is a
- * bevel drawn at a twentieth of the object and it turns into a grey smudge.
- * The tinted lift goes for the same reason from the other direction — a
- * `0 6px 16px` shadow under an 18px box is a shadow bigger than the box.
- *
- * The material stays. It is only the two decorations that go.
- *
- * The edge is `--plass-border` rather than the sheet's own `--plass-glass-line`,
- * and that is not a slip. The glass hairline is white light on a translucent
- * pane, which is invisible the moment the tick is set on a light card rather
- * than on the page wash — and a tick nobody can see is a control nobody can
- * find. A neutral hairline reads on both.
- */
-const restClasses = /* @__PURE__ */ [
-    glassClasses,
-    'cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]',
-    'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]',
-    // `data-checked` rather than `:checked`: the visible tick is a `<span>`, and
-    // the real input is hidden beside it.
-    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
-    'data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105',
-    'data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)',
-    'data-[indeterminate]:[border-color:transparent]'
-].join(' ');
-const readOnlyClasses = /* @__PURE__ */ [
-    glassClasses,
-    'cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]',
-    'saturate-[0.55]',
-    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
-    'data-[checked]:[border-color:transparent]'
-].join(' ');
-/** Disabled is the light going out, exactly as it is on a PlButton. */
-const disabledTickClasses = /* @__PURE__ */ [
-    glassClasses,
-    'cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]',
-    'opacity-50 saturate-[0.35]',
-    'data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)',
-    'data-[checked]:[border-color:transparent]',
-    'data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)'
-].join(' ');
-/** The mark is drawn at 70% of the box, so it never touches the corners. */
-const markClasses = 'flex size-[70%] items-center justify-center';
-function CheckMark() {
-    return (_jsx("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: "size-full", children: _jsx("path", { d: "M2 6.2 4.6 8.8 10 3.4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
-function DashMark() {
-    return (_jsx("svg", { viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: "size-full", children: _jsx("path", { d: "M2.5 6h7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
-}
-/**
- * A single yes/no, or one member of a set of them.
- *
- * `label`, `description` and `error` are props rather than children for the same
- * reason they are on PlTextField: the arrangement is fixed and what a caller
- * wants to decide is what goes in each slot. `children` is not accepted at all —
- * anything a checkbox has to say belongs in one of the three.
- */
-export const PlCheckbox = /* @__PURE__ */ React.forwardRef(function PlCheckbox({ size = 'md', color = 'primary', label, description, error, invalid, disabled = false, readOnly = false, className, style, ...props }, ref) {
-    const hasError = hasContent(error);
-    const isInvalid = invalid ?? hasError;
-    // Invalid re-points the whole slot family at `danger`, so the tick, the ring
-    // and the message all turn over together.
-    const family = isInvalid ? 'danger' : color;
-    const tickClasses = [
-        tickBaseClasses,
-        tickSizeClasses[size],
-        tickRadiusClasses[size],
-        // An if/else rather than stacked variants: two Tailwind classes of equal
-        // specificity resolve by their order in the generated stylesheet.
-        disabled ? disabledTickClasses : readOnly ? readOnlyClasses : restClasses
-    ].join(' ');
-    return (_jsxs(Field.Root, { disabled: disabled, invalid: isInvalid, className: ['inline-flex flex-col gap-1 align-top', className ?? '']
-            .filter(Boolean)
-            .join(' '), 
-        // `solid`, because a checked tick *is* the coloured thing.
-        style: { ...controlSlots(family, 0, 'solid'), ...style }, children: [_jsxs("div", { className: `flex items-start gap-2 ${tickRowTextClasses[size]}`, children: [_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: _jsx(BaseUICheckbox.Root, { ref: ref, className: tickClasses, disabled: disabled, readOnly: readOnly, ...props, children: _jsx(BaseUICheckbox.Indicator, { className: markClasses, children: props.indeterminate ? _jsx(DashMark, {}) : _jsx(CheckMark, {}) }) }) }), label || description ? (_jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", 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] }), hasError ? (_jsx(Field.Error, { match: true, className: `${metaTextClasses[size]} text-(--p-accent)`, children: error })) : null] }));
-});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as o}from"@base-ui/react/field";import{controlSlots as l,focusRingClasses as s,glassClasses as i,hasContent as n,metaTextClasses as c,tickRadiusClasses as d,tickRowTextClasses as p,tickSizeClasses as h,transitionClasses as m}from"../../internal/styles.js";const u=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,s].join(" "),f=/* @__PURE__ */[i,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),k=/* @__PURE__ */[i,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),b=/* @__PURE__ */[i,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a="md",color:s="primary",label:i,description:m,error:g,invalid:x,disabled:v=!1,readOnly:j=!1,className:N,style:y,...C},w){const M=n(g),z=x??M,L=z?"danger":s,B=[u,h[a],d[a],v?b:j?k:f].join(" ");return r(o.Root,{disabled:v,invalid:z,className:["inline-flex flex-col gap-1 align-top",N??""].filter(Boolean).join(" "),style:{...l(L,0,"solid"),...y},children:[r("div",{className:`flex items-start gap-2 ${p[a]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(t.Root,{ref:w,className:B,disabled:v,readOnly:j,...C,children:e(t.Indicator,{className:"flex size-[70%] items-center justify-center",children:C.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),i||m?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[i?e(o.Label,{className:v?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:i}):null,m?e(o.Description,{className:`${c[a]} text-(--plass-muted-fg)`,children:m}):null]}):null]}),M?e(o.Error,{match:!0,className:`${c[a]} text-(--p-accent)`,children:g}):null]})});

package/dist/components/checkbox/index.js

@@ -1 +1 @@
-export { PlCheckbox } from './PlCheckbox.js';
+export{PlCheckbox}from"./PlCheckbox.js";

package/dist/components/chip/PlChip.js

@@ -1,144 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { CloseIcon } from '../../internal/icons.js';
-import { chipRemoveClasses, controlHeightClasses, controlSlots, controlTextClasses, disabledClasses, focusRingClasses, gapClasses, glassClasses, hasContent, iconClasses, paddingXClasses, radiusClasses, transitionClasses } from '../../internal/styles.js';
-/**
- * A chip sits one step down the control ladder from everything else: a `md` chip
- * is a `sm` control — 32px, not 40px.
- *
- * This is the whole size difference between a chip and a button, and it is
- * deliberate. A chip is a token *inside* a row of content, not a control the row
- * lines up against; at full control height a `glass` chip and a `glass` button
- * are the same object, and a screen full of them says nothing about which one
- * can be pressed.
- *
- * Shifting the index rather than inventing a second set of numbers keeps a chip
- * inside the same five-step vocabulary, and keeps `xs` from falling off the
- * bottom of it.
- */
-const chipScale = {
-    xs: 'xs',
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md',
-    xl: 'lg'
-};
-/**
- * The three materials. A chip **is** the thing being coloured — a tag names one
- * particular thing — so unlike a `PlCard` its sheet takes the tint.
- *
- * `glass` is the default rather than `solid`: a filter bar is a row of chips,
- * and a row of gradient keys is a row in which nothing is the primary action
- * because everything is.
- */
-const restClasses = {
-    solid: 'text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)]',
-    glass: /* @__PURE__ */ [
-        glassClasses,
-        'border text-(--p-accent) bg-(--plass-glass)',
-        '[border-color:var(--plass-glass-line)]',
-        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
-    ].join(' '),
-    ghost: 'text-(--p-accent) bg-(--p-soft)'
-};
-/**
- * Chosen is one step further up the ladder the chip is already on — the sheet
- * holds more light. Deliberately not a different colour family: a filter that is
- * on is still the same filter.
- *
- * `solid` has no opacity ladder to climb, because a gradient fill is the fill.
- * So it answers the other way the design language allows: it casts its own
- * colour onto the sheet under it. A chosen key lifts; an unchosen one lies flat.
- */
-const selectedClasses = {
-    solid: '[box-shadow:var(--p-elev),var(--p-lift)]',
-    glass: 'bg-(--plass-glass-press) [border-color:var(--p-line-hover)]',
-    ghost: 'bg-(--p-soft-press)'
-};
-/**
- * Only a chip that can be pressed answers the pointer, and it answers the way
- * every other control does: `brightness()` on the gradient, a step up the
- * opacity ladder on the other two.
- */
-const hoverClasses = {
-    solid: 'hover:brightness-105 active:brightness-95',
-    glass: 'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)',
-    ghost: 'hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)'
-};
-const baseClasses = /* @__PURE__ */ [
-    // `items-center`, not `items-stretch`: everything in a chip — the icon, the
-    // label, the count plate, the × — is centred on one line. The pressable label
-    // asks for the height it needs with `self-stretch` instead, so making the
-    // shell stretch to suit it would knock every other child off the centre line.
-    'relative inline-flex max-w-full shrink-0 items-center select-none',
-    'align-middle leading-none font-medium whitespace-nowrap',
-    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
-    transitionClasses,
-    iconClasses
-].join(' ');
-/**
- * The label, when the chip is pressable, is its own `<button>` inside the shell
- * rather than the shell itself.
- *
- * That looks like indirection and is not: a chip can carry a delete affordance,
- * which has to be a button too, and a `<button>` inside a `<button>` is invalid
- * HTML that browsers un-nest on parse. Keeping the shell a `<span>` is what lets
- * "activate this chip" and "remove this chip" both be real, focusable buttons.
- *
- * `self-stretch` so its hit area is the full height of the chip rather than the
- * height of the words, and `rounded-[inherit]` so the focus ring traces the
- * shell's corners rather than drawing a second, squarer rectangle inside them.
- */
-const labelButtonClasses = /* @__PURE__ */ [
-    'flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]',
-    focusRingClasses
-].join(' ');
-/**
- * A compact token: a tag, a filter, a status, an entity plucked out of a list.
- *
- * The shell is always a `<span>`. What changes is what is inside it: a plain run
- * of content, or — when `onClick` is given — a real `<button>` wrapping that
- * content, plus a second button for `onDelete`. Both are reachable by keyboard,
- * and neither is nested inside the other.
- *
- * An inert `<span>` carrying a click handler is the single most common way a
- * component library loses its keyboard users, and a `<button>` inside a
- * `<button>` is the most common way it invents a chip that Chrome silently
- * rewrites. This shape is what avoids both.
- */
-export const PlChip = /* @__PURE__ */ React.forwardRef(function PlChip({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, startIcon, endIcon, count, onDelete, deleteLabel = 'Remove', selected = false, disabled = false, className, style, children, onClick, ...props }, ref) {
-    const interactive = Boolean(onClick) && !disabled;
-    const step = chipScale[size];
-    const padX = paddingXClasses[density][step];
-    const shellClasses = [
-        baseClasses,
-        controlHeightClasses[step],
-        controlTextClasses[step],
-        gapClasses[step],
-        radiusClasses[step],
-        // An if/else rather than stacked variants: two Tailwind classes of equal
-        // specificity resolve by their order in the generated stylesheet.
-        disabled ? disabledClasses[variant] : restClasses[variant],
-        !disabled && selected ? selectedClasses[variant] : '',
-        interactive ? hoverClasses[variant] : '',
-        // With a pressable label the padding belongs to the button, so its hit area
-        // covers the whole chip rather than just the words.
-        interactive ? 'ps-0' : padX,
-        // The delete button brings its own padding; stacking the chip's on top of it
-        // would leave the × floating in the middle of a gap.
-        onDelete ? 'pe-1' : interactive ? 'pe-0' : '',
-        className ?? ''
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const label = (_jsxs(_Fragment, { children: [startIcon, hasContent(children) ? _jsx("span", { className: "min-w-0 truncate", children: children }) : null, endIcon, hasContent(count) ? (_jsx("span", { className: [
-                    'ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px',
-                    'text-[0.85em] leading-none font-semibold tabular-nums',
-                    // On a filled chip the plate is light let through the fill; on a
-                    // tinted or a bare one it is the accent showing under the words.
-                    variant === 'solid'
-                        ? 'bg-(--plass-glow-on-fill) text-(--p-on-solid)'
-                        : 'bg-(--p-soft-press) text-(--p-accent)'
-                ].join(' '), children: count })) : null] }));
-    return (_jsxs("span", { ref: ref, className: shellClasses, style: { ...controlSlots(color, elevation, variant), ...style }, "aria-disabled": disabled && !interactive ? true : undefined, ...props, children: [interactive ? (_jsx("button", { type: "button", "aria-pressed": selected, className: `${labelButtonClasses} ${gapClasses[step]} ${padX}`, onClick: onClick, children: label })) : (label), onDelete ? (_jsx("button", { type: "button", "aria-label": deleteLabel, disabled: disabled, className: chipRemoveClasses, onClick: onDelete, children: _jsx(CloseIcon, {}) })) : null] }));
-});
+"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{CloseIcon as o}from"../../internal/icons.js";import{chipRemoveClasses as a,controlHeightClasses as n,controlSlots as r,controlTextClasses as i,disabledClasses as c,focusRingClasses as p,gapClasses as d,glassClasses as m,hasContent as g,iconClasses as h,paddingXClasses as b,radiusClasses as f,transitionClasses as u}from"../../internal/styles.js";const v={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},x={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)]",glass:/* @__PURE__ */[m,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},j={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},w={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},y=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",u,h].join(" "),k=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",p].join(" ");export const PlChip=/* @__PURE__ */t.forwardRef(function PlChip({variant:t="glass",size:p="md",color:m="primary",density:h="default",elevation:u=0,startIcon:N,endIcon:C,count:$,onDelete:B,deleteLabel:I="Remove",selected:P=!1,disabled:R=!1,className:z,style:D,children:F,onClick:L,...q},A){const E=Boolean(L)&&!R,G=v[p],H=b[h][G],J=[y,n[G],i[G],d[G],f[G],R?c[t]:x[t],!R&&P?j[t]:"",E?w[t]:"",E?"ps-0":H,B?"pe-1":E?"pe-0":"",z??""].filter(Boolean).join(" "),K=l(s,{children:[N,g(F)?e("span",{className:"min-w-0 truncate",children:F}):null,C,g($)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===t?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:$}):null]});return l("span",{ref:A,className:J,style:{...r(m,u,t),...D},"aria-disabled":!(!R||E)||void 0,...q,children:[E?e("button",{type:"button","aria-pressed":P,className:`${k} ${d[G]} ${H}`,onClick:L,children:K}):K,B?e("button",{type:"button","aria-label":I,disabled:R,className:a,onClick:B,children:e(o,{})}):null]})});

package/dist/components/chip/index.js

@@ -1 +1 @@
-export { PlChip } from './PlChip.js';
+export{PlChip}from"./PlChip.js";

package/dist/components/collapsible/PlCollapsible.js

@@ -1,65 +1 @@
-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 }) })] }));
-});
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{Collapsible as s}from"@base-ui/react/collapsible";import{ChevronIcon as a}from"../../internal/icons.js";import{cx as n,focusRingInsetClasses as i,gapClasses as r,hasContent as p,iconClasses as d,metaTextClasses as o,radiusClasses as c,sheetBodyClasses as m,sheetHeaderGapClasses as f,sheetPaddingXClasses as h,sheetPaddingYClasses as u,sheetRestClasses as x,sheetTitleClasses as b,surfaceSlots as g,transitionClasses as N}from"../../internal/styles.js";const v={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"}},w={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"}};export const PlCollapsible=/* @__PURE__ */t.forwardRef(function PlCollapsible({variant:t="glass",size:y="md",color:j="primary",density:k="default",elevation:C=0,open:O,defaultOpen:_=!1,onOpenChange:P,title:F,subtitle:M,startIcon:R,action:T,trigger:U,indicator:$=!0,disabled:z=!1,padded:I=!0,hiddenUntilFound:q=!1,keepMounted:A=!1,className:B,style:D,children:E,...G},H){const J=h[k][y],K=u[k][y];return l(s.Root,{ref:H,open:O,defaultOpen:_,onOpenChange:e=>P?.(e),disabled:z,className:n("flex flex-col overflow-hidden",c[y],x[t],N,B),style:{...g(j,C),...D},...G,children:[U?e(s.Trigger,{render:U}):l("div",{className:"flex w-full items-center",children:[l(s.Trigger,{className:n("flex min-w-0 flex-1 cursor-pointer items-center text-start",J,K,r[y],N,d,i,"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:[p(R)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:R}):null,l("span",{className:n("flex min-w-0 flex-1 flex-col",f[y]),children:[p(F)?e("span",{className:n("plass-title truncate font-semibold",b[y]),children:F}):null,p(M)?e("span",{className:n("truncate text-(--plass-muted-fg)",o[y]),children:M}):null]}),$?e("span",{className:n("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:e(a,{})}):null]}),p(T)?e("span",{className:n("flex shrink-0 items-center",J),children:T}):null]}),e(s.Panel,{hiddenUntilFound:q,keepMounted:A,className:n("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:e("div",{className:n("min-w-0 text-(--plass-muted-fg)",m[y],I?J:"",I?U?`${v[k][y]} ${w[k][y]}`:w[k][y]:""),children:E})})]})});

package/dist/components/collapsible/index.js

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

package/dist/components/combobox/PlCombobox.js

@@ -1,199 +1 @@
-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] }));
-}
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as t}from"@base-ui/react/combobox";import{Field as s}from"@base-ui/react/field";import{PlChip as n}from"../chip/PlChip.js";import{CheckIcon as i,ChevronIcon as r,CloseIcon as o,PlusIcon as c}from"../../internal/icons.js";import{chipRemoveClasses as d,controlHeightClasses as m,controlTextLeadingClasses as u,cx as p,disabledClasses as h,fieldReadOnlyClasses as b,fieldRestClasses as g,focusWithinRingClasses as f,gapClasses as v,glassClasses as x,hasContent as y,iconClasses as N,metaTextClasses as w,paddingXClasses as C,radiusClasses as L,stackGapClasses as j,surfaceSlots as I,transitionClasses as S}from"../../internal/styles.js";const A=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",S,f,N].join(" "),O={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"},V=/* @__PURE__ */[x,"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(" "),_=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",S,"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(" "),z=/* @__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(" ");function toArray(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function PlCombobox({variant:f="glass",size:x="md",color:N="primary",density:S="default",elevation:M=0,items:P,multiple:R,value:$,defaultValue:k,onValueChange:T,onInputValueChange:q,allowCustom:E=!0,customLabel:F,clearable:D=!1,emptyMessage:G="No matches",limit:H,placeholder:W,label:B,description:J,error:K,invalid:Q,startIcon:U,fullWidth:X=!1,disabled:Y=!1,readOnly:Z=!1,required:ee=!1,name:ae,open:le,defaultOpen:te,onOpenChange:se,openLabel:ne="Open",clearLabel:ie="Clear",removeLabel:re=e=>`Remove ${e}`,inputRef:oe,id:ce,className:de,style:me,...ue}){const pe=y(K),he=Q??pe,be=he?"danger":N,ge=!0===R,fe=l.useMemo(()=>P.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[P]),[ve,xe]=l.useState(()=>toArray(k)),ye=void 0===$?ve:toArray($),[Ne,we]=l.useState(""),Ce=l.useMemo(()=>new Map(fe.map(e=>[e.value,e])),[fe]),Le=l.useCallback(e=>Ce.get(e)??{value:e,label:String(e),custom:!0},[Ce]),je=Ne.trim(),Ie=je.toLocaleLowerCase(),Se=""===je||fe.some(e=>e.label.toLocaleLowerCase()===Ie||String(e.value).toLocaleLowerCase()===Ie)||ye.some(e=>String(e).toLocaleLowerCase()===Ie),Ae=!E||Z||Y||Se?null:je,Oe=l.useMemo(()=>null===Ae?fe:[...fe,{value:Ae,label:Ae,custom:!0}],[fe,Ae]),Ve=ge?ye.map(Le):ye.length>0?Le(ye[0]):null,_e=p(A,u[x],L[x],v[x],ge?O[x]:m[x],`${C[S][x]} pe-1.5`,Y?h[f]:Z?b[f]:g[f]),ze=/* @__PURE__ */["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].join(" "),renderInput=a=>e(t.Input,{ref:oe,placeholder:W,className:p(ze,ge&&"min-w-16",ge&&a&&"ms-1.5")});return a(s.Root,{disabled:Y,invalid:he,className:p("flex-col align-top",j[x],X?"flex w-full":"inline-flex",de),style:{...I(be,M),...me},...ue,children:[B?e(s.Label,{className:p(w[x],"font-semibold",Y?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:B}):null,a(t.Root,{id:ce,name:ae,items:Oe,multiple:ge,value:Ve,onValueChange:e=>{!function commit(e){void 0===$&&xe(e),T?.(ge?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{we(e),q?.(e)},open:le,defaultOpen:te,onOpenChange:e=>se?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:H,disabled:Y,readOnly:Z,required:ee,children:[a(t.InputGroup,{className:_e,children:[U?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:U}):null,ge?e(t.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Value,{children:s=>a(l.Fragment,{children:[s.map(a=>e(t.Chip,{render:e(n,{variant:"glass",size:x,color:be,density:"compact",disabled:Y,endIcon:Z||Y?null:e(t.ChipRemove,{"aria-label":re(a.label),className:d,children:e(o,{})})}),children:a.label},String(a.value))),renderInput(s.length>0)]})})}):renderInput(!1),D&&!Z?e(t.Clear,{"aria-label":ie,className:z,children:e(o,{})}):null,e(t.Trigger,{"aria-label":ne,className:z,children:e(t.Icon,{className:p("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","data-[popup-open]:rotate-180"),children:e(r,{})})})]}),e(t.Portal,{children:e(t.Positioner,{className:"plass-portal z-50 [outline:none]",sideOffset:6,children:a(t.Popup,{className:p(V,L[x],u[x]),style:I(be,3),children:[e(t.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:G}),e(t.List,{children:s=>e(t.Item,{value:s,disabled:s.disabled,className:_,children:s.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(c,{})}),e("span",{className:"truncate",children:F?F(s.label):`Add “${s.label}”`})]}):a(l.Fragment,{children:[e(t.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(i,{})}),e("span",{className:"truncate",children:s.label})]})},`${s.custom?"custom:":""}${String(s.value)}`)})]})})})]}),J?e(s.Description,{className:p(w[x],"text-(--plass-muted-fg)"),children:J}):null,pe?e(s.Error,{match:!0,className:p(w[x],"text-(--p-accent)"),children:K}):null]})}

package/dist/components/combobox/index.js

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

package/dist/components/container/PlContainer.js

@@ -1,47 +1 @@
-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
-        }
-    });
-});
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{cx as n,sheetPaddingXClasses as m}from"../../internal/styles.js";const a={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlContainer=/* @__PURE__ */e.forwardRef(function PlContainer({maxWidth:e="none",padded:t=!0,size:o="md",density:s="default",centered:d=!0,render:l,className:i,children:c,...x},f){const u=n("block w-full","none"===e?"":a[e],d?"mx-auto":"",t?m[s][o]:"",i);return r({render:l,ref:f,props:{className:u,children:c,...x}})});

package/dist/components/container/index.js

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