plass-ui 1.5.0 → 1.7.0

package/dist/internal/labels.d.ts

@@ -40,6 +40,8 @@ export interface PlassLabels {
     empty: string;
     /** Marks a step, or anything else, that may be left out. */
     optional: string;
+    /** Why a control that has taken a press is not answering another one yet. */
+    loading: string;
     /** The trail's landmark, and the button that opens the steps it folded away. */
     breadcrumb: string;
     breadcrumbExpand: string;
@@ -47,6 +49,10 @@ export interface PlassLabels {
     carousel: string;
     carouselPrevious: string;
     carouselNext: string;
+    /** The button that starts a reel advancing on its own, and the same button
+     * once it is advancing, which stops it. */
+    carouselPlay: string;
+    carouselStop: string;
     /** What a slide is, said after its name: one slide's `aria-roledescription`.
      * The reel's own is `carousel`. */
     slide: string;
@@ -54,10 +60,24 @@ export interface PlassLabels {
     gallery: string;
     /** What a drawing of numbers is called when the caller has not named it. */
     chart: string;
+    /**
+     * The category a chart folds its smallest ones into. Not a name for any of
+     * them — it is what is left once the ones worth drawing have been drawn.
+     */
+    chartOther: string;
+    /**
+     * "And this many more": on a chart legend with more series than it shows, and
+     * under a command palette with more matches than it draws.
+     */
+    chartMore: (count: number) => string;
+    /** And the way back, once they are all showing. */
+    chartFewer: string;
     minimize: string;
     maximize: string;
     restore: string;
     resizeWindow: string;
+    /** The title bar of a window that can be dragged, as the keyboard reaches it. */
+    moveWindow: string;
     /** The palette's landmark and the placeholder in its field. */
     commandPalette: string;
     commandPalettePlaceholder: string;
@@ -160,8 +180,23 @@ export interface PlassLabels {
     addCustom: (query: string) => string;
     /** One slot of a code field, named by its place in the row. */
     otpSlot: (index: number, count: number) => string;
+    /** The tick over one of a transfer's lists, given the name of the list. */
+    transferSelectAll: (list: string) => string;
     /** What a transfer says once rows have moved, given how many and the list. */
     transferMoved: (count: number, list: string) => string;
+    /**
+     * Why a file picker turned files away, one line per reason and given how many
+     * were turned away for it.
+     *
+     * Grouped by reason rather than named one file at a time, because the batch
+     * that goes wrong is usually the big one — a folder dropped on a picker with
+     * a `maxFiles` of five is ninety-five lines saying the same thing. What the
+     * limit itself *is* belongs in `hint`, which is where a picker already says
+     * what it accepts, so these do not repeat it.
+     */
+    filesRejectedType: (count: number) => string;
+    filesRejectedSize: (count: number) => string;
+    filesRejectedCount: (count: number) => string;
 }
 /**
  * English, and the reason the library needs no setup to read.

package/dist/internal/labels.js

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

package/dist/internal/loading.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The English for the label set's `loading`, on its own.
+ *
+ * `PlButton` says this one word and nothing else from the set, and a button is
+ * the one component nearly every page imports. Reading it through `useLabels`
+ * would put all of the English in `labels.ts` into every bundle that has a
+ * button in it, and so would importing it from there: the set is shared with
+ * code a bundler splits off, and it moves the whole module into the shared
+ * chunk. So the word lives here, the button takes a provider's word from
+ * `useDefaults` and falls back to this, and the set reads it from here too so
+ * the two cannot disagree.
+ */
+export declare const loadingLabel = "Loading";

package/dist/internal/loading.js

@@ -0,0 +1 @@
+export const loadingLabel="Loading";

package/dist/internal/mockup.js

@@ -1 +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})]})}}}
+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",className:"block",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/notch.d.ts

@@ -0,0 +1,137 @@
+/**
+ * The label in the field's own top edge — `labelPlacement="notch"`, and the
+ * `float` that rests inside the field until it is wanted there.
+ *
+ * One module because every field-shaped control in the library draws the same
+ * notch: a PlTextField, a PlSelect's trigger, a PlCombobox, a PlNumberField, a
+ * PlFilePicker's drop zone and every picker that goes through `internal/picker`
+ * have to be indistinguishable along their top edge or a form looks like two
+ * forms stacked on each other.
+ *
+ * **The cut is real.** A `<legend>` takes a segment out of its `<fieldset>`'s
+ * border, and that is the only way to open a gap in a line without knowing what
+ * is behind it. The usual trick — a label with the page's own background colour
+ * painted over the border — cannot work here twice over: a library that does
+ * not paint the page has no idea what colour it is, and a Plass field is
+ * translucent, so a patch of flat colour would read as a patch of flat colour.
+ *
+ * **The fieldset is a sibling of the control rather than the control itself.**
+ * Half the shells this is drawn on are `<button>`s — a Select's trigger, a file
+ * picker's drop zone — and a button cannot contain a fieldset. So the frame
+ * below wraps the shell, the shell is drawn exactly as it always was, and the
+ * edge is laid over it with its own border. The shell's own border goes
+ * transparent for the length of it; `notchShellStyle` is that one declaration,
+ * written inline because it has to beat a `hover:` and a `disabled` rule that
+ * are already in the class string.
+ *
+ * **A `float` label is the same legend.** It comes down into the field by its
+ * own position and font size, and the legend folds to nothing under it so the
+ * edge closes over where the gap was. What decides that it rests is a relation
+ * between the frame's focus, the control's emptiness and whether a popup is
+ * open, which is plain CSS in `styles.css` under "The float label" rather than
+ * a state this component holds: an input says it is empty through
+ * `:placeholder-shown` before any script has run, and so does a select's
+ * trigger through `data-placeholder`. This file hands that stylesheet its
+ * numbers and its hooks.
+ */
+import * as React from 'react';
+import type { PlassDensity, PlassFieldLabelPlacement, PlassSize, PlassVariant } from '../types.js';
+/**
+ * The hook a resting label reads the control's emptiness through, on the
+ * element that has one to give: an `<input>`, whose `:placeholder-shown` says
+ * so, or a select's trigger, whose `data-placeholder` does. An input with no
+ * placeholder of its own is given a blank one, since `:placeholder-shown`
+ * never matches an input that has none.
+ */
+export declare const floatControlClassName = "plass-float-control";
+/**
+ * What a resting label stands in for, which steps aside while the label is
+ * there: the placeholder written in a trigger, a picker's words for nothing
+ * chosen. An input's own placeholder is reached through the control's
+ * `::placeholder` instead.
+ */
+export declare const floatPlaceholderClassName = "plass-float-placeholder";
+/**
+ * What the shell gives up while the edge is drawing for it.
+ *
+ * Inline rather than a class: every field's shell already carries a
+ * `border-color` at rest, another on hover, another on focus and another when
+ * disabled, and a utility added on top of those would be one more declaration
+ * of the same property at the same specificity — whichever of them Tailwind
+ * happened to emit last would win. The border itself stays, transparent, so the
+ * control's inside is the same size it was.
+ */
+export declare const notchShellStyle: React.CSSProperties;
+/**
+ * What a control's `labelPlacement` comes to once its label and its start are
+ * known.
+ *
+ * `notched` is whether the edge is cut at all: for `notch` and for `float`, and
+ * only where there is a label, since a notch with nothing in it is a gap in the
+ * edge for no reason. `float` is whether the label may also come down into the
+ * control, which it cannot where the control draws something at its start —
+ * `startTaken` — because that is where it would rest.
+ */
+export declare function resolveNotch(placement: PlassFieldLabelPlacement, label: React.ReactNode, startTaken: boolean): {
+    notched: boolean;
+    float: boolean;
+};
+export interface FieldNotchProps {
+    /**
+     * Whether to draw one at all. `false` renders the shell and nothing else, so
+     * a call site wraps its control once and unconditionally rather than writing
+     * the whole thing out twice — which is what keeps the two placements from
+     * drifting into two controls.
+     */
+    notched: boolean;
+    size: PlassSize;
+    density: PlassDensity;
+    variant: PlassVariant;
+    /** Unavailable — the edge dims with the control. */
+    disabled?: boolean;
+    /** Shown but not editable — the edge stays and stops answering. */
+    readOnly?: boolean;
+    /**
+     * The whole edge, when it is not a field's hairline — width, style, colour and
+     * every state, replacing the three maps above.
+     *
+     * A PlFilePicker's drop zone is the one caller that needs it: its edge is 2px
+     * and dashed in all three variants, and it has a state no field has, a file
+     * being dragged over the box. Passed as one resolved string rather than added
+     * to the maps, for the reason every component in this library resolves its own
+     * states with an if/else — two utilities for one property at one specificity
+     * are settled by the order Tailwind happened to emit them in.
+     */
+    edgeClassName?: string;
+    /**
+     * The label comes down into the control while it is empty and idle —
+     * `labelPlacement="float"` on a control with nothing drawn at its start.
+     * The caller decides both halves of that, since only it knows what its start
+     * holds, and passes `notched` as well: a floating label is in the notch for
+     * as long as it is not resting.
+     */
+    float?: boolean;
+    /**
+     * Whether the control holds nothing, from a component that knows and has no
+     * control that can say so itself — a picker's trigger. Left out, the control
+     * marked with `floatControlClassName` says it.
+     */
+    empty?: boolean;
+    /**
+     * The element that names the control, ready to render: a `Field.Label` for a
+     * field that has one, or the `<span>` an `aria-labelledby` points at. The
+     * same element the stacked placement renders, so the two cannot drift.
+     */
+    label: React.ReactNode;
+    /** The control's shell, drawn exactly as it is without a notch. */
+    children: React.ReactNode;
+}
+/**
+ * Lays the notched edge over a control's shell.
+ *
+ * The frame is what the edge is positioned against and what hover and focus are
+ * read from, so the shell has to be inside it — and the shell is rendered
+ * untouched, which is the point: a notch is a decision about the label, not a
+ * second way of drawing a field.
+ */
+export declare function FieldNotch({ notched, size, density, variant, disabled, readOnly, edgeClassName, float, empty, label, children }: FieldNotchProps): React.JSX.Element;

package/dist/internal/notch.js

@@ -0,0 +1 @@
+"use client";import{Fragment as r,jsx as o,jsxs as e}from"react/jsx-runtime";import{cx as t,hasContent as l,metaTextClasses as a,radiusClasses as p,transitionClasses as s}from"./styles.js";const n={xs:"-top-[5px]",sm:"-top-[5.5px]",md:"-top-[6px]",lg:"-top-[6.5px]",xl:"-top-[7px]"},c={xs:"mt-[5px]",sm:"mt-[5.5px]",md:"mt-[6px]",lg:"mt-[6.5px]",xl:"mt-[7px]"},m={default:{xs:"ms-[calc(0.5rem_-_var(--p-notch-grow,0px))]",sm:"ms-[calc(0.625rem_-_var(--p-notch-grow,0px))]",md:"ms-[calc(0.75rem_-_var(--p-notch-grow,0px))]",lg:"ms-[calc(1.25rem_-_var(--p-notch-grow,0px))]",xl:"ms-[calc(1.5rem_-_var(--p-notch-grow,0px))]"},compact:{xs:"ms-[calc(0.5rem_-_var(--p-notch-grow,0px))]",sm:"ms-[calc(0.625rem_-_var(--p-notch-grow,0px))]",md:"ms-[calc(0.75rem_-_var(--p-notch-grow,0px))]",lg:"ms-[calc(0.875rem_-_var(--p-notch-grow,0px))]",xl:"ms-[calc(1rem_-_var(--p-notch-grow,0px))]"}},d={xs:"px-0.5",sm:"px-0.5",md:"px-1",lg:"px-1",xl:"px-1"},i={xs:"[--p-notch-pad:0.125rem] [--p-notch-leading:0.625rem] [--p-float-y:0.75rem] [--p-float-text:0.6875rem]",sm:"[--p-notch-pad:0.125rem] [--p-notch-leading:0.6875rem] [--p-float-y:1rem] [--p-float-text:0.8125rem]",md:"[--p-notch-pad:0.25rem] [--p-notch-leading:0.75rem] [--p-float-y:1.25rem] [--p-float-text:0.875rem]",lg:"[--p-notch-pad:0.25rem] [--p-notch-leading:0.8125rem] [--p-float-y:1.5rem] [--p-float-text:1rem]",xl:"[--p-notch-pad:0.25rem] [--p-notch-leading:0.875rem] [--p-float-y:1.75rem] [--p-float-text:1.125rem]"},x={default:{xs:"",sm:"",md:"",lg:"",xl:""},compact:{xs:"[--p-float-x:-0.25rem]",sm:"[--p-float-x:-0.25rem]",md:"[--p-float-x:-0.375rem]",lg:"[--p-float-x:-0.25rem]",xl:"[--p-float-x:-0.25rem]"}};export const floatControlClassName="plass-float-control";export const floatPlaceholderClassName="plass-float-placeholder";const f={solid:/* @__PURE__ */["border border-transparent","group-focus-within/field:[border-color:var(--p-ring)]"].join(" "),glass:/* @__PURE__ */["border [border-color:var(--plass-border)]","group-hover/field:[border-color:var(--p-line)]","group-focus-within/field:[border-color:var(--p-ring)]"].join(" "),ghost:/* @__PURE__ */["border border-transparent","group-focus-within/field:[border-color:var(--p-ring)]"].join(" ")},g={solid:"border border-transparent",glass:"border [border-color:var(--plass-border)]",ghost:"border border-transparent"},h={solid:"border border-transparent opacity-50",glass:/* @__PURE__ */["border [border-color:var(--plass-border)] opacity-50","forced-colors:[border-color:GrayText]"].join(" "),ghost:"border border-transparent opacity-50"},b=/* @__PURE__ */["group-has-[:focus-visible]/field:[border-width:2px]","group-has-[:focus-visible]/field:[--p-notch-grow:1px]","group-has-[:focus-visible]/field:forced-colors:[border-color:Highlight]"].join(" ");export const notchShellStyle={borderColor:"transparent"};export function resolveNotch(r,o,e){const t="top"!==r&&l(o);return{notched:t,float:t&&"float"===r&&!e}}export function FieldNotch({notched:l,size:v,density:u,variant:_,disabled:w=!1,readOnly:y=!1,edgeClassName:j,float:N=!1,empty:C,label:$,children:F}){return l?e("div",{className:t("group/field relative flex w-full",c[v],N&&`plass-notch-float ${i[v]} ${x[u][v]}`),"data-empty":N&&C||void 0,children:[F,o("fieldset",{role:"presentation",className:t("pointer-events-none absolute inset-x-0 bottom-0 m-0 min-w-0 p-0",n[v],p[v],s,j??(w?h[_]:y?g[_]:`${f[_]} ${b}`)),children:o("legend",{className:t("pointer-events-auto font-semibold leading-none",a[v],m[u][v],N?"px-0":d[v],w?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:$})})]}):o(r,{children:F})}

package/dist/internal/picker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PlassPickerLabels } from './calendar.js';
-import type { PlassColor, PlassElevation, PlassFieldClassNames, PlassSize, PlassStyleProps } from '../types.js';
+import type { PlassColor, PlassElevation, PlassFieldClassNames, PlassFieldLabelPlacement, PlassSize, PlassStyleProps } from '../types.js';
 /**
  * The shell all four pickers wear: a field-shaped trigger with a popup hanging
  * off it.
@@ -31,6 +31,9 @@ import type { PlassColor, PlassElevation, PlassFieldClassNames, PlassSize, Plass
  * 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;
 /**
@@ -84,8 +87,17 @@ export interface PlassPickerShellProps extends PlassStyleProps, Omit<React.Compo
      * @default 0
      */
     elevation?: PlassElevation;
-    /** Label above the trigger. */
+    /** The name of what the control holds. */
     label?: React.ReactNode;
+    /**
+     * Where the `label` goes — above the trigger, 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'
+     */
+    labelPlacement?: PlassFieldLabelPlacement;
     /** Helper text below it. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the control invalid. */
@@ -141,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, 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, ...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 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)"})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Field as s}from"@base-ui/react/field";import{Popover as a}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:s}){return e(l,{className:T,children:t("svg",{width:s,height:s/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:se=!1,onClear:ae,open:re,onOpenChange:ie,labels:oe,name:ne,formValue:de,children:pe,triggerRef:ce,...me}){const ue=l.useId(),fe=U??`${ue}-trigger`,he=`${ue}-label`,ge=`${ue}-value`,xe=`${ue}-description`,be=`${ue}-error`,ve=x(),ye=V??ve.labelPlacement??"top",{notched:Ne,float:we}=g(ye,T,D(G)),je=null!=_&&!1!==_&&""!==_,Pe=A??je,ke=Pe?"danger":E,[$e,ze]=l.useState(null),Ce=n($e),Be=o(J)||Ce,De=!Be&&!K,Ee=Be||K,Ie=l.useRef(null),Oe=e(s.Label,{id:he,htmlFor:fe,className:N(I[B],"font-semibold",Be?"text-(--plass-muted-fg)":"text-(--plass-fg)",Y?.label),children:T});return t(s.Root,{ref:ze,disabled:Be,invalid:Pe,className:N("flex-col align-top",S[B],H?"flex w-full":"inline-flex",X),style:{...$(ke,F),...Z},...me,children:[D(T)&&!Ne?Oe:null,t(a.Root,{open:re,onOpenChange:e=>ie(e),children:[e(u,{notched:Ne,size:B,density:q,variant:z,disabled:Be,readOnly:K,float:we,empty:le,label:Oe,children:t("span",{style:Ne?h:void 0,onPointerMove:d(De),className:N(M,Ne?"":L,v[B],y[B],R[B],C[B],O[q][B],Be?w[z]:K?P[z]:k[z],De?"plass-glow":"",Y?.control),children:[e(s.Validity,{children:({validity:l})=>{const s=!1===l.valid,r=[W?xe:null,je||s&&!Be&&!0!==A?be:null].filter(Boolean).join(" ")||void 0;return t(a.Trigger,{id:fe,ref:ce,disabled:Be,"aria-labelledby":T?`${he} ${ge}`:void 0,"aria-describedby":r,"aria-required":Q||void 0,"aria-invalid":Pe||s||void 0,onBlur:()=>{re||i(Ie.current)},className:N("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",C[B],"[outline:none]",Ee?"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:ge,className:N("w-full truncate",le?"text-(--plass-muted-fg)":"text-(--plass-fg)",we&&f),children:ee}),H?null:e(c,{samples:we?[...te??[],m(T)].filter(Boolean):te??[]})]})]})}}),!se||le||Ee?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;ae(),l&&t.ownerDocument.getElementById(fe)?.focus()},children:e(p,{})})]})}),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:N(pickerPopupClasses,R[B],popupPaddingClasses[B],y[B]),style:popupSlots(ke,3),children:pe})})})]}),W?e(s.Description,{id:xe,className:N(j(B),Y?.description),children:W}):null,e(s.Error,je?{id:be,match:!0,className:N(I[B],"text-(--p-accent)",Y?.error),children:_}:{id:be,className:N(I[B],"text-(--p-accent)",Y?.error)}),e(r,{ref:Ie,name:ne,value:de,required:Q&&!K,disabled:Be,standIn:()=>Ie.current?.ownerDocument.getElementById(fe)})]})}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

@@ -128,7 +128,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 +137,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 s}from"./format.js";import{forcedFieldEdgeClasses as r,forcedFillClasses as t}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)] ${t}`;export const fillTransitionClasses="[transition:width_var(--plass-duration-slow)_var(--plass-ease)] motion-reduce:[transition-duration:0ms]";export function progressFraction(s,r,t){return null==s||Number.isNaN(s)||t<=r?null:Math.min(1,Math.max(0,(s-r)/(t-r)))}export function progressValue(s,r,t){return null==s||null===progressFraction(s,r,t)?null:Math.min(t,Math.max(r,s))}const e={style:"percent"};export function progressText(r,t,o,l){return null===r?null:o?t:s(l,e).format(r)}export function progressAriaText(s,r,t){if(null!==s)return e=>progressText(s,e,r,t)??""}

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.
  *
@@ -18,15 +17,17 @@ 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
- *   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.
+ * - **Not text.** A sample is 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.
+ *
+ * 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: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)=>e("span",{"data-sample":a,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${n}:${a}`))})}

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"}