plass-ui 1.3.0 → 1.4.0

package/dist/internal/page-layout.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useMediaQuery as t}from"./media.js";export const PlPageLayoutContext=/* @__PURE__ */e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PlassSidebarSideContext=/* @__PURE__ */e.createContext(null);const n={xs:null,sm:"(width < 40rem)",md:"(width < 48rem)",lg:"(width < 64rem)",xl:"(width < 80rem)"};export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(e){return t("none"===e?null:n[e])}export function drawerSide(e){const t="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?t?"right":"left":t?"left":"right"}
+"use client";import*as e from"react";import{belowQuery as n}from"./breakpoints.js";import{useMediaQuery as t}from"./media.js";export const PlPageLayoutContext=/* @__PURE__ */e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PlassSidebarSideContext=/* @__PURE__ */e.createContext(null);export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(e){return t("none"===e?null:function collapseQuery(e){return"xs"===e?null:n(e)}(e))}export function drawerSide(e){const n="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?n?"right":"left":n?"left":"right"}

package/dist/internal/progress.d.ts

@@ -8,6 +8,12 @@
  *
  * What is left in each component is the shape, which is the point: it is the
  * only thing that genuinely differs.
+ *
+ * `PlMeter` borrows the groove, the thickness ladder, the fill slots and the
+ * clamp from here without being one of the three. It is the same channel cut
+ * into the same surface; what it reports is a quantity that is already known
+ * rather than something advancing, which is why it keeps its own props and its
+ * own role.
  */
 import type * as React from 'react';
 import type { PlassColor, PlassSize } from '../types.js';

package/dist/internal/responsive.d.ts

@@ -0,0 +1,108 @@
+/**
+ * The one shape a value takes when it changes with the width of the window, and
+ * the one way it reaches CSS.
+ *
+ * It started as `PlGrid`'s private arithmetic and is here because a second
+ * component wanted it — and because the *rule* is the interesting part, not the
+ * code: a bare value applies everywhere, a map applies each entry from its own
+ * breakpoint up, and a rung that was not named inherits the one below it.
+ * `usePlBreakpointValue` resolves the same shape in JavaScript, so a caller who
+ * has learned it once has learned all of it.
+ *
+ * ## Where the resolving happens, and why it is two places
+ *
+ * A responsive value that only decides **style** is resolved in **CSS**:
+ * `responsiveSlots` writes one `--p-{name}-{rung}` per rung the caller named,
+ * and the `@variant` blocks in `styles.css` cascade each slot down from the
+ * rung above. That is what `PlGrid` and `PlContainer` use, and what makes them
+ * free: no resize listener, no re-render, and a server render that is already
+ * correct at every width because the browser resolves it.
+ *
+ * A responsive value that decides **structure** cannot be: an orientation
+ * changes which DOM a component builds, which ARIA it claims, and which way its
+ * arrow keys go, and no stylesheet can do that. Those resolve in JavaScript
+ * through `usePlBreakpointValue`, and pay what that costs — the server renders
+ * the `xs` entry and the browser corrects it on hydration.
+ *
+ * The split is not a compromise between the two; it is the honest line. A
+ * component should reach for the CSS half whenever it can.
+ */
+import type * as React from 'react';
+import type { PlassBreakpoint, PlassResponsive, PlassSize } from '../types.js';
+/** Smallest first, which is also the order the media queries have to be in. */
+export declare const breakpoints: readonly PlassBreakpoint[];
+/** A bare value means "from `xs` up"; a map is already per-breakpoint. */
+export declare function breakpointMap<T>(value: PlassResponsive<T> | undefined): Partial<Record<PlassBreakpoint, T>>;
+/** Whether a value is a per-breakpoint map rather than one answer for all of them. */
+export declare function isResponsiveMap<T>(value: PlassResponsive<T> | undefined): boolean;
+/**
+ * A responsive value at one rung of the ladder.
+ *
+ * Walks **down** from that rung rather than up from `xs`: the nearest entry at
+ * or below the window is the one that applies, and walking down finds it
+ * without having to know which rungs were named.
+ *
+ * `undefined` when the map named no rung at or below — `{ lg: 3 }` on a phone
+ * is not `3`, and guessing a value the caller did not write would be worse than
+ * saying so.
+ */
+export declare function resolveAt<T>(value: PlassResponsive<T> | undefined, at: PlassBreakpoint): T | undefined;
+/**
+ * A responsive prop a component has to resolve **itself**, with its own default
+ * behind it.
+ *
+ * For the props CSS cannot decide: an orientation changes which DOM a component
+ * builds, which ARIA it claims and which way its arrow keys go, and no
+ * stylesheet can do any of that. The cost is the one every JavaScript answer
+ * about width pays — a server renders the `xs` entry and the browser corrects
+ * it on hydration — which is why a prop that only decides *style* should use
+ * `responsiveSlots` instead and never come here.
+ *
+ * **A bare value subscribes to nothing.** `useMediaQuery(null)` is a hook that
+ * adds no listener, so a component whose orientation is one word costs exactly
+ * what it cost before this existed: the four queries are only asked when there
+ * is a map to answer with. Twenty tab bars on a page that never change shape
+ * install no listeners between them.
+ */
+export declare function useResponsiveValue<T>(value: PlassResponsive<T> | undefined, fallback: T): T;
+/**
+ * Turns a responsive value into the `--p-{name}-{breakpoint}` slots the CSS
+ * reads, emitting only the breakpoints the caller actually named.
+ *
+ * The gaps are filled in by CSS rather than here: each breakpoint's rule falls
+ * back through the ones below it, so `{ md: 6 }` needs one slot and not five.
+ * That keeps the inline style on a grid item down to what was asked for.
+ */
+export declare function responsiveSlots<T>(name: string, value: PlassResponsive<T> | undefined, toCss: (value: T) => string): React.CSSProperties;
+/**
+ * Fills in the `xs` entry of a partial map with the prop's own default.
+ *
+ * Without this, `spacing={{ md: 4 }}` would be a grid with no gutter at all
+ * below 48rem — the CSS fallback rather than the documented default — and a
+ * caller who narrowed one breakpoint would silently lose every other one. A map
+ * says "from here up, use this instead"; it does not say "and nothing below".
+ */
+export declare function withBaseline<T>(value: PlassResponsive<T> | undefined, baseline: T): PlassResponsive<T>;
+/**
+ * How wide content is allowed to get, and the three components that ask.
+ *
+ * A rung of the ladder, `none`, a number of pixels, or any CSS length. The
+ * `string & {}` half is what keeps the five rungs autocompleting: a bare
+ * `string` in the union would swallow them and the ladder would be five names a
+ * caller has to remember rather than five an editor offers.
+ */
+export type PlassMeasure = PlassSize | 'none' | number | (string & {});
+/** A rung if it is one of the five, `none` as itself, anything else a length. */
+export declare function measureValue(value: PlassMeasure): string;
+/**
+ * The class and the slots a measure is carried by, or nothing at all.
+ *
+ * `PlContainer`, `PlHeader` and `PlFooter` each hold their content to a measure
+ * and each used to carry a copy of the ladder. One implementation, because they
+ * are one decision written three times — a header whose measure did not line up
+ * with the container under it is the defect this prevents.
+ */
+export declare function measureSlots(value: PlassResponsive<PlassMeasure> | undefined): {
+    className: string;
+    style: React.CSSProperties | undefined;
+};

package/dist/internal/responsive.js

@@ -0,0 +1 @@
+import{fromQuery as e}from"./breakpoints.js";import{useMediaQuery as o}from"./media.js";import{toLength as t}from"./styles.js";export const breakpoints=["xs","sm","md","lg","xl"];export function breakpointMap(e){return null==e?{}:"object"==typeof e?e:{xs:e}}export function isResponsiveMap(e){return null!=e&&"object"==typeof e}export function resolveAt(e,o){const t=breakpointMap(e);for(let e=breakpoints.indexOf(o);e>=0;e-=1){const o=t[breakpoints[e]];if(void 0!==o)return o}}export function useResponsiveValue(t,n){const s=isResponsiveMap(t),r=o(s?e("sm"):null),i=o(s?e("md"):null),l=o(s?e("lg"):null),p=o(s?e("xl"):null);return s?resolveAt(t,p?"xl":l?"lg":i?"md":r?"sm":"xs")??n:t??n}export function responsiveSlots(e,o,t){const n=breakpointMap(o),s={};for(const o of breakpoints){const r=n[o];void 0!==r&&(s[`--p-${e}-${o}`]=t(r))}return s}export function withBaseline(e,o){return null==e?o:"object"==typeof e?{xs:o,...e}:e}const n={xs:"30rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};export function measureValue(e){return"none"===e?"none":"string"==typeof e&&e in n?n[e]:t(e)}export function measureSlots(e){return void 0===e?{className:"",style:void 0}:{className:"plass-container",style:responsiveSlots("maxw",e,measureValue)}}

package/dist/internal/scramble.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The arithmetic behind `PlAnimateScramble`, and the one decision in it worth
+ * writing down.
+ *
+ * **The pool a character is drawn from is the text's own characters**, not a
+ * table of Latin letters. Every scrambler that ships with a default alphabet
+ * ships an English one, and English noise over a Korean, Greek or Arabic
+ * headline is not a word resolving — it is a different script flickering where
+ * a word is about to be. Shuffling the string's own glyphs is script-agnostic
+ * for nothing, and it also keeps the line's colour and width steady, because
+ * every frame is drawn out of exactly the characters the finished line is made
+ * of.
+ *
+ * `characters` overrides it for the caller who genuinely wants a terminal look.
+ */
+/** Everything in the text that is worth scrambling: no spaces, no repeats. */
+export declare function poolOf(text: string): string;
+/**
+ * The line as it looks part of the way through.
+ *
+ * `progress` is `0`…`1`, and what it decides is **how many characters have
+ * settled**, counted from the start. Resolving left to right rather than at
+ * random is what makes it read as a word arriving rather than as a slot
+ * machine: a reader can follow it, and a reader who looks away and back has not
+ * lost their place.
+ *
+ * Whitespace is never scrambled. The gaps between words are what makes a line
+ * of noise still look like a sentence, and a space that flickers into a letter
+ * changes the word count on every frame.
+ */
+export declare function scrambleAt(text: string, pool: string, progress: number, seed: number): string;

package/dist/internal/scramble.js

@@ -0,0 +1 @@
+export function poolOf(t){const o=new Set;for(const r of t)""!==r.trim()&&o.add(r);return Array.from(o).join("")}export function scrambleAt(t,o,r,n){const e=Array.from(t),a=Math.floor(e.length*Math.max(0,Math.min(1,r)));return 0===o.length?t:e.map((t,r)=>r<a||""===t.trim()?t:o[(31*r+17*n)%o.length]).join("")}

package/dist/internal/styles.d.ts

@@ -103,6 +103,14 @@ export declare const tickRadiusClasses: Record<PlassSize, string>;
  * So every dot here has the same parity as the ring's content box: 12/6, 14/6,
  * 16/8, 18/8, 22/10. The ratio wanders between 38% and 44% as a result, which
  * is the price, and it is invisible next to the thing it buys.
+ *
+ * **The dot grows out of the middle rather than appearing at full size**, so
+ * the size is a pair: nothing until the option is chosen, and the diameter
+ * above once it is. It is the box that grows and not a `scale` — the ring is a
+ * fixed-size flex centre, so the two values are laid out around the same point
+ * and nothing outside the ring can be moved by either of them. Both classes
+ * have to be written out here rather than composed at the call site, because
+ * Tailwind only generates a utility it has seen spelled out in a source file.
  */
 export declare const tickDotClasses: Record<PlassSize, string>;
 /**
@@ -203,6 +211,13 @@ export declare const glassClasses = "[backdrop-filter:var(--plass-blur)] [-webki
  * is in the list because a gradient fill is the thing being changed on a solid
  * surface, and `filter` because that is what hover and press actually move.
  *
+ * `opacity` is in it because half the library already writes an opacity as a
+ * *state*: `opacity-50` is what disabled looks like everywhere, a `PlBackTop`
+ * appears and goes on `opacity-0`, and a `PlImage` uncovers itself the moment
+ * the picture decodes. Without it in the list every one of those is a value
+ * that changes between two frames, which is the one thing the house transition
+ * exists to prevent.
+ *
  * There is no `transform` in the list and none should be added to a *control*:
  * scaling a key resamples its label, and text that shimmers under the cursor
  * undoes the restraint everything else is spending effort on. A surface that

package/dist/internal/styles.js

@@ -1 +1 @@
-export const radiusClasses={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"};export const controlHeightClasses={xs:"h-6",sm:"h-8",md:"h-10",lg:"h-12",xl:"h-14"};export const controlSquareClasses={xs:"w-6",sm:"w-8",md:"w-10",lg:"w-12",xl:"w-14"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.8125rem]",md:"text-[0.875rem]",lg:"text-[1rem]",xl:"text-[1.125rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.875rem]/[1.25rem]",lg:"text-[1rem]/[1.5rem]",xl:"text-[1.125rem]/[1.75rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-6",xl:"px-7"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3.5",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-1.5",sm:"size-1.5",md:"size-2",lg:"size-2",xl:"size-2.5"};export const tickRowTextClasses=controlTextLeadingClasses;export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.5rem",xl:"1.75rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.875rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const stackGapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2"};export const sheetPaddingXClasses={default:{xs:"px-2.5",sm:"px-3.5",md:"px-5",lg:"px-6",xl:"px-7"},compact:{xs:"px-2",sm:"px-2.5",md:"px-3.5",lg:"px-4",xl:"px-5"}};export const sheetPaddingYClasses={default:{xs:"py-2.5",sm:"py-3.5",md:"py-5",lg:"py-6",xl:"py-7"},compact:{xs:"py-2",sm:"py-2.5",md:"py-3.5",lg:"py-4",xl:"py-5"}};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const sheetLineClasses="border-t [border-color:var(--plass-divider)]";export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const glassClasses="[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]";export const transitionClasses=/* @__PURE__ */["[transition-property:background-color,background-image,border-color,box-shadow,color,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ");export const focusRingClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:0px]";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--p-ring)] has-[:focus-visible]:[outline-offset:0px]";export const focusRingInsetClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]";export const chipRemoveClasses=/* @__PURE__ */["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","size-[1.15em] cursor-pointer opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",focusRingClasses,"disabled:cursor-not-allowed"].join(" ");export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(s,e,a){const r="solid"===a;return{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-tint":`var(--plass-${s}-tint)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-glow":r?"var(--plass-glow-on-fill)":`var(--plass-${s}-soft)`,"--p-flash":r?"var(--plass-flash-on-fill)":`var(--plass-${s}-soft-hover)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`,"--p-lift":"0 6px 16px -4px var(--p-tint)","--p-lift-hover":"0 10px 24px -6px var(--p-tint)","--p-lift-press":"0 2px 6px -2px var(--p-tint)"}}export function surfaceSlots(s,e){return{"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`}}export const disabledClasses={solid:/* @__PURE__ */["cursor-not-allowed text-(--p-on-solid) [background-image:var(--p-fill)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),glass:/* @__PURE__ */[glassClasses,"cursor-not-allowed border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),ghost:"cursor-not-allowed bg-transparent text-(--p-accent) opacity-50 saturate-[0.35]"};export const readOnlyFilterClasses="saturate-[0.55]";export const sheetRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"};export const fieldRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-well)]","hover:bg-(--plass-glass-hover)","focus-within:bg-(--plass-glass-press)"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]","hover:bg-(--plass-glass-press) hover:[border-color:var(--p-line)]","focus-within:bg-(--plass-glass-press) focus-within:[border-color:var(--p-line-hover)]"].join(" "),ghost:/* @__PURE__ */["text-(--plass-fg) bg-transparent","hover:bg-(--p-soft)","focus-within:bg-(--p-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-well)] saturate-[0.55]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)] saturate-[0.55]"].join(" "),ghost:"text-(--plass-fg) bg-transparent saturate-[0.55]"};export function toLength(s){return"number"==typeof s?`${s}px`:s}export function hasContent(s){return null!=s&&!1!==s&&""!==s}export function cx(...s){return s.filter(Boolean).join(" ")}
+export const radiusClasses={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"};export const controlHeightClasses={xs:"h-6",sm:"h-8",md:"h-10",lg:"h-12",xl:"h-14"};export const controlSquareClasses={xs:"w-6",sm:"w-8",md:"w-10",lg:"w-12",xl:"w-14"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.8125rem]",md:"text-[0.875rem]",lg:"text-[1rem]",xl:"text-[1.125rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.875rem]/[1.25rem]",lg:"text-[1rem]/[1.5rem]",xl:"text-[1.125rem]/[1.75rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-6",xl:"px-7"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3.5",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-0 data-[checked]:size-1.5",sm:"size-0 data-[checked]:size-1.5",md:"size-0 data-[checked]:size-2",lg:"size-0 data-[checked]:size-2",xl:"size-0 data-[checked]:size-2.5"};export const tickRowTextClasses=controlTextLeadingClasses;export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.5rem",xl:"1.75rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.875rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const stackGapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2"};export const sheetPaddingXClasses={default:{xs:"px-2.5",sm:"px-3.5",md:"px-5",lg:"px-6",xl:"px-7"},compact:{xs:"px-2",sm:"px-2.5",md:"px-3.5",lg:"px-4",xl:"px-5"}};export const sheetPaddingYClasses={default:{xs:"py-2.5",sm:"py-3.5",md:"py-5",lg:"py-6",xl:"py-7"},compact:{xs:"py-2",sm:"py-2.5",md:"py-3.5",lg:"py-4",xl:"py-5"}};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const sheetLineClasses="border-t [border-color:var(--plass-divider)]";export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const glassClasses="[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]";export const transitionClasses=/* @__PURE__ */["[transition-property:background-color,background-image,border-color,box-shadow,color,filter,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ");export const focusRingClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:0px]";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--p-ring)] has-[:focus-visible]:[outline-offset:0px]";export const focusRingInsetClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]";export const chipRemoveClasses=/* @__PURE__ */["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","size-[1.15em] cursor-pointer opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",focusRingClasses,"disabled:cursor-not-allowed"].join(" ");export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(s,e,a){const t="solid"===a;return{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-tint":`var(--plass-${s}-tint)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-glow":t?"var(--plass-glow-on-fill)":`var(--plass-${s}-soft)`,"--p-flash":t?"var(--plass-flash-on-fill)":`var(--plass-${s}-soft-hover)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`,"--p-lift":"0 6px 16px -4px var(--p-tint)","--p-lift-hover":"0 10px 24px -6px var(--p-tint)","--p-lift-press":"0 2px 6px -2px var(--p-tint)"}}export function surfaceSlots(s,e){return{"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`}}export const disabledClasses={solid:/* @__PURE__ */["cursor-not-allowed text-(--p-on-solid) [background-image:var(--p-fill)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),glass:/* @__PURE__ */[glassClasses,"cursor-not-allowed border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),ghost:"cursor-not-allowed bg-transparent text-(--p-accent) opacity-50 saturate-[0.35]"};export const readOnlyFilterClasses="saturate-[0.55]";export const sheetRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"};export const fieldRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-well)]","hover:bg-(--plass-glass-hover)","focus-within:bg-(--plass-glass-press)"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]","hover:bg-(--plass-glass-press) hover:[border-color:var(--p-line)]","focus-within:bg-(--plass-glass-press) focus-within:[border-color:var(--p-line-hover)]"].join(" "),ghost:/* @__PURE__ */["text-(--plass-fg) bg-transparent","hover:bg-(--p-soft)","focus-within:bg-(--p-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-well)] saturate-[0.55]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)] saturate-[0.55]"].join(" "),ghost:"text-(--plass-fg) bg-transparent saturate-[0.55]"};export function toLength(s){return"number"==typeof s?`${s}px`:s}export function hasContent(s){return null!=s&&!1!==s&&""!==s}export function cx(...s){return s.filter(Boolean).join(" ")}

package/dist/internal/table.d.ts

@@ -0,0 +1,86 @@
+/**
+ * The ink a table is drawn with, and the reason two components share it.
+ *
+ * `PlTable` draws a grid it is given; `PlDataTable` sorts, filters and pages
+ * its own rows and then draws one. They are two components because the second
+ * has to call hooks and the first must not — a table whose every column is a
+ * `render` callback is the one component in this library that a React server
+ * component has to be able to render, and reading a context would take that
+ * away. Two components drawing the same grid out of two copies of these
+ * constants is how the rules under a sorted table end up a shade off the rules
+ * under a plain one.
+ */
+import type * as React from 'react';
+import type { PlassDensity, PlassSize } from '../types.js';
+/**
+ * Row height, as vertical padding — and, like the horizontal track, a raw
+ * length rather than a class. See the note on `paddingXValues`.
+ */
+export declare const cellPaddingYValues: Record<PlassDensity, Record<PlassSize, string>>;
+/**
+ * Everything a table is painted with is written inline, `<table>` included.
+ *
+ * This is the one component in the library that has to do that, and the reason
+ * is the elements it renders. A PlButton owns its `<button>`; nobody else
+ * styles it. `<table>`, `<th>` and `<td>` are different — VitePress's
+ * `.vp-doc table`, Tailwind Typography's `.prose td` and every CSS framework in
+ * existence style them by tag name, at two-class specificity that a one-class
+ * Tailwind utility cannot outrank.
+ *
+ * Padding and alignment were already written inline for that reason. **The
+ * borders, the display mode and the margins were not**, and that omission was
+ * most of what a Plass table looked like on a documentation page: the host's
+ * `td { border: 1px solid }` drew a full grid of cell rules the design never
+ * asked for, its `table { display: block }` stopped `width: 100%` filling the
+ * sheet, and its `table { margin: 20px 0 }` pushed the whole thing off the
+ * top-left corner of the pane it is supposed to be flush inside. A grid of
+ * boxed cells floating inside a rounded sheet is not a restrained table with a
+ * problem — it is somebody else's table wearing this one's frame.
+ *
+ * So every cell states `border: 0` and then draws the one rule it actually
+ * wants, and the `<table>` states the four properties a prose stylesheet is
+ * known to take off it. It is verbose, and it is the only way the component
+ * looks the same in a bare app and inside `.prose`.
+ *
+ * What is *not* inline is the row's own background, because it has a hover
+ * state and inline styles have no `:hover`. It reads a `--p-row` slot instead,
+ * which classes then set — a custom property is invisible to a host stylesheet,
+ * so a one-class variant wins there without a fight.
+ */
+export declare const tableStyle: React.CSSProperties;
+export declare const rowClasses: string;
+/**
+ * What a row that answers a press needs beyond the pointer treatment.
+ *
+ * `tabIndex` is the whole point: a row whose only way in is `onClick` is a
+ * control a keyboard cannot reach at all, and `cursor-pointer` advertises it as
+ * one anyway. The ring is inset rather than offset, because the sheet clips at
+ * its own rounded edge and an outline drawn outside the first or last row is an
+ * outline with its top or bottom sliced off.
+ *
+ * The `role` is deliberately left alone. `role="button"` on a `<tr>` reads well
+ * in isolation and takes the row semantics off it — which orphans every `<td>`
+ * inside from the table they belong to, and costs a screen reader the column
+ * headers, the row position and the count.
+ */
+export declare const clickableRowClasses: string;
+/**
+ * Two weights of rule, and the whole of the table's structure.
+ *
+ * `--plass-divider` scores one row off the next, the same ink a PlCard and a
+ * PlList are scored with, so a table on a card and the card's own dividers are
+ * one family of lines. The header sits on `--plass-border`, one step firmer,
+ * because the break between the names of the columns and the data in them is
+ * the one division a reader has to find without looking for it.
+ *
+ * Both are neutral inks rather than the `--plass-glass-line` this used to use.
+ * That line is white, and a white rule between two rows of a white sheet is
+ * not a rule — which is why the table had no visible structure of its own in
+ * light mode, and why it looked like whatever grid the host page happened to
+ * be drawing over it.
+ *
+ * They are on the *cells* rather than on the `<tr>`, which is where a rule can
+ * be written inline and therefore where a host stylesheet cannot reach it.
+ */
+export declare const rowRule = "1px solid var(--plass-divider)";
+export declare const headRule = "1px solid var(--plass-border)";

package/dist/internal/table.js

@@ -0,0 +1 @@
+import{focusRingInsetClasses as r}from"./styles.js";export const cellPaddingYValues={default:{xs:"0.375rem",sm:"0.5rem",md:"0.75rem",lg:"0.875rem",xl:"1rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.4375rem",lg:"0.5625rem",xl:"0.6875rem"}};export const tableStyle={display:"table",width:"100%",margin:0,borderCollapse:"collapse",borderSpacing:0};export const rowClasses=/* @__PURE__ */["[--p-row:transparent]","[transition:background-color_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const clickableRowClasses=/* @__PURE__ */["cursor-pointer [outline:none]",r].join(" ");export const rowRule="1px solid var(--plass-divider)";export const headRule="1px solid var(--plass-border)";

package/dist/internal/threshold.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Which band a reading has landed in.
+ *
+ * One rule, shared by the two components that draw a value against a scale a
+ * caller described: `PlMeter`'s bar and `PlGaugeChart`'s arc. Written twice
+ * they would drift, and a quota that turns `danger` on a bar but not on the
+ * dial beside it is a dashboard that contradicts itself.
+ */
+import type { PlassColor, PlassThreshold } from '../types.js';
+/**
+ * The family a value lands in.
+ *
+ * The highest band at or below the value, or `color` when the value is under
+ * all of them. One pass rather than a sort, because the list is small and
+ * sorting a caller's array — or a copy of it on every render — buys nothing.
+ * Reading it rather than walking it in order is also what makes the prop
+ * order-independent, which is what a caller assumes.
+ */
+export declare function bandColor(value: number, color: PlassColor, thresholds: readonly PlassThreshold[] | undefined): PlassColor;

package/dist/internal/threshold.js

@@ -0,0 +1 @@
+export function bandColor(o,r,f){if(!f?.length)return r;let n;for(const r of f)o>=r.from&&(void 0===n||r.from>n.from)&&(n=r);return n?.color??r}

package/dist/internal/tour.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The geometry a spotlight is cut out of, as arithmetic rather than as a
+ * component.
+ *
+ * A tour dims the page and takes one thing out of the dimming. Everything hard
+ * about that is a rectangle and a rounded corner, so it is here: it can be read
+ * without a browser, tested without one, and it is the same shape the Flutter
+ * build punches with `Path.combine`.
+ */
+/** Where the thing being pointed at is, in viewport coordinates. */
+export interface PlassSpot {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/** A rectangle grown by [padding] on every side, never to a negative size. */
+export declare function inflate(rect: PlassSpot, padding: number): PlassSpot;
+/**
+ * The whole scrim with a hole in it, as a `clip-path` value.
+ *
+ * A clip and not a shadow, and that is the decision the whole component rests
+ * on. The obvious way to draw a hole is one element the size of the target
+ * carrying a box shadow larger than any screen; it works, and it buys nothing
+ * else. A clip buys two things that matter:
+ *
+ * **The dimming can blur.** A `box-shadow` paints a colour. A clipped element
+ * can carry a `backdrop-filter`, so the page around the spotlight is blurred as
+ * well as dimmed — which is this library's own material rather than a grey wash
+ * over it.
+ *
+ * **The hole is a hole for the pointer too.** A clipped-away region is not
+ * hit-tested, so the scrim can take the pointer everywhere it is painted and
+ * nowhere it is not. The reader can use the control being pointed at and
+ * nothing else, which is what separates a tour from a dialog with a picture of
+ * a control in it — and it falls out of the geometry rather than being a second
+ * mechanism that has to agree with it.
+ *
+ * `null` is a step with no target: the whole page dims and nothing is cut out,
+ * which is what a welcome step and a closing step are.
+ */
+export declare function spotlightPath(spot: PlassSpot | null, radius: number): string;

package/dist/internal/tour.js

@@ -0,0 +1 @@
+export function inflate(t,$){return{top:t.top-$,left:t.left-$,width:Math.max(0,t.width+2*$),height:Math.max(0,t.height+2*$)}}export function spotlightPath(t,$){const h="M0,0H100000V100000H0Z";return null===t||t.width<=0||t.height<=0?`path(evenodd,'${h}')`:`path(evenodd,'${h}${function roundedRect(t,$){const{top:h,left:e,width:n,height:i}=t,o=Math.max(0,Math.min($,n/2,i/2));return 0===o?`M${e},${h}H${e+n}V${h+i}H${e}Z`:`M${e+o},${h}H${e+n-o}A${o},${o} 0 0 1 ${e+n},${h+o}V${h+i-o}A${o},${o} 0 0 1 ${e+n-o},${h+i}H${e+o}A${o},${o} 0 0 1 ${e},${h+i-o}V${h+o}A${o},${o} 0 0 1 ${e+o},${h}Z`}(t,$)}')`}

package/dist/internal/window.d.ts

@@ -0,0 +1,201 @@
+/**
+ * The chrome a `PlWindowPane` draws, and the tables that say how big it is.
+ *
+ * It lives here for the reason `internal/mockup.tsx` does. One component reads
+ * it, but what it holds is reference data rather than a piece of that component
+ * — four systems' worth of title bars, three buttons each, drawn four different
+ * ways — and a component file with all of that in it would be a table with a
+ * `forwardRef` at the bottom.
+ *
+ * Three conventions run through it:
+ *
+ * **Every length is a CSS pixel at `md`, scaled once by `size`.** A title bar is
+ * 32px on Windows 11 and 38px on macOS because those are the heights they are,
+ * not because a ladder in `internal/styles.ts` says so — this is the one place
+ * in the library where the numbers come from somewhere else. `size` multiplies
+ * them, which is why they are written as numbers rather than as utilities.
+ *
+ * **The buttons are drawings of what they do and carry no other party's marks.**
+ * A traffic light is three circles; a Windows control is a line, a box and a
+ * cross. Their names come from `internal/labels.ts` and are read out; nothing here
+ * writes a word.
+ *
+ * **Nothing is mixed out of `currentColor`.** Every fill a control can take is a
+ * slot computed once in `windowSlots`, because a hover that changes the ink and
+ * a fill derived from the ink are the same declaration arguing with itself —
+ * which is exactly how a close button ends up white on white.
+ */
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../types.js';
+/**
+ * Whose window this is a picture of.
+ *
+ * Versions are separate entries wherever the *title bar* is what changed, which
+ * is why Windows has five and the others have one or two. XP painted its bar in
+ * Luna blue and framed the window in it; 7 made it glass; 8 threw both away for
+ * a flat square sheet; 10 ruled the bar off from the body; 11 rounded the
+ * corners and made the two one Mica sheet again. `macosx` is Aqua — the striped
+ * grey bar, the glossy lights and the square bottom corners — against the flat
+ * `macos` that replaced it.
+ *
+ * They are named the way the systems are, so `windows11` rather than `win11`
+ * and `macos` rather than `mac`. Nothing here is a copy of any of them: what is
+ * drawn is a bar, a border and three buttons at the proportions the system used,
+ * and no mark, wordmark or icon belonging to anyone else.
+ */
+export type PlWindowOs = 'macos' | 'macosx' | 'windows11' | 'windows10' | 'windows8' | 'windows7' | 'windowsxp' | 'linux';
+/** The three buttons a title bar can carry. */
+export type PlWindowControl = 'minimize' | 'maximize' | 'close';
+/** How far the window has been dragged from where the layout put it. */
+export interface PlWindowOffset {
+    x: number;
+    y: number;
+}
+/** Everything the component needs to lay a title bar out, in CSS pixels. */
+export interface PlWindowMetrics {
+    /** The title bar's height. */
+    bar: number;
+    /** The window's own corner, at the top. */
+    radius: number;
+    /** And at the bottom, which the older systems leave square. */
+    radiusBottom: number;
+    /** The hairline around the window. */
+    frame: number;
+    /**
+     * The *band* around it, which is a different thing: the stretch of the
+     * system's own colour that XP and Aero put down the sides of a window and
+     * along the bottom of it, with the content inset into it. Zero on the systems
+     * that have only a hairline.
+     */
+    band: {
+        side: number;
+        bottom: number;
+    };
+    /** The air at the leading edge of the bar. */
+    padX: number;
+    /** And at the trailing edge, which is nothing where the buttons run to it. */
+    padEnd: number;
+    /** Between one control and the next. */
+    gap: number;
+    /** The title's type size. */
+    title: number;
+    /** One control's box. */
+    control: {
+        width: number;
+        height: number;
+    };
+    /** The mark inside it. */
+    glyph: number;
+    /** How heavy the title is written. */
+    weight: number;
+    /** How much room the whole set of them takes, given how many are drawn. */
+    controlsWidth: (count: number) => number;
+    /** Aero's close button, which is wider than the two beside it. */
+    closeWidth: number;
+}
+interface PlWindowChrome {
+    bar: number;
+    radius: number;
+    /** Square on every system before the corners were rounded all the way round. */
+    radiusBottom: number;
+    padX: number;
+    /** The air at the trailing end, which is nothing where the buttons run to it. */
+    padEnd: number;
+    gap: number;
+    title: number;
+    glyph: number;
+    weight: number;
+    frame: number;
+    band: {
+        side: number;
+        bottom: number;
+    };
+    control: {
+        width: number;
+        height: number;
+    };
+    /** Aero's close button is wider than the two beside it. */
+    closeWidth?: number;
+    /** Where the title sits along the bar. */
+    titleAlign: 'start' | 'center';
+    /** Which end the controls are on. */
+    controlsSide: 'start' | 'end';
+    /**
+     * How one control is drawn.
+     *
+     * - `dot` — a flat traffic light, and `gloss-dot` the same one with Aqua's
+     *   highlight and ring on it.
+     * - `square` — a flat rectangle running to the corner of the window.
+     * - `plate` — XP's coloured, gradient-filled button.
+     * - `aero` — a pane of glass hung off the top edge, close first among equals.
+     * - `circle` — GNOME's small disc.
+     */
+    shape: 'dot' | 'gloss-dot' | 'square' | 'plate' | 'aero' | 'circle';
+    /** Whether the bar is ruled off from the body. */
+    rule: boolean;
+    /** How thick the glyphs are drawn. */
+    stroke: number;
+    /** The corner on the maximize box: Windows 11 rounds it, Windows 10 does not. */
+    boxRadius: number;
+    /** How much of the page's ink is stirred into the bar, in front and behind. */
+    tint: [number, number];
+    /** Whether an accented window carries the colour into its border as well. */
+    accentBorder: boolean;
+    /**
+     * The chrome's own colours, for the systems that painted their title bar
+     * rather than taking the page's.
+     *
+     * Fixed values rather than theme tokens, exactly as `PlMockup`'s finishes are:
+     * Luna blue is Luna blue on a page switched to dark, and a title bar that
+     * changed colour with the theme would be a drawing of the theme rather than
+     * of a window. `dark` says which way its own controls have to lighten.
+     */
+    paint: {
+        fill: string;
+        ink: string;
+        dark: boolean;
+    } | null;
+    /** What is laid over that fill: the gradient, the gloss, the stripes. */
+    image: string | null;
+    /** The title's own shadow — XP's hard one, Aero's glow, Aqua's emboss. */
+    shadow: string | null;
+    /** Whether the bar blurs what is behind it, which is what made Aero glass. */
+    glass: boolean;
+}
+export declare function windowMetrics(os: PlWindowOs, size: PlassSize): PlWindowMetrics;
+export declare function windowChrome(os: PlWindowOs): PlWindowChrome;
+export declare function orderControls(os: PlWindowOs, controls: readonly PlWindowControl[]): PlWindowControl[];
+export declare function windowSlots(options: {
+    os: PlWindowOs;
+    color: PlassColor;
+    accent: boolean;
+    transparency: number;
+    active: boolean;
+    elevation: number;
+}): React.CSSProperties;
+export interface PlPlWindowControlsProps {
+    os: PlWindowOs;
+    metrics: PlWindowMetrics;
+    controls: readonly PlWindowControl[];
+    maximized: boolean;
+    active: boolean;
+    /** What each button is called, plus the word the maximize one takes once the
+     *  window is maximized. */
+    labels: Record<PlWindowControl | 'restore', string>;
+    onCommand: (control: PlWindowControl) => void;
+}
+/**
+ * The buttons on a title bar.
+ *
+ * Real `<button>`s with real names, in every system: the whole point of drawing
+ * a window rather than a picture of one is that its controls work, and a
+ * `<div>` with a click handler on it is invisible to a keyboard. They also stop
+ * the press from reaching the bar underneath, or every close would begin by
+ * dragging the window half a pixel.
+ *
+ * Every fill is written into a slot and every state is a class that reads one,
+ * so no two declarations are ever left arguing about which of them paints the
+ * button — which is the bug that made a hovered close button vanish.
+ */
+export declare function PlWindowControls({ os, metrics, controls, maximized, active, labels, onCommand }: PlPlWindowControlsProps): React.JSX.Element | null;
+export {};

package/dist/internal/window.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{cx as t}from"./styles.js";const a={macos:{bar:38,radius:10,radiusBottom:10,padX:12,padEnd:12,gap:8,title:13,glyph:7,weight:500,frame:1,band:{side:0,bottom:0},control:{width:12,height:12},titleAlign:"center",controlsSide:"start",shape:"dot",rule:!1,stroke:1.4,boxRadius:0,tint:[6,3],accentBorder:!1,paint:null,image:null,shadow:null,glass:!1},macosx:{bar:26,radius:8,radiusBottom:0,padX:10,padEnd:10,gap:8,title:12,glyph:7,weight:700,frame:1,band:{side:0,bottom:0},control:{width:13,height:13},titleAlign:"center",controlsSide:"start",shape:"gloss-dot",rule:!0,stroke:1.5,boxRadius:0,tint:[0,0],accentBorder:!1,paint:{fill:"#e4e4e4",ink:"#333333",dark:!1},image:"repeating-linear-gradient(180deg, rgb(255 255 255 / 0.55) 0 1px, rgb(0 0 0 / 0.035) 1px 2px), linear-gradient(180deg, rgb(255 255 255 / 0.8), rgb(0 0 0 / 0.07))",shadow:"0 1px 0 rgb(255 255 255 / 0.85)",glass:!1},windows11:{bar:32,radius:8,radiusBottom:8,padX:12,padEnd:0,gap:0,title:12,glyph:10,weight:400,frame:1,band:{side:0,bottom:0},control:{width:46,height:32},titleAlign:"start",controlsSide:"end",shape:"square",rule:!1,tint:[3,1],stroke:1,boxRadius:1.6,accentBorder:!1,paint:null,image:null,shadow:null,glass:!1},windows10:{bar:30,radius:0,radiusBottom:0,padX:10,padEnd:0,gap:0,title:12,glyph:10,weight:400,frame:1,band:{side:0,bottom:0},control:{width:45,height:30},titleAlign:"start",controlsSide:"end",shape:"square",rule:!0,tint:[0,0],stroke:.9,boxRadius:0,accentBorder:!0,paint:null,image:null,shadow:null,glass:!1},windows8:{bar:32,radius:0,radiusBottom:0,padX:10,padEnd:0,gap:0,title:12,glyph:11,weight:400,frame:2,band:{side:0,bottom:0},control:{width:45,height:32},titleAlign:"start",controlsSide:"end",shape:"square",rule:!1,tint:[0,0],stroke:1,boxRadius:0,accentBorder:!0,paint:null,image:null,shadow:null,glass:!1},windows7:{bar:30,radius:7,radiusBottom:0,padX:10,padEnd:3,gap:2,title:12,glyph:10,weight:400,frame:1,band:{side:7,bottom:7},control:{width:29,height:20},closeWidth:45,titleAlign:"start",controlsSide:"end",shape:"aero",rule:!1,tint:[0,0],stroke:1.1,boxRadius:0,accentBorder:!1,paint:{fill:"rgb(198 218 242 / 0.45)",ink:"#12314f",dark:!1},image:"linear-gradient(180deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.1) 46%, rgb(255 255 255 / 0.34) 88%, rgb(255 255 255 / 0.5))",shadow:"0 0 6px rgb(255 255 255 / 0.95), 0 0 3px rgb(255 255 255 / 0.95)",glass:!0},windowsxp:{bar:30,radius:8,radiusBottom:0,padX:6,padEnd:4,gap:2,title:13,glyph:9,weight:700,frame:1,band:{side:4,bottom:4},control:{width:21,height:21},closeWidth:26,titleAlign:"start",controlsSide:"end",shape:"plate",rule:!1,tint:[0,0],stroke:1.8,boxRadius:3,accentBorder:!1,paint:{fill:"#1f66d6",ink:"#ffffff",dark:!0},image:"linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.26) 7%, rgb(0 0 0 / 0.11) 42%, rgb(0 0 0 / 0.05) 56%, rgb(255 255 255 / 0.22) 76%, rgb(255 255 255 / 0.34) 88%, rgb(0 0 0 / 0.16) 96%, rgb(0 0 0 / 0.34))",shadow:"0 1px 1px rgb(0 0 0 / 0.45)",glass:!1},linux:{bar:44,radius:12,radiusBottom:12,padX:10,padEnd:10,gap:6,title:14,glyph:10,weight:600,frame:1,band:{side:0,bottom:0},control:{width:24,height:24},titleAlign:"center",controlsSide:"end",shape:"circle",rule:!1,stroke:1.2,boxRadius:0,tint:[11,5],accentBorder:!1,paint:null,image:null,shadow:null,glass:!1}},r={xs:.8,sm:.9,md:1,lg:1.15,xl:1.3};export function windowMetrics(e,i){const t=a[e],o=r[i],round=e=>Math.round(e*o),n={width:round(t.control.width),height:round(t.control.height)},s=round(t.gap),l=void 0===t.closeWidth?n.width:round(t.closeWidth);return{bar:round(t.bar),radius:t.radius,radiusBottom:t.radiusBottom,frame:t.frame,band:{side:round(t.band.side),bottom:round(t.band.bottom)},padX:round(t.padX),padEnd:round(t.padEnd),gap:s,title:round(t.title),glyph:round(t.glyph),weight:t.weight,control:n,controlsWidth:e=>e<=0?0:l+(e-1)*n.width+(e-1)*s,closeWidth:l}}export function windowChrome(e){return a[e]}const o={macos:["close","minimize","maximize"],macosx:["close","minimize","maximize"],windows11:["minimize","maximize","close"],windows10:["minimize","maximize","close"],windows8:["minimize","maximize","close"],windows7:["minimize","maximize","close"],windowsxp:["minimize","maximize","close"],linux:["minimize","maximize","close"]};export function orderControls(e,i){return o[e].filter(e=>i.includes(e))}function veil(e,i){const t=Math.round(100*(1-i));return t>=100?e:`color-mix(in oklab, ${e} ${t}%, transparent)`}export function windowSlots(e){const{os:i,color:t,accent:r,transparency:o,active:n,elevation:s}=e,l=a[i],d=Math.min(Math.max(o,0),1),p="var(--plass-surface)",c=l.tint[n?0:1],g=0===c?p:`color-mix(in oklab, ${p} ${100-c}%, var(--plass-fg))`,h=r&&n,m=l.paint,u=m?n?m.fill:`color-mix(in oklab, ${m.fill} 45%, #c6c9ce)`:null,b=h?`var(--plass-${t}-solid)`:u??g,w=h?`var(--plass-${t}-on-solid)`:m?n?m.ink:`color-mix(in oklab, ${m.ink} 60%, transparent)`:n?"var(--plass-fg)":"var(--plass-muted-fg)",x=l.band.side>0,f=x?veil(h?`var(--plass-${t}-solid)`:u??g,d):"transparent",v=x?`color-mix(in oklab, ${h?`var(--plass-${t}-solid)`:u??"var(--plass-border)"} 72%, black)`:h&&l.accentBorder?`var(--plass-${t}-solid)`:n?"var(--plass-border)":"color-mix(in oklab, var(--plass-border) 55%, transparent)",k=h||(m?.dark??!1);return{"--p-window-bar":veil(b,d),"--p-window-bar-fg":w,"--p-window-bar-image":l.image??"none","--p-window-bar-shadow":l.shadow??"none","--p-window-body":veil(p,d),"--p-window-line":v,"--p-window-band":f,"--p-window-hover":k?"rgb(255 255 255 / 0.18)":"color-mix(in oklab, var(--plass-fg) 9%, transparent)","--p-window-press":k?"rgb(255 255 255 / 0.28)":"color-mix(in oklab, var(--plass-fg) 16%, transparent)","--p-window-shadow":`var(--plass-shadow-${n?s:Math.max(s-1,0)})`,"--p-accent":`var(--plass-${t}-accent)`,"--p-ring":`var(--plass-${t}-ring)`}}function Glyph({size:i,stroke:t,round:a,children:r}){return e("svg",{viewBox:"0 0 10 10",width:i,height:i,fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:a?"round":"square",strokeLinejoin:a?"round":"miter","aria-hidden":"true",children:r})}function controlGlyph(t,a,r,o){const n=r.stroke,s=r.boxRadius>0||"square"!==r.shape,l=r.boxRadius;return"minimize"===t?e(Glyph,{size:o,stroke:n,round:s,children:e("path",{d:"plate"===r.shape?"M2 7.5h6":"M1.5 5h7"})}):"close"===t?e(Glyph,{size:o,stroke:n,round:s,children:e("path",{d:"m1.6 1.6 6.8 6.8M8.4 1.6 1.6 8.4"})}):a?i(Glyph,{size:o,stroke:n,round:s,children:[e("rect",{x:"1.4",y:"3.4",width:"5.2",height:"5.2",rx:l}),e("path",{d:"M3.6 3.4v-2h5v5h-2"})]}):e(Glyph,{size:o,stroke:n,round:s,children:e("rect",{x:"1.5",y:"1.5",width:"7",height:"7",rx:l})})}const n={close:"#ff5f57",minimize:"#febc2e",maximize:"#28c840"},s={close:"#cf4b36",minimize:"#4b85d4",maximize:"#4b85d4"},l={macos:null,macosx:null,windows11:"#c42b1c",windows10:"#e81123",windows8:"#e81123",windows7:"#e04a45",windowsxp:null,linux:null};export function PlWindowControls({os:i,metrics:r,controls:o,maximized:d,active:p,labels:c,onCommand:g}){const h=a[i],m=orderControls(i,o);if(0===m.length)return null;const u="dot"===h.shape||"gloss-dot"===h.shape,b="circle"===h.shape,w="plate"===h.shape,x="aero"===h.shape;return e("div",{className:t("group/controls flex shrink-0 items-center",x?"self-start":"self-stretch"),style:{gap:r.gap},onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:m.map(a=>{const o="maximize"===a&&d?c.restore:c[a],m="close"===a?l[i]:null,{face:f,ink:v,image:k,plate:y}=function controlFace(e,i,t){switch(e.shape){case"dot":case"gloss-dot":return{face:t?n[i]:"color-mix(in oklab, var(--plass-fg) 22%, transparent)",ink:"rgb(0 0 0 / 0.55)",image:"gloss-dot"===e.shape?"radial-gradient(circle at 50% 26%, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0) 62%)":void 0,plate:"gloss-dot"===e.shape?"inset 0 0 0 1px rgb(0 0 0 / 0.22), inset 0 -1px 1px rgb(0 0 0 / 0.15)":void 0};case"plate":return{face:t?s[i]:`color-mix(in oklab, ${s[i]} 45%, #c6c9ce)`,ink:"#ffffff",image:"linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.05) 55%, rgb(0 0 0 / 0.14))",plate:"inset 0 0 0 1px rgb(255 255 255 / 0.4)"};case"aero":return{face:"rgb(255 255 255 / 0.3)",image:"linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.08) 52%, rgb(255 255 255 / 0.3))",plate:"inset 0 0 0 1px rgb(255 255 255 / 0.55)"};default:return{}}}(h,a,p);return e("button",{type:"button","aria-label":o,title:o,className:t("relative flex shrink-0 cursor-pointer items-center justify-center","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease)]","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]",u||b?"rounded-full":"",b?"bg-(--p-window-hover)":"",f?"bg-(--p-window-face)":"",m?"hover:bg-(--p-window-danger) hover:text-white active:bg-(--p-window-danger)":u?"":w?"hover:brightness-110 active:brightness-95":b?"hover:bg-(--p-window-press) active:bg-(--p-window-press)":x?"hover:brightness-110 active:brightness-95":"hover:bg-(--p-window-hover) active:bg-(--p-window-press)"),style:{width:u?r.control.height:"close"===a?r.closeWidth:r.control.width,height:r.control.height,borderRadius:w?h.boxRadius+1:x?"0 0 3px 3px":void 0,backgroundImage:k,boxShadow:y,color:v,...f?{"--p-window-face":f}:{},...m?{"--p-window-danger":m}:{}},onClick:()=>g(a),children:e("span",{className:t("flex items-center justify-center",u?"opacity-0 [transition:opacity_var(--plass-duration)_var(--plass-ease)] group-hover/controls:opacity-100":""),children:controlGlyph(a,d,h,r.glyph)})},a)})})}

package/dist/locales/de.d.ts

@@ -0,0 +1,3 @@
+/** German. */
+import type { PlassLabels } from '../internal/labels.js';
+export declare const de: PlassLabels;