plass-ui 0.0.1 → 1.0.0

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js

@@ -0,0 +1,291 @@
+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 { controlHeightClasses, controlSlots, controlSquareClasses, cx, focusRingClasses, glassClasses, hasContent, iconSizeClasses, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
+const FloatingBarContext = /* @__PURE__ */ React.createContext({
+    value: null,
+    change: () => { },
+    size: 'md',
+    disabled: false
+});
+/** How far off the floor the capsule sits, on the size ladder. */
+const floatGapClasses = {
+    xs: 'pb-2',
+    sm: 'pb-3',
+    md: 'pb-4',
+    lg: 'pb-5',
+    xl: 'pb-6'
+};
+/** The same, with the home indicator added underneath it. */
+const floatGapSafeClasses = {
+    xs: 'pb-[calc(env(safe-area-inset-bottom)+0.5rem)]',
+    sm: 'pb-[calc(env(safe-area-inset-bottom)+0.75rem)]',
+    md: 'pb-[calc(env(safe-area-inset-bottom)+1rem)]',
+    lg: 'pb-[calc(env(safe-area-inset-bottom)+1.25rem)]',
+    xl: 'pb-[calc(env(safe-area-inset-bottom)+1.5rem)]'
+};
+/** The air inside the capsule, around the discs. */
+const capsulePaddingClasses = {
+    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 two discs. */
+const discGapClasses = {
+    default: { xs: 'gap-1', sm: 'gap-1', md: 'gap-1.5', lg: 'gap-2', xl: 'gap-2.5' },
+    compact: { xs: 'gap-0.5', sm: 'gap-0.5', md: 'gap-1', lg: 'gap-1', xl: 'gap-1.5' }
+};
+const positionClasses = {
+    static: '',
+    sticky: 'sticky bottom-0 z-20',
+    fixed: 'fixed inset-x-0 bottom-0 z-30'
+};
+/**
+ * The capsule.
+ *
+ * `rounded-full` is one of the very few places the library allows a pill, and it
+ * is allowed for the reason a `PlSegmentedButton`'s groove is: this is not a
+ * sheet lying on the page, it is an object floating clear of one. The house
+ * fillet is about a sheet with its corners cut, and a sheet that is not on
+ * anything has no corners to cut.
+ */
+const capsuleClasses = {
+    solid: /* @__PURE__ */ [
+        glassClasses,
+        'bg-(--plass-glass-press)',
+        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
+    ].join(' '),
+    glass: /* @__PURE__ */ [
+        glassClasses,
+        'border bg-(--plass-glass)',
+        '[border-color:var(--plass-glass-line)]',
+        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
+    ].join(' '),
+    ghost: ''
+};
+/**
+ * The key that slides.
+ *
+ * Always the family's own gradient with that family's tinted shadow under it,
+ * whatever the capsule is made of — a key of tinted glass riding in a clear
+ * sheet is the design language's own sentence, and `variant` is a statement
+ * about the *capsule*. A `ghost` bar is a row of discs with no sheet behind
+ * them; the one that is current is still the one that is current.
+ *
+ * `left`, `top`, `width` and `height` rather than a `translate`: the key is
+ * measured off the disc it belongs under, and moving it by its own box is what
+ * keeps every glyph in the row unresampled while it travels. `left` and not
+ * `inset-inline-start`, because `offsetLeft` is a distance from the left edge
+ * and stays one under RTL — pairing a physical measurement with a logical
+ * property is what would break the direction.
+ *
+ * `data-quiet` is the current destination being unavailable, which is the one
+ * state the key cannot read off its own props: the light goes out on the key
+ * the same way it goes out on the disc over it, or a disabled destination is a
+ * dimmed glyph on a fully lit gradient.
+ */
+const keyClasses = /* @__PURE__ */ [
+    'pointer-events-none absolute rounded-full',
+    'top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)',
+    '[background-image:var(--p-fill)]',
+    '[box-shadow:var(--plass-shadow-1),var(--p-lift)]',
+    'data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]',
+    '[transition-property:left,top,width,height,opacity,filter]',
+    '[transition-timing-function:var(--plass-ease)]',
+    // Nothing until the first measurement has landed; the house duration from
+    // then on.
+    '[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]'
+].join(' ');
+/**
+ * A row of round destinations floating clear of the bottom edge of the window.
+ *
+ * The other half of `PlBottomNavigation`, and a different object rather than a
+ * variant of one: that bar is **attached** to the edge of the window — full
+ * width, a hairline against the content, its sheet running under the home
+ * indicator — and this one is **not part of the page at all**. Everything that
+ * follows comes from that one difference: the capsule, the gap under it, the
+ * shadow it defaults to, and the pill corners it is allowed.
+ *
+ * Every destination is a disc with a glyph in it and no name drawn, which is
+ * what keeps a row of five inside the width of a phone. The name is still
+ * required and still read out — a row of glyphs with no accessible names is the
+ * defect `PlIconButton`'s `label` exists to make impossible, and it would be
+ * exactly as easy to ship here.
+ *
+ * The current destination is a key of **tinted glass** riding in the clear
+ * sheet, which is the design language's own sentence with nothing added to it.
+ * The key is **one element that travels**, measured off whichever disc is
+ * current and animated the way a `PlSegmentedButton`'s tile is — not a fill
+ * that appears on one disc while it disappears from another. Two discs
+ * cross-fading is two objects; a bar with a key in it has one, and where it
+ * goes is the whole of what the component has to say.
+ *
+ * Nothing is transformed: the key is an empty box, and no glyph is resampled
+ * while it travels. That is what lets the house no-transform rule survive a
+ * component whose entire point is that something moves.
+ *
+ * It reads `controlSlots` and not the `surfaceSlots` every other container
+ * takes, which is the one place this bar is not a container: the slots a
+ * container is given are deliberately undyed — no `--p-fill`, no `--p-on-solid`
+ * and no `--p-lift` — and the key is made of all three. Asking a container's
+ * slot set for a control's colours is asking for `var(--p-fill)` to resolve to
+ * nothing, which is a `background-image` the browser drops on the floor and a
+ * current destination that looks exactly like the four beside it.
+ */
+export const PlFloatingBottomNavigation = /* @__PURE__ */ React.forwardRef(function PlFloatingBottomNavigation({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 2, value: valueProp, defaultValue = null, onValueChange, position = 'fixed', 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 capsuleRef = React.useRef(null);
+    const keyRef = React.useRef(null);
+    /**
+     * Writes the current disc's box onto the key as four custom properties.
+     *
+     * Written straight to the element rather than held in state, exactly as
+     * `PlSegmentedButton` writes its tile: a `setState` here would re-render
+     * every disc on every resize, and nothing in the tree depends on the numbers
+     * except four CSS declarations.
+     *
+     * `animate` is what separates the two callers. A change of destination is the
+     * thing this exists to animate; a resize is the capsule moving under a key
+     * that was already in the right place, and animating that is a key that lags
+     * behind the window being dragged.
+     */
+    const measure = React.useCallback((animate) => {
+        const capsule = capsuleRef.current;
+        const disc = keyRef.current;
+        if (!capsule || !disc) {
+            return;
+        }
+        const current = capsule.querySelector('[data-disc][data-current]');
+        if (!current) {
+            return;
+        }
+        // A key that has only just mounted has nowhere to travel *from*, so its
+        // first placement is instant however it was asked for — that is what makes
+        // the first destination appear under its disc rather than fly in from the
+        // left edge of the capsule.
+        const instant = !animate || !disc.hasAttribute('data-ready');
+        if (instant) {
+            disc.removeAttribute('data-ready');
+        }
+        // `offsetLeft`/`offsetTop` are measured from the offsetParent's padding
+        // edge, and `left`/`top` on an absolutely positioned child resolve against
+        // the same box — so the capsule's own padding is already accounted for and
+        // must not be subtracted again.
+        disc.style.setProperty('--p-disc-x', `${current.offsetLeft}px`);
+        disc.style.setProperty('--p-disc-y', `${current.offsetTop}px`);
+        disc.style.setProperty('--p-disc-w', `${current.offsetWidth}px`);
+        disc.style.setProperty('--p-disc-h', `${current.offsetHeight}px`);
+        // Read off the disc rather than off a prop, because the bar does not know
+        // which of its children is unavailable — the items are `children` and the
+        // disabled one is whichever of them said so. The same query that measures
+        // the box answers it, so there is no second pass.
+        disc.toggleAttribute('data-quiet', current.hasAttribute('data-disabled'));
+        if (instant) {
+            // Reading a layout property commits the four writes above while the
+            // duration is still 0ms, so turning the transition back on cannot
+            // animate a move that has already happened.
+            void disc.offsetWidth;
+        }
+        disc.setAttribute('data-ready', '');
+    }, []);
+    // Before the browser paints, or the key is visibly at nothing for a frame.
+    React.useLayoutEffect(() => {
+        measure(true);
+    }, [measure, value, variant, size, density, disabled, children]);
+    React.useEffect(() => {
+        const capsule = capsuleRef.current;
+        if (!capsule || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => measure(false));
+        observer.observe(capsule);
+        return () => observer.disconnect();
+    }, [measure]);
+    const change = React.useCallback((next) => {
+        if (!controlled) {
+            setUncontrolled(next);
+        }
+        onValueChange?.(next);
+    }, [controlled, onValueChange]);
+    const context = React.useMemo(() => ({ value: value ?? null, change, size, disabled }), [value, change, size, disabled]);
+    const classNames = cx('flex w-full justify-center px-4', 
+    // The strip the capsule is centred in spans the window, and a transparent
+    // band across the bottom of a page that swallowed presses would be a band
+    // nobody could scroll through. Only the capsule takes them back.
+    position === 'static' ? '' : 'pointer-events-none', safeArea ? floatGapSafeClasses[size] : floatGapClasses[size], positionClasses[position], className);
+    return useRender({
+        render: render ?? _jsx("nav", {}),
+        ref,
+        props: {
+            'aria-label': label,
+            className: classNames,
+            // `controlSlots` and not `surfaceSlots`: the capsule is undyed like every
+            // other container, but the key riding in it is a control's surface and is
+            // made of three slots a container's set does not carry.
+            style: { ...controlSlots(color, elevation, 'solid'), ...style },
+            children: (_jsx(FloatingBarContext.Provider, { value: context, children: _jsxs("div", { ref: capsuleRef, className: cx(
+                    // `relative` is load-bearing twice over: it is what makes the
+                    // capsule the discs' offsetParent, and what the key is positioned
+                    // in.
+                    'pointer-events-auto relative inline-flex items-center rounded-full', capsuleClasses[variant], capsulePaddingClasses[density][size], discGapClasses[density][size], transitionClasses), children: [value !== null && value !== undefined ? (_jsx("span", { ref: keyRef, "aria-hidden": "true", className: keyClasses })) : null, children] }) })),
+            ...props
+        }
+    });
+});
+/**
+ * One destination, as a disc.
+ *
+ * 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 disc.
+ */
+export const PlFloatingBottomNavigationItem = /* @__PURE__ */ React.forwardRef(function PlFloatingBottomNavigationItem({ value, icon, href, disabled: disabledProp = false, className, children, onClick, ...props }, ref) {
+    const bar = React.useContext(FloatingBarContext);
+    const disabled = disabledProp || bar.disabled;
+    const selected = bar.value !== null && bar.value === value;
+    const classNames = cx(
+    // `z-10` and a stacking context of its own: the key is painted behind the
+    // discs, and without this it would cover the glyph it is under.
+    'relative z-10 inline-flex shrink-0 items-center justify-center rounded-full', controlHeightClasses[bar.size], controlSquareClasses[bar.size], '[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]', transitionClasses, 
+    // Offset rather than inset: a disc inside a capsule that is only padding has
+    // room around it, and a flush ring on a circle is the circle's own edge
+    // thickening — which is the one shape where that reads as a border rather
+    // than as focus.
+    focusRingClasses, disabled
+        ? 'cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)'
+        : selected
+            ? // No surface of its own. What is under the glyph is the key, which
+                // belongs to the bar and is the one thing in the row that travels;
+                // a disc that drew its own fill would be a second key appearing
+                // wherever the first one had just left.
+                'cursor-pointer text-(--p-on-solid)'
+            : '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: srOnlyClasses, children: children }) : null] }));
+    /**
+     * The hooks the key is measured from.
+     *
+     * Attributes rather than a ref per disc, for the reason a `PlSegment` carries
+     * `data-segment`: a ref array would mean keeping it in step with however the
+     * caller composed the items — through a `.map()`, through a fragment, through
+     * a component of their own — and an attribute is the version of that which
+     * cannot fall out of step.
+     */
+    const discAttributes = {
+        'data-disc': '',
+        'data-current': selected ? '' : undefined,
+        'data-disabled': disabled ? '' : undefined
+    };
+    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, ...discAttributes, className: classNames, onClick: press, ...props, children: body }));
+    }
+    return (_jsx("button", { ref: ref, type: "button", disabled: disabled, "aria-current": selected ? 'page' : undefined, ...discAttributes, className: classNames, onClick: press, ...props, children: body }));
+});

package/dist/components/floating-bottom-navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { PlFloatingBottomNavigation, PlFloatingBottomNavigationItem } from './PlFloatingBottomNavigation.js';
+export type { PlFloatingBottomNavigationItemProps, PlFloatingBottomNavigationProps, PlFloatingBottomNavigationValue } from './PlFloatingBottomNavigation.js';

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

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

package/dist/components/grid/PlGrid.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAlignItems, PlassJustify, PlassResponsive } from '../../types.js';
+export interface PlGridProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many columns a row is divided into. Every `span` and every `offset`
+     * inside is read against this number, so `columns={24}` makes `span={12}` a
+     * half and not a full width.
+     * @default 12
+     */
+    columns?: PlassResponsive<number>;
+    /**
+     * The gutter between items, on Tailwind's spacing scale — `spacing={4}` is
+     * `1rem`, the same length `gap-4` is. Fractions are allowed, so `1.5` is
+     * `0.375rem`.
+     * @default 2
+     */
+    spacing?: PlassResponsive<number>;
+    /** The gutter between rows only. Falls back to `spacing`. */
+    rowSpacing?: PlassResponsive<number>;
+    /** The gutter between columns only. Falls back to `spacing`. */
+    columnSpacing?: PlassResponsive<number>;
+    /** How a row distributes the space its items did not use. */
+    justify?: PlassJustify;
+    /** How items sit against each other across the row. @default 'stretch' */
+    alignItems?: PlassAlignItems;
+    /** Where the rows sit when the grid is shorter than the box holding it. */
+    alignContent?: PlassJustify;
+    /**
+     * Whether a row that runs out of columns continues on the next one. Turning
+     * it off gives one row that overflows, which is what a horizontally scrolling
+     * strip wants.
+     * @default true
+     */
+    wrap?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<ul />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    /** The `PlGridItem`s. */
+    children?: React.ReactNode;
+}
+/**
+ * A twelve-column row, and the parent every `PlGridItem` needs.
+ *
+ * It owns the three numbers an item cannot know on its own — how many columns
+ * there are and how wide the two gutters are — and hands them down as inherited
+ * custom properties rather than through a React context. That is not a
+ * shortcut: the values are responsive, and a media query can change an inherited
+ * custom property without React hearing about it, so the column count an item
+ * lays itself out against is always the one that is actually on screen. A
+ * context would have to re-render the tree at every breakpoint to say the same
+ * thing.
+ *
+ * It draws nothing, and it takes no `variant`, `color`, `elevation`, `size` or
+ * `density`. A grid is not a surface — it is the arrangement of the surfaces
+ * inside it — and there is no padding here either: the gutter round a page is a
+ * `PlContainer`'s and the padding round content is a `PlCard`'s, and a grid that
+ * had a track of its own would be a third one to keep in step. `spacing` is the
+ * only measurement it owns, and it is the space *between* items.
+ *
+ * Nesting is a `PlGrid` inside a `PlGridItem`, not an item that is also a grid:
+ * the inner grid re-declares the column count for its own subtree while the item
+ * around it keeps the width the outer grid gave it.
+ */
+export declare const PlGrid: React.ForwardRefExoticComponent<PlGridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid/PlGrid.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { alignContentClasses, alignItemsClasses, columnCount, justifyClasses, responsiveSlots, spacingValue, withBaseline } from '../../internal/grid.js';
+import { cx } from '../../internal/styles.js';
+const DEFAULT_COLUMNS = 12;
+/** Two Tailwind steps, and the reason a bare `PlGrid` already looks like one. */
+const DEFAULT_SPACING = 2;
+/**
+ * A twelve-column row, and the parent every `PlGridItem` needs.
+ *
+ * It owns the three numbers an item cannot know on its own — how many columns
+ * there are and how wide the two gutters are — and hands them down as inherited
+ * custom properties rather than through a React context. That is not a
+ * shortcut: the values are responsive, and a media query can change an inherited
+ * custom property without React hearing about it, so the column count an item
+ * lays itself out against is always the one that is actually on screen. A
+ * context would have to re-render the tree at every breakpoint to say the same
+ * thing.
+ *
+ * It draws nothing, and it takes no `variant`, `color`, `elevation`, `size` or
+ * `density`. A grid is not a surface — it is the arrangement of the surfaces
+ * inside it — and there is no padding here either: the gutter round a page is a
+ * `PlContainer`'s and the padding round content is a `PlCard`'s, and a grid that
+ * had a track of its own would be a third one to keep in step. `spacing` is the
+ * only measurement it owns, and it is the space *between* items.
+ *
+ * Nesting is a `PlGrid` inside a `PlGridItem`, not an item that is also a grid:
+ * the inner grid re-declares the column count for its own subtree while the item
+ * around it keeps the width the outer grid gave it.
+ */
+export const PlGrid = /* @__PURE__ */ React.forwardRef(function PlGrid({ columns, spacing, rowSpacing, columnSpacing, justify, alignItems, alignContent, wrap = true, render, className, style, children, ...props }, ref) {
+    const classNames = cx('plass-grid flex', wrap ? 'flex-wrap' : 'flex-nowrap', 
+    // Both gutters are read from the slots below, which is what lets a media
+    // query change them without React re-rendering.
+    'gap-x-(--p-gap-x) gap-y-(--p-gap-y)', justify ? justifyClasses[justify] : '', alignItems ? alignItemsClasses[alignItems] : '', alignContent ? alignContentClasses[alignContent] : '', className);
+    return useRender({
+        render,
+        ref,
+        props: {
+            className: classNames,
+            style: {
+                ...responsiveSlots('cols', withBaseline(columns, DEFAULT_COLUMNS), columnCount),
+                ...responsiveSlots('gap-x', withBaseline(columnSpacing ?? spacing, DEFAULT_SPACING), spacingValue),
+                ...responsiveSlots('gap-y', withBaseline(rowSpacing ?? spacing, DEFAULT_SPACING), spacingValue),
+                ...style
+            },
+            children,
+            ...props
+        }
+    });
+});

package/dist/components/grid/PlGridItem.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAlignSelf, PlassResponsive } from '../../types.js';
+export interface PlGridItemProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How many of the grid's columns the item takes. Read against the grid's
+     * `columns`, so `span={6}` is a half of the default twelve and a quarter of
+     * `columns={24}`.
+     *
+     * Responsive: `span={{ xs: 12, md: 6, lg: 4 }}` is full width on a phone, half
+     * from 48rem and a third from 64rem. Every entry applies from its own
+     * breakpoint up, so two of them usually describe a whole layout.
+     *
+     * A span wider than the row is clamped to the row rather than overflowing.
+     * @default the grid's full width
+     */
+    span?: PlassResponsive<number>;
+    /**
+     * Columns left empty *before* the item — space pushed in ahead of it, not an
+     * absolute position in the row. First in a twelve-column row, `offset={4}`
+     * with `span={4}` is the middle third; after an item that already took four
+     * columns, the same offset skips four more and lands on the last third.
+     *
+     * Responsive in the same way `span` is.
+     * @default 0
+     */
+    offset?: PlassResponsive<number>;
+    /** Overrides the row's `alignItems` for this item alone. */
+    alignSelf?: PlassAlignSelf;
+    /**
+     * Renders something other than a `<div>`: `render={<li />}`,
+     * `render={<article />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * One cell of a `PlGrid`.
+ *
+ * It is a width and nothing else — no sheet, no padding, no typography. What
+ * goes inside brings its own, which is the whole reason a cell and a `PlCard`
+ * are two components: wrapping something in a layout must not change how it
+ * looks, and a cell that drew a sheet would make `span` a visual decision.
+ *
+ * The column count it divides by is inherited from the grid as a custom
+ * property, so an item with no `PlGrid` above it falls back to twelve rather
+ * than breaking — but it will be a lone width in a plain parent, which is not a
+ * layout. Always wrap.
+ */
+export declare const PlGridItem: React.ForwardRefExoticComponent<PlGridItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid/PlGridItem.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { alignSelfClasses, offsetValue, responsiveSlots, spanValue } from '../../internal/grid.js';
+import { cx } from '../../internal/styles.js';
+/**
+ * One cell of a `PlGrid`.
+ *
+ * It is a width and nothing else — no sheet, no padding, no typography. What
+ * goes inside brings its own, which is the whole reason a cell and a `PlCard`
+ * are two components: wrapping something in a layout must not change how it
+ * looks, and a cell that drew a sheet would make `span` a visual decision.
+ *
+ * The column count it divides by is inherited from the grid as a custom
+ * property, so an item with no `PlGrid` above it falls back to twelve rather
+ * than breaking — but it will be a lone width in a plain parent, which is not a
+ * layout. Always wrap.
+ */
+export const PlGridItem = /* @__PURE__ */ React.forwardRef(function PlGridItem({ span, offset, alignSelf, render, className, style, children, ...props }, ref) {
+    const classNames = cx('plass-grid-item', alignSelf ? alignSelfClasses[alignSelf] : '', className);
+    return useRender({
+        render,
+        ref,
+        props: {
+            className: classNames,
+            style: {
+                ...responsiveSlots('span', span, spanValue),
+                ...responsiveSlots('offset', offset, offsetValue),
+                ...style
+            },
+            children,
+            ...props
+        }
+    });
+});

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

@@ -0,0 +1,4 @@
+export { PlGrid } from './PlGrid.js';
+export type { PlGridProps } from './PlGrid.js';
+export { PlGridItem } from './PlGridItem.js';
+export type { PlGridItemProps } from './PlGridItem.js';

package/dist/components/grid/index.js

@@ -0,0 +1,2 @@
+export { PlGrid } from './PlGrid.js';
+export { PlGridItem } from './PlGridItem.js';

package/dist/components/highlight/PlHighlight.d.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import type { PlTypographyWeight } from '../typography/PlTypography.js';
+import type { PlassColor, PlassVariant } from '../../types.js';
+export interface PlHighlightProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * What to find.
+     *
+     * A string is one term, an array is several — the longest is tried first, so
+     * `['data', 'database']` marks the whole word rather than the first four
+     * letters of it. A `RegExp` is used as written, with the global flag forced
+     * on; `caseSensitive` and `wholeWord` are ignored for it, because a regular
+     * expression already says both of those things itself.
+     */
+    query: string | string[] | RegExp;
+    /**
+     * What the mark is made of.
+     *
+     * - `solid` — the family's gradient with its own ink on it: the highlighter
+     *   pen. The default.
+     * - `glass` — a hairline box with the family's soft tint inside it, for a page
+     *   where a filled run would be too much.
+     * - `ghost` — the accent colour and nothing else, for marking a word inside a
+     *   heading that is already loud.
+     *
+     * `glass` is deliberately **not** blurred here, which is the one place in the
+     * library the material is quoted rather than used. A mark is a 20px-tall
+     * inline box sitting on a line of text; there is no backdrop behind it worth
+     * smearing, and `box-decoration-clone` across a line break would smear two.
+     * @default 'solid'
+     */
+    variant?: PlassVariant;
+    /**
+     * Semantic colour role. `warning` by default, and not arbitrarily: it is the
+     * one family whose gradient is light with dark ink on it, so a `solid`
+     * `warning` mark is a yellow highlighter over black text rather than a white
+     * word on a block of colour.
+     * @default 'warning'
+     */
+    color?: PlassColor;
+    /**
+     * Whether `a` and `A` are different letters.
+     * @default false
+     */
+    caseSensitive?: boolean;
+    /**
+     * Whether a term has to be a word on its own — `cat` marking "cat" but not
+     * "concatenate".
+     *
+     * A word here is a run of letters, digits and underscores in any script, so it
+     * means what it should for `café` and `naïve`. It means very little for Korean
+     * or Japanese, where a phrase is not delimited by spaces at all; that is a
+     * property of the writing system rather than of this prop, and is the reason
+     * it is off by default.
+     * @default false
+     */
+    wholeWord?: boolean;
+    /** Underlines the mark as well. Combines with every variant. */
+    underline?: boolean;
+    /**
+     * Sets the mark's weight. Omit it and the mark is the weight of the text
+     * around it — the surface is already saying "this one", and a bolded word
+     * inside a sentence changes the rhythm of the whole line.
+     */
+    weight?: PlTypographyWeight;
+    /**
+     * The text to search. Elements are walked into and left otherwise untouched,
+     * so a match inside a `<strong>` is still marked and the `<strong>` survives.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Marks the words a reader is looking for, inside text they were already
+ * reading.
+ *
+ * The component is the search, not just the styling: `query` is what a search
+ * box holds, and everything about *how* the matching is done — case, whole
+ * words, a regular expression — is a prop rather than something a caller has to
+ * pre-compute into a list of offsets.
+ *
+ * The mark is a real `<mark>`, which is the element for "text of relevance to
+ * the reader" and is announced as such. That has one consequence worth knowing:
+ * marking eleven words in a paragraph tells a screen reader that eleven things
+ * are important, which is a way of saying nothing. A highlight is for a handful
+ * of matches.
+ *
+ * Nothing here is stateful and nothing measures — the whole component is a pure
+ * function of `children` and `query`, so it re-marks on its own the moment the
+ * search box changes.
+ */
+export declare const PlHighlight: React.ForwardRefExoticComponent<PlHighlightProps & React.RefAttributes<HTMLSpanElement>>;