plass-ui 0.0.1 → 1.0.0

package/dist/components/button-group/PlButtonGroup.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ButtonGroupContext } from '../../internal/button-group.js';
+import { cx } from '../../internal/styles.js';
+/**
+ * The corners that face a neighbour are squared off, so the run reads as one
+ * piece scored into segments rather than as three keys that happen to be
+ * touching.
+ *
+ * Logical properties (`s`/`e`) rather than left/right: under RTL the first
+ * button is on the right, and `rounded-l-none` would flatten the wrong side.
+ */
+const joinClasses = {
+    horizontal: '[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none',
+    vertical: '[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none'
+};
+/**
+ * Only `glass` needs the overlap, because it is the only variant that draws an
+ * edge. Two glass keys meeting would otherwise show both of their hairlines and
+ * the seam would be twice as heavy as every other edge on the page; pulling the
+ * second one back a pixel makes the two share one line.
+ *
+ * A `solid` group must **not** do this. Its keys have no border to double up,
+ * and overlapping would put one gradient over the start of the next — which is
+ * exactly the join the squared corners are drawing.
+ */
+const overlapClasses = {
+    horizontal: '[&>*:not(:first-child)]:-ms-px',
+    vertical: '[&>*:not(:first-child)]:-mt-px'
+};
+const baseClasses = /* @__PURE__ */ [
+    'inline-flex align-middle',
+    // Every child gets a stacking context so the hovered or focused one can come
+    // forward. Without it the focus ring — which is drawn outside the border box —
+    // is painted over by whichever neighbour happens to come after it.
+    '[&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10',
+    // A group is a set of equal actions, so they stay the same height even when
+    // one of them has an icon and the others do not.
+    '[&>*]:shrink-0'
+].join(' ');
+/**
+ * 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 const PlButtonGroup = /* @__PURE__ */ React.forwardRef(function PlButtonGroup({ variant, size, color, density, elevation, orientation = 'horizontal', disabled, fullWidth = false, className, children, ...props }, ref) {
+    // Every value is passed through as it arrived, `undefined` included. A
+    // PlButton reads the group only as a fallback, so "not set here" goes on
+    // meaning "use the button's own default" rather than turning into one.
+    const context = React.useMemo(() => ({ variant, size, color, density, elevation, disabled }), [variant, size, color, density, elevation, disabled]);
+    return (_jsx(ButtonGroupContext.Provider, { value: context, children: _jsx("div", { ref: ref, role: "group", className: cx(baseClasses, orientation === 'vertical' ? 'flex-col' : 'flex-row', joinClasses[orientation], 
+            // `variant` defaults to `solid` on a PlButton, so a group that says
+            // nothing is a solid group and must not overlap.
+            (variant ?? 'solid') === 'glass' ? overlapClasses[orientation] : '', fullWidth ? 'flex w-full [&>*]:flex-1' : '', className), ...props, children: children }) }));
+});

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

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

package/dist/components/button-group/index.js

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

package/dist/components/card/PlCard.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlCardProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * Drop shadow depth. `1` is the default: a card is a sheet lying **on** the
+     * page wash rather than printed into it, and the small amount of grey under
+     * it is what says so.
+     * @default 1
+     */
+    elevation?: PlassElevation;
+    /**
+     * The card's heading. A plain string is styled as the title; pass a real
+     * heading element (`title={<h2>…</h2>}`) when the card belongs in the
+     * document outline — it inherits the title's typography rather than the
+     * browser's.
+     */
+    title?: React.ReactNode;
+    /** A second line under the title, one step down the type scale and muted. */
+    subtitle?: React.ReactNode;
+    /**
+     * Content pinned to the end of the header row — a menu button, a status
+     * chip. Stays on the title's line while the title wraps beside it.
+     */
+    headerAction?: React.ReactNode;
+    /**
+     * The bottom area. Laid out as a wrapping row so a pair of buttons needs no
+     * wrapper of its own; anything else can bring its own layout.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Scores the sheet between sections with a hairline instead of separating
+     * them with space. The rules run the full width, so the padding moves from
+     * the card onto each section.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Inner padding, on the `size` / `density` scale. Turn it off for full-bleed
+     * content — an image, a table, a list that draws its own rows.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * Lifts the sheet under the pointer and adds a level of elevation.
+     *
+     * This is the one place the library allows a `transform`, and the exception
+     * is the rule rather than a hole in it: what may not move is the thing under
+     * the finger — a key whose label resamples as it scales. A sheet that
+     * *holds* content is the other kind of surface, and lifting one is how a
+     * pane of glass says it can be picked up.
+     *
+     * It changes how the card looks and nothing else. A card that is actually
+     * clickable has to be a real element: `render={<a href="…" />}` or
+     * `render={<button type="button" />}`, so it is focusable, announced, and
+     * reachable from a keyboard.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<li />}`, `render={<a href="…" />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    /** The card's body. */
+    children?: React.ReactNode;
+}
+/**
+ * The sheet everything else on a screen is grouped onto, with the parts a card
+ * is made of laid out on it: a title, a subtitle, a body and a footer.
+ *
+ * The sections are props rather than compound sub-components — `<Card.Header>`,
+ * `<Card.Title>` — for the same reason `PlTextField` takes `label` and
+ * `description` as props: the arrangement is fixed, and what a caller wants to
+ * decide is what goes in each slot, not what order the slots come in.
+ *
+ * There is no Base UI primitive under this, and there should not be. A card has
+ * no interaction to delegate: it is a surface with a layout, and the moment it
+ * becomes something you press it is a `render` away from being a real one.
+ */
+export declare const PlCard: React.ForwardRefExoticComponent<PlCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/PlCard.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { focusRingClasses, hasContent, metaTextClasses, radiusClasses, sheetBodyClasses, sheetHeaderGapClasses, sheetLineClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, sheetSectionGapClasses, sheetTitleClasses, surfaceSlots } from '../../internal/styles.js';
+/**
+ * The house transition with `transform` added to the property list.
+ *
+ * `transitionClasses` deliberately leaves it out, because no *control* may be
+ * transformed. A card is the other kind of surface, so it writes its own list
+ * rather than stacking a `transition-[transform]` on top of the shared one —
+ * two `transition-property` declarations of equal specificity resolve by their
+ * order in the generated stylesheet, which is not something a component should
+ * depend on.
+ */
+const cardTransitionClasses = /* @__PURE__ */ [
+    '[transition-property:background-color,border-color,box-shadow,color,transform]',
+    '[transition-duration:var(--plass-duration)]',
+    '[transition-timing-function:var(--plass-ease)]'
+].join(' ');
+/**
+ * Hover lifts the sheet and puts a level of shadow under it; the press sets it
+ * back down. Both directions take the house duration, and no `filter` is
+ * involved — a card is not a coloured surface, so there is no brightness to
+ * turn up.
+ */
+const interactiveClasses = {
+    solid: /* @__PURE__ */ [
+        'cursor-pointer hover:-translate-y-0.5',
+        'hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]',
+        'active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]'
+    ].join(' '),
+    glass: /* @__PURE__ */ [
+        'cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)',
+        'hover:[border-color:var(--p-line)]',
+        'hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]',
+        'active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]'
+    ].join(' '),
+    ghost: 'cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)'
+};
+/**
+ * The sheet everything else on a screen is grouped onto, with the parts a card
+ * is made of laid out on it: a title, a subtitle, a body and a footer.
+ *
+ * The sections are props rather than compound sub-components — `<Card.Header>`,
+ * `<Card.Title>` — for the same reason `PlTextField` takes `label` and
+ * `description` as props: the arrangement is fixed, and what a caller wants to
+ * decide is what goes in each slot, not what order the slots come in.
+ *
+ * There is no Base UI primitive under this, and there should not be. A card has
+ * no interaction to delegate: it is a surface with a layout, and the moment it
+ * becomes something you press it is a `render` away from being a real one.
+ */
+export const PlCard = /* @__PURE__ */ React.forwardRef(function PlCard({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 1, title, subtitle, headerAction, footer, dividers = false, padded = true, interactive = false, render, className, style, children, ...props }, ref) {
+    const insetX = padded ? sheetPaddingXClasses[density][size] : '';
+    const insetY = padded ? sheetPaddingYClasses[density][size] : '';
+    // Scored, the rules have to reach both edges, so the sheet gives up its
+    // padding and every section takes it on instead. Unscored, the sheet keeps
+    // its vertical padding and the sections are told apart by a gap.
+    const sectionClasses = dividers ? `${insetX} ${insetY}` : insetX;
+    const hasHeader = hasContent(title) || hasContent(subtitle) || hasContent(headerAction);
+    const header = (_jsxs(_Fragment, { children: [hasContent(title) || hasContent(subtitle) ? (_jsxs("div", { className: `flex min-w-0 flex-1 flex-col ${sheetHeaderGapClasses[size]}`, children: [hasContent(title) ? (_jsx("div", { className: `plass-title font-semibold ${sheetTitleClasses[size]}`, children: title })) : null, hasContent(subtitle) ? (_jsx("div", { className: `text-(--plass-muted-fg) ${metaTextClasses[size]}`, children: subtitle })) : null] })) : null, hasContent(headerAction) ? _jsx("div", { className: "ml-auto shrink-0", children: headerAction }) : null] }));
+    const sections = [
+        hasHeader ? { key: 'header', className: 'flex items-start gap-3', content: header } : null,
+        hasContent(children)
+            ? { key: 'content', className: sheetBodyClasses[size], content: children }
+            : null,
+        hasContent(footer)
+            ? {
+                key: 'footer',
+                className: `flex flex-wrap items-center gap-2 ${sheetBodyClasses[size]}`,
+                content: footer
+            }
+            : null
+    ].filter((section) => section !== null);
+    const classNames = [
+        'flex flex-col',
+        radiusClasses[size],
+        sheetRestClasses[variant],
+        cardTransitionClasses,
+        interactive ? `${interactiveClasses[variant]} ${focusRingClasses}` : '',
+        dividers ? 'overflow-hidden' : `${insetY} ${sheetSectionGapClasses[size]}`,
+        className ?? ''
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return useRender({
+        render: render ?? _jsx("div", {}),
+        ref,
+        props: {
+            className: classNames,
+            style: { ...surfaceSlots(color, elevation), ...style },
+            ...props,
+            children: sections.map((section, index) => (_jsx("div", { className: [
+                    sectionClasses,
+                    section.className,
+                    dividers && index > 0 ? sheetLineClasses : ''
+                ]
+                    .filter(Boolean)
+                    .join(' '), children: section.content }, section.key)))
+        }
+    });
+});

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

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

package/dist/components/card/index.js

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

package/dist/components/carousel/PlCarousel.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlCarouselProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Drop shadow depth of the frame. `0` — the default — is flat.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Which slide is showing, counted from 0. Use with `onValueChange`. */
+    value?: number;
+    /** Which starts showing, for an uncontrolled carousel. @default 0 */
+    defaultValue?: number;
+    onValueChange?: (index: number) => void;
+    /**
+     * Whether the arrows wrap from the last slide back to the first. With it off
+     * they go inert at the ends instead, which is the honest thing for a set that
+     * has a beginning and an end — a gallery of three photographs does, a
+     * rotating banner does not.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Advances on its own.
+     *
+     * Off by default and deliberately so: a carousel that moves while it is being
+     * read is the most complained-about pattern on the web. It pauses on hover,
+     * on focus anywhere inside it, while the tab is in the background, and it
+     * does not start at all for a reader who has asked for reduced motion.
+     * @default false
+     */
+    autoPlay?: boolean;
+    /** How long each slide is held, in milliseconds. @default 5000 */
+    interval?: number;
+    /** The previous/next buttons. @default true */
+    arrows?: boolean;
+    /** The row of position dots under the frame. @default true */
+    indicators?: boolean;
+    /**
+     * The carousel's accessible name, and what the arrows and the dots are called.
+     * Never drawn.
+     * @default 'Carousel'
+     */
+    label?: string;
+    /** @default 'Previous slide' */
+    previousLabel?: string;
+    /** @default 'Next slide' */
+    nextLabel?: string;
+    /**
+     * How one slide is named to a screen reader, and how its dot is labelled.
+     * @default (index, count) => `Slide ${index} of ${count}`
+     */
+    slideLabel?: (index: number, count: number) => string;
+    /** The slides. Every top-level child becomes one. */
+    children?: React.ReactNode;
+}
+/**
+ * A strip of slides, one of which is in view.
+ *
+ * The mechanism is a scroll container with CSS scroll snapping, and everything
+ * good about this component follows from that one choice. Swiping on a phone
+ * and two-finger dragging on a trackpad both work because they are the
+ * browser's own scrolling and not a gesture handler pretending to be it. The
+ * strip runs the other way under RTL without being told, because scrolling is
+ * directional and `translate` is not. And nothing is transformed — the house
+ * rule against moving a surface holds here for free, where a translated track
+ * would have had to argue for an exception.
+ *
+ * The motion is `scroll-behavior: smooth`, which means a reader who has asked
+ * for reduced motion gets an instant cut from the same code path rather than
+ * from a second one written to remember them.
+ *
+ * Slides are not a sub-component. Every top-level child is wrapped in its own
+ * slide, so `<PlCarousel><img /><img /></PlCarousel>` is the whole API — and the
+ * wrapper is what carries the snap point, the width and the
+ * `role="group"` / `aria-roledescription="slide"` pair a screen reader needs,
+ * none of which a caller should have to remember to put on a photograph.
+ */
+export declare const PlCarousel: React.ForwardRefExoticComponent<PlCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/carousel/PlCarousel.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { PlIconButton } from '../icon-button/PlIconButton.js';
+import { ChevronIcon } from '../../internal/icons.js';
+import { cx, radiusClasses, sheetRestClasses, srOnlyClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
+/** How far the arrows sit in from the frame's edge. */
+const arrowInsetClasses = {
+    xs: 'start-1 end-1',
+    sm: 'start-1.5 end-1.5',
+    md: 'start-2 end-2',
+    lg: 'start-3 end-3',
+    xl: 'start-4 end-4'
+};
+/**
+ * The dot ladder.
+ *
+ * A current dot is a short bar rather than a bigger circle: it grows along the
+ * row it is in, so the row's height never changes and the dots either side of
+ * it do not move. Width and colour are the only two things that travel, which
+ * is what keeps this inside the house rule against scaling anything.
+ */
+const dotClasses = {
+    xs: { rest: 'h-1 w-1', current: 'h-1 w-3', gap: 'gap-1' },
+    sm: { rest: 'h-1 w-1', current: 'h-1 w-3.5', gap: 'gap-1' },
+    md: { rest: 'h-1.5 w-1.5', current: 'h-1.5 w-4', gap: 'gap-1.5' },
+    lg: { rest: 'h-1.5 w-1.5', current: 'h-1.5 w-5', gap: 'gap-2' },
+    xl: { rest: 'h-2 w-2', current: 'h-2 w-6', gap: 'gap-2' }
+};
+/** How long a smooth scroll of our own is given to arrive. */
+const SETTLE_MS = 700;
+/**
+ * A strip of slides, one of which is in view.
+ *
+ * The mechanism is a scroll container with CSS scroll snapping, and everything
+ * good about this component follows from that one choice. Swiping on a phone
+ * and two-finger dragging on a trackpad both work because they are the
+ * browser's own scrolling and not a gesture handler pretending to be it. The
+ * strip runs the other way under RTL without being told, because scrolling is
+ * directional and `translate` is not. And nothing is transformed — the house
+ * rule against moving a surface holds here for free, where a translated track
+ * would have had to argue for an exception.
+ *
+ * The motion is `scroll-behavior: smooth`, which means a reader who has asked
+ * for reduced motion gets an instant cut from the same code path rather than
+ * from a second one written to remember them.
+ *
+ * Slides are not a sub-component. Every top-level child is wrapped in its own
+ * slide, so `<PlCarousel><img /><img /></PlCarousel>` is the whole API — and the
+ * wrapper is what carries the snap point, the width and the
+ * `role="group"` / `aria-roledescription="slide"` pair a screen reader needs,
+ * none of which a caller should have to remember to put on a photograph.
+ */
+export const PlCarousel = /* @__PURE__ */ React.forwardRef(function PlCarousel({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, value, defaultValue = 0, onValueChange, loop = true, autoPlay = false, interval = 5000, arrows = true, indicators = true, label = 'Carousel', previousLabel = 'Previous slide', nextLabel = 'Next slide', slideLabel, className, style, children, ...props }, ref) {
+    const nameSlide = slideLabel ?? ((index, total) => `Slide ${index} of ${total}`);
+    // `toArray` is what drops the `null`s and `false`s a conditional slide
+    // leaves behind, and what gives every remaining child a stable key.
+    const slides = React.Children.toArray(children);
+    const count = slides.length;
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const index = Math.min(Math.max(value ?? uncontrolled, 0), Math.max(count - 1, 0));
+    const trackRef = React.useRef(null);
+    const slideRefs = React.useRef([]);
+    // Set while the index is catching up with a scroll the reader performed. The
+    // effect below skips those, or every drag would be answered by a scroll back
+    // to where the browser had already put us.
+    const fromScroll = React.useRef(false);
+    const mounted = React.useRef(false);
+    // Raised while a smooth scroll of our own is still travelling. Without it
+    // the scroll events thrown on the way from slide 0 to slide 2 would each be
+    // read as the reader landing on slide 1.
+    const settling = React.useRef(false);
+    const [paused, setPaused] = React.useState(false);
+    const go = React.useCallback((next, viaScroll = false) => {
+        if (count === 0) {
+            return;
+        }
+        const wrapped = loop
+            ? ((next % count) + count) % count
+            : Math.min(Math.max(next, 0), count - 1);
+        fromScroll.current = viaScroll;
+        if (value === undefined) {
+            setUncontrolled(wrapped);
+        }
+        if (wrapped !== index) {
+            onValueChange?.(wrapped);
+        }
+    }, [count, loop, value, index, onValueChange]);
+    React.useEffect(() => {
+        if (fromScroll.current) {
+            fromScroll.current = false;
+            return;
+        }
+        // The first pass would otherwise scroll the page down to a carousel
+        // nobody has looked at yet, just to put slide 0 where the browser already
+        // had it.
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        slideRefs.current[index]?.scrollIntoView({ block: 'nearest', inline: 'start' });
+        settling.current = true;
+        const timer = window.setTimeout(() => {
+            settling.current = false;
+        }, SETTLE_MS);
+        return () => window.clearTimeout(timer);
+    }, [index]);
+    /**
+     * Where the strip has settled, read off the scroll offset rather than
+     * measured per slide: every slide is exactly the width of the frame, so the
+     * offset divided by that width *is* the index. `Math.abs` is what makes it
+     * hold under RTL, where a scroll position counts backwards from zero.
+     */
+    const handleScroll = () => {
+        const track = trackRef.current;
+        // `settling` is tested before anything is measured, and that order is the
+        // point: a smooth scroll of our own throws events for most of a second,
+        // and those are exactly the ones with nothing to answer. Reading
+        // `clientWidth` first would force a layout on every one of them.
+        if (settling.current || !track || track.clientWidth === 0) {
+            return;
+        }
+        const nearest = Math.round(Math.abs(track.scrollLeft) / track.clientWidth);
+        if (nearest !== index && nearest >= 0 && nearest < count) {
+            go(nearest, true);
+        }
+    };
+    React.useEffect(() => {
+        if (!autoPlay || paused || count < 2) {
+            return;
+        }
+        // A reader who has asked for less motion has asked for this in particular.
+        if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+            return;
+        }
+        const timer = window.setInterval(() => {
+            if (document.hidden) {
+                return;
+            }
+            go(index + 1);
+        }, interval);
+        return () => window.clearInterval(timer);
+    }, [autoPlay, paused, count, interval, index, go]);
+    const atStart = index <= 0;
+    const atEnd = index >= count - 1;
+    return (_jsxs("div", { ref: ref, role: "region", "aria-roledescription": "carousel", "aria-label": label, className: cx('flex flex-col', className), style: { ...surfaceSlots(color, elevation), ...style }, 
+        // Hover and focus both stop the timer. The second one is the important
+        // one: a keyboard reader who has tabbed into a slide is reading it.
+        onPointerEnter: () => setPaused(true), onPointerLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: () => setPaused(false), ...props, children: [_jsxs("div", { className: cx('relative min-w-0 overflow-hidden', radiusClasses[size], sheetRestClasses[variant], transitionClasses), children: [_jsx("div", { ref: trackRef, 
+                        // Focusable, so the strip can be scrolled with the arrow keys by
+                        // whoever is not using a pointer. That is the browser's own key
+                        // handling on a scroll container, which means it is already right
+                        // under RTL — a handler of ours mapping ArrowRight to "next" would
+                        // not have been.
+                        tabIndex: 0, role: "group", "aria-label": label, className: cx('flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth', 'motion-reduce:scroll-auto', 
+                        // The strip is driven by buttons and by dragging; a scrollbar
+                        // under it is a third control saying the same thing.
+                        '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden', 'focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]'), onScroll: handleScroll, children: slides.map((slide, slideIndex) => (_jsx("div", { ref: (element) => {
+                                slideRefs.current[slideIndex] = element;
+                            }, role: "group", "aria-roledescription": "slide", "aria-label": nameSlide(slideIndex + 1, count), 
+                            // Deliberately *not* `aria-hidden` when off-screen. A slide can
+                            // hold a link or a button, and an `aria-hidden` subtree that is
+                            // still in the tab order is the exact shape of the bug where a
+                            // keyboard reader lands somewhere their screen reader refuses
+                            // to describe. The strip is scrollable, so everything in it is
+                            // genuinely reachable — hiding it would be a lie.
+                            className: "w-full shrink-0 grow-0 basis-full snap-start", children: slide }, slideIndex))) }), arrows && count > 1 ? (_jsxs("div", { className: cx('pointer-events-none absolute inset-y-0 flex items-center', arrowInsetClasses[size]), children: [_jsx(PlIconButton, { variant: "glass", size: size, color: color, density: density, elevation: 1, label: previousLabel, disabled: !loop && atStart, className: "pointer-events-auto", 
+                                // Drawn pointing down and turned, which is the one allowance the
+                                // no-transform rule makes — and turned the other way under RTL,
+                                // where "previous" is on the other side of the frame.
+                                icon: _jsx("span", { className: "flex rotate-90 items-center rtl:-rotate-90", children: _jsx(ChevronIcon, {}) }), onClick: () => go(index - 1) }), _jsx("span", { className: "flex-1" }), _jsx(PlIconButton, { variant: "glass", size: size, color: color, density: density, elevation: 1, label: nextLabel, disabled: !loop && atEnd, className: "pointer-events-auto", icon: _jsx("span", { className: "flex -rotate-90 items-center rtl:rotate-90", children: _jsx(ChevronIcon, {}) }), onClick: () => go(index + 1) })] })) : null] }), indicators && count > 1 ? (_jsx("div", { className: cx('flex shrink-0 items-center justify-center pt-2', dotClasses[size].gap), children: slides.map((_, dotIndex) => (_jsx("button", { type: "button", "aria-label": nameSlide(dotIndex + 1, count), "aria-current": dotIndex === index ? 'true' : undefined, className: cx('cursor-pointer rounded-full', 
+                    // Width and colour, never a transform: the current dot grows
+                    // along the row instead of scaling, so nothing beside it
+                    // moves.
+                    '[transition-property:width,background-color]', '[transition-duration:var(--plass-duration)]', '[transition-timing-function:var(--plass-ease)]', 'focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2', dotIndex === index
+                        ? `${dotClasses[size].current} bg-(--p-accent)`
+                        : `${dotClasses[size].rest} bg-(--plass-border) hover:bg-(--p-accent)`), onClick: () => go(dotIndex) }, dotIndex))) })) : null, _jsx("span", { className: srOnlyClasses, "aria-live": autoPlay ? 'off' : 'polite', children: count > 0 ? nameSlide(index + 1, count) : '' })] }));
+});

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

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

package/dist/components/carousel/index.js

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

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

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
+/**
+ * Whose message this is.
+ *
+ * `start` and `end` rather than `them`/`me` or `left`/`right`: a thread runs the
+ * way the language does, and the same two words already mean this everywhere
+ * else in the library. `start` is the default because a message from someone
+ * else is the one you have no other way of knowing about.
+ */
+export type PlChatBubbleSide = 'start' | 'end';
+/**
+ * How far a message has got.
+ *
+ * The four steps are a ladder and the fifth is not on it: `failed` is the
+ * message that did not go, which is why it is the only one drawn in another
+ * colour family.
+ */
+export type PlChatBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+/** What a link inside a message unfurls to. */
+export interface PlChatBubbleLinkPreview {
+    /** Where the card goes. */
+    url: string;
+    /** The page's title. */
+    title?: React.ReactNode;
+    /** Its summary, clamped to two lines. */
+    description?: React.ReactNode;
+    /** The share image, drawn across the top of the card. */
+    image?: string;
+    /** Who published it — a domain, a site name. */
+    site?: React.ReactNode;
+    /**
+     * Opens the card in a new tab.
+     * @default false
+     */
+    newTab?: boolean;
+}
+export interface PlChatBubbleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * Whose message this is.
+     * @default 'start'
+     */
+    side?: PlChatBubbleSide;
+    /** Who sent it, above the bubble. */
+    name?: React.ReactNode;
+    /** When it was sent, beside the name. */
+    time?: React.ReactNode;
+    /**
+     * The sender's picture — a `PlAvatar`, at the size the thread uses. Left out,
+     * the bubble takes the whole row.
+     */
+    avatar?: React.ReactNode;
+    /**
+     * How far the message has got, drawn as a mark under the bubble. Left out,
+     * nothing is drawn — a received message has no delivery state worth showing.
+     */
+    status?: PlChatBubbleStatus;
+    /**
+     * What the mark is read out as. Never drawn. Defaults to the English word for
+     * whichever `status` is set.
+     */
+    statusLabel?: string;
+    /**
+     * Draws the three dots instead of the message. What `children` holds is left
+     * alone, so the same bubble can go back to it when the message arrives.
+     * @default false
+     */
+    typing?: boolean;
+    /**
+     * What the dots are read out as. Never drawn.
+     * @default 'Typing…'
+     */
+    typingLabel?: string;
+    /**
+     * A picture, a video, a map — drawn edge to edge above the text, so the
+     * bubble's corners crop it.
+     */
+    media?: React.ReactNode;
+    /** A link in the message, unfurled into a card under the text. */
+    preview?: PlChatBubbleLinkPreview;
+    /**
+     * The message's own actions — a menu trigger, most of the time. Sits beside
+     * the bubble and stays out of the way until the row is hovered or something in
+     * it takes focus.
+     */
+    actions?: React.ReactNode;
+    /**
+     * What the bubble's surface is made of. `solid` is the usual way to tell your
+     * own messages from everyone else's; `side` deliberately does not decide this,
+     * because which end is filled is a decision about the product, not about the
+     * component.
+     * @default 'glass'
+     */
+    variant?: PlassVariant;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Padding inside the bubble, and nothing else.
+     * @default 'default'
+     */
+    density?: PlassDensity;
+    /**
+     * Drop shadow depth. `0` is the default — a message lies in the thread rather
+     * than floating over it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** The message. */
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const PlChatBubble: React.ForwardRefExoticComponent<PlChatBubbleProps & React.RefAttributes<HTMLDivElement>>;