plass-ui 0.0.1 → 1.0.0

package/dist/components/chat-bubble/PlChatBubble.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { CheckIcon, ClockIcon, LinkIcon, severityIcon } from '../../internal/icons.js';
+import { controlSlots, focusRingClasses, glassClasses, hasContent, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
+/**
+ * A bubble's own padding track, tighter than a sheet's.
+ *
+ * A sheet is a region of a page and a bubble is a sentence with a surface behind
+ * it: 20px of padding around eight words is a card, not a message. Both axes,
+ * because unlike a control a bubble has no height to fight.
+ */
+const bubblePaddingClasses = {
+    default: {
+        xs: 'px-2 py-1',
+        sm: 'px-2.5 py-1.5',
+        md: 'px-3 py-2',
+        lg: 'px-3.5 py-2.5',
+        xl: 'px-4 py-3'
+    },
+    compact: {
+        xs: 'px-1.5 py-0.5',
+        sm: 'px-2 py-1',
+        md: 'px-2.5 py-1.5',
+        lg: 'px-3 py-1.5',
+        xl: 'px-3.5 py-2'
+    }
+};
+/**
+ * The corner nearest the speaker is cut short.
+ *
+ * This is the library's one piece of chat vocabulary, and it does the job a
+ * drawn tail does elsewhere: it says which end of the row the message came from,
+ * without hanging a triangle off a sheet of glass that is supposed to have been
+ * cut with a straight edge. Written as the logical properties rather than as
+ * `rounded-tl`, so a thread in Arabic squares the other corner without being
+ * told.
+ *
+ * A flat 4px rather than a step down the radius ladder, and that is the whole
+ * point of writing it out: the ladder runs 8px to 16px, so `--plass-radius-xs`
+ * against `--plass-radius-md` is a four-pixel difference nobody would ever read
+ * as meaning something. The cut has to be obvious at a glance in a column of
+ * forty messages or it is not saying anything.
+ */
+const tailClasses = {
+    start: '[border-start-start-radius:0.25rem]',
+    end: '[border-start-end-radius:0.25rem]'
+};
+/**
+ * The three materials.
+ *
+ * A bubble *is* the thing being coloured — unlike a `PlCard`, which holds other
+ * people's content and so keeps its sheet undyed — so `solid` floods it and the
+ * text switches to `--p-on-solid`. That is what makes a column of your own
+ * messages read as yours at a glance rather than one line at a time.
+ */
+const variantClasses = {
+    solid: /* @__PURE__ */ [
+        'text-(--p-on-solid) [background-image:var(--p-fill)]',
+        '[box-shadow:var(--p-elev),var(--p-lift)]'
+    ].join(' '),
+    glass: /* @__PURE__ */ [
+        glassClasses,
+        'border text-(--plass-fg) bg-(--plass-glass)',
+        '[border-color:var(--plass-glass-line)]',
+        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
+    ].join(' '),
+    ghost: 'text-(--plass-fg) bg-(--p-soft) [box-shadow:var(--p-elev)]'
+};
+/**
+ * The double tick, drawn here rather than in `internal/icons` because it is the
+ * one glyph in the library only one component has any use for.
+ *
+ * Two ticks overlapping by a third of their width, which is what says "two"
+ * without doubling the width of the mark — a delivered message and a sent one
+ * have to be told apart at 12px, side by side, in a column.
+ */
+function DoubleCheckIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "m1.5 8.5 2.75 2.75L9.5 6", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M7 10.75 8.25 12l5.25-5.25", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+/** One glyph per step. `read` shares the mark with `delivered` and takes the colour. */
+const statusIcons = {
+    sending: _jsx(ClockIcon, {}),
+    sent: _jsx(CheckIcon, {}),
+    delivered: _jsx(DoubleCheckIcon, {}),
+    read: _jsx(DoubleCheckIcon, {}),
+    failed: /* @__PURE__ */ severityIcon('danger')
+};
+/**
+ * What each mark is read out as. English, like every other default string in the
+ * library — a page already knows its own language, and `statusLabel` is where it
+ * says so.
+ */
+const statusLabels = {
+    sending: 'Sending',
+    sent: 'Sent',
+    delivered: 'Delivered',
+    read: 'Read',
+    failed: 'Not delivered'
+};
+/**
+ * Only two of the five carry a colour: the one that arrived and the one that did
+ * not. The three in between are the ordinary course of events, and a thread
+ * where every message is marked in colour is a thread where the colour has
+ * stopped meaning anything.
+ */
+const statusToneClasses = {
+    sending: 'text-(--plass-muted-fg)',
+    sent: 'text-(--plass-muted-fg)',
+    delivered: 'text-(--plass-muted-fg)',
+    read: 'text-(--p-accent)',
+    failed: 'text-(--plass-danger-accent)'
+};
+/**
+ * The card a link unfurls into.
+ *
+ * Its surface is mixed out of `currentColor` rather than out of a token, because
+ * it is the one part of a bubble that has to work on both a filled surface and a
+ * bare one: on `solid` the text is white and the card is a white wash, on
+ * `glass` the text is the page's ink and the card is a grey one. A fixed token
+ * would be invisible against one of the two.
+ */
+const previewSurfaceClasses = /* @__PURE__ */ [
+    'block overflow-hidden rounded-(--plass-radius-sm) border no-underline',
+    '[border-color:color-mix(in_oklab,currentColor_18%,transparent)]',
+    '[background-color:color-mix(in_oklab,currentColor_7%,transparent)]',
+    'hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]',
+    '[transition-property:background-color] [transition-duration:var(--plass-duration)]',
+    '[transition-timing-function:var(--plass-ease)]',
+    focusRingClasses
+].join(' ');
+/**
+ * The affordance stays out of the way of the message until the row is reached
+ * for — the same allowance a chip's × takes, and for the same reason: this is
+ * not a control changing what it is, it is a handle that would otherwise sit in
+ * the middle of a conversation being read.
+ *
+ * A pointer that cannot hover has nothing to reveal it, so it is simply always
+ * there on touch.
+ */
+const actionsClasses = /* @__PURE__ */ [
+    'shrink-0 opacity-0',
+    '[transition:opacity_var(--plass-duration)_var(--plass-ease)]',
+    'group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100',
+    '[@media(hover:none)]:opacity-100'
+].join(' ');
+/**
+ * One message in a conversation.
+ *
+ * Everything around the bubble is optional and nothing about it is fixed by
+ * `side`: the avatar, the sender's name, the time, the delivery mark, the media
+ * above the text and the link card below it are each drawn only when they are
+ * given something. What `side` decides is which way the row runs and which
+ * corner of the sheet is cut short.
+ *
+ * `variant` is what tells your own messages from everyone else's, and it is
+ * deliberately not tied to `side` — filling the right-hand column is a
+ * convention, not a law, and a thread that fills neither is a perfectly good
+ * thread.
+ */
+export const PlChatBubble = /* @__PURE__ */ React.forwardRef(function PlChatBubble({ side = 'start', name, time, avatar, status, statusLabel, typing = false, typingLabel = 'Typing…', media, preview, actions, variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, className, style, children, ...props }, ref) {
+    const end = side === 'end';
+    const hasHeader = hasContent(name) || hasContent(time);
+    const hasBody = typing || hasContent(children) || Boolean(preview);
+    const bubbleClasses = [
+        'flex min-w-0 flex-col overflow-hidden',
+        radiusClasses[size],
+        tailClasses[side],
+        variantClasses[variant],
+        transitionClasses
+    ].join(' ');
+    return (_jsxs("div", { ref: ref, className: [
+            'group/bubble flex w-full items-start gap-2',
+            end ? 'flex-row-reverse' : '',
+            className ?? ''
+        ]
+            .filter(Boolean)
+            .join(' '), style: { ...controlSlots(color, elevation, variant), ...style }, ...props, children: [hasContent(avatar) ? _jsx("div", { className: "shrink-0", children: avatar }) : null, _jsxs("div", { className: [
+                    'flex max-w-[min(100%,32rem)] min-w-0 flex-col',
+                    sheetHeaderGapClasses[size],
+                    end ? 'items-end' : 'items-start'
+                ].join(' '), children: [hasHeader ? (_jsxs("div", { className: `flex items-baseline gap-2 ${metaTextClasses[size]}`, children: [hasContent(name) ? _jsx("span", { className: "font-semibold", children: name }) : null, hasContent(time) ? _jsx("span", { className: "text-(--plass-muted-fg)", children: time }) : null] })) : null, _jsxs("div", { className: `flex min-w-0 items-center gap-1 ${end ? 'flex-row-reverse' : ''}`, children: [_jsxs("div", { className: bubbleClasses, children: [hasContent(media) ? (_jsx("div", { className: "[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full", children: media })) : null, hasBody ? (_jsxs("div", { className: [
+                                            bubblePaddingClasses[density][size],
+                                            'flex min-w-0 flex-col gap-2',
+                                            sheetBodyClasses[size]
+                                        ].join(' '), children: [typing ? (_jsx(TypingDots, { label: typingLabel })) : hasContent(children) ? (_jsx("div", { className: "min-w-0 break-words whitespace-pre-line", children: children })) : null, preview ? _jsx(LinkPreview, { preview: preview }) : null] })) : null] }), hasContent(actions) ? _jsx("div", { className: actionsClasses, children: actions }) : null] }), status ? (_jsxs("div", { className: [
+                            'flex items-center gap-1',
+                            metaTextClasses[size],
+                            statusToneClasses[status],
+                            '[&_svg]:size-[1.15em] [&_svg]:shrink-0'
+                        ].join(' '), children: [statusIcons[status], _jsx("span", { className: srOnlyClasses, children: statusLabel ?? statusLabels[status] })] })) : null] })] }));
+});
+/**
+ * Three dots that light in sequence.
+ *
+ * Colour only, like every other indeterminate indicator in the library — the
+ * dots never move, so a bubble that is being typed into does not bounce in a
+ * thread somebody is reading. The delay is carried per dot in `--p-i`.
+ */
+function TypingDots({ label }) {
+    return (_jsxs("div", { className: "flex items-center gap-1 py-[0.35em]", role: "status", children: [[0, 1, 2].map((index) => (_jsx("span", { "aria-hidden": "true", className: "plass-typing-dot size-[0.45em] rounded-full", style: { '--p-i': index } }, index))), _jsx("span", { className: srOnlyClasses, children: label })] }));
+}
+/** The unfurled link: an image, who published it, a title and two lines of summary. */
+function LinkPreview({ preview }) {
+    const { url, title, description, image, site, newTab = false } = preview;
+    return (_jsxs("a", { href: url, target: newTab ? '_blank' : undefined, rel: newTab ? 'noopener noreferrer' : undefined, className: previewSurfaceClasses, children: [image ? (_jsx("img", { src: image, alt: "", className: "block h-28 w-full object-cover" })) : null, _jsxs("div", { className: "flex flex-col gap-0.5 p-2", children: [hasContent(site) ? (_jsxs("span", { className: "flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0", children: [_jsx(LinkIcon, {}), _jsx("span", { className: "truncate", children: site })] })) : null, hasContent(title) ? _jsx("span", { className: "font-semibold", children: title }) : null, hasContent(description) ? (_jsx("span", { className: "line-clamp-2 text-[0.9em] opacity-80", children: description })) : null] })] }));
+}

package/dist/components/chat-bubble/index.d.ts

@@ -0,0 +1,2 @@
+export { PlChatBubble } from './PlChatBubble.js';
+export type { PlChatBubbleLinkPreview, PlChatBubbleProps, PlChatBubbleSide, PlChatBubbleStatus } from './PlChatBubble.js';

package/dist/components/chat-bubble/index.js

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

package/dist/components/checkbox/PlCheckbox.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Checkbox as BaseUICheckbox } from '@base-ui/react/checkbox';
+import type { PlassColor, PlassSize } from '../../types.js';
+/**
+ * Base UI's own props, minus the ones this component owns: `className` and
+ * `style` land on the field wrapper rather than on the tick, and `render` would
+ * replace the tick with something that is no longer a checkbox.
+ */
+type BaseCheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof BaseUICheckbox.Root>, 'className' | 'style' | 'render' | 'children'>;
+export interface PlCheckboxProps extends BaseCheckboxProps {
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** The text beside the tick. Wired to it by Base UI's Field. */
+    label?: React.ReactNode;
+    /** Helper text under the label. */
+    description?: React.ReactNode;
+    /** Error message below. Its presence also turns the checkbox invalid. */
+    error?: React.ReactNode;
+    /**
+     * Forces the invalid state without a message — for when an external form
+     * library owns the validity. Defaults to whether `error` has content.
+     */
+    invalid?: boolean;
+    /** Class names for the field wrapper, not for the tick itself. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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 declare const PlCheckbox: React.ForwardRefExoticComponent<PlCheckboxProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/checkbox/PlCheckbox.js

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

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

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

package/dist/components/checkbox/index.js

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

package/dist/components/chip/PlChip.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlChipProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` is the default — a chip is a token sitting *on*
+     * something else, so it is raised even less often than a `PlButton`.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Content placed before the label — an icon, a status dot, an avatar. */
+    startIcon?: React.ReactNode;
+    /** Content placed after the label, before any `count`. */
+    endIcon?: React.ReactNode;
+    /**
+     * A number set into the end of the chip. Drawn on its own small plate, so
+     * "Errors 12" reads as one token with a count rather than as two words.
+     */
+    count?: React.ReactNode;
+    /**
+     * Called when the chip's delete affordance is pressed. Passing it is what
+     * makes the affordance appear.
+     */
+    onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Accessible name of the delete button. Never drawn.
+     * @default 'Remove'
+     */
+    deleteLabel?: string;
+    /**
+     * Marks the chip as chosen — a filter that is on.
+     *
+     * It moves the chip one step up the ladder its own variant already sits on,
+     * rather than changing the colour family, so a row of chips stays one row of
+     * chips.
+     * @default false
+     */
+    selected?: boolean;
+    /** Unavailable. The light goes out, the same way it does everywhere else. */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const PlChip: React.ForwardRefExoticComponent<PlChipProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/chip/PlChip.js

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

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

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

package/dist/components/chip/index.js

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

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

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlCollapsibleProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'onChange'> {
+    /**
+     * Drop shadow depth. `0` is the default — a fold is part of the page it is set
+     * into, not a panel floating over it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Whether the panel is showing. Use with `onOpenChange` for a controlled fold. */
+    open?: boolean;
+    /** Where an uncontrolled fold starts. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The heading on the trigger. */
+    title?: React.ReactNode;
+    /** A second line under the title, one step down the type scale and muted. */
+    subtitle?: React.ReactNode;
+    /** Content before the title — an icon, a status dot, a count. */
+    startIcon?: React.ReactNode;
+    /**
+     * A control pinned to the end of the header, outside the trigger.
+     *
+     * Deliberately outside it: a header that both folds and holds a switch has
+     * two things to press, and one of them cannot be nested inside the other —
+     * the browser rewrites a `<button>` inside a `<button>` on parse. The same
+     * shape `PlAccordionItem` uses.
+     */
+    action?: React.ReactNode;
+    /**
+     * Replaces the header entirely with a control of your own — a `PlButton`, a
+     * `PlChip`, a line of text you made pressable.
+     *
+     * The element you pass *becomes* the trigger: it is handed the click handler,
+     * `aria-expanded` and the `aria-controls` pointing at the panel, so nothing
+     * has to be wired up. `title` and the slots around it are for the far commoner
+     * case of wanting the header that is already there.
+     */
+    trigger?: React.ReactElement;
+    /** The chevron at the end of the header, turned to report the state. @default true */
+    indicator?: boolean;
+    /** Unavailable. The trigger stops answering and the panel stays as it is. */
+    disabled?: boolean;
+    /**
+     * Inner padding around the panel's content. Turn it off for something that
+     * should reach the edges — a table, a picture, a list of its own.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * Keeps a closed panel in the DOM so the browser's own page search can find
+     * and open it. Overrides `keepMounted`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * Keeps a closed panel in the DOM. For content that is expensive to build, or
+     * that holds form state which should survive being folded away.
+     * @default false
+     */
+    keepMounted?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const PlCollapsible: React.ForwardRefExoticComponent<PlCollapsibleProps & React.RefAttributes<HTMLDivElement>>;