plass-ui 1.0.0 → 1.0.2

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

@@ -1,64 +1 @@
-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 }) }));
-});
+"use client";import{jsx as o}from"react/jsx-runtime";import*as e from"react";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{cx as t}from"../../internal/styles.js";const n={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"},r={horizontal:"[&>*:not(:first-child)]:-ms-px",vertical:"[&>*:not(:first-child)]:-mt-px"},l=/* @__PURE__ */["inline-flex align-middle","[&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10","[&>*]:shrink-0"].join(" ");export const PlButtonGroup=/* @__PURE__ */e.forwardRef(function PlButtonGroup({variant:s,size:a,color:d,density:c,elevation:f,orientation:u="horizontal",disabled:h,fullWidth:m=!1,className:v,children:p,...x},z){const b=e.useMemo(()=>({variant:s,size:a,color:d,density:c,elevation:f,disabled:h}),[s,a,d,c,f,h]);return o(i.Provider,{value:b,children:o("div",{ref:z,role:"group",className:t(l,"vertical"===u?"flex-col":"flex-row",n[u],"glass"===(s??"solid")?r[u]:"",m?"flex w-full [&>*]:flex-1":"",v),...x,children:p})})});

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

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

package/dist/components/card/PlCard.js

@@ -1,102 +1 @@
-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)))
-        }
-    });
-});
+"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useRender as l}from"@base-ui/react/use-render";import{focusRingClasses as o,hasContent as t,metaTextClasses as n,radiusClasses as i,sheetBodyClasses as c,sheetHeaderGapClasses as d,sheetLineClasses as v,sheetPaddingXClasses as p,sheetPaddingYClasses as m,sheetRestClasses as f,sheetSectionGapClasses as h,sheetTitleClasses as u,surfaceSlots as g}from"../../internal/styles.js";const x=/* @__PURE__ */["[transition-property:background-color,border-color,box-shadow,color,transform]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),b={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)"};export const PlCard=/* @__PURE__ */a.forwardRef(function PlCard({variant:a="glass",size:y="md",color:N="primary",density:$="default",elevation:j=1,title:w,subtitle:k,headerAction:B,footer:C,dividers:P=!1,padded:z=!0,interactive:A=!1,render:F,className:R,style:q,children:D,...E},G){const H=z?p[$][y]:"",I=z?m[$][y]:"",J=P?`${H} ${I}`:H,K=t(w)||t(k)||t(B),L=s(r,{children:[t(w)||t(k)?s("div",{className:`flex min-w-0 flex-1 flex-col ${d[y]}`,children:[t(w)?e("div",{className:`plass-title font-semibold ${u[y]}`,children:w}):null,t(k)?e("div",{className:`text-(--plass-muted-fg) ${n[y]}`,children:k}):null]}):null,t(B)?e("div",{className:"ml-auto shrink-0",children:B}):null]}),M=[K?{key:"header",className:"flex items-start gap-3",content:L}:null,t(D)?{key:"content",className:c[y],content:D}:null,t(C)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${c[y]}`,content:C}:null].filter(e=>null!==e),O=["flex flex-col",i[y],f[a],x,A?`${b[a]} ${o}`:"",P?"overflow-hidden":`${I} ${h[y]}`,R??""].filter(Boolean).join(" ");return l({render:F??e("div",{}),ref:G,props:{className:O,style:{...g(N,j),...q},...E,children:M.map((s,r)=>e("div",{className:[J,s.className,P&&r>0?v:""].filter(Boolean).join(" "),children:s.content},s.key))}})});

package/dist/components/card/index.js

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

package/dist/components/carousel/PlCarousel.js

@@ -1,177 +1 @@
-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) : '' })] }));
-});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as s,radiusClasses as l,sheetRestClasses as i,srOnlyClasses as o,surfaceSlots as c,transitionClasses as u}from"../../internal/styles.js";const d={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"},f={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"}};export const PlCarousel=/* @__PURE__ */t.forwardRef(function PlCarousel({variant:m="glass",size:p="md",color:h="primary",density:v="default",elevation:b=0,value:w,defaultValue:g=0,onValueChange:x,loop:N=!0,autoPlay:y=!1,interval:k=5e3,arrows:C=!0,indicators:M=!0,label:j="Carousel",previousLabel:P="Previous slide",nextLabel:R="Next slide",slideLabel:I,className:L,style:S,children:$,..._},z){const E=I??((e,r)=>`Slide ${e} of ${r}`),V=t.Children.toArray($),B=V.length,[T,W]=t.useState(g),A=Math.min(Math.max(w??T,0),Math.max(B-1,0)),F=t.useRef(null),q=t.useRef([]),D=t.useRef(!1),G=t.useRef(!1),H=t.useRef(!1),[J,K]=t.useState(!1),O=t.useCallback((e,r=!1)=>{if(0===B)return;const t=N?(e%B+B)%B:Math.min(Math.max(e,0),B-1);D.current=r,void 0===w&&W(t),t!==A&&x?.(t)},[B,N,w,A,x]);t.useEffect(()=>{if(D.current)return void(D.current=!1);if(!G.current)return void(G.current=!0);q.current[A]?.scrollIntoView({block:"nearest",inline:"start"}),H.current=!0;const e=window.setTimeout(()=>{H.current=!1},700);return()=>window.clearTimeout(e)},[A]),t.useEffect(()=>{if(!y||J||B<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||O(A+1)},k);return()=>window.clearInterval(e)},[y,J,B,k,A,O]);const Q=A<=0,U=A>=B-1;return r("div",{ref:z,role:"region","aria-roledescription":"carousel","aria-label":j,className:s("flex flex-col",L),style:{...c(h,b),...S},onPointerEnter:()=>K(!0),onPointerLeave:()=>K(!1),onFocus:()=>K(!0),onBlur:()=>K(!1),..._,children:[r("div",{className:s("relative min-w-0 overflow-hidden",l[p],i[m],u),children:[e("div",{ref:F,tabIndex:0,role:"group","aria-label":j,className:s("flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:()=>{const e=F.current;if(H.current||!e||0===e.clientWidth)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==A&&r>=0&&r<B&&O(r,!0)},children:V.map((r,t)=>e("div",{ref:e=>{q.current[t]=e},role:"group","aria-roledescription":"slide","aria-label":E(t+1,B),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),C&&B>1?r("div",{className:s("pointer-events-none absolute inset-y-0 flex items-center",d[p]),children:[e(a,{variant:"glass",size:p,color:h,density:v,elevation:1,label:P,disabled:!N&&Q,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(n,{})}),onClick:()=>O(A-1)}),e("span",{className:"flex-1"}),e(a,{variant:"glass",size:p,color:h,density:v,elevation:1,label:R,disabled:!N&&U,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(n,{})}),onClick:()=>O(A+1)})]}):null]}),M&&B>1?e("div",{className:s("flex shrink-0 items-center justify-center pt-2",f[p].gap),children:V.map((r,t)=>e("button",{type:"button","aria-label":E(t+1,B),"aria-current":t===A?"true":void 0,className:s("cursor-pointer rounded-full","[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",t===A?`${f[p].current} bg-(--p-accent)`:`${f[p].rest} bg-(--plass-border) hover:bg-(--p-accent)`),onClick:()=>O(t)},t))}):null,e("span",{className:o,"aria-live":y?"off":"polite",children:B>0?E(A+1,B):""})]})});

package/dist/components/carousel/index.js

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

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

@@ -1,206 +1 @@
-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] })] }));
-}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{CheckIcon as a,ClockIcon as r,LinkIcon as n,severityIcon as i}from"../../internal/icons.js";import{controlSlots as t,focusRingClasses as o,glassClasses as d,hasContent as c,metaTextClasses as p,radiusClasses as m,sheetBodyClasses as u,sheetHeaderGapClasses as v,srOnlyClasses as f,transitionClasses as g}from"../../internal/styles.js";const x={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"}},h={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},b={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[d,"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)]"};function DoubleCheckIcon(){return l("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const y={sending:e(r,{}),sent:e(a,{}),delivered:e(DoubleCheckIcon,{}),read:e(DoubleCheckIcon,{}),failed:/* @__PURE__ */i("danger")},k={sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Not delivered"},w={sending:"text-(--plass-muted-fg)",sent:"text-(--plass-muted-fg)",delivered:"text-(--plass-muted-fg)",read:"text-(--p-accent)",failed:"text-(--plass-danger-accent)"},N=/* @__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)]",o].join(" "),j=/* @__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(" ");export const PlChatBubble=/* @__PURE__ */s.forwardRef(function PlChatBubble({side:s="start",name:a,time:r,avatar:n,status:i,statusLabel:o,typing:d=!1,typingLabel:N="Typing…",media:_,preview:C,actions:L,variant:D="glass",size:B="md",color:z="primary",density:P="default",elevation:T=0,className:I,style:R,children:S,...W},M){const $="end"===s,q=c(a)||c(r),A=d||c(S)||Boolean(C),E=["flex min-w-0 flex-col overflow-hidden",m[B],h[s],b[D],g].join(" ");return l("div",{ref:M,className:["group/bubble flex w-full items-start gap-2",$?"flex-row-reverse":"",I??""].filter(Boolean).join(" "),style:{...t(z,T,D),...R},...W,children:[c(n)?e("div",{className:"shrink-0",children:n}):null,l("div",{className:["flex max-w-[min(100%,32rem)] min-w-0 flex-col",v[B],$?"items-end":"items-start"].join(" "),children:[q?l("div",{className:`flex items-baseline gap-2 ${p[B]}`,children:[c(a)?e("span",{className:"font-semibold",children:a}):null,c(r)?e("span",{className:"text-(--plass-muted-fg)",children:r}):null]}):null,l("div",{className:"flex min-w-0 items-center gap-1 "+($?"flex-row-reverse":""),children:[l("div",{className:E,children:[c(_)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:_}):null,A?l("div",{className:[x[P][B],"flex min-w-0 flex-col gap-2",u[B]].join(" "),children:[d?e(TypingDots,{label:N}):c(S)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:S}):null,C?e(LinkPreview,{preview:C}):null]}):null]}),c(L)?e("div",{className:j,children:L}):null]}),i?l("div",{className:["flex items-center gap-1",p[B],w[i],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[y[i],e("span",{className:f,children:o??k[i]})]}):null]})]})});function TypingDots({label:s}){return l("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(l=>e("span",{"aria-hidden":"true",className:"plass-typing-dot size-[0.45em] rounded-full",style:{"--p-i":l}},l)),e("span",{className:f,children:s})]})}function LinkPreview({preview:s}){const{url:a,title:r,description:i,image:t,site:o,newTab:d=!1}=s;return l("a",{href:a,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0,className:N,children:[t?e("img",{src:t,alt:"",className:"block h-28 w-full object-cover"}):null,l("div",{className:"flex flex-col gap-0.5 p-2",children:[c(o)?l("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(n,{}),e("span",{className:"truncate",children:o})]}):null,c(r)?e("span",{className:"font-semibold",children:r}):null,c(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]})}

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

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