plass-ui 1.0.0 → 1.0.2

package/dist/components/bottom-navigation/PlBottomNavigation.js

@@ -1,141 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { cx, focusRingInsetClasses, hasContent, iconSizeClasses, metaTextClasses, radiusClasses, sheetLineClasses, sheetRestClasses, srOnlyClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-const BottomNavigationContext = /* @__PURE__ */ React.createContext({
-    value: null,
-    change: () => { },
-    size: 'md',
-    density: 'default',
-    labels: 'all',
-    disabled: false
-});
-const positionClasses = {
-    static: '',
-    sticky: 'sticky bottom-0 z-20',
-    fixed: 'fixed inset-x-0 bottom-0 z-30'
-};
-/**
- * The row's floor.
- *
- * `md` is 56px, which is the height a bottom navigation has had since the first
- * one — tall enough for a glyph with a word under it, short enough that it is
- * not competing with the page it is on. The ladder around it keeps the same
- * proportion to the glyph and the name it holds.
- */
-const rowMinHeightClasses = {
-    xs: 'min-h-10',
-    sm: 'min-h-12',
-    md: 'min-h-14',
-    lg: 'min-h-16',
-    xl: 'min-h-18'
-};
-/** The air inside the sheet, around the row of items. */
-const rowPaddingClasses = {
-    default: { xs: 'p-1', sm: 'p-1', md: 'p-1.5', lg: 'p-2', xl: 'p-2.5' },
-    compact: { xs: 'p-0.5', sm: 'p-0.5', md: 'p-1', lg: 'p-1', xl: 'p-1.5' }
-};
-/** Between the glyph and the name under it. */
-const itemGapClasses = {
-    xs: 'gap-0.5',
-    sm: 'gap-0.5',
-    md: 'gap-1',
-    lg: 'gap-1',
-    xl: 'gap-1.5'
-};
-/**
- * A row of destinations held against the bottom edge of the window.
- *
- * It is a `<nav>` rather than a `role="tablist"`, and its items are ordinary
- * links or buttons rather than tabs. That is a deliberate choice about what is
- * being promised: a tab list owes a keyboard reader one tab stop for the whole
- * set and arrow keys within it, and it owes a screen reader a panel per tab. A
- * bottom navigation switches what the *page* is, not which panel of one is
- * showing, and claiming the role without the behaviour is worse for a keyboard
- * reader than never claiming it. What is claimed instead is `aria-current`,
- * which is the honest statement: this is the destination you are on.
- *
- * The sheet is never dyed, exactly as on a `PlCard`. What carries the colour
- * family is the one item that is current.
- */
-export const PlBottomNavigation = /* @__PURE__ */ React.forwardRef(function PlBottomNavigation({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, value: valueProp, defaultValue = null, onValueChange, position = 'fixed', labels = 'all', divider = true, safeArea = true, disabled = false, label, render, className, style, children, ...props }, ref) {
-    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
-    const controlled = valueProp !== undefined;
-    const value = controlled ? valueProp : uncontrolled;
-    const change = React.useCallback((next) => {
-        if (!controlled) {
-            setUncontrolled(next);
-        }
-        onValueChange?.(next);
-    }, [controlled, onValueChange]);
-    const context = React.useMemo(() => ({ value: value ?? null, change, size, density, labels, disabled }), [value, change, size, density, labels, disabled]);
-    const classNames = cx('w-full min-w-0', 
-    // A bar spanning an edge of the window has nothing behind its corners, so
-    // only one sitting in the flow is a sheet with corners at all.
-    position === 'static' ? radiusClasses[size] : '', sheetRestClasses[variant], 
-    // A bar that is not in the flow has three edges against the window and one
-    // against the content, so only that one is ever drawn — a hairline down
-    // the left of the screen is a hairline nobody asked for. In the flow it is
-    // an ordinary sheet and keeps the whole outline `sheetRestClasses` gave it.
-    variant === 'glass' && position !== 'static' ? 'border-0' : '', divider ? sheetLineClasses : '', positionClasses[position], 
-    // The sheet keeps reaching the bottom of the screen; what the inset moves
-    // is the row inside it. A bar that stopped above the home indicator would
-    // leave a stripe of page showing under the glass.
-    safeArea ? 'pb-[env(safe-area-inset-bottom)]' : '', transitionClasses, className);
-    return useRender({
-        render: render ?? _jsx("nav", {}),
-        ref,
-        props: {
-            'aria-label': label,
-            className: classNames,
-            style: { ...surfaceSlots(color, elevation), ...style },
-            children: (_jsx(BottomNavigationContext.Provider, { value: context, children: _jsx("div", { className: cx('flex w-full items-stretch', rowMinHeightClasses[size], rowPaddingClasses[density][size]), children: children }) })),
-            ...props
-        }
-    });
-});
-/**
- * One destination.
- *
- * It has no `size`, no `color` and no `variant` of its own: all three belong to
- * the bar, which is the only place they can be set once and mean the same thing
- * for every item.
- *
- * With an `href` it is a real `<a>`, which is what makes a long press offer
- * "open in a new tab" and what puts the destination in the status bar — neither
- * of which a `<button>` that calls `router.push` can do. Without one it is a
- * `<button>`, because a `<div>` carrying a click handler is invisible to a
- * keyboard.
- */
-export const PlBottomNavigationItem = /* @__PURE__ */ React.forwardRef(function PlBottomNavigationItem({ value, icon, href, disabled: disabledProp = false, className, children, onClick, ...props }, ref) {
-    const bar = React.useContext(BottomNavigationContext);
-    const disabled = disabledProp || bar.disabled;
-    const selected = bar.value !== null && bar.value === value;
-    const named = bar.labels === 'all' || (bar.labels === 'selected' && selected);
-    const classNames = cx('flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5', itemGapClasses[bar.size], radiusClasses[bar.size], '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]', transitionClasses, 
-    // Inset rather than offset: the item is inside a sheet that clips, and a
-    // ring drawn outside it would have its top sliced off.
-    focusRingInsetClasses, 
-    // 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 opacity-50 saturate-[0.35] text-(--plass-muted-fg)'
-        : selected
-            ? 'cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)'
-            : 'cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)', className);
-    const body = (_jsxs(_Fragment, { children: [hasContent(icon) ? (_jsx("span", { className: cx('flex shrink-0 items-center justify-center', iconSizeClasses[bar.size]), children: icon })) : null, hasContent(children) ? (_jsx("span", { className: named
-                    ? cx('max-w-full truncate leading-tight', metaTextClasses[bar.size])
-                    : srOnlyClasses, children: children })) : null] }));
-    const press = (event) => {
-        if (disabled) {
-            event.preventDefault();
-            return;
-        }
-        bar.change(value);
-        onClick?.(event);
-    };
-    if (href) {
-        return (_jsx("a", { ref: ref, href: disabled ? undefined : href, "aria-current": selected ? 'page' : undefined, "aria-disabled": disabled || undefined, className: classNames, onClick: press, ...props, children: body }));
-    }
-    return (_jsx("button", { ref: ref, type: "button", disabled: disabled, "aria-current": selected ? 'page' : undefined, className: classNames, onClick: press, ...props, children: body }));
-});
+"use client";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as s}from"@base-ui/react/use-render";import{cx as i,focusRingInsetClasses as n,hasContent as r,iconSizeClasses as o,metaTextClasses as c,radiusClasses as d,sheetLineClasses as m,sheetRestClasses as u,srOnlyClasses as p,surfaceSlots as f,transitionClasses as g}from"../../internal/styles.js";const h=/* @__PURE__ */l.createContext({value:null,change:()=>{},size:"md",density:"default",labels:"all",disabled:!1}),x={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},v={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},b={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const PlBottomNavigation=/* @__PURE__ */l.forwardRef(function PlBottomNavigation({variant:a="glass",size:t="md",color:n="primary",density:r="default",elevation:o=0,value:c,defaultValue:p=null,onValueChange:y,position:N="fixed",labels:w="all",divider:z=!0,safeArea:k=!0,disabled:C=!1,label:j,render:P,className:B,style:I,children:R,...V},A){const[D,F]=l.useState(p),M=void 0!==c,S=M?c:D,q=l.useCallback(e=>{M||F(e),y?.(e)},[M,y]),E=l.useMemo(()=>({value:S??null,change:q,size:t,density:r,labels:w,disabled:C}),[S,q,t,r,w,C]),G=i("w-full min-w-0","static"===N?d[t]:"",u[a],"glass"===a&&"static"!==N?"border-0":"",z?m:"",x[N],k?"pb-[env(safe-area-inset-bottom)]":"",g,B);return s({render:P??e("nav",{}),ref:A,props:{"aria-label":j,className:G,style:{...f(n,o),...I},children:e(h.Provider,{value:E,children:e("div",{className:i("flex w-full items-stretch",v[t],b[r][t]),children:R})}),...V}})});export const PlBottomNavigationItem=/* @__PURE__ */l.forwardRef(function PlBottomNavigationItem({value:s,icon:m,href:u,disabled:f=!1,className:x,children:v,onClick:b,...N},w){const z=l.useContext(h),k=f||z.disabled,C=null!==z.value&&z.value===s,j="all"===z.labels||"selected"===z.labels&&C,P=i("flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5",y[z.size],d[z.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,n,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":C?"cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",x),B=t(a,{children:[r(m)?e("span",{className:i("flex shrink-0 items-center justify-center",o[z.size]),children:m}):null,r(v)?e("span",{className:j?i("max-w-full truncate leading-tight",c[z.size]):p,children:v}):null]}),press=e=>{k?e.preventDefault():(z.change(s),b?.(e))};return u?e("a",{ref:w,href:k?void 0:u,"aria-current":C?"page":void 0,"aria-disabled":k||void 0,className:P,onClick:press,...N,children:B}):e("button",{ref:w,type:"button",disabled:k,"aria-current":C?"page":void 0,className:P,onClick:press,...N,children:B})});

package/dist/components/bottom-navigation/index.js

@@ -1 +1 @@
-export { PlBottomNavigation, PlBottomNavigationItem } from './PlBottomNavigation.js';
+export{PlBottomNavigation,PlBottomNavigationItem}from"./PlBottomNavigation.js";

package/dist/components/box/PlBox.js

@@ -1,46 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRender } from '@base-ui/react/use-render';
-import { cx, radiusClasses, sheetPaddingXClasses, sheetPaddingYClasses, sheetRestClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
-/**
- * A sheet of glass with content on it. The plainest surface in the library: it
- * groups things, and that is all it does.
- *
- * Everything structural — a title, a footer, hairlines between sections —
- * belongs to `PlCard`, which is a box with those sections laid out on it. What
- * is left here is the sheet itself, and the reason it is worth having on its own
- * is that most of what a screen groups has no heading: a well behind a form, a
- * tile in a shelf, a panel round a chart.
- *
- * `size` means something different here from what it means on a control, and
- * this is the one place in the library where that is true. A box is as tall as
- * what it holds, and its children bring their own typography — a container that
- * reset the type scale would render the same paragraph at two sizes depending
- * on what it was wrapped in. So `size` is the size of the **sheet**: its radius
- * and its padding, and nothing else.
- *
- * The three materials say what they say everywhere else, read as a container's:
- * the sheet is never dyed, because what a box holds arrives with its own
- * colours and tinting the pane under them puts every one on a background it was
- * not chosen against. The family reaches the hairline and the focus ring and
- * stops. `ghost` is the one to reach for inside another surface, where a second
- * bordered rectangle is a second rectangle.
- */
-export const PlBox = /* @__PURE__ */ React.forwardRef(function PlBox({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, padded = true, render, className, style, children, ...props }, ref) {
-    const classNames = cx('block', radiusClasses[size], padded ? `${sheetPaddingXClasses[density][size]} ${sheetPaddingYClasses[density][size]}` : '', sheetRestClasses[variant], 
-    // The same property list and duration as everything else, so a box whose
-    // colour or elevation changes settles at the house pace. There is no
-    // `:active` treatment because a box is not pressed — it holds things that
-    // are.
-    transitionClasses, className);
-    return useRender({
-        render: render ?? _jsx("div", {}),
-        ref,
-        props: {
-            className: classNames,
-            style: { ...surfaceSlots(color, elevation), ...style },
-            children,
-            ...props
-        }
-    });
-});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as s}from"@base-ui/react/use-render";import{cx as t,radiusClasses as o,sheetPaddingXClasses as a,sheetPaddingYClasses as i,sheetRestClasses as n,surfaceSlots as l,transitionClasses as c}from"../../internal/styles.js";export const PlBox=/* @__PURE__ */r.forwardRef(function PlBox({variant:r="glass",size:d="md",color:m="primary",density:f="default",elevation:p=0,padded:u=!0,render:x,className:y,style:j,children:v,...b},h){const B=t("block",o[d],u?`${a[f][d]} ${i[f][d]}`:"",n[r],c,y);return s({render:x??e("div",{}),ref:h,props:{className:B,style:{...l(m,p),...j},children:v,...b}})});

package/dist/components/box/index.js

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

package/dist/components/breadcrumb/PlBreadcrumb.js

@@ -1,201 +1 @@
-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 })) }));
-});
+"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{ArrowRightIcon as s,ChevronIcon as n,EllipsisIcon as l}from"../../internal/icons.js";import{controlTextClasses as i,cx as c,focusRingClasses as o,gapClasses as m,hasContent as p,iconClasses as d,radiusClasses as u,transitionClasses as f}from"../../internal/styles.js";const h=/* @__PURE__ */a.createContext({size:"md",last:!1}),x={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"}},g={xs:u.xs,sm:u.xs,md:u.xs,lg:u.sm,xl:u.sm},b=["chevron","arrow","slash","dot"];function textOf(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(textOf).join(""):a.isValidElement(e)?textOf(e.props.children):""}function absoluteHref(e,t){if(!t)return e;try{return new URL(e,t).href}catch{return e}}function breadcrumbListData(e,t){const r=e.map((e,r)=>{const{href:a,children:s}=e.props;return{"@type":"ListItem",position:r+1,name:textOf(s),...a?{item:absoluteHref(a,t)}:null}});return JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r}).replace(/</g,"\\u003c")}export const PlBreadcrumb=/* @__PURE__ */a.forwardRef(function PlBreadcrumb({size:r="md",color:m="primary",density:p="default",separator:u="chevron",maxItems:g,itemsBeforeCollapse:y=1,itemsAfterCollapse:N=1,expandable:v=!0,label:w="Breadcrumb",expandLabel:k="Show the hidden steps",structuredData:C=!1,baseUrl:B,className:L,style:j,children:I,...S},M){const[O,P]=a.useState(!1),z=a.Children.toArray(I).filter(a.isValidElement),A=z.length,D=z.some(e=>!0===e.props.current),E=!O&&void 0!==g&&A>Math.max(g,1)&&A-y-N>1?[...z.slice(0,Math.max(0,y)),null,...z.slice(A-Math.max(0,N))]:z,H=function isSeparatorName(e){return"string"==typeof e&&b.includes(e)}(u)?function separatorMark(t){switch(t){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(n,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(s,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(u):u,R=c("inline-flex items-center rounded-(--plass-radius-xs) px-0.5","text-(--plass-muted-fg)",f,d,v?c("cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)",o):"");return t("nav",{ref:M,"aria-label":w,className:c("flex",i[r],d,L),style:{"--p-accent":`var(--plass-${m}-accent)`,"--p-soft":`var(--plass-${m}-soft)`,"--p-ring":`var(--plass-${m}-ring)`,...j},...S,children:[C&&A>0?e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:breadcrumbListData(z,B)}}):null,e("ol",{role:"list",className:c("flex list-none flex-wrap items-center p-0",x[p][r]),children:E.map((s,n)=>t(a.Fragment,{children:[n>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) select-none",children:H}):null,s?e(h.Provider,{value:{size:r,last:!D&&n===E.length-1},children:s}):e("li",{className:"flex shrink-0 items-center",children:v?e("button",{type:"button",className:R,"aria-label":k,onClick:()=>P(!0),children:e(l,{})}):e("span",{className:R,"aria-hidden":"true",children:e(l,{})})})]},s?s.key??n:"fold"))})]})});export const PlBreadcrumbItem=/* @__PURE__ */a.forwardRef(function PlBreadcrumbItem({href:s,onClick:n,startIcon:l,endIcon:i,current:d,disabled:u=!1,className:x,children:b,...y},N){const{size:v,last:w}=a.useContext(h),k=d??w,C=Boolean(s||n)&&!k&&!u,B=c("inline-flex min-w-0 items-center px-1",m[v],g[v],f,u?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":k?"font-medium text-(--plass-fg)":C?c("cursor-pointer text-(--plass-muted-fg)","hover:bg-(--p-soft) hover:text-(--p-accent)",o):"text-(--plass-muted-fg)"),L=t(r,{children:[p(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",children:b}),p(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null]});return e("li",{ref:N,className:c("flex min-w-0 items-center",x),...y,children:C&&s?e("a",{href:s,className:B,onClick:n,children:L}):C?e("button",{type:"button",className:B,onClick:n,children:L}):e("span",{className:B,"aria-current":k?"page":void 0,"aria-disabled":u||void 0,children:L})})});

package/dist/components/breadcrumb/index.js

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

package/dist/components/button/PlButton.js

@@ -1,196 +1 @@
-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] }))
-        }
-    });
-});
+"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{Button as a}from"@base-ui/react/button";import{useRender as t}from"@base-ui/react/use-render";import{ButtonGroupContext as l}from"../../internal/button-group.js";import{Spinner as n}from"../../internal/icons.js";import{controlHeightClasses as i,controlSlots as p,controlSquareClasses as d,controlTextClasses as v,disabledClasses as c,focusRingClasses as g,gapClasses as m,glassClasses as x,hasContent as b,iconClasses as f,paddingXClasses as h,radiusClasses as u,readOnlyFilterClasses as $,transitionClasses as j}from"../../internal/styles.js";const y={xs:`${i.xs} ${m.xs} ${u.xs} ${v.xs}`,sm:`${i.sm} ${m.sm} ${u.sm} ${v.sm}`,md:`${i.md} ${m.md} ${u.md} ${v.md}`,lg:`${i.lg} ${m.lg} ${u.lg} ${v.lg}`,xl:`${i.xl} ${m.xl} ${u.xl} ${v.xl}`},w={xs:`${d.xs} px-0`,sm:`${d.sm} px-0`,md:`${d.md} px-0`,lg:`${d.lg} px-0`,xl:`${d.xl} px-0`},P=/* @__PURE__ */["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]",j,g,f].join(" "),k={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[x,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-transparent"},B={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)"},C={solid:/* @__PURE__ */["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`shadow-none ${$}`].join(" "),glass:/* @__PURE__ */[x,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${$}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${$}`};export const PlButton=/* @__PURE__ */r.forwardRef(function PlButton({variant:i,size:d,color:v,density:g,elevation:m,startIcon:x,endIcon:f,loading:u=!1,readOnly:$=!1,fullWidth:j=!1,disabled:z,render:E,className:I,style:M,children:N,onClick:D,onPointerMove:F,...O},R){const T=r.useContext(l),W=i??T?.variant??"solid",X=d??T?.size??"md",Y=v??T?.color??"primary",q=g??T?.density??"default",A=m??T?.elevation??1,G=z??T?.disabled??!1,H=!b(N),J=u||$,K=!G&&!J,L=[P,y[X],H?w[X]:h[q][X],G?c[W]:$?C[W]:k[W],K?`${B[W]} cursor-pointer`:"",K?"plass-glow":"",u?"cursor-progress":"",j?"w-full":"",I??""].filter(Boolean).join(" ");return t({render:E??s(a,{disabled:G}),ref:R,props:{className:L,style:{...p(Y,A,W),...M},"aria-disabled":J||void 0,"aria-busy":u||void 0,"data-loading":u||void 0,"data-readonly":$||void 0,onClick:s=>{if(J)return s.preventDefault(),void s.stopPropagation();D?.(s)},onPointerMove:s=>{const e=s.currentTarget;e.style.setProperty("--p-mx",`${s.nativeEvent.offsetX}px`),e.style.setProperty("--p-my",`${s.nativeEvent.offsetY}px`),F?.(s)},...O,children:o(e,{children:[u?s(n,{}):x,N,f]})}})});

package/dist/components/button/index.js

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