plass-ui 1.4.0 → 1.6.0

package/dist/internal/keys.d.ts

@@ -43,11 +43,30 @@ export declare function canonicalKey(token: string): string;
  */
 export interface PlassKeyState {
     key: string;
+    /** The physical key, for when `key` is what a modifier turned it into. */
+    code?: string;
     metaKey: boolean;
     ctrlKey: boolean;
     shiftKey: boolean;
     altKey: boolean;
 }
+/**
+ * Whether the key belongs to text an input method is still composing.
+ *
+ * The Enter that commits a Korean syllable and the Escape that cancels a
+ * Japanese conversion are the input method's keys, not the page's: answering
+ * one fires a binding the reader did not press, and consuming it breaks the
+ * word they were typing. `229` is what a browser reports for such a key where
+ * `isComposing` is not set.
+ */
+export declare function isComposingKey(event: {
+    keyCode?: number;
+    isComposing?: boolean;
+} & {
+    nativeEvent?: {
+        isComposing?: boolean;
+    };
+}): boolean;
 /**
  * Does the chord carry a modifier a reader cannot type?
  *

package/dist/internal/keys.js

@@ -1 +1 @@
-export function detectOS(){if("undefined"==typeof navigator)return"windows";const e=navigator.userAgentData,t=`${e?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(t)?"mac":/win/i.test(t)?"windows":"linux"}export const keyAliases={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",numpadenter:"enter",esc:"escape",del:"delete",caps:"capslock"};export function canonicalKey(e){const t=e.toLowerCase().replace(/[\s_-]/g,"");return keyAliases[t]??t}const e={up:"arrowup",down:"arrowdown",left:"arrowleft",right:"arrowright",space:" ",plus:"+"};export function hasHardModifier(e){return e.split("+").slice(0,-1).map(canonicalKey).some(e=>"mod"===e||"ctrl"===e||"meta"===e||"alt"===e)}const t=new Set(["enter","backspace","delete","arrowleft","arrowright","arrowup","arrowdown","home","end","pageup","pagedown"]);export function editsText(e){return 1===e.length||t.has(e.toLowerCase())}export function isTypingTarget(e){if(!(e instanceof HTMLElement))return!1;if(e.isContentEditable)return!0;if("TEXTAREA"===e.tagName||"SELECT"===e.tagName)return!0;if("INPUT"===e.tagName){const t=e.type;return!["button","checkbox","color","file","image","radio","range","reset","submit"].includes(t)}return!1}export function matchesHotKey(t,r){const o=r.split("+").map(canonicalKey),a=new Set(o.slice(0,-1)),n=o[o.length-1],i=e[n]??n,c="mac"===detectOS()?t.metaKey:t.ctrlKey;return a.has("mod")===c&&a.has("shift")===t.shiftKey&&a.has("alt")===t.altKey&&!!(a.has("mod")||a.has("ctrl")===t.ctrlKey&&a.has("meta")===t.metaKey)&&t.key.toLowerCase()===i}export function hotKeyHandler(e,t){if(e||t)return r=>{if(t?.(r),e&&!r.defaultPrevented)for(const t of Object.keys(e))if(matchesHotKey(r,t))return r.preventDefault(),r.stopPropagation(),void e[t]()}}
+export function detectOS(){if("undefined"==typeof navigator)return"windows";const e=navigator.userAgentData,t=`${e?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(t)?"mac":/win/i.test(t)?"windows":"linux"}export const keyAliases={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",numpadenter:"enter",esc:"escape",del:"delete",caps:"capslock"};export function canonicalKey(e){const t=e.toLowerCase().replace(/[\s_-]/g,"");return keyAliases[t]??t}const e={up:"arrowup",down:"arrowdown",left:"arrowleft",right:"arrowright",space:" ",plus:"+"};export function isComposingKey(e){return Boolean(e.nativeEvent?.isComposing??e.isComposing)||229===e.keyCode}export function hasHardModifier(e){return e.split("+").slice(0,-1).map(canonicalKey).some(e=>"mod"===e||"ctrl"===e||"meta"===e||"alt"===e)}const t=new Set(["enter","backspace","delete","arrowleft","arrowright","arrowup","arrowdown","home","end","pageup","pagedown"]);export function editsText(e){return 1===e.length||t.has(e.toLowerCase())}export function isTypingTarget(e){if(!(e instanceof HTMLElement))return!1;if(e.isContentEditable)return!0;if("TEXTAREA"===e.tagName||"SELECT"===e.tagName)return!0;if("INPUT"===e.tagName){const t=e.type;return!["button","checkbox","color","file","image","radio","range","reset","submit"].includes(t)}return!1}export function matchesHotKey(t,o){const n=o.split("+").map(canonicalKey),r=new Set(n.slice(0,-1)),a=n[n.length-1],i=e[a]??a,s="mac"===detectOS()?t.metaKey:t.ctrlKey,c=!(1===i.length&&!/[a-z0-9]/.test(i)&&!r.has("shift"))&&t.shiftKey;if(r.has("mod")!==s)return!1;if(r.has("shift")!==c||r.has("alt")!==t.altKey)return!1;if(!r.has("mod")&&(r.has("ctrl")!==t.ctrlKey||r.has("meta")!==t.metaKey))return!1;const p=t.key.toLowerCase();return p===i||!(!/^[a-z0-9]$/.test(i)||/^[a-z0-9]$/.test(p)||!t.code)&&t.code===(/[a-z]/.test(i)?`Key${i.toUpperCase()}`:`Digit${i}`)}export function hotKeyHandler(e,t){if(e||t)return o=>{if(t?.(o),e&&!o.defaultPrevented&&!isComposingKey(o))for(const t of Object.keys(e))if(matchesHotKey(o,t))return o.preventDefault(),o.stopPropagation(),void e[t]()}}

package/dist/internal/labels.d.ts

@@ -5,6 +5,8 @@ export interface PlassLabels {
     cancel: string;
     /** The other one. */
     confirm: string;
+    /** The one button on a message that only needs to have been read. */
+    acknowledge: string;
     /** Empties a field, a picker, a search. */
     clear: string;
     /** Finishes with a picker, or with a tour. */
@@ -36,6 +38,8 @@ export interface PlassLabels {
     preview: string;
     /** What a list says when it has nothing in it. */
     empty: string;
+    /** Marks a step, or anything else, that may be left out. */
+    optional: string;
     /** The trail's landmark, and the button that opens the steps it folded away. */
     breadcrumb: string;
     breadcrumbExpand: string;
@@ -43,6 +47,9 @@ export interface PlassLabels {
     carousel: string;
     carouselPrevious: string;
     carouselNext: string;
+    /** What a slide is, said after its name: one slide's `aria-roledescription`.
+     * The reel's own is `carousel`. */
+    slide: string;
     /** The wall of pictures' own landmark. */
     gallery: string;
     /** What a drawing of numbers is called when the caller has not named it. */
@@ -56,6 +63,8 @@ export interface PlassLabels {
     commandPalettePlaceholder: string;
     /** What a sheet over the whole page is called when it has no name. */
     overlay: string;
+    /** The region the toasts are announced in. */
+    notifications: string;
     /** The pager's landmark and its four steppers, which move by a page. */
     pagination: string;
     paginationPrevious: string;
@@ -64,8 +73,10 @@ export interface PlassLabels {
     paginationLast: string;
     /** The stars' group. */
     rating: string;
-    /** The panel's landmark, the button that shuts it, and the handle that sizes it. */
+    /** The panel's landmark, the buttons that open and shut it, and the handle
+     * that sizes it. */
     sidebar: string;
+    sidebarOpen: string;
     sidebarClose: string;
     sidebarResize: string;
     /** The first link on a page, which jumps past the furniture. */
@@ -76,6 +87,16 @@ export interface PlassLabels {
     onThisPage: string;
     /** What a chat bubble says while somebody is still writing. */
     typing: string;
+    /** What a chat bubble's mark says about the message it is on. */
+    messageSending: string;
+    messageSent: string;
+    messageDelivered: string;
+    messageRead: string;
+    messageFailed: string;
+    /** What covers a spoiler until it is revealed. */
+    spoilerWarning: string;
+    /** What a file picker's drop zone says when the caller has not said. */
+    filePickerTitle: string;
     /** Read out after a link that leaves the page, and never drawn. */
     newTab: string;
     /** The two columns of a transfer, and the buttons between them. */
@@ -118,6 +139,42 @@ export interface PlassLabels {
     /** Which end of a range the calendar is currently asking for. */
     start: string;
     end: string;
+    /** A page button's name. */
+    paginationPage: (page: number) => string;
+    /** What the pager's live region says once the page has changed. */
+    paginationStatus: (page: number, count: number) => string;
+    /** What one star is called, and a read-only row with a score. The score can
+     * be a fraction, so a pack writes it the way its language writes a number:
+     * `2.5` in English, `2,5` in German. */
+    ratingValue: (value: number, count: number) => string;
+    /** And a read-only row with none. */
+    ratingNone: string;
+    /** One slide's name, which is also its dot's. */
+    carouselSlide: (index: number, count: number) => string;
+    /** Where a picture sits in a gallery: said after a tile's own words, and
+     * drawn as the viewer's counter. */
+    galleryItem: (index: number, total: number) => string;
+    /** A remove button named after what it takes away: a file, a chip. */
+    removeItem: (name: string) => string;
+    /** The row that offers what was typed as a value of its own. */
+    addCustom: (query: string) => string;
+    /** One slot of a code field, named by its place in the row. */
+    otpSlot: (index: number, count: number) => string;
+    /** What a transfer says once rows have moved, given how many and the list. */
+    transferMoved: (count: number, list: string) => string;
+    /**
+     * Why a file picker turned files away, one line per reason and given how many
+     * were turned away for it.
+     *
+     * Grouped by reason rather than named one file at a time, because the batch
+     * that goes wrong is usually the big one — a folder dropped on a picker with
+     * a `maxFiles` of five is ninety-five lines saying the same thing. What the
+     * limit itself *is* belongs in `hint`, which is where a picker already says
+     * what it accepts, so these do not repeat it.
+     */
+    filesRejectedType: (count: number) => string;
+    filesRejectedSize: (count: number) => string;
+    filesRejectedCount: (count: number) => string;
 }
 /**
  * English, and the reason the library needs no setup to read.

package/dist/internal/labels.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useDefaults as a}from"./defaults.js";export const defaultLabels={close:"Close",cancel:"Cancel",confirm:"Confirm",clear:"Clear",done:"Done",skip:"Skip",search:"Search",selectAll:"Select all",selectRow:"Select row",remove:"Remove",dismiss:"Dismiss",open:"Open",previous:"Previous",next:"Next",reveal:"Reveal",hide:"Hide",increase:"Increase",decrease:"Decrease",preview:"Preview",empty:"Nothing here",breadcrumb:"Breadcrumb",breadcrumbExpand:"Show the hidden steps",carousel:"Carousel",carouselPrevious:"Previous slide",carouselNext:"Next slide",commandPalette:"Command palette",commandPalettePlaceholder:"Search commands",gallery:"Gallery",chart:"Chart",minimize:"Minimize",maximize:"Maximize",restore:"Restore",resizeWindow:"Resize window",overlay:"Overlay",pagination:"Pagination",paginationPrevious:"Previous page",paginationNext:"Next page",paginationFirst:"First page",paginationLast:"Last page",rating:"Rating",sidebar:"Sidebar",sidebarClose:"Close sidebar",sidebarResize:"Resize sidebar",skipToContent:"Skip to content",backToTop:"Back to top",onThisPage:"On this page",typing:"Typing…",newTab:"(opens in a new tab)",transferAvailable:"Available",transferSelected:"Selected",transferToSelected:"Move to selected",transferToAvailable:"Move to available",copy:"Copy",copied:"Copied",copyFailed:"Could not copy",raw:"Raw",code:"Code",previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",thisMonth:"This month",thisYear:"This year",now:"Now",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End"};export function useLabels(){const{labels:o}=a();return e.useMemo(()=>o?{...defaultLabels,...o}:defaultLabels,[o])}
+"use client";import*as e from"react";import{useDefaults as a}from"./defaults.js";export const defaultLabels={close:"Close",cancel:"Cancel",confirm:"Confirm",acknowledge:"OK",clear:"Clear",done:"Done",skip:"Skip",search:"Search",selectAll:"Select all",selectRow:"Select row",remove:"Remove",dismiss:"Dismiss",open:"Open",previous:"Previous",next:"Next",reveal:"Reveal",hide:"Hide",increase:"Increase",decrease:"Decrease",preview:"Preview",empty:"Nothing here",optional:"Optional",breadcrumb:"Breadcrumb",breadcrumbExpand:"Show the hidden steps",carousel:"Carousel",carouselPrevious:"Previous slide",carouselNext:"Next slide",slide:"slide",commandPalette:"Command palette",commandPalettePlaceholder:"Search commands",gallery:"Gallery",chart:"Chart",minimize:"Minimize",maximize:"Maximize",restore:"Restore",resizeWindow:"Resize window",overlay:"Overlay",notifications:"Notifications",pagination:"Pagination",paginationPrevious:"Previous page",paginationNext:"Next page",paginationFirst:"First page",paginationLast:"Last page",rating:"Rating",sidebar:"Sidebar",sidebarOpen:"Open sidebar",sidebarClose:"Close sidebar",sidebarResize:"Resize sidebar",skipToContent:"Skip to content",backToTop:"Back to top",onThisPage:"On this page",typing:"Typing…",messageSending:"Sending",messageSent:"Sent",messageDelivered:"Delivered",messageRead:"Read",messageFailed:"Not delivered",spoilerWarning:"This may contain spoilers",filePickerTitle:"Drop files here, or click to browse",newTab:"(opens in a new tab)",transferAvailable:"Available",transferSelected:"Selected",transferToSelected:"Move to selected",transferToAvailable:"Move to available",copy:"Copy",copied:"Copied",copyFailed:"Could not copy",raw:"Raw",code:"Code",previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",thisMonth:"This month",thisYear:"This year",now:"Now",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End",paginationPage:e=>`Page ${e}`,paginationStatus:(e,a)=>`Page ${e} of ${a}`,ratingValue:(e,a)=>`${e.toLocaleString("en")} out of ${a}`,ratingNone:"No rating",carouselSlide:(e,a)=>`Slide ${e} of ${a}`,galleryItem:(e,a)=>`${e} of ${a}`,removeItem:e=>`Remove ${e}`,addCustom:e=>`Add “${e}”`,otpSlot:(e,a)=>`Character ${e} of ${a}`,transferMoved:(e,a)=>`${e} ${1===e?"item":"items"} moved to ${a}`,filesRejectedType:e=>`${e} ${1===e?"file is":"files are"} not an accepted type`,filesRejectedSize:e=>`${e} ${1===e?"file is":"files are"} too large`,filesRejectedCount:e=>`${e} ${1===e?"file":"files"} did not fit`};export function useLabels(){const{labels:o}=a();return e.useMemo(()=>o?{...defaultLabels,...o}:defaultLabels,[o])}

package/dist/internal/link.d.ts

@@ -16,3 +16,20 @@
  * that can drift, and the one that drifts is the one nobody reads.
  */
 export declare function safeRel(target: string | undefined, rel: string | undefined): string | undefined;
+/**
+ * Whether an address is one this library will point an `href` at.
+ *
+ * Relative addresses pass, and so do `http`, `https` and `mailto`. Everything
+ * else is turned down, which in practice means `javascript:` — an address that
+ * runs code instead of going somewhere. React 19 refuses to write one, but the
+ * peer range starts at React 18, which only warns and then writes it.
+ *
+ * The test is done on the address with tabs and line breaks taken out and the
+ * leading control characters and spaces trimmed, because that is the address the
+ * browser navigates to: a tab written into the middle of a scheme is gone by the
+ * time it counts. Only the scheme is read, so the rest is handed back untouched.
+ *
+ * Here beside `safeRel` for the same reason that one is here: which addresses a
+ * component will follow is one decision, and it belongs in one place.
+ */
+export declare function safeHref(href: string | undefined): string | undefined;

package/dist/internal/link.js

@@ -1 +1 @@
-export function safeRel(e,n){return void 0===e||""===e||"_self"===e?n:[...new Set([...(n??"").split(/\s+/).filter(Boolean),"noopener","noreferrer"])].join(" ")}
+export function safeRel(e,t){return void 0===e||""===e||"_self"===e?t:[...new Set([...(t??"").split(/\s+/).filter(Boolean),"noopener","noreferrer"])].join(" ")}const e=new Set(["http:","https:","mailto:"]),t=/^[a-z][a-z0-9+.-]*:/i;export function safeHref(r){if(void 0===r)return;const n=r.replace(/[\t\n\r]/g,"").replace(/^[\0- ]+/,""),o=t.exec(n);return null===o||e.has(o[0].toLowerCase())?r:void 0}

package/dist/internal/notch.d.ts

@@ -0,0 +1,83 @@
+/**
+ * The label in the field's own top edge — `labelPlacement="notch"`.
+ *
+ * One module because every field-shaped control in the library draws the same
+ * notch: a PlTextField, a PlSelect's trigger, a PlCombobox, a PlNumberField, a
+ * PlFilePicker's drop zone and every picker that goes through `internal/picker`
+ * have to be indistinguishable along their top edge or a form looks like two
+ * forms stacked on each other.
+ *
+ * **The cut is real.** A `<legend>` takes a segment out of its `<fieldset>`'s
+ * border, and that is the only way to open a gap in a line without knowing what
+ * is behind it. The usual trick — a label with the page's own background colour
+ * painted over the border — cannot work here twice over: a library that does
+ * not paint the page has no idea what colour it is, and a Plass field is
+ * translucent, so a patch of flat colour would read as a patch of flat colour.
+ *
+ * **The fieldset is a sibling of the control rather than the control itself.**
+ * Half the shells this is drawn on are `<button>`s — a Select's trigger, a file
+ * picker's drop zone — and a button cannot contain a fieldset. So the frame
+ * below wraps the shell, the shell is drawn exactly as it always was, and the
+ * edge is laid over it with its own border. The shell's own border goes
+ * transparent for the length of it; `notchShellStyle` is that one declaration,
+ * written inline because it has to beat a `hover:` and a `disabled` rule that
+ * are already in the class string.
+ */
+import * as React from 'react';
+import type { PlassDensity, PlassSize, PlassVariant } from '../types.js';
+/**
+ * What the shell gives up while the edge is drawing for it.
+ *
+ * Inline rather than a class: every field's shell already carries a
+ * `border-color` at rest, another on hover, another on focus and another when
+ * disabled, and a utility added on top of those would be one more declaration
+ * of the same property at the same specificity — whichever of them Tailwind
+ * happened to emit last would win. The border itself stays, transparent, so the
+ * control's inside is the same size it was.
+ */
+export declare const notchShellStyle: React.CSSProperties;
+export interface FieldNotchProps {
+    /**
+     * Whether to draw one at all. `false` renders the shell and nothing else, so
+     * a call site wraps its control once and unconditionally rather than writing
+     * the whole thing out twice — which is what keeps the two placements from
+     * drifting into two controls.
+     */
+    notched: boolean;
+    size: PlassSize;
+    density: PlassDensity;
+    variant: PlassVariant;
+    /** Unavailable — the edge dims with the control. */
+    disabled?: boolean;
+    /** Shown but not editable — the edge stays and stops answering. */
+    readOnly?: boolean;
+    /**
+     * The whole edge, when it is not a field's hairline — width, style, colour and
+     * every state, replacing the three maps above.
+     *
+     * A PlFilePicker's drop zone is the one caller that needs it: its edge is 2px
+     * and dashed in all three variants, and it has a state no field has, a file
+     * being dragged over the box. Passed as one resolved string rather than added
+     * to the maps, for the reason every component in this library resolves its own
+     * states with an if/else — two utilities for one property at one specificity
+     * are settled by the order Tailwind happened to emit them in.
+     */
+    edgeClassName?: string;
+    /**
+     * The element that names the control, ready to render: a `Field.Label` for a
+     * field that has one, or the `<span>` an `aria-labelledby` points at. The
+     * same element the stacked placement renders, so the two cannot drift.
+     */
+    label: React.ReactNode;
+    /** The control's shell, drawn exactly as it is without a notch. */
+    children: React.ReactNode;
+}
+/**
+ * Lays the notched edge over a control's shell.
+ *
+ * The frame is what the edge is positioned against and what hover and focus are
+ * read from, so the shell has to be inside it — and the shell is rendered
+ * untouched, which is the point: a notch is a decision about the label, not a
+ * second way of drawing a field.
+ */
+export declare function FieldNotch({ notched, size, density, variant, disabled, readOnly, edgeClassName, label, children }: FieldNotchProps): React.JSX.Element;

package/dist/internal/notch.js

@@ -0,0 +1 @@
+"use client";import{Fragment as r,jsx as o,jsxs as e}from"react/jsx-runtime";import{cx as s,metaTextClasses as t,radiusClasses as l,transitionClasses as d}from"./styles.js";const a={xs:"-top-[5px]",sm:"-top-[5.5px]",md:"-top-[6px]",lg:"-top-[6.5px]",xl:"-top-[7px]"},i={xs:"mt-[5px]",sm:"mt-[5.5px]",md:"mt-[6px]",lg:"mt-[6.5px]",xl:"mt-[7px]"},n={default:{xs:"ms-2",sm:"ms-2.5",md:"ms-3",lg:"ms-5",xl:"ms-6"},compact:{xs:"ms-2",sm:"ms-2.5",md:"ms-3",lg:"ms-3.5",xl:"ms-4"}},p={xs:"px-0.5",sm:"px-0.5",md:"px-1",lg:"px-1",xl:"px-1"},m={solid:/* @__PURE__ */["border border-transparent","group-focus-within/field:[border-color:var(--p-ring)]"].join(" "),glass:/* @__PURE__ */["border [border-color:var(--plass-border)]","group-hover/field:[border-color:var(--p-line)]","group-focus-within/field:[border-color:var(--p-ring)]"].join(" "),ghost:/* @__PURE__ */["border border-transparent","group-focus-within/field:[border-color:var(--p-ring)]"].join(" ")},c={solid:"border border-transparent",glass:"border [border-color:var(--plass-border)]",ghost:"border border-transparent"},b={solid:"border border-transparent opacity-50",glass:/* @__PURE__ */["border [border-color:var(--plass-border)] opacity-50","forced-colors:[border-color:GrayText]"].join(" "),ghost:"border border-transparent opacity-50"},x=/* @__PURE__ */["group-has-[:focus-visible]/field:[border-width:2px]","group-has-[:focus-visible]/field:forced-colors:[border-color:Highlight]"].join(" ");export const notchShellStyle={borderColor:"transparent"};export function FieldNotch({notched:g,size:f,density:h,variant:u,disabled:v=!1,readOnly:j=!1,edgeClassName:y,label:w,children:N}){return g?e("div",{className:s("group/field relative flex w-full",i[f]),children:[N,o("fieldset",{role:"presentation",className:s("pointer-events-none absolute inset-x-0 bottom-0 m-0 min-w-0 p-0",a[f],l[f],d,y??(v?b[u]:j?c[u]:`${m[u]} ${x}`)),children:o("legend",{className:s("pointer-events-auto font-semibold leading-none",t[f],n[h][f],p[f],v?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:w})})]}):o(r,{children:N})}

package/dist/internal/page-layout.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { PlassDirection } from './direction.js';
 import type { PlassBreakpoint, PlassSide } from '../types.js';
 /**
  * The vocabulary a page's structure is written in, and the context the four
@@ -129,12 +130,18 @@ export declare function useCollapsed(breakpoint: PlPageLayoutCollapse): boolean;
  * question and a layout flips under RTL on its own. A drawer is attached to an
  * edge of the *window*, which `PlassSide` names physically for the same reason
  * a tooltip above a button is above it in every writing direction — so the two
- * have to be translated, and the document's own direction is what translates
- * them.
+ * have to be translated.
  *
- * Read during render rather than in an effect, which is safe here for a
- * narrower reason than it looks: the only caller is a sidebar that has already
- * collapsed, and collapsing is a client-side answer. There is no server render
- * of this to disagree with.
+ * `direction` is what the nearest `PlassProvider` was told, and it wins for the
+ * reason it wins there: a provider given a direction is describing a subtree
+ * that runs the other way from the page, and a drawer is portalled out of that
+ * subtree, so the document is the one place that cannot say which way it runs.
+ * Without one, the document's own direction is the answer, as it is for the
+ * provider.
+ *
+ * The document is read during render rather than in an effect, which is safe
+ * here for a narrower reason than it looks: the only caller is a sidebar that
+ * has already collapsed, and collapsing is a client-side answer. There is no
+ * server render of this to disagree with.
  */
-export declare function drawerSide(side: PlassSidebarSide): PlassSide;
+export declare function drawerSide(side: PlassSidebarSide, direction?: PlassDirection): PlassSide;

package/dist/internal/page-layout.js

@@ -1 +1 @@
-"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"}
+"use client";import*as e from"react";import{belowQuery as t}from"./breakpoints.js";import{useMediaQuery as n}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 n("none"===e?null:function collapseQuery(e){return"xs"===e?null:t(e)}(e))}export function drawerSide(e,t){const n=t?"rtl"===t:"undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?n?"right":"left":n?"left":"right"}

package/dist/internal/picker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PlassPickerLabels } from './calendar.js';
-import type { PlassColor, PlassElevation, PlassFieldClassNames, PlassSize, PlassStyleProps } from '../types.js';
+import type { PlassColor, PlassElevation, PlassFieldClassNames, PlassFieldLabelPlacement, PlassSize, PlassStyleProps } from '../types.js';
 /**
  * The shell all four pickers wear: a field-shaped trigger with a popup hanging
  * off it.
@@ -41,6 +41,41 @@ export declare function popupSlots(color: PlassColor, elevation: PlassElevation)
 export declare const pickerPopupClasses: string;
 /** The popup's own padding, one track tighter than a control's. */
 export declare const popupPaddingClasses: Record<PlassSize, string>;
+export interface PopupArrowProps {
+    /**
+     * The `Arrow` part of whichever Base UI popup this is — `Popover.Arrow`,
+     * `PreviewCard.Arrow`, `Tooltip.Arrow`. Each of the three roots has its own,
+     * and only the primitive knows where to put it.
+     */
+    as: React.ElementType<{
+        className?: string;
+        children?: React.ReactNode;
+    }>;
+    /** How wide the wedge is, in pixels. Its height is half of that. */
+    size: number;
+}
+/**
+ * The wedge that points a floating sheet at what opened it.
+ *
+ * One drawing for all three, and it is the *stroked* one: a triangle filled
+ * with the sheet's own `--plass-glass-press`, with the hairline drawn along its
+ * two slanted sides only.
+ *
+ * Both of those are the glass rules rather than a preference. The fill is the
+ * same one declaration the plate carries, so the wedge stays on the plate's
+ * rung of the opacity ladder — a wedge stacked out of a line triangle and a
+ * fill triangle composites two translucent whites and comes out lighter than
+ * the sheet it grew from, which in the dark theme is 0.25 against the plate's
+ * 0.15. And `--plass-glass-line` is a cut edge rather than a colour to fill
+ * with, so it is stroked: on the two sides that are a cut edge, and not across
+ * the base, which is not one — the plate is on the other side of it.
+ *
+ * `non-scaling-stroke` is what keeps that hairline one pixel at every `size`.
+ * The path is written in a 10×5 viewBox and the box is drawn at whatever the
+ * component's ladder says, so a stroke that scaled would be thinner than the
+ * plate's border on a small sheet and thicker on a large one.
+ */
+export declare function PopupArrow({ as: Arrow, size }: PopupArrowProps): React.JSX.Element;
 export interface PlassPickerShellProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'defaultValue'> {
     /**
      * Drop shadow depth of the *trigger*. `0`, like a `PlTextField`: a field is
@@ -49,8 +84,14 @@ export interface PlassPickerShellProps extends PlassStyleProps, Omit<React.Compo
      * @default 0
      */
     elevation?: PlassElevation;
-    /** Label above the trigger. */
+    /** The name of what the control holds. */
     label?: React.ReactNode;
+    /**
+     * Where the `label` goes — above the trigger, or in its top edge.
+     * Falls back to the nearest `PlassProvider`, then to `top`.
+     * @default 'top'
+     */
+    labelPlacement?: PlassFieldLabelPlacement;
     /** Helper text below it. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the control invalid. */
@@ -88,11 +129,13 @@ interface InternalShellProps extends PlassPickerShellProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     labels: PlassPickerLabels;
-    /** `<input type="hidden">` rows, so the control submits with a form. */
-    hiddenValues?: Array<{
-        name: string;
-        value: string;
-    }>;
+    /** The name the value submits under. */
+    name?: string;
+    /**
+     * The value as a form submits it: one string, or one row per entry. An empty
+     * string, a list with an empty entry and an empty list are no value.
+     */
+    formValue: string | readonly string[];
     children: React.ReactNode;
     triggerRef?: React.Ref<HTMLButtonElement>;
 }
@@ -104,7 +147,7 @@ interface InternalShellProps extends PlassPickerShellProps {
  * and the way `invalid` re-points the whole colour family at `danger` so the
  * edge, the ring and the message turn over together.
  */
-export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
+export declare function PickerShell({ variant, size, color, density, elevation, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, name, formValue, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
 /**
  * The row of shortcuts under a picker's panel.
  *

package/dist/internal/picker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Field as a}from"@base-ui/react/field";import{Popover as r}from"@base-ui/react/popover";import{CloseIcon as t}from"./icons.js";import{WidthSizer as i}from"./sizer.js";import{chipRemoveClasses as n,controlHeightClasses as o,controlTextLeadingClasses as p,cx as d,disabledClasses as c,fieldReadOnlyClasses as u,fieldRestClasses as m,focusWithinRingClasses as f,gapClasses as h,glassClasses as g,iconClasses as x,metaTextClasses as b,paddingXClasses as v,radiusClasses as y,stackGapClasses as N,surfaceSlots as P,transitionClasses as j}from"./styles.js";export function popupSlots(e,l){return{...P(e,l),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const w=/* @__PURE__ */["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,f,x].join(" ");export const pickerPopupClasses=/* @__PURE__ */[g,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:f="glass",size:g="md",color:x="primary",density:j="default",elevation:k=0,label:C,description:$,error:z,invalid:O,startIcon:F,fullWidth:R=!1,disabled:S=!1,readOnly:q=!1,required:D=!1,id:I,className:_,classNames:B,style:E,display:L,samples:T,empty:V,clearable:W=!1,onClear:A,open:G,onOpenChange:H,labels:J,hiddenValues:K,children:M,triggerRef:Q,...U}){const X=s.useId(),Y=I??`${X}-trigger`,Z=`${X}-label`,ee=`${X}-description`,le=`${X}-error`,se=null!=z&&!1!==z&&""!==z,ae=O??se,re=ae?"danger":x,te=S||q,ie=[$?ee:null,se?le:null].filter(Boolean).join(" ")||void 0;return l(a.Root,{disabled:S,invalid:ae,className:d("flex-col align-top",N[g],R?"flex w-full":"inline-flex",_),style:{...P(re,k),...E},...U,children:[C?e(a.Label,{id:Z,htmlFor:Y,className:d(b[g],"font-semibold",S?"text-(--plass-muted-fg)":"text-(--plass-fg)",B?.label),children:C}):null,l(r.Root,{open:G,onOpenChange:e=>H(e),children:[l("span",{className:d(w,o[g],p[g],y[g],h[g],v[j][g],S?c[f]:q?u[f]:m[f],B?.control),children:[l(r.Trigger,{id:Y,ref:Q,disabled:S,"aria-labelledby":C?Z:void 0,"aria-describedby":ie,"aria-required":D||void 0,"aria-invalid":ae||void 0,className:d("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",h[g],"[outline:none]",te?"cursor-default":"cursor-pointer"),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:F}):null,l("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:d("w-full truncate",V?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:L}),e(i,{samples:T??[]})]})]}),!W||V||te?null:e("button",{type:"button","aria-label":J.clear,className:d(n,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation(),A()},children:e(t,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,align:"start",children:e(r.Popup,{initialFocus:!1,className:d(pickerPopupClasses,y[g],popupPaddingClasses[g],p[g]),style:popupSlots(re,3),children:M})})})]}),$?e(a.Description,{id:ee,className:d(b[g],"text-(--plass-muted-fg)",B?.description),children:$}):null,se?e(a.Error,{id:le,match:!0,className:d(b[g],"text-(--p-accent)",B?.error),children:z}):null,K?.map((l,s)=>e("input",{type:"hidden",name:l.name,value:l.value},s))]})}export function PickerFooter({size:l,children:s}){return e("div",{className:d("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",h[l]),children:s})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Field as t}from"@base-ui/react/field";import{Popover as a}from"@base-ui/react/popover";import{FormControl as r,leaveFormControl as i}from"./form.js";import{glowPointerMove as o}from"./glow.js";import{CloseIcon as n}from"./icons.js";import{WidthSizer as d}from"./sizer.js";import{FieldNotch as p,notchShellStyle as c}from"./notch.js";import{useDefaults as m}from"./defaults.js";import{chipRemoveClasses as u,controlHeightClasses as f,controlTextLeadingClasses as h,cx as g,disabledClasses as x,fieldReadOnlyClasses as b,fieldRestClasses as v,focusWithinRingClasses as y,gapClasses as N,glassClasses as j,hasContent as w,iconClasses as P,metaTextClasses as k,paddingXClasses as $,radiusClasses as z,stackGapClasses as C,surfaceSlots as O,transitionClasses as B}from"./styles.js";export function popupSlots(e,l){return{...O(e,l),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const I=/* @__PURE__ */["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",B,P].join(" "),R=y;export const pickerPopupClasses=/* @__PURE__ */[j,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};const q=/* @__PURE__ */["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" ");export function PopupArrow({as:s,size:t}){return e(s,{className:q,children:l("svg",{width:t,height:t/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--plass-glass-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})})}export function PickerShell({variant:y="glass",size:j="md",color:P="primary",density:B="default",elevation:q=0,label:D,labelPlacement:E,description:F,error:M,invalid:S,startIcon:L,fullWidth:V=!1,disabled:W=!1,readOnly:_=!1,required:A=!1,id:T,className:G,classNames:H,style:J,display:K,samples:Q,empty:U,clearable:X=!1,onClear:Y,open:Z,onOpenChange:ee,labels:le,name:se,formValue:te,children:ae,triggerRef:re,...ie}){const oe=s.useId(),ne=T??`${oe}-trigger`,de=`${oe}-label`,pe=`${oe}-value`,ce=`${oe}-description`,me=`${oe}-error`,ue=m(),fe="notch"===(E??ue.labelPlacement??"top")&&w(D),he=null!=M&&!1!==M&&""!==M,ge=S??he,xe=ge?"danger":P,be=!W&&!_,ve=W||_,ye=s.useRef(null),Ne=e(t.Label,{id:de,htmlFor:ne,className:g(k[j],"font-semibold",W?"text-(--plass-muted-fg)":"text-(--plass-fg)",H?.label),children:D});return l(t.Root,{disabled:W,invalid:ge,className:g("flex-col align-top",C[j],V?"flex w-full":"inline-flex",G),style:{...O(xe,q),...J},...ie,children:[w(D)&&!fe?Ne:null,l(a.Root,{open:Z,onOpenChange:e=>ee(e),children:[e(p,{notched:fe,size:j,density:B,variant:y,disabled:W,readOnly:_,label:Ne,children:l("span",{style:fe?c:void 0,onPointerMove:o(be),className:g(I,fe?"":R,f[j],h[j],z[j],N[j],$[B][j],W?x[y]:_?b[y]:v[y],be?"plass-glow":"",H?.control),children:[e(t.Validity,{children:({validity:s})=>{const t=!1===s.valid,r=[F?ce:null,he||t&&!W&&!0!==S?me:null].filter(Boolean).join(" ")||void 0;return l(a.Trigger,{id:ne,ref:re,disabled:W,"aria-labelledby":D?`${de} ${pe}`:void 0,"aria-describedby":r,"aria-required":A||void 0,"aria-invalid":ge||t||void 0,onBlur:()=>{Z||i(ye.current)},className:g("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",N[j],"[outline:none]",ve?"cursor-default":"cursor-pointer"),children:[L?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:L}):null,l("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{id:pe,className:g("w-full truncate",U?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:K}),V?null:e(d,{samples:Q??[]})]})]})}}),!X||U||ve?null:e("button",{type:"button","aria-label":le.clear,className:g(u,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation(),Y()},children:e(n,{})})]})}),e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,align:"start",children:e(a.Popup,{initialFocus:!1,className:g(pickerPopupClasses,z[j],popupPaddingClasses[j],h[j]),style:popupSlots(xe,3),children:ae})})})]}),F?e(t.Description,{id:ce,className:g("m-0",k[j],"text-(--plass-muted-fg)",H?.description),children:F}):null,e(t.Error,he?{id:me,match:!0,className:g(k[j],"text-(--p-accent)",H?.error),children:M}:{id:me,className:g(k[j],"text-(--p-accent)",H?.error)}),e(r,{ref:ye,name:se,value:te,required:A&&!_,disabled:W,standIn:()=>ye.current?.ownerDocument.getElementById(ne)})]})}export function PickerFooter({size:l,children:s}){return e("div",{className:g("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",N[l]),children:s})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}

package/dist/internal/progress.d.ts

@@ -120,7 +120,13 @@ export declare const plateGapClasses: Record<PlassSize, string>;
  * also why the movement is on `width` and never on the paint: a gradient cannot
  * be transitioned, and a length can.
  */
-export declare const trackClasses = "bg-(--plass-track)";
+export declare const trackClasses = "bg-(--plass-track) forced-colors:border forced-colors:[border-color:CanvasText]";
+/**
+ * The filled part of a track. Forced-colours mode drops the gradient and
+ * repaints the groove in the page's colour, so there the track gets an edge and
+ * the fill the system's highlight.
+ */
+export declare const fillClasses = "[background-image:var(--p-fill)] forced-colors:[background-color:Highlight] forced-colors:[border-color:Highlight] forced-colors:[color:HighlightText]";
 /** The bar's own duration, one step slower than a control's, so a fill reads as travel. */
 export declare const fillTransitionClasses = "[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";
 /**
@@ -134,13 +140,15 @@ export declare function progressFraction(value: number | null | undefined, min:
 /**
  * What the value reads as, both on screen and to a screen reader.
  *
- * Base UI's own default is `${value}%`, which is right only when the range
- * happens to be 0–100 — "3%" for step 3 of 4 is worse than saying nothing. So
- * the percentage is computed from the fraction, and a caller who passed
- * `format` gets Base UI's formatted string instead, because at that point they
- * have said what the number means.
+ * Without `format` it is a percentage of the range rather than of 100 — "3%"
+ * for step 3 of 4 is worse than saying nothing — written in `locale`, so a page
+ * in German reads "75 %". Base UI's own default is that percentage too, but it
+ * reads a value that is not finite as indeterminate where `progressFraction`
+ * clamps it, so the percentage is written here from the fraction. A caller who
+ * passed `format` gets Base UI's formatted string, in the same `locale`, because
+ * at that point they have said what the number means.
  */
-export declare function progressText(fraction: number | null, formatted: string | null, hasFormat: boolean): string | null;
+export declare function progressText(fraction: number | null, formatted: string | null, hasFormat: boolean, locale: string | undefined): string | null;
 /**
  * The same string, shaped for Base UI's `getAriaValueText`.
  *
@@ -148,4 +156,4 @@ export declare function progressText(fraction: number | null, formatted: string
  * to Base UI — it already announces indeterminate progress, and re-inventing
  * that here would be one more English string the library has to own.
  */
-export declare function progressAriaText(fraction: number | null, hasFormat: boolean): ((formatted: string | null) => string) | undefined;
+export declare function progressAriaText(fraction: number | null, hasFormat: boolean, locale: string | undefined): ((formatted: string | null) => string) | undefined;

package/dist/internal/progress.js

@@ -1 +1 @@
-export function progressSlots(s){return{"--p-fill":`var(--plass-${s}-fill)`,"--p-solid":`var(--plass-${s}-solid)`,"--p-solid-to":`var(--plass-${s}-solid-to)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-press":`var(--plass-${s}-soft-press)`}}export const barThicknessClasses={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const trackClasses="bg-(--plass-track)";export const fillTransitionClasses="[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";export function progressFraction(s,r,e){return null==s||Number.isNaN(s)||e<=r?null:Math.min(1,Math.max(0,(s-r)/(e-r)))}export function progressText(s,r,e){return null===s?null:e?r:`${Math.round(100*s)}%`}export function progressAriaText(s,r){if(null!==s)return e=>progressText(s,e,r)??""}
+import{numberFormatter as s}from"./format.js";import{forcedFieldEdgeClasses as r,forcedFillClasses as e}from"./styles.js";export function progressSlots(s){return{"--p-fill":`var(--plass-${s}-fill)`,"--p-solid":`var(--plass-${s}-solid)`,"--p-solid-to":`var(--plass-${s}-solid-to)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-press":`var(--plass-${s}-soft-press)`}}export const barThicknessClasses={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const trackClasses=`bg-(--plass-track) ${r}`;export const fillClasses=`[background-image:var(--p-fill)] ${e}`;export const fillTransitionClasses="[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";export function progressFraction(s,r,e){return null==s||Number.isNaN(s)||e<=r?null:Math.min(1,Math.max(0,(s-r)/(e-r)))}const t={style:"percent"};export function progressText(r,e,o,l){return null===r?null:o?e:s(l,t).format(r)}export function progressAriaText(s,r,e){if(null!==s)return t=>progressText(s,t,r,e)??""}

package/dist/internal/scramble.d.ts

@@ -12,6 +12,10 @@
  * of.
  *
  * `characters` overrides it for the caller who genuinely wants a terminal look.
+ *
+ * **A character is a grapheme**, what a reader counts as one: an emoji, a flag,
+ * a letter with its accent. Cut by code point instead, an emoji is halved into
+ * pieces that each draw as a broken glyph, and the noise flickers with them.
  */
 /** Everything in the text that is worth scrambling: no spaces, no repeats. */
 export declare function poolOf(text: string): string;

package/dist/internal/scramble.js

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

package/dist/internal/scroll-target.d.ts

@@ -0,0 +1,5 @@
+import type * as React from 'react';
+/** What a component scrolls, or follows the scroll of. */
+export type PlassScrollTarget = Window | HTMLElement | React.RefObject<HTMLElement | null> | (() => Window | HTMLElement | null);
+/** What `target` names, or the window when it names nothing. */
+export declare function resolveScrollTarget(target: PlassScrollTarget | undefined): Window | HTMLElement | null;

package/dist/internal/scroll-target.js

@@ -0,0 +1 @@
+export function resolveScrollTarget(n){return void 0===n?"undefined"==typeof window?null:window:"function"==typeof n?n():"current"in n?n.current:n}

package/dist/internal/steps.js

@@ -1 +1 @@
-export const bulletSizeValues={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"};export const bulletGapClasses={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const bulletStatusClasses={complete:"[background-image:var(--p-fill)] text-(--p-on-solid)",current:"[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:0_0_0_0.25rem_var(--p-soft)]",upcoming:"border-2 bg-(--plass-surface) text-(--plass-muted-fg) [border-color:var(--plass-border)]"};export const connectorColorClasses={complete:"[border-color:var(--p-line-hover)]",current:"[border-color:var(--plass-border)]",upcoming:"[border-color:var(--plass-border)]"};export const connectorStyleClasses={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""};export const titleStatusClasses={complete:"text-(--plass-fg)",current:"text-(--p-accent)",upcoming:"text-(--plass-muted-fg)"};export function statusAt(e,o){return null===o?"upcoming":e<o?"complete":e===o?"current":"upcoming"}
+import{forcedFillClasses as e}from"./styles.js";export const bulletSizeValues={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"};export const bulletGapClasses={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const bulletStatusClasses={complete:`[background-image:var(--p-fill)] text-(--p-on-solid) ${e}`,current:`[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:0_0_0_0.25rem_var(--p-soft)] ${e} forced-colors:[outline:2px_solid_Highlight] forced-colors:[outline-offset:2px]`,upcoming:"border-2 bg-(--plass-surface) text-(--plass-muted-fg) [border-color:var(--plass-border)]"};export const connectorColorClasses={complete:"[border-color:var(--p-line-hover)]",current:"[border-color:var(--plass-border)]",upcoming:"[border-color:var(--plass-border)]"};export const connectorStyleClasses={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""};export const titleStatusClasses={complete:"text-(--plass-fg)",current:"text-(--p-accent)",upcoming:"text-(--plass-muted-fg)"};export function statusAt(e,o){return null===o?"upcoming":e<o?"complete":e===o?"current":"upcoming"}