plass-ui 1.6.0 → 1.8.0

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PlassDirection } from './direction.js';
-import type { PlassBreakpoint, PlassSide } from '../types.js';
+import type { PlassBreakpoint, PlassPosition, PlassSide } from '../types.js';
 /**
  * The vocabulary a page's structure is written in, and the context the four
  * components that build one share.
@@ -75,6 +75,12 @@ export interface PlPageLayoutContextValue {
      * reliably as one that is not.
      */
     register: (slot: PlPageLayoutSlot, node: HTMLElement | null) => void;
+    /**
+     * Measures the registered bars again, for the one change to a bar that
+     * neither its ref nor the layout's `ResizeObserver` reports: its `position`,
+     * which decides what its height is reserved for. See `useSlotPosition`.
+     */
+    remeasure: () => void;
     /** Where the sidebars stop being columns. */
     collapseBelow: PlPageLayoutCollapse;
     /** Whether each sidebar's drawer is open. Only meaningful while it is collapsed. */
@@ -84,6 +90,16 @@ export interface PlPageLayoutContextValue {
     scroll: PlPageLayoutScroll;
 }
 export declare const PlPageLayoutContext: React.Context<PlPageLayoutContextValue>;
+/**
+ * Tells the layout around a bar that the bar's `position` changed.
+ *
+ * A bar that turns from `static` to `fixed` keeps its element, so its ref is
+ * not handed over again, and usually its size, so the layout's observer has
+ * nothing to report either — and the layout went on reserving nothing for a
+ * bar that had left the flow, until something else happened to resize it. Not
+ * on the first commit, which the layout measures on its own.
+ */
+export declare function useSlotPosition(position: PlassPosition): void;
 /**
  * Which end of the band the sidebar being rendered right now takes.
  *
@@ -132,16 +148,11 @@ export declare function useCollapsed(breakpoint: PlPageLayoutCollapse): boolean;
  * a tooltip above a button is above it in every writing direction — so the two
  * have to be translated.
  *
- * `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.
+ * `direction` is the caller's to resolve: what the nearest `PlassProvider` was
+ * told, which 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 — and without one, the document's own
+ * direction, as it is for the provider.
  */
-export declare function drawerSide(side: PlassSidebarSide, direction?: PlassDirection): 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 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"}
+"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:()=>{},remeasure:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export function useSlotPosition(t){const{remeasure:n}=e.useContext(PlPageLayoutContext),o=e.useRef(t);e.useLayoutEffect(()=>{o.current!==t&&(o.current=t,n())},[t,n])}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="rtl"===t;return"start"===e?n?"right":"left":n?"left":"right"}

package/dist/internal/picker.d.ts

@@ -31,6 +31,9 @@ import type { PlassColor, PlassElevation, PlassFieldClassNames, PlassFieldLabelP
  * filled token in the library that has to be found without being read, which is
  * the day you picked. So the sheet stays clear glass and the family arrives in
  * the two fill slots the chosen cell reads.
+ *
+ * A `PlCalendar` is the same sheet set on the page instead of in a popup, and
+ * takes the same slots for the same reason.
  */
 export declare function popupSlots(color: PlassColor, elevation: PlassElevation): React.CSSProperties;
 /**
@@ -87,7 +90,10 @@ export interface PlassPickerShellProps extends PlassStyleProps, Omit<React.Compo
     /** The name of what the control holds. */
     label?: React.ReactNode;
     /**
-     * Where the `label` goes — above the trigger, or in its top edge.
+     * Where the `label` goes — above the trigger, in its top edge, or inside it
+     * where the value would be written until the trigger is focused, open or
+     * holds a value. A trigger that draws a glyph at its start keeps a `float`
+     * label in the edge, because the glyph is where it would rest.
      * Falls back to the nearest `PlassProvider`, then to `top`.
      * @default 'top'
      */
@@ -147,7 +153,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, 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;
+export declare function PickerShell({ variant, size, color, density, elevation, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, name, formValue, children, triggerRef, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...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 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)"})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Field as a}from"@base-ui/react/field";import{Popover as s}from"@base-ui/react/popover";import{FormControl as r,leaveFormControl as i,useDisabled as o,useFieldsetDisabled as n}from"./form.js";import{glowPointerMove as d}from"./glow.js";import{CloseIcon as p}from"./icons.js";import{WidthSizer as c}from"./sizer.js";import{textOf as m}from"./text.js";import{FieldNotch as u,floatPlaceholderClassName as f,notchShellStyle as h,resolveNotch as g}from"./notch.js";import{useDefaults as x}from"./defaults.js";import{chipRemoveClasses as b,controlHeightClasses as v,controlTextLeadingClasses as y,cx as N,disabledClasses as w,fieldDescriptionClasses as j,fieldReadOnlyClasses as P,fieldRestClasses as k,fieldSlots as $,focusWithinRingClasses as z,gapClasses as C,glassClasses as B,hasContent as D,iconClasses as E,metaTextClasses as I,paddingXClasses as O,radiusClasses as R,stackGapClasses as S,surfaceSlots as q,transitionClasses as F}from"./styles.js";export function popupSlots(e,t){return{...q(e,t),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const M=/* @__PURE__ */["relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",F,E].join(" "),L=z;export const pickerPopupClasses=/* @__PURE__ */[B,"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)]","motion-reduce:[transition-duration:0ms]","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 T=/* @__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:l,size:a}){return e(l,{className:T,children:t("svg",{width:a,height:a/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:z="glass",size:B="md",color:E="primary",density:q="default",elevation:F=0,label:T,labelPlacement:V,description:W,error:_,invalid:A,startIcon:G,fullWidth:H=!1,disabled:J=!1,readOnly:K=!1,required:Q=!1,id:U,className:X,classNames:Y,style:Z,display:ee,samples:te,empty:le,clearable:ae=!1,onClear:se,open:re,onOpenChange:ie,labels:oe,name:ne,formValue:de,children:pe,triggerRef:ce,"aria-label":me,"aria-labelledby":ue,...fe}){const he=l.useId(),ge=U??`${he}-trigger`,xe=`${he}-label`,be=`${he}-value`,ve=`${he}-description`,ye=`${he}-error`,Ne=ue??(me?ge:T?xe:void 0),we=x(),je=V??we.labelPlacement??"top",{notched:Pe,float:ke}=g(je,T,D(G)),$e=null!=_&&!1!==_&&""!==_,ze=A??$e,Ce=ze?"danger":E,[Be,De]=l.useState(null),Ee=n(Be),Ie=o(J)||Ee,Oe=!Ie&&!K,Re=Ie||K,Se=l.useRef(null),qe=e(a.Label,{id:xe,htmlFor:ge,className:N(I[B],"font-semibold",Ie?"text-(--plass-muted-fg)":"text-(--plass-fg)",Y?.label),children:T});return t(a.Root,{ref:De,disabled:Ie,invalid:ze,className:N("flex-col align-top",S[B],H?"flex w-full":"inline-flex",X),style:{...$(Ce,F),...Z},...fe,children:[D(T)&&!Pe?qe:null,t(s.Root,{open:re,onOpenChange:e=>ie(e),children:[e(u,{notched:Pe,size:B,density:q,variant:z,disabled:Ie,readOnly:K,float:ke,empty:le,label:qe,children:t("span",{style:Pe?h:void 0,onPointerMove:d(Oe),className:N(M,Pe?"":L,v[B],y[B],R[B],C[B],O[q][B],Ie?w[z]:K?P[z]:k[z],Oe?"plass-glow":"",Y?.control),children:[e(a.Validity,{children:({validity:l})=>{const a=!1===l.valid,r=[W?ve:null,$e||a&&!Ie&&!0!==A?ye:null].filter(Boolean).join(" ")||void 0;return t(s.Trigger,{id:ge,ref:ce,disabled:Ie,"aria-label":me,"aria-labelledby":Ne?`${Ne} ${be}`:void 0,"aria-describedby":r,"aria-required":Q||void 0,"aria-invalid":ze||a||void 0,onBlur:()=>{re||i(Se.current)},className:N("flex min-w-0 flex-1 items-center bg-transparent p-0 text-start [font:inherit] text-inherit",C[B],"[outline:none]",Re?"cursor-default":"cursor-pointer"),children:[G?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:G}):null,t("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{id:be,className:N("w-full truncate",le?"text-(--plass-muted-fg)":"text-(--plass-fg)",ke&&f),children:ee}),H?null:e(c,{samples:ke?[...te??[],m(T)].filter(Boolean):te??[]})]})]})}}),!ae||le||Re?null:e("button",{type:"button","aria-label":oe.clear,className:N(b,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation();const t=e.currentTarget,l=t.ownerDocument.activeElement===t;se(),l&&t.ownerDocument.getElementById(ge)?.focus()},children:e(p,{})})]})}),e(s.Portal,{children:e(s.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,align:"start",children:e(s.Popup,{initialFocus:!1,className:N(pickerPopupClasses,R[B],popupPaddingClasses[B],y[B]),style:popupSlots(Ce,3),children:pe})})})]}),W?e(a.Description,{id:ve,className:N(j(B),Y?.description),children:W}):null,e(a.Error,$e?{id:ye,match:!0,className:N(I[B],"text-(--p-accent)",Y?.error),children:_}:{id:ye,className:N(I[B],"text-(--p-accent)",Y?.error)}),e(r,{ref:Se,name:ne,value:de,required:Q&&!K,disabled:Ie,standIn:()=>Se.current?.ownerDocument.getElementById(ge)})]})}export function PickerFooter({size:t,children:l}){return e("div",{className:N("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",C[t]),children:l})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}

package/dist/internal/progress.d.ts

@@ -98,6 +98,30 @@ export declare const barThicknessClasses: Record<PlassSize, string>;
 export declare const ringDiameters: Record<PlassSize, number>;
 /** The ring's stroke, thickening with the ring so the hole stays in proportion. */
 export declare const ringStrokes: Record<PlassSize, number>;
+/**
+ * The stroke of a ring `diameter` pixels across, read off the ladder rather
+ * than given a proportion of its own.
+ *
+ * Between two rungs it is the straight line between their strokes, so a
+ * diameter that lands on a rung draws exactly that rung's ring. Past either end
+ * it keeps that end's proportion: `xl`'s, a little under a tenth of the
+ * diameter, which keeps the hole in proportion on a ring the size of a loading
+ * screen, and `xs`'s below it. So the stroke is always a fraction of the
+ * diameter, and the radius it leaves stays above zero however small the ring.
+ */
+export declare function ringStrokeFor(diameter: number): number;
+/**
+ * The diameter and the stroke a ring is drawn at: `size`'s rung, or `diameter`
+ * when it is a length a ring can be drawn at.
+ *
+ * Anything but a finite number above zero is ignored rather than drawn, so a
+ * `NaN` that arrived from a division somewhere draws the rung. The Dart build
+ * resolves the two numbers with the same arithmetic.
+ */
+export declare function ringMetrics(size: PlassSize, diameter: number | undefined): {
+    diameter: number;
+    stroke: number;
+};
 /**
  * One plate of a `PlProgressBox`, on the tick ladder — an indicator beside a
  * label, not a control you can put one inside.
@@ -128,7 +152,7 @@ export declare const trackClasses = "bg-(--plass-track) forced-colors:border for
  */
 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)]";
+export declare const fillTransitionClasses = "[transition:width_var(--plass-duration-slow)_var(--plass-ease)] motion-reduce:[transition-duration:0ms]";
 /**
  * `value` as a fraction of the range, or `null` when there is nothing to say.
  *
@@ -137,16 +161,27 @@ export declare const fillTransitionClasses = "[transition:width_var(--plass-dura
  * one request finished twice is a worse bug than a bar that sits full.
  */
 export declare function progressFraction(value: number | null | undefined, min: number, max: number): number | null;
+/**
+ * The value Base UI is handed: `value` clamped into the range, or `null`
+ * wherever `progressFraction` has nothing to say.
+ *
+ * Base UI clamps a finite value itself, but it reads one that is not finite as
+ * indeterminate, where `progressFraction` clamps `Infinity` to full. Handed the
+ * raw value, it would leave the fill, the value attributes and the text
+ * disagreeing about one number: a bar with neither a fill nor the sweep, and
+ * "100%" beside it. Handed this, all three read the fraction.
+ */
+export declare function progressValue(value: number | null | undefined, min: number, max: number): number | null;
 /**
  * What the value reads as, both on screen and to a screen reader.
  *
  * 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.
+ * in German reads "75 %". Base UI's own default is that percentage too, and it
+ * is written here from the fraction all the same, so the words cannot read a
+ * different number from the fill. A caller who passed `format` gets Base UI's
+ * formatted string of `progressValue`, 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, locale: string | undefined): string | null;
 /**

package/dist/internal/progress.js

@@ -1 +1 @@
-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)??""}
+import{numberFormatter as r}from"./format.js";import{forcedFieldEdgeClasses as s,forcedFillClasses as e}from"./styles.js";export function progressSlots(r){return{"--p-fill":`var(--plass-${r}-fill)`,"--p-solid":`var(--plass-${r}-solid)`,"--p-solid-to":`var(--plass-${r}-solid-to)`,"--p-accent":`var(--plass-${r}-accent)`,"--p-soft":`var(--plass-${r}-soft)`,"--p-soft-press":`var(--plass-${r}-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};const t=["xs","sm","md","lg","xl"];export function ringStrokeFor(r){if(r<=ringDiameters.xs)return r*ringStrokes.xs/ringDiameters.xs;if(r>=ringDiameters.xl)return r*ringStrokes.xl/ringDiameters.xl;const s=t.findIndex(s=>ringDiameters[s]>=r),e=t[s-1],n=t[s];return ringStrokes[e]+(r-ringDiameters[e])/(ringDiameters[n]-ringDiameters[e])*(ringStrokes[n]-ringStrokes[e])}export function ringMetrics(r,s){return void 0===s||!Number.isFinite(s)||s<=0?{diameter:ringDiameters[r],stroke:ringStrokes[r]}:{diameter:s,stroke:ringStrokeFor(s)}}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) ${s}`;export const fillClasses=`[background-image:var(--p-fill)] ${e}`;export const fillTransitionClasses="[transition:width_var(--plass-duration-slow)_var(--plass-ease)] motion-reduce:[transition-duration:0ms]";export function progressFraction(r,s,e){return null==r||Number.isNaN(r)||e<=s?null:Math.min(1,Math.max(0,(r-s)/(e-s)))}export function progressValue(r,s,e){return null==r||null===progressFraction(r,s,e)?null:Math.min(e,Math.max(s,r))}const n={style:"percent"};export function progressText(s,e,t,o){return null===s?null:t?e:r(o,n).format(s)}export function progressAriaText(r,s,e){if(null!==r)return t=>progressText(r,t,s,e)??""}

package/dist/internal/search.d.ts

@@ -29,3 +29,15 @@
 export declare function searchText(value: unknown): string;
 /** Every string a row can be found by, folded once and joined into one haystack. */
 export declare function searchHaystack(values: readonly unknown[]): string;
+/**
+ * `searchText` of what `read` finds on an item, remembered per item.
+ *
+ * Only the needle changes from one keystroke to the next, so a filter that
+ * folds its items as it goes folds every one of them again for every character
+ * typed. This folds an item the first time a query reaches it and hands the
+ * same text back after that, for as long as `read` finds the same value on it —
+ * an item whose text changed is folded again, so nothing it answers is stale.
+ * Kept by the item itself, weakly, so an item nobody holds any more takes its
+ * text with it.
+ */
+export declare function cachedSearchText<Item extends object>(read: (item: Item) => unknown): (item: Item) => string;

package/dist/internal/search.js

@@ -1 +1 @@
-const e=/[\u0300-\u036f]/g;export function searchText(t){return null==t||"object"==typeof t?"":String(t).normalize("NFD").replace(e,"").toLowerCase()}export function searchHaystack(e){return e.map(searchText).join("\0")}
+const e=/[\u0300-\u036f]/g;export function searchText(t){return null==t||"object"==typeof t?"":String(t).normalize("NFD").replace(e,"").toLowerCase()}export function searchHaystack(e){return e.map(searchText).join("\0")}export function cachedSearchText(e){const t=new WeakMap;return r=>{const n=e(r),c=t.get(r);if(c&&Object.is(c.value,n))return c.text;const a=searchText(n);return t.set(r,{value:n,text:a}),a}}

package/dist/internal/sizer.d.ts

@@ -1,4 +1,3 @@
-import type * as React from 'react';
 /**
  * Holds a control open at the width of the widest thing it could ever say.
  *
@@ -8,9 +7,15 @@ import type * as React from 'react';
  * `Washington DC`. Either way the field moves under the pointer that just used
  * it, and the whole row of controls beside it shuffles along.
  *
- * So the alternatives are laid out too, stacked in a box clipped to no height.
- * The control's intrinsic width becomes the widest of them and stops depending
- * on the value.
+ * So the alternatives are laid out too, one to a line in a box clipped to no
+ * height. The control's intrinsic width becomes the widest line and stops
+ * depending on the value.
+ *
+ * The lines are one element. Every sample goes into one attribute, a newline
+ * between each two, and `white-space: pre` breaks the line there and nowhere
+ * else, so the box is as wide as its widest line. An element per sample drew
+ * the same box and cost a select of 250 countries 250 elements, each with a
+ * generated box of its own to style and lay out.
  *
  * Three things it deliberately is not:
  *
@@ -18,15 +23,18 @@ import type * as React from 'react';
  *   and a box that is not laid out reserves nothing.
  * - **Not read out.** `aria-hidden`, or a screen reader would announce every
  *   value the control might hold before the one it does.
- * - **Not text.** A string sample is drawn as generated content off a data
+ * - **Not text.** The samples are drawn as generated content off a data
  *   attribute rather than as a text node. `content: attr(…)` lays out exactly
  *   like text, so it reserves the same width — but it leaves nothing for
  *   `getByText` or a screen reader's find-in-page to trip over, and a caller's
  *   test asking for the option they selected keeps finding one element rather
- *   than two. Only a sample that is not a string — an option whose label is a
- *   node — has to be rendered for real, because there is nothing to put in an
- *   attribute.
+ *   than two.
+ *
+ * Which is why a sample is a string and never a node. A label that is a node
+ * reaches here as its text, through `textOf`: laid out for real, a list of
+ * countries with a flag in each would ask for every flag to hold one field
+ * open, and a picture carries no width a reader could not do without.
  */
 export declare function WidthSizer({ samples }: {
-    samples: readonly React.ReactNode[];
-}): React.JSX.Element | null;
+    samples: readonly string[];
+}): import("react").JSX.Element | null;

package/dist/internal/sizer.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";export function WidthSizer({samples:a}){return 0===a.length?null:e("span",{"aria-hidden":"true",className:"invisible h-0 min-h-0 overflow-hidden",children:a.map((a,n)=>"string"==typeof a?e("span",{"data-sample":a,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${n}:${a}`):e("span",{className:"block whitespace-nowrap",children:a},n))})}
+import{jsx as e}from"react/jsx-runtime";export function WidthSizer({samples:n}){return 0===n.length?null:e("span",{"aria-hidden":"true","data-sample":n.map(oneLine).join("\n"),className:"invisible block h-0 min-h-0 overflow-hidden whitespace-pre before:content-[attr(data-sample)]"})}function oneLine(e){return e.replace(/[ \t\n\r]+/g," ").replace(/^ | $/g,"")}

package/dist/internal/steps.d.ts

@@ -40,21 +40,6 @@ export type PlassStepConnector = 'solid' | 'dashed' | 'dotted' | 'none';
 export declare const bulletSizeValues: Record<PlassSize, string>;
 /** Between the bullet column and the content beside it. */
 export declare const bulletGapClasses: Record<PlassSize, string>;
-/**
- * The bullet at each of the three states.
- *
- * Every one of them is a different axis, never a different opacity: `complete`
- * is the family's gradient, `current` is that gradient with a halo of the soft
- * tint around it, and `upcoming` is a hairline ring on the page's own surface. A
- * reader who cannot tell the colours apart still has a filled shape, a haloed
- * shape and an empty one.
- *
- * There is no gloss line on the two filled ones, for the reason a filled
- * `PlButton` has none — the gradient is the form. The `upcoming` ring is drawn
- * in the neutral hairline rather than the sheet's white one, the same call a
- * checkbox's edge makes: a bullet is small enough that its edge *is* the object,
- * and white light on a translucent pane disappears on a light card.
- */
 export declare const bulletStatusClasses: Record<PlassStepStatus, string>;
 /**
  * The line *after* a step, which is what makes it the step's own property: a

package/dist/internal/steps.js

@@ -1 +1 @@
-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"}
+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"};const o="plass-fill relative";export const bulletStatusClasses={complete:`${o} [--p-fill-on:1] text-(--p-on-solid) ${e}`,current:`${o} [--p-fill-on:1] 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:`${o} [--p-fill-edge:2px] 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"}

package/dist/internal/styles.d.ts

@@ -54,6 +54,17 @@ export declare const controlTextClasses: Record<PlassSize, string>;
 export declare const controlTextLeadingClasses: Record<PlassSize, string>;
 /** Labels, descriptions and error messages: one step below the control's text. */
 export declare const metaTextClasses: Record<PlassSize, string>;
+/**
+ * The line of help under a field: its `description`.
+ *
+ * Every field that takes one draws it the same way, on the step below the
+ * control and in the muted ink, so it is written once here rather than in each
+ * of them. `m-0` is part of it because `Field.Description` renders a `<p>`,
+ * which arrives with the UA's block margin and with whatever the host page says
+ * about `p` — and the gap between a field's parts is `stackGapClasses`, not a
+ * paragraph's margin. A caller's `classNames.description` goes after this.
+ */
+export declare function fieldDescriptionClasses(size: PlassSize): string;
 /**
  * Horizontal padding, and the only thing `density` is allowed to touch. The two
  * tracks are roughly 2:1 so the difference is legible at a glance rather than a
@@ -201,15 +212,25 @@ export declare const sheetHeaderGapClasses: Record<PlassSize, string>;
  *
  * `-webkit-backdrop-filter` is written alongside the standard property because
  * Safari still needs it, and Tailwind will not add it for an arbitrary value.
+ *
+ * For a reader who has asked for less transparency `--plass-blur` is `none` and
+ * the glass tokens are opaque (`styles.css`), so a surface that pairs these with
+ * a `--plass-glass*` fill needs nothing of its own for that reader.
  */
 export declare const glassClasses = "[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]";
 /**
  * The house transition.
  *
  * One duration and one curve, applied the same way in both directions — a key
- * going down and a key coming back up are the same spring. `background-image`
- * 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.
+ * going down and a key coming back up are the same spring. `filter` is in the
+ * list because that is what hover and press actually move.
+ *
+ * `background-image` is in it for WebKit, the one engine that eases one
+ * gradient into another, which is a solid surface changing family. None of them
+ * eases a gradient to or from `none`, and Chromium and Firefox ease no gradient
+ * at all, so a fill that comes and goes with a state — a tick, a switch, a
+ * chosen day — is not a background but a layer of its own, faded by its
+ * opacity: `.plass-fill` in `styles.css`.
  *
  * `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`
@@ -222,6 +243,10 @@ export declare const glassClasses = "[backdrop-filter:var(--plass-blur)] [-webki
  * 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
  * holds content rather than being pressed — a Card — may lift, and does.
+ *
+ * Under reduced motion the new colours arrive at once instead of easing in, as
+ * the Flutter surfaces do. Nothing waits on the end of one of these, so no
+ * duration is kept for a `transitionend` to arrive on.
  */
 export declare const transitionClasses: string;
 /**
@@ -262,6 +287,28 @@ export declare const focusWithinRingClasses = "has-[:focus-visible]:[outline:2px
  * inside the edge instead. Same width, same colour, same absence of a gap.
  */
 export declare const focusRingInsetClasses = "focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]";
+/**
+ * Where a control drawn smaller than 24px is pressed from.
+ *
+ * WCAG 2.5.8 asks for a target at least 24px square. The `::before` is that
+ * square, centred on the control whatever size the control is, and placed out
+ * of the flow so nothing around it moves. On a control that is already larger
+ * the inset turns positive and the square sits inside it, where it changes
+ * nothing.
+ */
+export declare const targetClasses = "relative before:absolute before:inset-[calc(50%-12px)]";
+/**
+ * The safe area on the inline edge a pinned control is against, as
+ * `--p-safe-inline`.
+ *
+ * `env()` has only physical names, so which of `left` and `right` is the start
+ * is the direction's question, and a style attribute cannot ask it. The `rtl:`
+ * variant can, so the class picks the side and the inline inset reads it, with
+ * `0px` behind the slot for a class that was never generated. A floating action
+ * button and a floating back-to-top button both stand off it, and a landscape
+ * cutout would cover either one otherwise.
+ */
+export declare const safeInlineClasses: Record<'Start' | 'End', string>;
 /**
  * The × that takes something off a chip.
  *
@@ -274,15 +321,35 @@ export declare const focusRingInsetClasses = "focus-visible:[outline:2px_solid_v
  * keyboard arrives.
  *
  * Drawn at the size of the label, and pressed from a 24px square, the minimum
- * target size of WCAG 2.5.8. The `::before` is that square, centred on the
- * glyph whatever size the glyph is, and placed out of the flow so the chip and
- * the trigger keep their size. It comes after the label or the trigger in the
- * markup and is positioned, so where the square reaches over one of them the ×
- * has the press, and the neighbour keeps everything outside the square.
+ * target size of WCAG 2.5.8, through `targetClasses`. It comes after the label
+ * or the trigger in the markup and is positioned, so where the square reaches
+ * over one of them the × has the press, and the neighbour keeps everything
+ * outside the square.
+ *
+ * `p-0` because a browser pads a button on every side, and
+ * `plass-ui/styles.css` does not reset that padding: WebKit's is a pixel deeper
+ * below than above, which would sit the × half a pixel high.
  */
 export declare const chipRemoveClasses: string;
 /** Icons track their label rather than carrying a size of their own. */
 export declare const iconClasses = "[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";
+/**
+ * A picture handed over as the whole of a slot: a PlCarousel's slide, the logo
+ * standing in for a PlAvatar.
+ *
+ * Both are documented as taking a bare `<img>`, and a bare `<img>` is inline and
+ * as large as its file: a slide would hang a descender gap under the photograph
+ * and a logo would overflow the circle. This lays it out the way a page reset
+ * lays out every picture — a block no wider than its box, with its height
+ * following its width — for these slots only, now that `plass-ui/styles.css`
+ * leaves the page's own pictures where the page put them.
+ *
+ * Inside `:where()`, so at specificity 0 like the reset it replaces: a class the
+ * caller put on the picture still wins, and `h-16 object-cover` on a slide keeps
+ * its height rather than being handed `auto` back. Written one selector per
+ * class, as `PlAspectRatio`'s are, rather than as a comma list in one variant.
+ */
+export declare const pictureSlotClasses: string;
 /**
  * Text for a screen reader and nobody else.
  *
@@ -290,17 +357,25 @@ export declare const iconClasses = "[&_svg]:pointer-events-none [&_svg]:size-[1.
  * text off the accessibility tree along with the screen, and the third leaves a
  * clickable ghost the size of the words. A 1px clipped box is the one form that
  * is invisible to a sighted reader and present to every other kind.
+ *
+ * The text effects put their line in one of these and draw what a sighted
+ * reader sees as generated content beside it, so this copy is the only text
+ * there is: the one a crawler indexes and the one a selection copies.
  */
 export declare const srOnlyClasses = "absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";
 /**
- * The same clipped box, for a copy of text that is also drawn.
+ * The drawn copy of a text effect whose line changes while it runs, holding the
+ * room of the line it arrives at.
  *
- * A text effect draws its line and puts a second copy of it beside it for a
- * screen reader, so a selection across the pair used to hand back the line
- * twice. This one is left out of the selection: the drawn copy is the one a
- * sighted reader can see, and the one they mean when they copy it.
+ * Two pieces of generated content in one grid cell: `data-text`, the frame
+ * being drawn, and `data-sample`, the finished line, laid out and not drawn.
+ * The cell is as wide as the wider of the two, so the box has the finished
+ * line's width from the first paint, and a frame that is narrower — a count
+ * still short of its figure — no longer moves the text around it as it grows.
+ * The frame is the first of the two, so it is the one the grid takes its
+ * baseline from, and it sits on the line of the text around it.
  */
-export declare const srOnlyCopyClasses = "absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)] select-none";
+export declare const drawnCopyClasses: string;
 /**
  * Every slot a control reads.
  *
@@ -337,6 +412,26 @@ export declare function controlSlots(color: PlassColor, elevation: PlassElevatio
  * element, and a surface without that class has no layers at all.
  */
 export declare function surfaceSlots(color: PlassColor, elevation: PlassElevation): React.CSSProperties;
+/**
+ * The same slots again for a **field's** shell, with the interaction light
+ * turned down.
+ *
+ * A field is the one lit surface in the library that is not finished with the
+ * moment it has been pressed. A key takes a bloom for as long as the pointer is
+ * crossing it and then the reader has moved on; a field is clicked once and then
+ * written in, and for that minute the light sits under the words being typed and
+ * follows a pointer that is no longer being moved. At a key's strength it reads
+ * as a stain on the sentence rather than as the surface answering.
+ *
+ * So both layers are mixed down to `--plass-glow-field-strength` of the family's
+ * tint — the colour is dimmed rather than the layer's opacity, because opacity
+ * is what `.plass-glow` animates between its two states and what
+ * `[data-quiet]` takes over while the field is being typed into.
+ *
+ * Everything else is `surfaceSlots`. A field's sheet is still undyed glass, and
+ * the family still reaches it through the hairline, the ring and the caret.
+ */
+export declare function fieldSlots(color: PlassColor, elevation: PlassElevation): React.CSSProperties;
 /**
  * The edge a surface that is only a fill gets back in forced-colours mode.
  *
@@ -396,6 +491,13 @@ export declare const forcedCheckedTextClasses = "forced-colors:data-[checked]:[c
 export declare const forcedHighlightedClasses: string;
 /** A checked control that is disabled, in the system's colour for unavailable. */
 export declare const forcedDisabledCheckedClasses: string;
+/**
+ * `disabledClasses` without the fade, for a control disabled together with a
+ * surface around it that is already drawn at that fade, such as a chip in a
+ * disabled `PlCombobox`. It keeps the look of a disabled control, and a fade of
+ * its own would draw it at a quarter.
+ */
+export declare const disabledLookClasses: Record<PlassVariant, string>;
 /**
  * Disabled is **the light going out.** The key keeps its shape, its colour and
  * its place in the layout, and stops catching any light: no gloss, no tinted
@@ -441,6 +543,26 @@ export declare const readOnlyFilterClasses = "saturate-[0.55]";
  * family reaches the hairline, the focus ring and the caret and stops.
  */
 export declare const sheetRestClasses: Record<PlassVariant, string>;
+/**
+ * The material of a **mark**: a surface that is the thing being coloured and
+ * is never pressed — a PlAvatar, a PlBadge, a PlAppLogo's plate. The Flutter
+ * build's `markSurface` is the same answer.
+ *
+ * It sits between a control and a sheet. The sheet takes the tint the way a
+ * control's does, because a portrait of one person and a product's icon are
+ * each about the thing they are coloured for, and unlike a PlCard's. But there
+ * is no pointer to answer, so there is no hover ladder, and the glass edge is
+ * the neutral `--plass-border` rather than the sheet's white
+ * `--plass-glass-line`: a mark is very often laid on something opaque, a
+ * header or a card, where white light on a cut edge draws no edge at all.
+ *
+ * `solid` carries no gloss line, for the reason a filled PlButton carries none:
+ * the gradient is the form. `ghost` keeps a wash at rest rather than being
+ * bare, which is the difference between a mark and a control: a ghost button
+ * has nothing until the pointer arrives, and a ghost mark with nothing under it
+ * is a glyph floating on the page.
+ */
+export declare const markRestClasses: Record<PlassVariant, string>;
 /**
  * The shell a field-shaped control is drawn on — a PlTextField's box and a
  * Select's trigger, which have to be indistinguishable or a form looks like two