plass-ui 0.0.1 → 1.0.0

package/dist/components/aspect-ratio/PlAspectRatio.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassSize } from '../../types.js';
+/**
+ * How the media inside is fitted to the box, spelled the way CSS spells it.
+ *
+ * These are `object-fit`'s own values rather than a nicer set of words, for the
+ * reason the library keeps `aspect-ratio`'s own syntax below: inventing
+ * `fill-the-box` would only make a reader look up which CSS it maps to.
+ */
+export type PlAspectFit = 'cover' | 'contain' | 'fill' | 'none';
+export interface PlAspectRatioProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The proportion the box holds, written the way CSS writes it — a number
+     * (`1.5`) or a ratio (`'16 / 9'`). Both reach `aspect-ratio` untouched.
+     * @default 1
+     */
+    ratio?: number | string;
+    /**
+     * How a single piece of media inside is fitted. Applies to an `img`, a
+     * `video`, a `canvas`, an `svg` or an `iframe` that is a direct child; those
+     * are stretched to the full box and then fitted. Anything else is laid out
+     * normally and this prop does not reach it.
+     * @default 'cover'
+     */
+    fit?: PlAspectFit;
+    /**
+     * Rounds the corners to the `size` step of the house radius ladder.
+     *
+     * Off by default. A layout component draws nothing, and a photograph with its
+     * corners cut is a decision about the photograph — but it is such a common one
+     * that making the caller reach for a `className` would be perverse.
+     * @default false
+     */
+    rounded?: boolean;
+    /**
+     * Which step of the radius ladder `rounded` uses.
+     *
+     * `size` here is the size of the *sheet* — there is no height and no type
+     * scale on a box whose whole job is a proportion.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /**
+     * Renders something other than a `<div>`: `render={<figure />}`,
+     * `render={<a href="…" />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A box that keeps a proportion whatever width it is given.
+ *
+ * It draws nothing — no sheet, no hairline, no shadow — which is what puts it
+ * in `layout` beside `PlContainer` and `PlGrid` rather than in `surfaces`. What
+ * it does is reserve the space: a card whose image arrives late does not reflow
+ * the page around it, and a row of thumbnails is a row of one shape.
+ *
+ * The proportion is CSS's own `aspect-ratio`, so a caller who already knows
+ * `16 / 9` has nothing to translate. `fit` is the one convenience on top: the
+ * media inside is stretched to the box and then fitted, which is the pair of
+ * declarations every use of this component would otherwise start with.
+ */
+export declare const PlAspectRatio: React.ForwardRefExoticComponent<PlAspectRatioProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/aspect-ratio/PlAspectRatio.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { cx, radiusClasses } from '../../internal/styles.js';
+/**
+ * The media a `fit` reaches, stretched to the box first.
+ *
+ * Written out one selector at a time rather than as a comma list, because
+ * Tailwind only ever sees class names that appear literally in the source and a
+ * grouped arbitrary variant is one string it has to parse rather than match.
+ *
+ * `iframe` takes the sizing and not the fit: an embed lays its own content out
+ * and `object-fit` has nothing to act on.
+ */
+const stretchClasses = /* @__PURE__ */ [
+    '[&>img]:size-full',
+    '[&>video]:size-full',
+    '[&>canvas]:size-full',
+    '[&>svg]:size-full',
+    '[&>iframe]:size-full',
+    '[&>picture]:size-full',
+    '[&>picture>img]:size-full'
+].join(' ');
+const fitClasses = {
+    cover: '[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover',
+    contain: '[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain',
+    fill: '[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill',
+    none: '[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none'
+};
+/**
+ * A box that keeps a proportion whatever width it is given.
+ *
+ * It draws nothing — no sheet, no hairline, no shadow — which is what puts it
+ * in `layout` beside `PlContainer` and `PlGrid` rather than in `surfaces`. What
+ * it does is reserve the space: a card whose image arrives late does not reflow
+ * the page around it, and a row of thumbnails is a row of one shape.
+ *
+ * The proportion is CSS's own `aspect-ratio`, so a caller who already knows
+ * `16 / 9` has nothing to translate. `fit` is the one convenience on top: the
+ * media inside is stretched to the box and then fitted, which is the pair of
+ * declarations every use of this component would otherwise start with.
+ */
+export const PlAspectRatio = /* @__PURE__ */ React.forwardRef(function PlAspectRatio({ ratio = 1, fit = 'cover', rounded = false, size = 'md', render, className, style, children, ...props }, ref) {
+    const classNames = cx(
+    // `overflow-hidden` is not decoration: without it a `cover` image spills
+    // out of the proportion it was just given, and the box would only be
+    // reserving space rather than holding anything to it.
+    'relative block w-full overflow-hidden', stretchClasses, fitClasses[fit], rounded ? radiusClasses[size] : '', className);
+    return useRender({
+        render,
+        ref,
+        props: {
+            className: classNames,
+            style: { aspectRatio: ratio, ...style },
+            children,
+            ...props
+        }
+    });
+});

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAspectRatio } from './PlAspectRatio.js';
+export type { PlAspectFit, PlAspectRatioProps } from './PlAspectRatio.js';

package/dist/components/aspect-ratio/index.js

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

package/dist/components/avatar/PlAvatar.d.ts

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import type { PlassColor, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
+/** What Base UI reports about the picture as it loads. */
+export type PlAvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+/**
+ * The crop, not the material.
+ *
+ * `circle` is the default. A round crop is what a portrait has been for as long
+ * as there have been portraits, and an avatar is not a surface — it is a picture
+ * laid on one, so it does not owe the radius ladder anything.
+ *
+ * `square` takes the library's own fillet instead, which is what a logo or a
+ * repository icon wants: those are drawn to the edges of a rectangle and a round
+ * crop eats them.
+ */
+export type PlAvatarShape = 'circle' | 'square';
+export interface PlAvatarProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The picture. Until it loads — and forever, if it fails — the fallback is
+     * what is drawn, so an avatar is never an empty box.
+     */
+    src?: string;
+    /** Candidate images at other resolutions, as on any `<img>`. */
+    srcSet?: string;
+    /**
+     * What the picture says, for a reader who cannot see it. Defaults to `name`,
+     * and to nothing at all when there is no name — an avatar next to the person's
+     * own name in a row is decoration, and reading it out says the name twice.
+     */
+    alt?: string;
+    /**
+     * Who or what this is. One prop doing three jobs: it names the picture, the
+     * initials are derived from it, and it is the sentence a screen reader hears
+     * instead of those initials.
+     *
+     * The initials are the first character of the first word plus the first
+     * character of the last — "Jane Doe" is `JD`, "홍길동" is `홍`. That rule is
+     * wrong for some names, which is what `initials` is for.
+     */
+    name?: string;
+    /** The initials, written out, for when the rule derived the wrong ones. */
+    initials?: string;
+    /**
+     * The crop.
+     * @default 'circle'
+     */
+    shape?: PlAvatarShape;
+    /**
+     * What the sheet behind the fallback is made of. Invisible once a picture has
+     * loaded, apart from the edge it keeps.
+     *
+     * `ghost` is the default: a directory is a page of avatars, and a page of
+     * saturated circles is a page nobody can read a name off.
+     * @default 'ghost'
+     */
+    variant?: PlassVariant;
+    /**
+     * The box the picture is drawn in — the control heights, so an avatar and the
+     * button beside it in a toolbar are the same height.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Drop shadow depth. `0` is the default: an avatar is a picture set into the
+     * page rather than a key resting on it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * How long to wait before drawing the fallback, in milliseconds. Set it to
+     * roughly the time a cached image takes and the initials stop flashing up in
+     * front of a picture that was about to arrive anyway.
+     */
+    delay?: number;
+    /** Anything else the `<img>` needs — `loading`, `crossOrigin`, `referrerPolicy`. */
+    imageProps?: Omit<React.ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt'>;
+    /** Called as the picture moves between `idle`, `loading`, `loaded` and `error`. */
+    onLoadingStatusChange?: (status: PlAvatarLoadingStatus) => void;
+    /**
+     * The fallback, drawn instead of the initials. An icon, a logo, a single
+     * emoji — whatever stands in for this particular thing when there is no
+     * picture of it.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A picture of a person or a thing, at a known size, that is never an empty box.
+ *
+ * Three things can be drawn in it and exactly one of them is at a time: the
+ * picture, if `src` is given and it loads; otherwise whatever stands in for it —
+ * `children`, or `initials`, or the initials derived from `name`; and failing
+ * all of those, a silhouette. Which one is showing is Base UI's `Avatar` to
+ * decide, because "has the image loaded" is a question with four answers and a
+ * race in the middle of it.
+ *
+ * It carries no status dot of its own. An avatar with a green mark on it is a
+ * `PlBadge` with an avatar in it, and inventing a second spelling for that would
+ * give the library two of them.
+ */
+export declare const PlAvatar: React.ForwardRefExoticComponent<PlAvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/avatar/PlAvatar.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Avatar as BaseUIAvatar } from '@base-ui/react/avatar';
+import { controlHeightClasses, controlSlots, controlSquareClasses, glassClasses, hasContent, radiusClasses, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
+/**
+ * The initials, sized off the box rather than off the row.
+ *
+ * Its own ladder and not `controlTextClasses`, because a control's label is
+ * measured against the words next to it and this one is measured against the
+ * circle around it: roughly 40% of the diameter at every step, which is where
+ * two characters fill the width without touching the edge.
+ */
+const initialsTextClasses = {
+    xs: 'text-[0.5625rem]',
+    sm: 'text-[0.6875rem]',
+    md: 'text-[0.8125rem]',
+    lg: 'text-[1rem]',
+    xl: 'text-[1.1875rem]'
+};
+/**
+ * The three materials, said the way a *control* says them: an avatar **is** the
+ * thing being coloured — a portrait of one particular person — so its sheet
+ * takes the tint, exactly as a `PlAlert`'s does and unlike a `PlCard`'s.
+ *
+ * `solid` carries no gloss line, for the reason a filled `PlButton` carries
+ * none: the gradient is the form.
+ */
+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-(--p-accent) bg-(--plass-glass)',
+        '[border-color:var(--plass-border)]',
+        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
+    ].join(' '),
+    ghost: 'text-(--p-accent) bg-(--p-soft-press) [box-shadow:var(--p-elev)]'
+};
+const baseClasses = /* @__PURE__ */ [
+    'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden',
+    'align-middle leading-none font-semibold tracking-wide whitespace-nowrap',
+    // A glyph handed to `children` is drawn against the circle, not against a
+    // word, so it is sized off the box like the initials are rather than off the
+    // `1.2em` an icon riding on a label takes.
+    '[&_svg]:pointer-events-none [&_svg]:size-[55%]',
+    transitionClasses
+].join(' ');
+/**
+ * The default fallback: a shoulders-and-head silhouette, drawn here rather than
+ * in `internal/icons` because this is the only component that needs it.
+ *
+ * It exists so that `<PlAvatar />` with nothing at all is still an avatar. A box
+ * with no picture, no name and no glyph in it is indistinguishable from a
+ * component that failed to render.
+ */
+function PersonIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [_jsx("path", { d: "M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z" }), _jsx("path", { d: "M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z" })] }));
+}
+/**
+ * The first character of the first word, plus the first of the last.
+ *
+ * `Array.from` rather than `[0]`, so a name that starts with an emoji or with
+ * any character outside the basic plane is not cut in half between its two code
+ * units. `normalize('NFC')` first, so a name whose accents arrived decomposed —
+ * which is what a macOS filename and a good many APIs hand you — yields `Ä`
+ * rather than a bare `A`.
+ *
+ * One word gives one character on purpose. Korean, Japanese and Chinese names
+ * are a single token, and two of their characters at 40px is a smudge where one
+ * is a name.
+ */
+function initialsOf(name) {
+    const words = name.normalize('NFC').trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+        return '';
+    }
+    const first = Array.from(words[0])[0] ?? '';
+    const last = words.length > 1 ? (Array.from(words[words.length - 1])[0] ?? '') : '';
+    return (first + last).toLocaleUpperCase();
+}
+/**
+ * A picture of a person or a thing, at a known size, that is never an empty box.
+ *
+ * Three things can be drawn in it and exactly one of them is at a time: the
+ * picture, if `src` is given and it loads; otherwise whatever stands in for it —
+ * `children`, or `initials`, or the initials derived from `name`; and failing
+ * all of those, a silhouette. Which one is showing is Base UI's `Avatar` to
+ * decide, because "has the image loaded" is a question with four answers and a
+ * race in the middle of it.
+ *
+ * It carries no status dot of its own. An avatar with a green mark on it is a
+ * `PlBadge` with an avatar in it, and inventing a second spelling for that would
+ * give the library two of them.
+ */
+export const PlAvatar = /* @__PURE__ */ React.forwardRef(function PlAvatar({ src, srcSet, alt, name, initials, shape = 'circle', variant = 'ghost', size = 'md', color = 'primary', elevation = 0, delay, imageProps, onLoadingStatusChange, className, style, children, ...props }, ref) {
+    const derived = name ? initialsOf(name) : '';
+    const label = alt ?? name;
+    // `children` beats the initials beats the silhouette. Only the last of the
+    // three has nothing to say, which is what decides whether the fallback needs
+    // the name spelled out beside it.
+    const stand = hasContent(children) ? children : (initials ?? derived) || _jsx(PersonIcon, {});
+    const speaks = hasContent(children) || Boolean(initials ?? derived);
+    const classNames = [
+        baseClasses,
+        controlHeightClasses[size],
+        controlSquareClasses[size],
+        initialsTextClasses[size],
+        shape === 'circle' ? 'rounded-full' : radiusClasses[size],
+        variantClasses[variant],
+        className ?? ''
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs(BaseUIAvatar.Root, { ref: ref, className: classNames, style: { ...controlSlots(color, elevation, variant), ...style }, ...props, children: [src ? (_jsx(BaseUIAvatar.Image, { src: src, srcSet: srcSet, 
+                // Empty rather than absent: an avatar beside the person's own name is
+                // decoration, and `alt` left off is what makes a screen reader read
+                // the file name out instead.
+                alt: label ?? '', className: "size-full object-cover", onLoadingStatusChange: onLoadingStatusChange, ...imageProps })) : null, _jsxs(BaseUIAvatar.Fallback, { delay: src ? delay : undefined, className: "flex size-full items-center justify-center", children: [label && speaks ? _jsx("span", { className: srOnlyClasses, children: label }) : null, _jsx("span", { "aria-hidden": label && speaks ? true : undefined, className: "contents", children: stand })] })] }));
+});

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

@@ -0,0 +1,2 @@
+export { PlAvatar } from './PlAvatar.js';
+export type { PlAvatarLoadingStatus, PlAvatarProps, PlAvatarShape } from './PlAvatar.js';

package/dist/components/avatar/index.js

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

package/dist/components/badge/PlBadge.d.ts

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import type { PlassCorner, PlassElevation, PlassStyleProps } from '../../types.js';
+/**
+ * The shape of the thing underneath, which is what decides how far the marker
+ * tucks in.
+ */
+export type PlBadgeOverlap = 'square' | 'circle';
+export interface PlBadgeProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'content'> {
+    /**
+     * What the badge says — usually a count, sometimes a word.
+     *
+     * Omit it and the badge draws a dot instead, which is the honest thing when
+     * there is something to report but nothing to count.
+     */
+    content?: React.ReactNode;
+    /**
+     * Caps a numeric `content` and adds a `+`. Only applies when the content is
+     * actually a number: a badge cannot know how to truncate a word.
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Draws the marker as a dot even when there is content, keeping the content
+     * for screen readers only. For the corner that has to stay quiet.
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Whether a `content` of `0` is shown. Off by default — zero unread messages
+     * is not news, and a badge that never goes away stops meaning anything.
+     * @default false
+     */
+    showZero?: boolean;
+    /**
+     * Hides the marker without unmounting the anchor. The badge keeps its place in
+     * the DOM, so showing it again does not relayout what it sits on.
+     * @default false
+     */
+    invisible?: boolean;
+    /**
+     * Which corner of the anchor it sits on.
+     * @default 'top-end'
+     */
+    placement?: PlassCorner;
+    /**
+     * The shape of the thing underneath, which is what decides how far the marker
+     * tucks in: a circle's corner is further from its centre than a square's, so a
+     * badge that looks right on an avatar hangs off an icon button.
+     * @default 'square'
+     */
+    overlap?: PlBadgeOverlap;
+    /**
+     * Drop shadow depth. `0` is the default — a marker lies on the thing it is
+     * marking rather than floating above it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * What a screen reader hears instead of the raw content. `content={3}` on a
+     * bell is "3" to a reader and means nothing; `label="3 unread notifications"`
+     * is the sentence.
+     */
+    label?: string;
+    /**
+     * What the badge is pinned to. Without it the badge is a standalone marker
+     * that lays out inline, which is what a status pill in a table cell is.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A small mark in the corner of something else: unread mail on an inbox icon, a
+ * status dot on an avatar, a count on a tab.
+ *
+ * The shell is a `<span>` that wraps the anchor and does nothing but establish a
+ * positioning context — no width, no padding, `align-middle` — so a badged icon
+ * button still measures and lines up exactly like a bare one. With no children
+ * the marker lays out inline instead, which is what a standalone status pill is.
+ *
+ * There is no Base UI primitive under this, and there should not be: a badge has
+ * no interaction, no state and no keyboard contract. It is a mark. Wiring it to a
+ * widget primitive would hand every decorative dot a role it cannot honour.
+ *
+ * What it does owe a screen reader is a sentence rather than a number, which is
+ * what `label` is for — `content={3}` beside a bell reads out as "3".
+ */
+export declare const PlBadge: React.ForwardRefExoticComponent<PlBadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/badge/PlBadge.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { controlSlots, glassClasses, hasContent, srOnlyClasses, transitionClasses } from '../../internal/styles.js';
+/**
+ * A badge is smaller than anything else in the library, so it has a ladder of
+ * its own rather than a step off `controlHeightClasses`.
+ *
+ * A control's height is the number a *row* lines up on; a badge lines up on
+ * nothing — it hangs off the corner of something else. `md` is 18px, which is
+ * the smallest a two-digit number stays legible at.
+ */
+const badgeHeightClasses = {
+    xs: 'h-3.5 min-w-3.5',
+    sm: 'h-4 min-w-4',
+    md: 'h-4.5 min-w-4.5',
+    lg: 'h-5 min-w-5',
+    xl: 'h-6 min-w-6'
+};
+/** The dot: the same ladder with the digits taken out, so it goes square. */
+const dotSizeClasses = {
+    xs: 'size-1.5',
+    sm: 'size-2',
+    md: 'size-2.5',
+    lg: 'size-2.5',
+    xl: 'size-3'
+};
+const badgeTextClasses = {
+    xs: 'text-[0.5625rem]',
+    sm: 'text-[0.625rem]',
+    md: 'text-[0.6875rem]',
+    lg: 'text-[0.75rem]',
+    xl: 'text-[0.8125rem]'
+};
+/** Horizontal breathing room around the digits. `density` is what halves it. */
+const badgePaddingClasses = {
+    default: { xs: 'px-1', sm: 'px-1', md: 'px-1.5', lg: 'px-1.5', xl: 'px-2' },
+    compact: { xs: 'px-0.5', sm: 'px-0.5', md: 'px-1', lg: 'px-1', xl: 'px-1.5' }
+};
+/**
+ * A badge sits well below the radius ladder — at 18px tall, `--plass-radius-xs`
+ * (8px) is already most of the way to a pill, and a badge *is* the one thing in
+ * the library allowed to be one.
+ *
+ * That is not a hole in the design language, it is the exception the language
+ * names. A Plass corner is a moulded fillet on a *surface*, and a badge is not a
+ * surface: it is a mark laid on one — which is also why it is the only component
+ * that overlaps its neighbour.
+ */
+const badgeRadiusClasses = 'rounded-full';
+/**
+ * How far the marker is pulled out of the corner, per size.
+ *
+ * A negative margin rather than the `translate(50%,-50%)` every other library
+ * reaches for, because the house rule against `transform` is absolute and worth
+ * more than the two lines it costs here. The offsets are half the marker's own
+ * height, so the vertical overhang is exactly half — and horizontally a wide
+ * `99+` tucks in a little further than half, which is what you want anyway.
+ */
+const cornerOffsets = {
+    xs: { badge: '-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5', dot: '-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5' },
+    sm: { badge: '-mt-2 -mb-2 -ms-2 -me-2', dot: '-mt-1 -mb-1 -ms-1 -me-1' },
+    md: { badge: '-mt-2 -mb-2 -ms-2 -me-2', dot: '-mt-1 -mb-1 -ms-1 -me-1' },
+    lg: { badge: '-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5', dot: '-mt-1 -mb-1 -ms-1 -me-1' },
+    xl: { badge: '-mt-3 -mb-3 -ms-3 -me-3', dot: '-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5' }
+};
+/**
+ * Which two edges the marker is pinned to. Logical properties throughout, so the
+ * corner flips with the writing direction rather than staying stuck on the right.
+ */
+const placementClasses = {
+    'top-start': 'top-0 start-0',
+    'top-end': 'top-0 end-0',
+    'bottom-start': 'bottom-0 start-0',
+    'bottom-end': 'bottom-0 end-0'
+};
+/**
+ * The extra inset a round anchor needs. A circle's corner is `r·(1 − 1/√2)` —
+ * about 15% of its diameter — inside the bounding box the badge is positioned
+ * against, so without this the marker floats off an avatar with a gap under it.
+ */
+const circleInsetClasses = {
+    'top-start': 'mt-[7%] ms-[7%]',
+    'top-end': 'mt-[7%] me-[7%]',
+    'bottom-start': 'mb-[7%] ms-[7%]',
+    'bottom-end': 'mb-[7%] me-[7%]'
+};
+/**
+ * The three materials, said the way a *control* says them: the marker is the
+ * thing being coloured, so its sheet takes the tint.
+ *
+ * `solid` carries the gradient and the tinted lift and no gloss line, exactly as
+ * a filled `PlButton` does. `ghost` is the one to reach for on a busy surface —
+ * a soft tinted mark that reports without shouting.
+ */
+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-(--p-accent) bg-(--plass-glass)',
+        '[border-color:var(--plass-border)]',
+        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
+    ].join(' '),
+    ghost: 'text-(--p-accent) bg-(--p-soft-press)'
+};
+/** `99+`, but only for a value a `+` means anything on. */
+function capContent(content, max) {
+    return typeof content === 'number' && content > max ? `${max}+` : content;
+}
+/**
+ * A small mark in the corner of something else: unread mail on an inbox icon, a
+ * status dot on an avatar, a count on a tab.
+ *
+ * The shell is a `<span>` that wraps the anchor and does nothing but establish a
+ * positioning context — no width, no padding, `align-middle` — so a badged icon
+ * button still measures and lines up exactly like a bare one. With no children
+ * the marker lays out inline instead, which is what a standalone status pill is.
+ *
+ * There is no Base UI primitive under this, and there should not be: a badge has
+ * no interaction, no state and no keyboard contract. It is a mark. Wiring it to a
+ * widget primitive would hand every decorative dot a role it cannot honour.
+ *
+ * What it does owe a screen reader is a sentence rather than a number, which is
+ * what `label` is for — `content={3}` beside a bell reads out as "3".
+ */
+export const PlBadge = /* @__PURE__ */ React.forwardRef(function PlBadge({ variant = 'solid', size = 'md', color = 'primary', density = 'default', elevation = 0, content, max = 99, dot = false, showZero = false, invisible = false, placement = 'top-end', overlap = 'square', label, className, style, children, ...props }, ref) {
+    const anchored = hasContent(children);
+    // `0` is content, and `hasContent` would agree — this is the one place the
+    // library asks a second question, because a count of nothing is not news.
+    const empty = !hasContent(content) || (content === 0 && !showZero);
+    const asDot = dot || empty;
+    const hidden = invisible || (empty && !dot);
+    const markerClasses = [
+        'pointer-events-none z-10 inline-flex shrink-0 items-center justify-center',
+        'font-semibold tabular-nums whitespace-nowrap',
+        badgeRadiusClasses,
+        transitionClasses,
+        variantClasses[variant],
+        asDot
+            ? dotSizeClasses[size]
+            : [
+                badgeHeightClasses[size],
+                badgeTextClasses[size],
+                badgePaddingClasses[density][size]
+            ].join(' '),
+        anchored ? `absolute ${placementClasses[placement]}` : 'relative align-middle',
+        anchored ? (asDot ? cornerOffsets[size].dot : cornerOffsets[size].badge) : '',
+        anchored && overlap === 'circle' ? circleInsetClasses[placement] : '',
+        // Visibility, not opacity: a half-faded badge is a badge you have to squint
+        // at to find out whether it is there. The marker keeps its box either way,
+        // so nothing around it moves when it comes back.
+        hidden ? 'invisible' : '',
+        className ?? ''
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const capped = capContent(content, max);
+    const marker = (_jsx("span", { ref: ref, className: markerClasses, style: { ...controlSlots(color, elevation, variant), ...style }, "aria-hidden": hidden ? true : undefined, ...props, children: hidden ? null : (_jsxs(_Fragment, { children: [asDot || label ? _jsx("span", { className: srOnlyClasses, children: label ?? capped }) : null, asDot ? null : _jsx("span", { "aria-hidden": label ? true : undefined, children: capped })] })) }));
+    if (!anchored) {
+        return marker;
+    }
+    // `inline-flex` rather than `inline-block`: the shell has to be exactly as
+    // wide and as tall as what it wraps, or a badged icon button stops lining up
+    // with the bare one beside it.
+    return (_jsxs("span", { className: "relative inline-flex shrink-0 align-middle", children: [children, marker] }));
+});

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

@@ -0,0 +1,2 @@
+export { PlBadge } from './PlBadge.js';
+export type { PlBadgeOverlap, PlBadgeProps } from './PlBadge.js';

package/dist/components/badge/index.js

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