plass-ui 1.6.0 → 1.7.0

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

@@ -1,5 +1,6 @@
 /**
- * The label in the field's own top edge — `labelPlacement="notch"`.
+ * 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
@@ -22,9 +23,34 @@
  * 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, PlassSize, PlassVariant } from '../types.js';
+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.
  *
@@ -36,6 +62,20 @@ import type { PlassDensity, PlassSize, PlassVariant } from '../types.js';
  * 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
@@ -63,6 +103,20 @@ export interface FieldNotchProps {
      * 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
@@ -80,4 +134,4 @@ export interface FieldNotchProps {
  * untouched, which is the point: a notch is a decision about the label, not a
  * second way of drawing a field.
  */
-export declare function FieldNotch({ notched, size, density, variant, disabled, readOnly, edgeClassName, label, children }: FieldNotchProps): React.JSX.Element;
+export declare function FieldNotch({ notched, size, density, variant, disabled, readOnly, edgeClassName, float, empty, label, children }: FieldNotchProps): React.JSX.Element;

package/dist/internal/notch.js

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

@@ -31,6 +31,9 @@ import type { PlassColor, PlassElevation, PlassFieldClassNames, PlassFieldLabelP
  * filled token in the library that has to be found without being read, which is
  * the day you picked. So the sheet stays clear glass and the family arrives in
  * the two fill slots the chosen cell reads.
+ *
+ * A `PlCalendar` is the same sheet set on the page instead of in a popup, and
+ * takes the same slots for the same reason.
  */
 export declare function popupSlots(color: PlassColor, elevation: PlassElevation): React.CSSProperties;
 /**
@@ -87,7 +90,10 @@ export interface PlassPickerShellProps extends PlassStyleProps, Omit<React.Compo
     /** The name of what the control holds. */
     label?: React.ReactNode;
     /**
-     * Where the `label` goes — above the trigger, or in its top edge.
+     * Where the `label` goes — above the trigger, in its top edge, or inside it
+     * where the value would be written until the trigger is focused, open or
+     * holds a value. A trigger that draws a glyph at its start keeps a `float`
+     * label in the edge, because the glyph is where it would rest.
      * Falls back to the nearest `PlassProvider`, then to `top`.
      * @default 'top'
      */
@@ -147,7 +153,7 @@ interface InternalShellProps extends PlassPickerShellProps {
  * and the way `invalid` re-points the whole colour family at `danger` so the
  * edge, the ring and the message turn over together.
  */
-export declare function PickerShell({ variant, size, color, density, elevation, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, name, formValue, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
+export declare function PickerShell({ variant, size, color, density, elevation, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, name, formValue, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
 /**
  * The row of shortcuts under a picker's panel.
  *

package/dist/internal/picker.js

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

package/dist/internal/styles.d.ts

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