plass-ui 0.0.1 → 1.0.0

package/dist/components/breadcrumb/PlBreadcrumb.d.ts

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+/**
+ * What is drawn between two steps of the trail.
+ *
+ * Four named marks rather than a free-for-all, because a separator is read
+ * hundreds of times a day and the difference between them is meaning, not
+ * decoration: a `chevron` and an `arrow` say "and then", a `slash` says "path",
+ * a `dot` says "these are peers of one thing". Anything else can still be passed
+ * as a node.
+ */
+export type PlBreadcrumbSeparator = 'chevron' | 'arrow' | 'slash' | 'dot';
+export interface PlBreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'color'> {
+    /** @default 'md' */
+    size?: PlassSize;
+    /**
+     * The colour family a link picks up when it is hovered.
+     * @default 'primary'
+     */
+    color?: PlassColor;
+    /**
+     * How tightly the steps pack. Spacing only.
+     * @default 'default'
+     */
+    density?: PlassDensity;
+    /**
+     * The mark between two steps. One of the four names, or any node.
+     * @default 'chevron'
+     */
+    separator?: PlBreadcrumbSeparator | React.ReactNode;
+    /**
+     * How many steps to show before the middle is folded away behind a `…`. Left
+     * out, the whole trail is shown however long it gets.
+     */
+    maxItems?: number;
+    /**
+     * How many steps stay at the front of a folded trail.
+     * @default 1
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * How many stay at the end.
+     * @default 1
+     */
+    itemsAfterCollapse?: number;
+    /**
+     * Whether pressing the `…` unfolds the trail in place. Turn it off to leave
+     * the fold as a plain mark.
+     * @default true
+     */
+    expandable?: boolean;
+    /**
+     * The name the trail is announced by. Never drawn.
+     * @default 'Breadcrumb'
+     */
+    label?: string;
+    /**
+     * What the `…` is announced as. Never drawn.
+     * @default 'Show the hidden steps'
+     */
+    expandLabel?: string;
+    /**
+     * Emits the trail a second time as a `BreadcrumbList`, in a
+     * `<script type="application/ld+json">` beside the markup.
+     *
+     * Off by default, because a page can only have one of these and a great many
+     * apps already emit theirs from an SEO layer of their own — two would be a
+     * page describing itself twice. Turn it on where this component *is* the
+     * trail: correct markup alone is not what puts a path under a search result,
+     * and the structured data is.
+     *
+     * Every step goes in, including the ones a `maxItems` fold is hiding — what is
+     * collapsed is a matter of how much room the row has, and the path is the path
+     * either way.
+     * @default false
+     */
+    structuredData?: boolean;
+    /**
+     * What relative `href`s are resolved against for `structuredData` — the site's
+     * origin, as `https://example.com`.
+     *
+     * Search engines want an absolute URL there. Without this the `href`s are
+     * emitted exactly as written, which is right when they are already absolute
+     * and not much use when they are not.
+     */
+    baseUrl?: string;
+    /** The `PlBreadcrumbItem`s. */
+    children?: React.ReactNode;
+}
+export interface PlBreadcrumbItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /** Renders the step as a link. */
+    href?: string;
+    /** Fires when the step is pressed. Renders it as a button when there is no `href`. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Content before the label — a home glyph, a repository avatar. */
+    startIcon?: React.ReactNode;
+    /** Content after the label. */
+    endIcon?: React.ReactNode;
+    /**
+     * Marks this step as the page you are on, which stops it being a link.
+     *
+     * The last step is the current one on its own, so this is only needed for a
+     * trail that ends somewhere the reader is not — and setting it anywhere takes
+     * the mark off the last step, because only one step in a trail can be it.
+     */
+    current?: boolean;
+    /** Unavailable. Stops answering, keeps its place in the trail. */
+    disabled?: boolean;
+    /** The step's label. */
+    children?: React.ReactNode;
+}
+/**
+ * The trail of pages above the one being read.
+ *
+ * Two things make this more than a row of links. The first is that the last step
+ * is where the reader already is, so it is not a link at all — it carries
+ * `aria-current="page"` and stops being pressable, and the component works that
+ * out rather than asking every caller to remember it. The second is the fold: a
+ * trail seven levels deep is a trail nobody reads, so the middle collapses to a
+ * `…` that puts it back when pressed.
+ *
+ * The separators are drawn by the trail rather than by the steps. A step does
+ * not know whether anything follows it, and a mark that belonged to a step would
+ * have to be taken off the last one by hand.
+ *
+ * There is no `variant` and no `elevation`: a trail is a line of text above the
+ * page, not a surface laid on it.
+ */
+export declare const PlBreadcrumb: React.ForwardRefExoticComponent<PlBreadcrumbProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One step of the trail.
+ *
+ * It renders three different things and the caller picks by what they pass: an
+ * `<a>` with an `href`, a `<button>` with an `onClick`, and a plain `<span>` with
+ * neither — which is what the last step is, because the page you are already on
+ * is not somewhere to go.
+ */
+export declare const PlBreadcrumbItem: React.ForwardRefExoticComponent<PlBreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/breadcrumb/PlBreadcrumb.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { ArrowRightIcon, ChevronIcon, EllipsisIcon } from '../../internal/icons.js';
+import { controlTextClasses, cx, focusRingClasses, gapClasses, hasContent, iconClasses, radiusClasses, transitionClasses } from '../../internal/styles.js';
+const BreadcrumbContext = /* @__PURE__ */ React.createContext({
+    size: 'md',
+    last: false
+});
+/** Between the steps, and the only thing `density` touches. */
+const trailGapClasses = {
+    default: { xs: 'gap-1', sm: 'gap-1.5', md: 'gap-2', lg: 'gap-2.5', xl: 'gap-3' },
+    compact: { xs: 'gap-0.5', sm: 'gap-1', md: 'gap-1', lg: 'gap-1.5', xl: 'gap-2' }
+};
+/**
+ * A step's corner, read two steps down the radius ladder.
+ *
+ * `radiusClasses.md` is 12px, which on a line of text 20px tall is most of the
+ * way to a pill — and a breadcrumb step is not a `PlChip`. What the hover tint
+ * needs is a rectangle with the corners taken off, which is what the ladder says
+ * everywhere else; it just has to be read further down for something this short.
+ */
+const stepRadiusClasses = {
+    xs: radiusClasses.xs,
+    sm: radiusClasses.xs,
+    md: radiusClasses.xs,
+    lg: radiusClasses.sm,
+    xl: radiusClasses.sm
+};
+/**
+ * The four marks.
+ *
+ * The two that point are glyphs turned rather than redrawn, the same allowance
+ * the no-transform rule makes for the chevron on a `PlAccordion`: the wedge is
+ * drawn pointing down once, and a trail turns it a quarter. Both turn back under
+ * RTL, because a trail runs the way the language does.
+ */
+function separatorMark(separator) {
+    switch (separator) {
+        case 'chevron':
+            return (_jsx("span", { className: "flex -rotate-90 items-center rtl:rotate-90", children: _jsx(ChevronIcon, {}) }));
+        case 'arrow':
+            return (_jsx("span", { className: "flex items-center rtl:rotate-180", children: _jsx(ArrowRightIcon, {}) }));
+        case 'slash':
+            return _jsx("span", { className: "opacity-70", children: "/" });
+        case 'dot':
+            return _jsx("span", { className: "opacity-70", children: "\u00B7" });
+        default:
+            return null;
+    }
+}
+const separatorNames = ['chevron', 'arrow', 'slash', 'dot'];
+/**
+ * The words in a step, with everything that is not a word left out.
+ *
+ * A step's label is a `ReactNode` and `name` in the structured data is a string,
+ * so the tree is walked for its text. Only `children` is read — a `startIcon` is
+ * a picture of the thing rather than its name, and a home glyph contributing
+ * nothing is exactly right.
+ */
+function textOf(node) {
+    if (typeof node === 'string' || typeof node === 'number') {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(textOf).join('');
+    }
+    if (React.isValidElement(node)) {
+        return textOf(node.props.children);
+    }
+    return '';
+}
+/**
+ * A step's `href` as a search engine wants it: absolute.
+ *
+ * `new URL` is what resolves `../guide` against a base rather than pasting the
+ * two together, and it throws on anything it cannot make sense of — a base that
+ * is not a URL, an `href` that is a router-only path. Falling back to the `href`
+ * as written is better than dropping the entry: a relative URL is a weaker
+ * signal, an absent one is none.
+ */
+function absoluteHref(href, baseUrl) {
+    if (!baseUrl) {
+        return href;
+    }
+    try {
+        return new URL(href, baseUrl).href;
+    }
+    catch {
+        return href;
+    }
+}
+/**
+ * The trail as `schema.org`'s `BreadcrumbList`.
+ *
+ * `item` is omitted where a step has no `href`, which is the last step's usual
+ * case: a crawler reads a final entry without one as the page being looked at,
+ * and a `ListItem` pointing at nothing would be worse than one pointing nowhere.
+ */
+function breadcrumbListData(steps, baseUrl) {
+    const itemListElement = steps.map((step, index) => {
+        const { href, children } = step.props;
+        return {
+            '@type': 'ListItem',
+            position: index + 1,
+            name: textOf(children),
+            ...(href ? { item: absoluteHref(href, baseUrl) } : null)
+        };
+    });
+    // `<` is escaped because this string is written into a `<script>`: a label
+    // holding `</script>` would otherwise close the tag and turn the rest of the
+    // JSON into markup.
+    return JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'BreadcrumbList',
+        itemListElement
+    }).replace(/</g, '\\u003c');
+}
+function isSeparatorName(value) {
+    return typeof value === 'string' && separatorNames.includes(value);
+}
+/**
+ * The trail of pages above the one being read.
+ *
+ * Two things make this more than a row of links. The first is that the last step
+ * is where the reader already is, so it is not a link at all — it carries
+ * `aria-current="page"` and stops being pressable, and the component works that
+ * out rather than asking every caller to remember it. The second is the fold: a
+ * trail seven levels deep is a trail nobody reads, so the middle collapses to a
+ * `…` that puts it back when pressed.
+ *
+ * The separators are drawn by the trail rather than by the steps. A step does
+ * not know whether anything follows it, and a mark that belonged to a step would
+ * have to be taken off the last one by hand.
+ *
+ * There is no `variant` and no `elevation`: a trail is a line of text above the
+ * page, not a surface laid on it.
+ */
+export const PlBreadcrumb = /* @__PURE__ */ React.forwardRef(function PlBreadcrumb({ size = 'md', color = 'primary', density = 'default', separator = 'chevron', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, expandable = true, label = 'Breadcrumb', expandLabel = 'Show the hidden steps', structuredData = false, baseUrl, className, style, children, ...props }, ref) {
+    const [unfolded, setUnfolded] = React.useState(false);
+    const steps = React.Children.toArray(children).filter(React.isValidElement);
+    const total = steps.length;
+    /*
+     * The last step is the page you are on — unless a step says it is. Exactly one
+     * element in a trail may carry `aria-current="page"`, so a caller who marks an
+     * earlier step has to take the mark off the last one, and doing that by hand
+     * would mean writing `current={false}` on a step that never asked for it.
+     */
+    const claimed = steps.some((step) => step.props.current === true);
+    const folding = !unfolded &&
+        maxItems !== undefined &&
+        total > Math.max(maxItems, 1) &&
+        // A fold has to actually remove something. With `1` before and `1` after on
+        // a three-step trail the `…` would stand in for exactly one step, which is
+        // longer than the step it replaced.
+        total - itemsBeforeCollapse - itemsAfterCollapse > 1;
+    const shown = folding
+        ? [
+            ...steps.slice(0, Math.max(0, itemsBeforeCollapse)),
+            null,
+            ...steps.slice(total - Math.max(0, itemsAfterCollapse))
+        ]
+        : steps;
+    const mark = isSeparatorName(separator) ? separatorMark(separator) : separator;
+    const foldClassNames = cx('inline-flex items-center rounded-(--plass-radius-xs) px-0.5', 'text-(--plass-muted-fg)', transitionClasses, iconClasses, expandable
+        ? cx('cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)', focusRingClasses)
+        : '');
+    return (_jsxs("nav", { ref: ref, "aria-label": label, className: cx('flex', controlTextClasses[size], iconClasses, className), style: {
+            '--p-accent': `var(--plass-${color}-accent)`,
+            '--p-soft': `var(--plass-${color}-soft)`,
+            '--p-ring': `var(--plass-${color}-ring)`,
+            ...style
+        }, ...props, children: [structuredData && total > 0 ? (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: breadcrumbListData(steps, baseUrl) } })) : null, _jsx("ol", { 
+                // `role="list"` said out loud: Tailwind's reset takes the bullets off
+                // every `<ol>`, and Safari takes the list semantics off with them.
+                role: "list", className: cx('flex list-none flex-wrap items-center p-0', trailGapClasses[density][size]), children: shown.map((step, index) => (_jsxs(React.Fragment, { children: [index > 0 ? (_jsx("li", { "aria-hidden": "true", className: "flex shrink-0 items-center text-(--plass-muted-fg) select-none", children: mark })) : null, step ? (_jsx(BreadcrumbContext.Provider, { value: { size, last: !claimed && index === shown.length - 1 }, children: step })) : (_jsx("li", { className: "flex shrink-0 items-center", children: expandable ? (_jsx("button", { type: "button", className: foldClassNames, "aria-label": expandLabel, onClick: () => setUnfolded(true), children: _jsx(EllipsisIcon, {}) })) : (_jsx("span", { className: foldClassNames, "aria-hidden": "true", children: _jsx(EllipsisIcon, {}) })) }))] }, step ? (step.key ?? index) : 'fold'))) })] }));
+});
+/**
+ * One step of the trail.
+ *
+ * It renders three different things and the caller picks by what they pass: an
+ * `<a>` with an `href`, a `<button>` with an `onClick`, and a plain `<span>` with
+ * neither — which is what the last step is, because the page you are already on
+ * is not somewhere to go.
+ */
+export const PlBreadcrumbItem = /* @__PURE__ */ React.forwardRef(function PlBreadcrumbItem({ href, onClick, startIcon, endIcon, current, disabled = false, className, children, ...props }, ref) {
+    const { size, last } = React.useContext(BreadcrumbContext);
+    const isCurrent = current ?? last;
+    const interactive = Boolean(href || onClick) && !isCurrent && !disabled;
+    const stepClassNames = cx('inline-flex min-w-0 items-center px-1', gapClasses[size], stepRadiusClasses[size], transitionClasses, 
+    // An if/else rather than stacked variants: two Tailwind classes of equal
+    // specificity resolve by their order in the generated stylesheet.
+    disabled
+        ? 'cursor-not-allowed text-(--plass-muted-fg) opacity-50'
+        : isCurrent
+            ? 'font-medium text-(--plass-fg)'
+            : interactive
+                ? cx('cursor-pointer text-(--plass-muted-fg)', 'hover:bg-(--p-soft) hover:text-(--p-accent)', focusRingClasses)
+                : 'text-(--plass-muted-fg)');
+    const body = (_jsxs(_Fragment, { children: [hasContent(startIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: startIcon })) : null, _jsx("span", { className: "truncate", children: children }), hasContent(endIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: endIcon })) : null] }));
+    return (_jsx("li", { ref: ref, className: cx('flex min-w-0 items-center', className), ...props, children: interactive && href ? (_jsx("a", { href: href, className: stepClassNames, onClick: onClick, children: body })) : interactive ? (_jsx("button", { type: "button", className: stepClassNames, onClick: onClick, children: body })) : (_jsx("span", { className: stepClassNames, "aria-current": isCurrent ? 'page' : undefined, "aria-disabled": disabled || undefined, children: body })) }));
+});

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

@@ -0,0 +1,2 @@
+export { PlBreadcrumb, PlBreadcrumbItem } from './PlBreadcrumb.js';
+export type { PlBreadcrumbItemProps, PlBreadcrumbProps, PlBreadcrumbSeparator } from './PlBreadcrumb.js';

package/dist/components/breadcrumb/index.js

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

package/dist/components/button/{Button.d.ts → PlButton.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassElevation, PlassStyleProps } from '../../types';
-export interface ButtonProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlButtonProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
     /**
      * Drop shadow depth. `1` is the default, because a moulded key **rests on**
      * the sheet rather than lying flush with it. Hover adds a level and pressing
@@ -39,4 +39,4 @@ export interface ButtonProps extends PlassStyleProps, Omit<React.ComponentPropsW
     render?: useRender.RenderProp;
     children?: React.ReactNode;
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PlButton: React.ForwardRefExoticComponent<PlButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/PlButton.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button as BaseUIButton } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
+import { ButtonGroupContext } from '../../internal/button-group.js';
+import { Spinner } from '../../internal/icons.js';
+import { controlHeightClasses, controlSlots, controlSquareClasses, controlTextClasses, disabledClasses, focusRingClasses, gapClasses, glassClasses, hasContent, iconClasses, paddingXClasses, radiusClasses, readOnlyFilterClasses, transitionClasses } from '../../internal/styles.js';
+/**
+ * The scales all come from `internal/styles` — a button's height *is* the
+ * library's control height, and the same numbers have to hold on a PlTextField,
+ * a Select and a Chip for a mixed row to keep its baseline.
+ */
+const sizeClasses = {
+    xs: `${controlHeightClasses.xs} ${gapClasses.xs} ${radiusClasses.xs} ${controlTextClasses.xs}`,
+    sm: `${controlHeightClasses.sm} ${gapClasses.sm} ${radiusClasses.sm} ${controlTextClasses.sm}`,
+    md: `${controlHeightClasses.md} ${gapClasses.md} ${radiusClasses.md} ${controlTextClasses.md}`,
+    lg: `${controlHeightClasses.lg} ${gapClasses.lg} ${radiusClasses.lg} ${controlTextClasses.lg}`,
+    xl: `${controlHeightClasses.xl} ${gapClasses.xl} ${radiusClasses.xl} ${controlTextClasses.xl}`
+};
+/** With no label there is nothing to pad against, so the button goes square. */
+const iconOnlyClasses = {
+    xs: `${controlSquareClasses.xs} px-0`,
+    sm: `${controlSquareClasses.sm} px-0`,
+    md: `${controlSquareClasses.md} px-0`,
+    lg: `${controlSquareClasses.lg} px-0`,
+    xl: `${controlSquareClasses.xl} px-0`
+};
+const baseClasses = /* @__PURE__ */ [
+    // `relative` because `.plass-glow` hangs its two light layers off `::before`/`::after`.
+    'relative inline-flex shrink-0 select-none items-center justify-center',
+    'whitespace-nowrap align-middle font-semibold leading-none',
+    '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]',
+    transitionClasses,
+    focusRingClasses,
+    iconClasses
+].join(' ');
+/**
+ * The three materials.
+ *
+ * `solid` is the only one with a `background-image`, and that gradient is the
+ * whole of the form: two ends of the family swept across the control, with no
+ * highlight over the top of it. A filled control deliberately carries **no**
+ * gloss line — an inset white edge on a coloured surface is what reads as
+ * lacquer, and the sweep is already saying everything about the shape that
+ * needs saying. The hairline belongs to `glass`, which has a real cut edge.
+ *
+ * `glass` wears the family in its **text** rather than in its sheet, which is
+ * why `color="secondary"` is the neutral, quiet button and not a second grey
+ * variant nobody would remember the name of.
+ */
+const restClasses = {
+    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-(--p-accent) bg-(--plass-glass)',
+        '[border-color:var(--plass-glass-line)]',
+        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
+    ].join(' '),
+    // Nothing to catch the light on, and nothing to cast a shadow.
+    ghost: 'text-(--p-accent) bg-transparent'
+};
+/**
+ * Hover lifts the control and turns the light up; press puts it down and turns
+ * the light down. Both are `filter: brightness()` rather than a second set of
+ * colours, because the fill is a gradient and a gradient cannot be transitioned
+ * — but light falling on one can. The pointer bloom `.plass-glow` draws rides
+ * on top of this; the brightness is the state, the bloom is where the pointer
+ * is.
+ */
+const hoverClasses = {
+    solid: /* @__PURE__ */ [
+        'hover:brightness-105',
+        'hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]',
+        'active:brightness-95',
+        'active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]'
+    ].join(' '),
+    glass: /* @__PURE__ */ [
+        'hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]',
+        'hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]',
+        'active:bg-(--plass-glass-press)',
+        'active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]'
+    ].join(' '),
+    ghost: 'hover:bg-(--p-soft) active:bg-(--p-soft-hover)'
+};
+/**
+ * Read-only keeps the shape, the colour and the edge but goes flat, loses its
+ * lift and drains most of the saturation.
+ */
+const readOnlyClasses = {
+    solid: /* @__PURE__ */ [
+        'cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]',
+        `shadow-none ${readOnlyFilterClasses}`
+    ].join(' '),
+    glass: /* @__PURE__ */ [
+        glassClasses,
+        'cursor-default border text-(--p-accent) bg-(--plass-glass)',
+        '[border-color:var(--plass-glass-line)]',
+        `[box-shadow:var(--plass-gloss-glass)] ${readOnlyFilterClasses}`
+    ].join(' '),
+    ghost: `cursor-default text-(--p-accent) bg-transparent ${readOnlyFilterClasses}`
+};
+export const PlButton = /* @__PURE__ */ React.forwardRef(function PlButton({ variant: variantProp, size: sizeProp, color: colorProp, density: densityProp, elevation: elevationProp, startIcon, endIcon, loading = false, readOnly = false, fullWidth = false, disabled: disabledProp, render, className, style, children, onClick, onPointerMove, ...props }, ref) {
+    /*
+     * A `PlButtonGroup` around this button sets the axes once for the set. The
+     * button's own prop still wins — a row of secondary actions with one danger
+     * button in it is a real thing — and with no group around it the fallbacks
+     * are the defaults they always were.
+     */
+    const group = React.useContext(ButtonGroupContext);
+    const variant = variantProp ?? group?.variant ?? 'solid';
+    const size = sizeProp ?? group?.size ?? 'md';
+    const color = colorProp ?? group?.color ?? 'primary';
+    const density = densityProp ?? group?.density ?? 'default';
+    const elevation = elevationProp ?? group?.elevation ?? 1;
+    const disabled = disabledProp ?? group?.disabled ?? false;
+    const iconOnly = !hasContent(children);
+    // `disabled` and `readOnly` change how the button looks; `loading` only stops
+    // it from firing.
+    const inert = loading || readOnly;
+    const interactive = !disabled && !inert;
+    const classNames = [
+        baseClasses,
+        sizeClasses[size],
+        iconOnly ? iconOnlyClasses[size] : paddingXClasses[density][size],
+        // Deliberately an if/else rather than stacked `data-*` variants: two
+        // Tailwind variants of equal specificity resolve by their order in the
+        // generated stylesheet, which is not something a component should depend on.
+        disabled
+            ? disabledClasses[variant]
+            : readOnly
+                ? readOnlyClasses[variant]
+                : restClasses[variant],
+        interactive ? `${hoverClasses[variant]} cursor-pointer` : '',
+        // The interaction light. Every variant takes it, because it is about where
+        // the pointer is rather than about what the surface is made of — the two
+        // colour slots behind it are what switch with the variant.
+        interactive ? 'plass-glow' : '',
+        loading ? 'cursor-progress' : '',
+        fullWidth ? 'w-full' : '',
+        className ?? ''
+    ]
+        .filter(Boolean)
+        .join(' ');
+    /*
+     * `render` deliberately steps around Base UI's PlButton rather than being handed
+     * to it. Told to render a non-`<button>`, that component puts `role="button"`
+     * on whatever it was given — which is right for a `<div>` and wrong for the
+     * case this prop exists for: an `<a href>` under a `role="button"` stops being
+     * a link to everything that reads the page, and the link list, the status bar
+     * and the crawler all lose it.
+     *
+     * What Base UI's PlButton adds over a bare `<button>` is its disabled handling,
+     * and `disabled` is the one thing that cannot travel to an `<a>` anyway.
+     */
+    return useRender({
+        render: render ?? _jsx(BaseUIButton, { disabled: disabled }),
+        ref,
+        props: {
+            className: classNames,
+            style: { ...controlSlots(color, elevation, variant), ...style },
+            'aria-disabled': inert || undefined,
+            'aria-busy': loading || undefined,
+            'data-loading': loading || undefined,
+            'data-readonly': readOnly || undefined,
+            onClick: (event) => {
+                if (inert) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+                onClick?.(event);
+            },
+            onPointerMove: (event) => {
+                // Feeds the two light layers in `styles.css`. Written straight to the
+                // element rather than held in state: this fires at pointer rate, and a
+                // `setState` here would re-render the tree on every mouse move. Reading
+                // `offsetX/offsetY` costs nothing — no `getBoundingClientRect`, so no
+                // forced layout. Icons carry `pointer-events: none`, so the offsets are
+                // always relative to the button itself.
+                //
+                // It runs while a finger is down too, which is what makes the light
+                // follow a drag on a touch screen — there is no hover there, and the
+                // `:active` layer is the one doing the work.
+                const element = event.currentTarget;
+                element.style.setProperty('--p-mx', `${event.nativeEvent.offsetX}px`);
+                element.style.setProperty('--p-my', `${event.nativeEvent.offsetY}px`);
+                onPointerMove?.(event);
+            },
+            ...props,
+            children: (_jsxs(_Fragment, { children: [loading ? _jsx(Spinner, {}) : startIcon, children, endIcon] }))
+        }
+    });
+});

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

@@ -1,2 +1,2 @@
-export { Button } from './Button';
-export type { ButtonProps } from './Button';
+export { PlButton } from './PlButton.js';
+export type { PlButtonProps } from './PlButton.js';

package/dist/components/button/index.js

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

package/dist/components/button-group/PlButtonGroup.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { PlassElevation, PlassOrientation, PlassStyleProps } from '../../types.js';
+export interface PlButtonGroupProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the buttons run. A vertical group is a stacked menu of equal
+     * actions; a horizontal one is the default because that is what a toolbar is.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /** Drop shadow depth, passed to every button in the group. */
+    elevation?: PlassElevation;
+    /** Disables every button in the group at once. */
+    disabled?: boolean;
+    /** Stretches to the container and divides the width evenly between buttons. */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A run of buttons that belong together.
+ *
+ * Two things are happening here and only one of them is visual. The corners
+ * that face a neighbour are squared off — that is the look. The other half is
+ * that `variant`, `size`, `color`, `density`, `elevation` and `disabled` are
+ * stated once for the set rather than repeated on every button; a group where
+ * one button is a size out is the failure this exists to prevent.
+ *
+ * The buttons stay real `PlButton`s and nothing about them is replaced. Which
+ * also means this is **not** a segmented control and it does not manage
+ * selection: for one-of-a-set reach for `PlSegmentedButton`, which is what that
+ * actually is.
+ */
+export declare const PlButtonGroup: React.ForwardRefExoticComponent<PlButtonGroupProps & React.RefAttributes<HTMLDivElement>>;