plass-ui 1.3.0 → 1.5.0

package/dist/internal/mockup.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";const i={desktop:["macos","windows","linux"],tablet:["ipados","android"],mobile:["ios","android"]};export function resolveOs(e,t){const a=i[e];return t&&a.includes(t)?t:"ios"===t&&"tablet"===e?"ipados":"ipados"===t&&"mobile"===e?"ios":a[0]}export function defaultNotch(e,t){return"mobile"!==e?"none":"android"===t?"punch-hole":"dynamic-island"}export const resolutions={mobile:{xs:{width:320,height:568},sm:{width:360,height:780},md:{width:390,height:844},lg:{width:414,height:896},xl:{width:430,height:932}},tablet:{xs:{width:744,height:1133},sm:{width:768,height:1024},md:{width:820,height:1180},lg:{width:834,height:1194},xl:{width:1024,height:1366}},desktop:{xs:{width:1024,height:640},sm:{width:1280,height:800},md:{width:1440,height:900},lg:{width:1680,height:1050},xl:{width:1920,height:1200}}};const a={mobile:{thin:{bezel:{x:8,top:8,bottom:8},frameRadius:50,screenRadius:42},standard:{bezel:{x:13,top:13,bottom:13},frameRadius:56,screenRadius:43},thick:{bezel:{x:16,top:62,bottom:62},frameRadius:40,screenRadius:4}},tablet:{thin:{bezel:{x:12,top:12,bottom:12},frameRadius:34,screenRadius:22},standard:{bezel:{x:20,top:20,bottom:20},frameRadius:42,screenRadius:22},thick:{bezel:{x:28,top:74,bottom:74},frameRadius:36,screenRadius:4}},desktop:{thin:{bezel:{x:8,top:8,bottom:8},frameRadius:12,screenRadius:4},standard:{bezel:{x:13,top:13,bottom:30},frameRadius:16,screenRadius:4},thick:{bezel:{x:22,top:22,bottom:62},frameRadius:18,screenRadius:3}}},s={mobile:42,tablet:24,desktop:8};export function mockupMetrics(e){const{device:t,size:i,resolution:r,orientation:d,bezel:h,hardware:n}=e,o=r??resolutions[t][i],l="desktop"!==t&&"landscape"===d,c=l?{width:o.height,height:o.width}:o;if("none"===h)return{screen:c,bezel:{x:0,top:0,bottom:0},body:{...c},frame:{...c},frameRadius:s[t],screenRadius:s[t],stand:null,base:null};const u=a[t][h],p=l?{x:u.bezel.top,top:u.bezel.x,bottom:u.bezel.x}:u.bezel,g="desktop"===t&&"laptop"===n,m=g?{...p,bottom:p.top}:p,x={width:c.width+2*m.x,height:c.height+m.top+m.bottom};if("desktop"!==t)return{screen:c,bezel:m,body:x,frame:{...x},frameRadius:u.frameRadius,screenRadius:u.screenRadius,stand:null,base:null};if(g){const e={width:Math.round(1.075*x.width),height:Math.round(.035*x.height),lipWidth:Math.round(.12*x.width)};return{screen:c,bezel:m,body:x,frame:{width:e.width,height:x.height+e.height},frameRadius:u.frameRadius,screenRadius:u.screenRadius,stand:null,base:e}}const f={neckWidth:Math.round(.11*x.width),neckHeight:Math.round(.09*x.height),footWidth:Math.round(.28*x.width),footHeight:Math.round(.018*x.height)};return{screen:c,bezel:m,body:x,frame:{width:x.width,height:x.height+f.neckHeight+f.footHeight},frameRadius:u.frameRadius,screenRadius:u.screenRadius,stand:f,base:null}}export const finishSlots={graphite:{"--p-shell":"#2b2f38","--p-shell-edge":"rgb(255 255 255 / 0.16)","--p-shell-shade":"#181b22"},silver:{"--p-shell":"#cfd2d7","--p-shell-edge":"rgb(255 255 255 / 0.75)","--p-shell-shade":"#9ca1a9"},white:{"--p-shell":"#f3f4f6","--p-shell-edge":"rgb(255 255 255 / 0.9)","--p-shell-shade":"#c1c4ca"}};export const shellClasses="bg-(--p-shell) [box-shadow:inset_0_1px_0_var(--p-shell-edge),inset_0_0_0_1px_var(--p-shell-shade)]";export const elevationFilters=["none","drop-shadow(0 1px 2px var(--plass-shadow-ambient))","drop-shadow(0 2px 4px var(--plass-shadow-ambient)) drop-shadow(0 8px 12px var(--plass-shadow-ambient))","drop-shadow(0 4px 6px var(--plass-shadow-ambient)) drop-shadow(0 18px 28px var(--plass-shadow-ambient))"];export function PlMockupCutout({notch:t,screen:i,landscape:a}){if("none"===t)return null;const s=a?i.height:i.width,r={position:"absolute",background:"oklch(12% 0.006 262)",pointerEvents:"none",zIndex:20},d="plass-mockup-cutout";if("punch-hole"===t){const t=Math.max(16,Math.round(.07*s)),i=Math.round(.55*t);return e("div",{"aria-hidden":"true",className:d,style:{...r,width:t,height:t,borderRadius:"50%",...a?{left:i,top:"50%",marginTop:-t/2}:{top:i,left:"50%",marginLeft:-t/2}}})}if("dynamic-island"===t){const t=Math.max(96,Math.round(.32*s)),i=Math.round(.29*t),h=Math.round(.32*i);return e("div",{"aria-hidden":"true",className:d,style:{...r,borderRadius:i,...a?{left:h,top:"50%",width:i,height:t,marginTop:-t/2}:{top:h,left:"50%",width:t,height:i,marginLeft:-t/2}}})}const h=Math.max(120,Math.round(.42*s)),n=Math.round(.23*h),o=Math.round(.6*n);return e("div",{"aria-hidden":"true",className:d,style:{...r,...a?{left:0,top:"50%",width:n,height:h,marginTop:-h/2,borderRadius:`0 ${o}px ${o}px 0`}:{top:0,left:"50%",width:h,height:n,marginLeft:-h/2,borderRadius:`0 0 ${o}px ${o}px`}}})}const r="relative z-10 flex shrink-0 items-center [background:color-mix(in_oklab,var(--plass-surface)_88%,transparent)]",d="font-medium text-(--plass-fg) tabular-nums";function Tile({width:t,height:i,radius:a,tone:s="muted"}){return e("div",{style:{width:t,height:i??t,borderRadius:a,background:"accent"===s?"var(--p-accent)":"faint"===s?"color-mix(in oklab, var(--plass-fg) 12%, transparent)":"color-mix(in oklab, var(--plass-fg) 26%, transparent)"}})}function Tiles({count:t,size:i,radius:a,gap:s,accent:r=!1}){return e("div",{className:"flex items-center",style:{gap:s},children:Array.from({length:t},(t,s)=>e(Tile,{width:i,radius:a,tone:r&&0===s?"accent":"muted"},s))})}function SignalGlyph({height:i}){return t("svg",{viewBox:"0 0 17 11",height:i,width:17*i/11,fill:"currentColor","aria-hidden":"true",children:[e("rect",{y:"7.5",width:"3",height:"3.5",rx:"1"}),e("rect",{x:"4.7",y:"5",width:"3",height:"6",rx:"1"}),e("rect",{x:"9.4",y:"2.5",width:"3",height:"8.5",rx:"1"}),e("rect",{x:"14",width:"3",height:"11",rx:"1",opacity:"0.35"})]})}function WifiGlyph({height:i}){return t("svg",{viewBox:"0 0 16 12",height:i,width:16*i/12,fill:"none","aria-hidden":"true",children:[e("path",{d:"M1 4.2a10.5 10.5 0 0 1 14 0",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"}),e("path",{d:"M3.6 7a6.8 6.8 0 0 1 8.8 0",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"}),e("circle",{cx:"8",cy:"10.2",r:"1.6",fill:"currentColor"})]})}function BatteryGlyph({height:i}){return t("svg",{viewBox:"0 0 25 12",height:i,width:25*i/12,fill:"none","aria-hidden":"true",children:[e("rect",{x:"0.7",y:"0.7",width:"20.6",height:"10.6",rx:"3.2",stroke:"currentColor",strokeWidth:"1.3",opacity:"0.45"}),e("rect",{x:"2.6",y:"2.6",width:"12.8",height:"6.8",rx:"1.8",fill:"currentColor"}),e("rect",{x:"22.8",y:"4",width:"1.8",height:"4",rx:"0.9",fill:"currentColor",opacity:"0.45"})]})}function StatusGlyphs({height:i,gap:a}){return t("div",{className:"flex items-center text-(--plass-fg)",style:{gap:a},children:[e(SignalGlyph,{height:i}),e(WifiGlyph,{height:i}),e(BatteryGlyph,{height:i})]})}function NavGlyphs({size:i,gap:a}){return t("div",{className:"flex items-center justify-center text-(--plass-fg)",style:{gap:a,opacity:.72},children:[e("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"none","aria-hidden":"true",children:e("path",{d:"M10 3 5 8l5 5",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round"})}),e("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"none","aria-hidden":"true",children:e("circle",{cx:"8",cy:"8",r:"5",stroke:"currentColor",strokeWidth:"1.6"})}),e("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"none","aria-hidden":"true",children:e("rect",{x:"3.5",y:"3.5",width:"9",height:"9",rx:"1.6",stroke:"currentColor",strokeWidth:"1.6"})})]})}function StartGlyph({size:i}){return t("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"currentColor","aria-hidden":"true",children:[e("rect",{x:"1",y:"1",width:"6",height:"6",rx:"1.4"}),e("rect",{x:"9",y:"1",width:"6",height:"6",rx:"1.4"}),e("rect",{x:"1",y:"9",width:"6",height:"6",rx:"1.4"}),e("rect",{x:"9",y:"9",width:"6",height:"6",rx:"1.4"})]})}export function mockupChrome(i){const{os:a,notch:s,landscape:h,time:n}=i;if("ios"===a||"ipados"===a){const i="ipados"===a,o=i?30:i||h||"none"===s||"punch-hole"===s?44:54;return{top:{size:o,node:t("div",{"aria-hidden":"true",className:`${r} justify-between`,style:{height:o,paddingInline:i?22:26},children:[e("span",{className:`${d} text-[15px]`,children:n}),e(StatusGlyphs,{height:i?11:12,gap:6})]})},bottom:{size:i?22:34,node:e("div",{"aria-hidden":"true",className:`${r} justify-center`,style:{height:i?22:34,background:"transparent"},children:e("div",{style:{width:i?220:140,height:5,borderRadius:3,background:"color-mix(in oklab, var(--plass-fg) 55%, transparent)"}})})}}}return"android"===a?{top:{size:34,node:t("div",{"aria-hidden":"true",className:`${r} justify-between`,style:{height:34,paddingInline:18},children:[e("span",{className:`${d} text-[13px]`,children:n}),e(StatusGlyphs,{height:11,gap:5})]})},bottom:{size:48,node:e("div",{"aria-hidden":"true",className:`${r} justify-center`,style:{height:48},children:e(NavGlyphs,{size:20,gap:72})})}}:"macos"===a?{top:{size:28,node:t("div",{"aria-hidden":"true",className:`${r} justify-between`,style:{height:28,paddingInline:16},children:[t("div",{className:"flex items-center",style:{gap:16},children:[e(Tile,{width:13,radius:4}),e(Tile,{width:34,height:7,radius:4}),e(Tile,{width:26,height:7,radius:4,tone:"faint"}),e(Tile,{width:30,height:7,radius:4,tone:"faint"}),e(Tile,{width:22,height:7,radius:4,tone:"faint"})]}),t("div",{className:"flex items-center",style:{gap:14},children:[e(Tile,{width:11,radius:3,tone:"faint"}),e(Tile,{width:11,radius:3,tone:"faint"}),e("span",{className:`${d} text-[13px]`,children:n})]})]})},bottom:{size:78,node:e("div",{"aria-hidden":"true",className:"flex shrink-0 items-end justify-center",style:{height:78},children:t("div",{className:`${r} [box-shadow:var(--plass-shadow-2),var(--plass-gloss-glass)]`,style:{gap:10,padding:8,marginBottom:10,borderRadius:22},children:[e(Tiles,{count:5,size:52,radius:14,gap:10,accent:!0}),e("div",{style:{width:1,height:44,background:"color-mix(in oklab, var(--plass-fg) 16%, transparent)"}}),e(Tiles,{count:2,size:52,radius:14,gap:10})]})})}}:"windows"===a?{bottom:{size:52,node:t("div",{"aria-hidden":"true",className:`${r} justify-center [border-block-start:1px_solid_var(--plass-border)]`,style:{height:52,paddingInline:16},children:[t("div",{className:"flex items-center",style:{gap:10},children:[e("div",{className:"text-(--plass-fg)",style:{opacity:.7},children:e(StartGlyph,{size:22})}),e(Tiles,{count:6,size:30,radius:8,gap:10,accent:!0})]}),t("div",{className:"absolute flex items-center",style:{insetInlineEnd:16,gap:12},children:[e(Tile,{width:11,radius:3,tone:"faint"}),e(Tile,{width:11,radius:3,tone:"faint"}),e("span",{className:`${d} text-[12px]`,children:n})]})]})}}:{top:{size:34,node:t("div",{"aria-hidden":"true",className:`${r} justify-center`,style:{height:34,paddingInline:14},children:[e("div",{className:"absolute",style:{insetInlineStart:14},children:e(Tile,{width:52,height:9,radius:5})}),e("span",{className:`${d} text-[13px]`,children:n}),t("div",{className:"absolute flex items-center",style:{insetInlineEnd:14,gap:10},children:[e(Tile,{width:10,radius:3,tone:"faint"}),e(Tile,{width:10,radius:3,tone:"faint"}),e(Tile,{width:10,radius:3,tone:"faint"})]})]})},start:{size:66,node:t("div",{"aria-hidden":"true",className:`${r} flex-col justify-start [border-inline-end:1px_solid_var(--plass-border)]`,style:{width:66,height:"100%",gap:10,paddingBlock:12},children:[e(Tile,{width:44,radius:12,tone:"accent"}),e(Tile,{width:44,radius:12}),e(Tile,{width:44,radius:12}),e(Tile,{width:44,radius:12})]})}}}

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

@@ -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
@@ -88,11 +123,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 +141,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, 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 s}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{Popover as l}from"@base-ui/react/popover";import{FormControl as r,leaveFormControl as i}from"./form.js";import{CloseIcon as o}from"./icons.js";import{WidthSizer as n}from"./sizer.js";import{chipRemoveClasses as d,controlHeightClasses as p,controlTextLeadingClasses as c,cx as u,disabledClasses as m,fieldReadOnlyClasses as f,fieldRestClasses as h,focusWithinRingClasses as g,gapClasses as x,glassClasses as b,iconClasses as v,metaTextClasses as y,paddingXClasses as N,radiusClasses as w,stackGapClasses as j,surfaceSlots as k,transitionClasses as P}from"./styles.js";export function popupSlots(e,s){return{...k(e,s),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const $=/* @__PURE__ */["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",P,g,v].join(" ");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)]","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 C=/* @__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:a,size:t}){return e(a,{className:C,children:s("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:g="glass",size:b="md",color:v="primary",density:P="default",elevation:C=0,label:z,description:B,error:I,invalid:O,startIcon:R,fullWidth:q=!1,disabled:D=!1,readOnly:E=!1,required:F=!1,id:S,className:L,classNames:M,style:V,display:W,samples:_,empty:A,clearable:T=!1,onClear:G,open:H,onOpenChange:J,labels:K,name:Q,formValue:U,children:X,triggerRef:Y,...Z}){const ee=a.useId(),se=S??`${ee}-trigger`,ae=`${ee}-label`,te=`${ee}-value`,le=`${ee}-description`,re=`${ee}-error`,ie=null!=I&&!1!==I&&""!==I,oe=O??ie,ne=oe?"danger":v,de=D||E,pe=a.useRef(null);return s(t.Root,{disabled:D,invalid:oe,className:u("flex-col align-top",j[b],q?"flex w-full":"inline-flex",L),style:{...k(ne,C),...V},...Z,children:[z?e(t.Label,{id:ae,htmlFor:se,className:u(y[b],"font-semibold",D?"text-(--plass-muted-fg)":"text-(--plass-fg)",M?.label),children:z}):null,s(l.Root,{open:H,onOpenChange:e=>J(e),children:[s("span",{className:u($,p[b],c[b],w[b],x[b],N[P][b],D?m[g]:E?f[g]:h[g],M?.control),children:[e(t.Validity,{children:({validity:a})=>{const t=!1===a.valid,r=[B?le:null,ie||t&&!D&&!0!==O?re:null].filter(Boolean).join(" ")||void 0;return s(l.Trigger,{id:se,ref:Y,disabled:D,"aria-labelledby":z?`${ae} ${te}`:void 0,"aria-describedby":r,"aria-required":F||void 0,"aria-invalid":oe||t||void 0,onBlur:()=>{H||i(pe.current)},className:u("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",x[b],"[outline:none]",de?"cursor-default":"cursor-pointer"),children:[R?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:R}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{id:te,className:u("w-full truncate",A?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:W}),q?null:e(n,{samples:_??[]})]})]})}}),!T||A||de?null:e("button",{type:"button","aria-label":K.clear,className:u(d,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation(),G()},children:e(o,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,align:"start",children:e(l.Popup,{initialFocus:!1,className:u(pickerPopupClasses,w[b],popupPaddingClasses[b],c[b]),style:popupSlots(ne,3),children:X})})})]}),B?e(t.Description,{id:le,className:u(y[b],"text-(--plass-muted-fg)",M?.description),children:B}):null,e(t.Error,ie?{id:re,match:!0,className:u(y[b],"text-(--p-accent)",M?.error),children:I}:{id:re,className:u(y[b],"text-(--p-accent)",M?.error)}),e(r,{ref:pe,name:Q,value:U,required:F&&!E,disabled:D,standIn:()=>pe.current?.ownerDocument.getElementById(se)})]})}export function PickerFooter({size:s,children:a}){return e("div",{className:u("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",x[s]),children:a})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}

package/dist/internal/progress.d.ts

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

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

package/dist/internal/responsive.js

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

package/dist/internal/scramble.d.ts

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

package/dist/internal/scramble.js

@@ -0,0 +1 @@
+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"}

package/dist/internal/styles.d.ts

@@ -103,6 +103,14 @@ export declare const tickRadiusClasses: Record<PlassSize, string>;
  * So every dot here has the same parity as the ring's content box: 12/6, 14/6,
  * 16/8, 18/8, 22/10. The ratio wanders between 38% and 44% as a result, which
  * is the price, and it is invisible next to the thing it buys.
+ *
+ * **The dot grows out of the middle rather than appearing at full size**, so
+ * the size is a pair: nothing until the option is chosen, and the diameter
+ * above once it is. It is the box that grows and not a `scale` — the ring is a
+ * fixed-size flex centre, so the two values are laid out around the same point
+ * and nothing outside the ring can be moved by either of them. Both classes
+ * have to be written out here rather than composed at the call site, because
+ * Tailwind only generates a utility it has seen spelled out in a source file.
  */
 export declare const tickDotClasses: Record<PlassSize, string>;
 /**
@@ -203,6 +211,13 @@ export declare const glassClasses = "[backdrop-filter:var(--plass-blur)] [-webki
  * is in the list because a gradient fill is the thing being changed on a solid
  * surface, and `filter` because that is what hover and press actually move.
  *
+ * `opacity` is in it because half the library already writes an opacity as a
+ * *state*: `opacity-50` is what disabled looks like everywhere, a `PlBackTop`
+ * appears and goes on `opacity-0`, and a `PlImage` uncovers itself the moment
+ * the picture decodes. Without it in the list every one of those is a value
+ * that changes between two frames, which is the one thing the house transition
+ * exists to prevent.
+ *
  * There is no `transform` in the list and none should be added to a *control*:
  * scaling a key resamples its label, and text that shimmers under the cursor
  * undoes the restraint everything else is spending effort on. A surface that
@@ -257,6 +272,13 @@ export declare const focusRingInsetClasses = "focus-visible:[outline:2px_solid_v
  *
  * Kept quiet until it is wanted: the glyph sits at 70% until the pointer or the
  * 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.
  */
 export declare const chipRemoveClasses: string;
 /** Icons track their label rather than carrying a size of their own. */
@@ -294,6 +316,65 @@ export declare function controlSlots(color: PlassColor, elevation: PlassElevatio
  * ring and the caret, and the glass stays clear.
  */
 export declare function surfaceSlots(color: PlassColor, elevation: PlassElevation): React.CSSProperties;
+/**
+ * The edge a surface that is only a fill gets back in forced-colours mode.
+ *
+ * Windows' contrast themes drop every background image and box shadow, so a
+ * `solid` button — a gradient with no border — is left as a label floating on
+ * the page, and a `solid` field as a caret with no box around it. A border in a
+ * system colour gives both their shape back. Nothing changes outside that mode.
+ */
+export declare const forcedEdgeClasses = "forced-colors:border forced-colors:[border-color:ButtonText]";
+/**
+ * The same for a surface that is not a button — a field, a progress bar's
+ * track, a slider's rail, a badge, a message — in the colour the system draws
+ * text on the page.
+ */
+export declare const forcedFieldEdgeClasses = "forced-colors:border forced-colors:[border-color:CanvasText]";
+/**
+ * A state that is shown by a fill, in forced-colours mode.
+ *
+ * The system drops the gradient and repaints the background in the page's own
+ * colour, so a ticked box, a chosen segment, a pressed toggle and the filled
+ * part of a progress bar would look exactly like the empty ones. A system colour
+ * written by the page is kept in that mode, so these paint the state in the pair
+ * the system uses for a selection, `Highlight` behind `HighlightText`.
+ *
+ * Never `forced-color-adjust: none` for this. It would keep the colours, and it
+ * would also keep the gradient over them and the tinted shadow under them.
+ */
+export declare const forcedFillClasses = "forced-colors:[background-color:Highlight] forced-colors:[border-color:Highlight] forced-colors:[color:HighlightText]";
+/** The same, on a control Base UI marks `data-checked`. */
+export declare const forcedCheckedClasses: string;
+/**
+ * The same, on a control Base UI marks `data-pressed`.
+ *
+ * The attribute is what keeps the fill under the pointer. A pressed toggle's own
+ * `hover:` and `active:` washes are a class and a pseudo-class, which outrank
+ * `forcedFillClasses`' single class, and a wash that is not a system colour is
+ * repainted in the page's colour. Written as a class and an attribute, the fill
+ * ties with them and comes after them in the stylesheet.
+ */
+export declare const forcedPressedClasses: string;
+/**
+ * The label over a highlight that is a separate element — the tile under a
+ * chosen segment — which has to be written in the colour drawn on a highlight,
+ * or it is the page's text on the system's selection colour.
+ */
+export declare const forcedCheckedTextClasses = "forced-colors:data-[checked]:[color:HighlightText]";
+/**
+ * The row of a list or a menu that the pointer and the arrow keys have reached,
+ * in forced-colours mode. Its tint is the only thing that marks it, and the rows
+ * draw no focus ring because the tint is the focus indicator, so without this a
+ * keyboard reader in a contrast theme cannot see which row Enter would choose.
+ *
+ * The colour is written on everything inside the row as well: a description or
+ * a shortcut that sets a muted colour of its own is otherwise put back to the
+ * page's text colour, which is unreadable on the highlight.
+ */
+export declare const forcedHighlightedClasses: string;
+/** A checked control that is disabled, in the system's colour for unavailable. */
+export declare const forcedDisabledCheckedClasses: 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

package/dist/internal/styles.js

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