plass-ui 1.2.0 → 1.4.0

package/dist/internal/steps.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The rail a sequence is drawn on, shared by `PlTimeline` and `PlStepper`.
+ *
+ * The two components are not the same thing — a timeline **reports** a sequence
+ * that happened and a stepper **is** one the reader is moving through, which is
+ * why one is an `<ol>` of text and the other is an `<ol>` of buttons with a
+ * panel under it — but they are the same *drawing*, and a reader who has learned
+ * what a haloed bullet means on one must not find it meaning something else on
+ * the other.
+ *
+ * So the marks live here and the behaviour lives in the components. This is the
+ * arrangement `internal/button-group.ts` and `internal/progress.ts` already
+ * make, and it is here for the reason `internal/icons.tsx` gives: two copies of
+ * twelve lines are not expensive, they are two copies that drift.
+ */
+import type { PlassColor, PlassSize } from '../types.js';
+/**
+ * How far along one step is.
+ *
+ * Three states rather than two, because "the one you are on" is not the same
+ * claim as "done", and a sequence that cannot say which step is current is a
+ * list. Each gets its own axis — a filled bullet, a filled bullet with a halo
+ * around it, an empty one — rather than three shades of the same thing.
+ */
+export type PlassStepStatus = 'complete' | 'current' | 'upcoming';
+/** How the line between two steps is drawn. `none` leaves the gap open. */
+export type PlassStepConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+/**
+ * The bullet.
+ *
+ * Its own ladder rather than a step off `controlHeightClasses`, for the reason
+ * `tickSizeClasses` has one: a bullet is not a control you can put a label
+ * inside. It is a mark beside one, sized against the title next to it — which is
+ * why the steps are close to the tick ladder and not to the control ladder.
+ *
+ * It is written as a custom property rather than as a class because the
+ * connector has to know it: the line is centred on the bullet, and centring is
+ * arithmetic on this number.
+ */
+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
+ * connector is coloured by whether the step it leaves has been reached, not by
+ * where it arrives.
+ */
+export declare const connectorColorClasses: Record<PlassStepStatus, string>;
+export declare const connectorStyleClasses: Record<PlassStepConnector, string>;
+export declare const titleStatusClasses: Record<PlassStepStatus, string>;
+/**
+ * Which of the three a step is, from where the sequence has got to.
+ *
+ * `active` is an **index**, not a value, because neither a timeline nor a
+ * stepper has a selection: everything before it is `complete`, the step at it is
+ * `current`, everything after it is `upcoming`.
+ */
+export declare function statusAt(index: number, active: number | null): PlassStepStatus;
+/** The slot family a step draws in, so the two components dye a rail alike. */
+export type StepFamily = PlassColor;

package/dist/internal/steps.js

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

package/dist/internal/styles.d.ts

@@ -103,6 +103,14 @@ export declare const tickRadiusClasses: Record<PlassSize, string>;
  * So every dot here has the same parity as the ring's content box: 12/6, 14/6,
  * 16/8, 18/8, 22/10. The ratio wanders between 38% and 44% as a result, which
  * is the price, and it is invisible next to the thing it buys.
+ *
+ * **The dot grows out of the middle rather than appearing at full size**, so
+ * the size is a pair: nothing until the option is chosen, and the diameter
+ * above once it is. It is the box that grows and not a `scale` — the ring is a
+ * fixed-size flex centre, so the two values are laid out around the same point
+ * and nothing outside the ring can be moved by either of them. Both classes
+ * have to be written out here rather than composed at the call site, because
+ * Tailwind only generates a utility it has seen spelled out in a source file.
  */
 export declare const tickDotClasses: Record<PlassSize, string>;
 /**
@@ -203,6 +211,13 @@ export declare const glassClasses = "[backdrop-filter:var(--plass-blur)] [-webki
  * is in the list because a gradient fill is the thing being changed on a solid
  * surface, and `filter` because that is what hover and press actually move.
  *
+ * `opacity` is in it because half the library already writes an opacity as a
+ * *state*: `opacity-50` is what disabled looks like everywhere, a `PlBackTop`
+ * appears and goes on `opacity-0`, and a `PlImage` uncovers itself the moment
+ * the picture decodes. Without it in the list every one of those is a value
+ * that changes between two frames, which is the one thing the house transition
+ * exists to prevent.
+ *
  * There is no `transform` in the list and none should be added to a *control*:
  * scaling a key resamples its label, and text that shimmers under the cursor
  * undoes the restraint everything else is spending effort on. A surface that

package/dist/internal/styles.js

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

package/dist/internal/table.d.ts

@@ -0,0 +1,86 @@
+/**
+ * The ink a table is drawn with, and the reason two components share it.
+ *
+ * `PlTable` draws a grid it is given; `PlDataTable` sorts, filters and pages
+ * its own rows and then draws one. They are two components because the second
+ * has to call hooks and the first must not — a table whose every column is a
+ * `render` callback is the one component in this library that a React server
+ * component has to be able to render, and reading a context would take that
+ * away. Two components drawing the same grid out of two copies of these
+ * constants is how the rules under a sorted table end up a shade off the rules
+ * under a plain one.
+ */
+import type * as React from 'react';
+import type { PlassDensity, PlassSize } from '../types.js';
+/**
+ * Row height, as vertical padding — and, like the horizontal track, a raw
+ * length rather than a class. See the note on `paddingXValues`.
+ */
+export declare const cellPaddingYValues: Record<PlassDensity, Record<PlassSize, string>>;
+/**
+ * Everything a table is painted with is written inline, `<table>` included.
+ *
+ * This is the one component in the library that has to do that, and the reason
+ * is the elements it renders. A PlButton owns its `<button>`; nobody else
+ * styles it. `<table>`, `<th>` and `<td>` are different — VitePress's
+ * `.vp-doc table`, Tailwind Typography's `.prose td` and every CSS framework in
+ * existence style them by tag name, at two-class specificity that a one-class
+ * Tailwind utility cannot outrank.
+ *
+ * Padding and alignment were already written inline for that reason. **The
+ * borders, the display mode and the margins were not**, and that omission was
+ * most of what a Plass table looked like on a documentation page: the host's
+ * `td { border: 1px solid }` drew a full grid of cell rules the design never
+ * asked for, its `table { display: block }` stopped `width: 100%` filling the
+ * sheet, and its `table { margin: 20px 0 }` pushed the whole thing off the
+ * top-left corner of the pane it is supposed to be flush inside. A grid of
+ * boxed cells floating inside a rounded sheet is not a restrained table with a
+ * problem — it is somebody else's table wearing this one's frame.
+ *
+ * So every cell states `border: 0` and then draws the one rule it actually
+ * wants, and the `<table>` states the four properties a prose stylesheet is
+ * known to take off it. It is verbose, and it is the only way the component
+ * looks the same in a bare app and inside `.prose`.
+ *
+ * What is *not* inline is the row's own background, because it has a hover
+ * state and inline styles have no `:hover`. It reads a `--p-row` slot instead,
+ * which classes then set — a custom property is invisible to a host stylesheet,
+ * so a one-class variant wins there without a fight.
+ */
+export declare const tableStyle: React.CSSProperties;
+export declare const rowClasses: string;
+/**
+ * What a row that answers a press needs beyond the pointer treatment.
+ *
+ * `tabIndex` is the whole point: a row whose only way in is `onClick` is a
+ * control a keyboard cannot reach at all, and `cursor-pointer` advertises it as
+ * one anyway. The ring is inset rather than offset, because the sheet clips at
+ * its own rounded edge and an outline drawn outside the first or last row is an
+ * outline with its top or bottom sliced off.
+ *
+ * The `role` is deliberately left alone. `role="button"` on a `<tr>` reads well
+ * in isolation and takes the row semantics off it — which orphans every `<td>`
+ * inside from the table they belong to, and costs a screen reader the column
+ * headers, the row position and the count.
+ */
+export declare const clickableRowClasses: string;
+/**
+ * Two weights of rule, and the whole of the table's structure.
+ *
+ * `--plass-divider` scores one row off the next, the same ink a PlCard and a
+ * PlList are scored with, so a table on a card and the card's own dividers are
+ * one family of lines. The header sits on `--plass-border`, one step firmer,
+ * because the break between the names of the columns and the data in them is
+ * the one division a reader has to find without looking for it.
+ *
+ * Both are neutral inks rather than the `--plass-glass-line` this used to use.
+ * That line is white, and a white rule between two rows of a white sheet is
+ * not a rule — which is why the table had no visible structure of its own in
+ * light mode, and why it looked like whatever grid the host page happened to
+ * be drawing over it.
+ *
+ * They are on the *cells* rather than on the `<tr>`, which is where a rule can
+ * be written inline and therefore where a host stylesheet cannot reach it.
+ */
+export declare const rowRule = "1px solid var(--plass-divider)";
+export declare const headRule = "1px solid var(--plass-border)";

package/dist/internal/table.js

@@ -0,0 +1 @@
+import{focusRingInsetClasses as r}from"./styles.js";export const cellPaddingYValues={default:{xs:"0.375rem",sm:"0.5rem",md:"0.75rem",lg:"0.875rem",xl:"1rem"},compact:{xs:"0.125rem",sm:"0.25rem",md:"0.4375rem",lg:"0.5625rem",xl:"0.6875rem"}};export const tableStyle={display:"table",width:"100%",margin:0,borderCollapse:"collapse",borderSpacing:0};export const rowClasses=/* @__PURE__ */["[--p-row:transparent]","[transition:background-color_var(--plass-duration)_var(--plass-ease)]"].join(" ");export const clickableRowClasses=/* @__PURE__ */["cursor-pointer [outline:none]",r].join(" ");export const rowRule="1px solid var(--plass-divider)";export const headRule="1px solid var(--plass-border)";

package/dist/internal/threshold.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Which band a reading has landed in.
+ *
+ * One rule, shared by the two components that draw a value against a scale a
+ * caller described: `PlMeter`'s bar and `PlGaugeChart`'s arc. Written twice
+ * they would drift, and a quota that turns `danger` on a bar but not on the
+ * dial beside it is a dashboard that contradicts itself.
+ */
+import type { PlassColor, PlassThreshold } from '../types.js';
+/**
+ * The family a value lands in.
+ *
+ * The highest band at or below the value, or `color` when the value is under
+ * all of them. One pass rather than a sort, because the list is small and
+ * sorting a caller's array — or a copy of it on every render — buys nothing.
+ * Reading it rather than walking it in order is also what makes the prop
+ * order-independent, which is what a caller assumes.
+ */
+export declare function bandColor(value: number, color: PlassColor, thresholds: readonly PlassThreshold[] | undefined): PlassColor;

package/dist/internal/threshold.js

@@ -0,0 +1 @@
+export function bandColor(o,r,f){if(!f?.length)return r;let n;for(const r of f)o>=r.from&&(void 0===n||r.from>n.from)&&(n=r);return n?.color??r}

package/dist/internal/tour.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The geometry a spotlight is cut out of, as arithmetic rather than as a
+ * component.
+ *
+ * A tour dims the page and takes one thing out of the dimming. Everything hard
+ * about that is a rectangle and a rounded corner, so it is here: it can be read
+ * without a browser, tested without one, and it is the same shape the Flutter
+ * build punches with `Path.combine`.
+ */
+/** Where the thing being pointed at is, in viewport coordinates. */
+export interface PlassSpot {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/** A rectangle grown by [padding] on every side, never to a negative size. */
+export declare function inflate(rect: PlassSpot, padding: number): PlassSpot;
+/**
+ * The whole scrim with a hole in it, as a `clip-path` value.
+ *
+ * A clip and not a shadow, and that is the decision the whole component rests
+ * on. The obvious way to draw a hole is one element the size of the target
+ * carrying a box shadow larger than any screen; it works, and it buys nothing
+ * else. A clip buys two things that matter:
+ *
+ * **The dimming can blur.** A `box-shadow` paints a colour. A clipped element
+ * can carry a `backdrop-filter`, so the page around the spotlight is blurred as
+ * well as dimmed — which is this library's own material rather than a grey wash
+ * over it.
+ *
+ * **The hole is a hole for the pointer too.** A clipped-away region is not
+ * hit-tested, so the scrim can take the pointer everywhere it is painted and
+ * nowhere it is not. The reader can use the control being pointed at and
+ * nothing else, which is what separates a tour from a dialog with a picture of
+ * a control in it — and it falls out of the geometry rather than being a second
+ * mechanism that has to agree with it.
+ *
+ * `null` is a step with no target: the whole page dims and nothing is cut out,
+ * which is what a welcome step and a closing step are.
+ */
+export declare function spotlightPath(spot: PlassSpot | null, radius: number): string;

package/dist/internal/tour.js

@@ -0,0 +1 @@
+export function inflate(t,$){return{top:t.top-$,left:t.left-$,width:Math.max(0,t.width+2*$),height:Math.max(0,t.height+2*$)}}export function spotlightPath(t,$){const h="M0,0H100000V100000H0Z";return null===t||t.width<=0||t.height<=0?`path(evenodd,'${h}')`:`path(evenodd,'${h}${function roundedRect(t,$){const{top:h,left:e,width:n,height:i}=t,o=Math.max(0,Math.min($,n/2,i/2));return 0===o?`M${e},${h}H${e+n}V${h+i}H${e}Z`:`M${e+o},${h}H${e+n-o}A${o},${o} 0 0 1 ${e+n},${h+o}V${h+i-o}A${o},${o} 0 0 1 ${e+n-o},${h+i}H${e+o}A${o},${o} 0 0 1 ${e},${h+i-o}V${h+o}A${o},${o} 0 0 1 ${e+o},${h}Z`}(t,$)}')`}

package/dist/internal/window.d.ts

@@ -0,0 +1,201 @@
+/**
+ * The chrome a `PlWindowPane` draws, and the tables that say how big it is.
+ *
+ * It lives here for the reason `internal/mockup.tsx` does. One component reads
+ * it, but what it holds is reference data rather than a piece of that component
+ * — four systems' worth of title bars, three buttons each, drawn four different
+ * ways — and a component file with all of that in it would be a table with a
+ * `forwardRef` at the bottom.
+ *
+ * Three conventions run through it:
+ *
+ * **Every length is a CSS pixel at `md`, scaled once by `size`.** A title bar is
+ * 32px on Windows 11 and 38px on macOS because those are the heights they are,
+ * not because a ladder in `internal/styles.ts` says so — this is the one place
+ * in the library where the numbers come from somewhere else. `size` multiplies
+ * them, which is why they are written as numbers rather than as utilities.
+ *
+ * **The buttons are drawings of what they do and carry no other party's marks.**
+ * A traffic light is three circles; a Windows control is a line, a box and a
+ * cross. Their names come from `internal/labels.ts` and are read out; nothing here
+ * writes a word.
+ *
+ * **Nothing is mixed out of `currentColor`.** Every fill a control can take is a
+ * slot computed once in `windowSlots`, because a hover that changes the ink and
+ * a fill derived from the ink are the same declaration arguing with itself —
+ * which is exactly how a close button ends up white on white.
+ */
+import * as React from 'react';
+import type { PlassColor, PlassSize } from '../types.js';
+/**
+ * Whose window this is a picture of.
+ *
+ * Versions are separate entries wherever the *title bar* is what changed, which
+ * is why Windows has five and the others have one or two. XP painted its bar in
+ * Luna blue and framed the window in it; 7 made it glass; 8 threw both away for
+ * a flat square sheet; 10 ruled the bar off from the body; 11 rounded the
+ * corners and made the two one Mica sheet again. `macosx` is Aqua — the striped
+ * grey bar, the glossy lights and the square bottom corners — against the flat
+ * `macos` that replaced it.
+ *
+ * They are named the way the systems are, so `windows11` rather than `win11`
+ * and `macos` rather than `mac`. Nothing here is a copy of any of them: what is
+ * drawn is a bar, a border and three buttons at the proportions the system used,
+ * and no mark, wordmark or icon belonging to anyone else.
+ */
+export type PlWindowOs = 'macos' | 'macosx' | 'windows11' | 'windows10' | 'windows8' | 'windows7' | 'windowsxp' | 'linux';
+/** The three buttons a title bar can carry. */
+export type PlWindowControl = 'minimize' | 'maximize' | 'close';
+/** How far the window has been dragged from where the layout put it. */
+export interface PlWindowOffset {
+    x: number;
+    y: number;
+}
+/** Everything the component needs to lay a title bar out, in CSS pixels. */
+export interface PlWindowMetrics {
+    /** The title bar's height. */
+    bar: number;
+    /** The window's own corner, at the top. */
+    radius: number;
+    /** And at the bottom, which the older systems leave square. */
+    radiusBottom: number;
+    /** The hairline around the window. */
+    frame: number;
+    /**
+     * The *band* around it, which is a different thing: the stretch of the
+     * system's own colour that XP and Aero put down the sides of a window and
+     * along the bottom of it, with the content inset into it. Zero on the systems
+     * that have only a hairline.
+     */
+    band: {
+        side: number;
+        bottom: number;
+    };
+    /** The air at the leading edge of the bar. */
+    padX: number;
+    /** And at the trailing edge, which is nothing where the buttons run to it. */
+    padEnd: number;
+    /** Between one control and the next. */
+    gap: number;
+    /** The title's type size. */
+    title: number;
+    /** One control's box. */
+    control: {
+        width: number;
+        height: number;
+    };
+    /** The mark inside it. */
+    glyph: number;
+    /** How heavy the title is written. */
+    weight: number;
+    /** How much room the whole set of them takes, given how many are drawn. */
+    controlsWidth: (count: number) => number;
+    /** Aero's close button, which is wider than the two beside it. */
+    closeWidth: number;
+}
+interface PlWindowChrome {
+    bar: number;
+    radius: number;
+    /** Square on every system before the corners were rounded all the way round. */
+    radiusBottom: number;
+    padX: number;
+    /** The air at the trailing end, which is nothing where the buttons run to it. */
+    padEnd: number;
+    gap: number;
+    title: number;
+    glyph: number;
+    weight: number;
+    frame: number;
+    band: {
+        side: number;
+        bottom: number;
+    };
+    control: {
+        width: number;
+        height: number;
+    };
+    /** Aero's close button is wider than the two beside it. */
+    closeWidth?: number;
+    /** Where the title sits along the bar. */
+    titleAlign: 'start' | 'center';
+    /** Which end the controls are on. */
+    controlsSide: 'start' | 'end';
+    /**
+     * How one control is drawn.
+     *
+     * - `dot` — a flat traffic light, and `gloss-dot` the same one with Aqua's
+     *   highlight and ring on it.
+     * - `square` — a flat rectangle running to the corner of the window.
+     * - `plate` — XP's coloured, gradient-filled button.
+     * - `aero` — a pane of glass hung off the top edge, close first among equals.
+     * - `circle` — GNOME's small disc.
+     */
+    shape: 'dot' | 'gloss-dot' | 'square' | 'plate' | 'aero' | 'circle';
+    /** Whether the bar is ruled off from the body. */
+    rule: boolean;
+    /** How thick the glyphs are drawn. */
+    stroke: number;
+    /** The corner on the maximize box: Windows 11 rounds it, Windows 10 does not. */
+    boxRadius: number;
+    /** How much of the page's ink is stirred into the bar, in front and behind. */
+    tint: [number, number];
+    /** Whether an accented window carries the colour into its border as well. */
+    accentBorder: boolean;
+    /**
+     * The chrome's own colours, for the systems that painted their title bar
+     * rather than taking the page's.
+     *
+     * Fixed values rather than theme tokens, exactly as `PlMockup`'s finishes are:
+     * Luna blue is Luna blue on a page switched to dark, and a title bar that
+     * changed colour with the theme would be a drawing of the theme rather than
+     * of a window. `dark` says which way its own controls have to lighten.
+     */
+    paint: {
+        fill: string;
+        ink: string;
+        dark: boolean;
+    } | null;
+    /** What is laid over that fill: the gradient, the gloss, the stripes. */
+    image: string | null;
+    /** The title's own shadow — XP's hard one, Aero's glow, Aqua's emboss. */
+    shadow: string | null;
+    /** Whether the bar blurs what is behind it, which is what made Aero glass. */
+    glass: boolean;
+}
+export declare function windowMetrics(os: PlWindowOs, size: PlassSize): PlWindowMetrics;
+export declare function windowChrome(os: PlWindowOs): PlWindowChrome;
+export declare function orderControls(os: PlWindowOs, controls: readonly PlWindowControl[]): PlWindowControl[];
+export declare function windowSlots(options: {
+    os: PlWindowOs;
+    color: PlassColor;
+    accent: boolean;
+    transparency: number;
+    active: boolean;
+    elevation: number;
+}): React.CSSProperties;
+export interface PlPlWindowControlsProps {
+    os: PlWindowOs;
+    metrics: PlWindowMetrics;
+    controls: readonly PlWindowControl[];
+    maximized: boolean;
+    active: boolean;
+    /** What each button is called, plus the word the maximize one takes once the
+     *  window is maximized. */
+    labels: Record<PlWindowControl | 'restore', string>;
+    onCommand: (control: PlWindowControl) => void;
+}
+/**
+ * The buttons on a title bar.
+ *
+ * Real `<button>`s with real names, in every system: the whole point of drawing
+ * a window rather than a picture of one is that its controls work, and a
+ * `<div>` with a click handler on it is invisible to a keyboard. They also stop
+ * the press from reaching the bar underneath, or every close would begin by
+ * dragging the window half a pixel.
+ *
+ * Every fill is written into a slot and every state is a class that reads one,
+ * so no two declarations are ever left arguing about which of them paints the
+ * button — which is the bug that made a hovered close button vanish.
+ */
+export declare function PlWindowControls({ os, metrics, controls, maximized, active, labels, onCommand }: PlPlWindowControlsProps): React.JSX.Element | null;
+export {};

package/dist/internal/window.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{cx as t}from"./styles.js";const a={macos:{bar:38,radius:10,radiusBottom:10,padX:12,padEnd:12,gap:8,title:13,glyph:7,weight:500,frame:1,band:{side:0,bottom:0},control:{width:12,height:12},titleAlign:"center",controlsSide:"start",shape:"dot",rule:!1,stroke:1.4,boxRadius:0,tint:[6,3],accentBorder:!1,paint:null,image:null,shadow:null,glass:!1},macosx:{bar:26,radius:8,radiusBottom:0,padX:10,padEnd:10,gap:8,title:12,glyph:7,weight:700,frame:1,band:{side:0,bottom:0},control:{width:13,height:13},titleAlign:"center",controlsSide:"start",shape:"gloss-dot",rule:!0,stroke:1.5,boxRadius:0,tint:[0,0],accentBorder:!1,paint:{fill:"#e4e4e4",ink:"#333333",dark:!1},image:"repeating-linear-gradient(180deg, rgb(255 255 255 / 0.55) 0 1px, rgb(0 0 0 / 0.035) 1px 2px), linear-gradient(180deg, rgb(255 255 255 / 0.8), rgb(0 0 0 / 0.07))",shadow:"0 1px 0 rgb(255 255 255 / 0.85)",glass:!1},windows11:{bar:32,radius:8,radiusBottom:8,padX:12,padEnd:0,gap:0,title:12,glyph:10,weight:400,frame:1,band:{side:0,bottom:0},control:{width:46,height:32},titleAlign:"start",controlsSide:"end",shape:"square",rule:!1,tint:[3,1],stroke:1,boxRadius:1.6,accentBorder:!1,paint:null,image:null,shadow:null,glass:!1},windows10:{bar:30,radius:0,radiusBottom:0,padX:10,padEnd:0,gap:0,title:12,glyph:10,weight:400,frame:1,band:{side:0,bottom:0},control:{width:45,height:30},titleAlign:"start",controlsSide:"end",shape:"square",rule:!0,tint:[0,0],stroke:.9,boxRadius:0,accentBorder:!0,paint:null,image:null,shadow:null,glass:!1},windows8:{bar:32,radius:0,radiusBottom:0,padX:10,padEnd:0,gap:0,title:12,glyph:11,weight:400,frame:2,band:{side:0,bottom:0},control:{width:45,height:32},titleAlign:"start",controlsSide:"end",shape:"square",rule:!1,tint:[0,0],stroke:1,boxRadius:0,accentBorder:!0,paint:null,image:null,shadow:null,glass:!1},windows7:{bar:30,radius:7,radiusBottom:0,padX:10,padEnd:3,gap:2,title:12,glyph:10,weight:400,frame:1,band:{side:7,bottom:7},control:{width:29,height:20},closeWidth:45,titleAlign:"start",controlsSide:"end",shape:"aero",rule:!1,tint:[0,0],stroke:1.1,boxRadius:0,accentBorder:!1,paint:{fill:"rgb(198 218 242 / 0.45)",ink:"#12314f",dark:!1},image:"linear-gradient(180deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.1) 46%, rgb(255 255 255 / 0.34) 88%, rgb(255 255 255 / 0.5))",shadow:"0 0 6px rgb(255 255 255 / 0.95), 0 0 3px rgb(255 255 255 / 0.95)",glass:!0},windowsxp:{bar:30,radius:8,radiusBottom:0,padX:6,padEnd:4,gap:2,title:13,glyph:9,weight:700,frame:1,band:{side:4,bottom:4},control:{width:21,height:21},closeWidth:26,titleAlign:"start",controlsSide:"end",shape:"plate",rule:!1,tint:[0,0],stroke:1.8,boxRadius:3,accentBorder:!1,paint:{fill:"#1f66d6",ink:"#ffffff",dark:!0},image:"linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.26) 7%, rgb(0 0 0 / 0.11) 42%, rgb(0 0 0 / 0.05) 56%, rgb(255 255 255 / 0.22) 76%, rgb(255 255 255 / 0.34) 88%, rgb(0 0 0 / 0.16) 96%, rgb(0 0 0 / 0.34))",shadow:"0 1px 1px rgb(0 0 0 / 0.45)",glass:!1},linux:{bar:44,radius:12,radiusBottom:12,padX:10,padEnd:10,gap:6,title:14,glyph:10,weight:600,frame:1,band:{side:0,bottom:0},control:{width:24,height:24},titleAlign:"center",controlsSide:"end",shape:"circle",rule:!1,stroke:1.2,boxRadius:0,tint:[11,5],accentBorder:!1,paint:null,image:null,shadow:null,glass:!1}},r={xs:.8,sm:.9,md:1,lg:1.15,xl:1.3};export function windowMetrics(e,i){const t=a[e],o=r[i],round=e=>Math.round(e*o),n={width:round(t.control.width),height:round(t.control.height)},s=round(t.gap),l=void 0===t.closeWidth?n.width:round(t.closeWidth);return{bar:round(t.bar),radius:t.radius,radiusBottom:t.radiusBottom,frame:t.frame,band:{side:round(t.band.side),bottom:round(t.band.bottom)},padX:round(t.padX),padEnd:round(t.padEnd),gap:s,title:round(t.title),glyph:round(t.glyph),weight:t.weight,control:n,controlsWidth:e=>e<=0?0:l+(e-1)*n.width+(e-1)*s,closeWidth:l}}export function windowChrome(e){return a[e]}const o={macos:["close","minimize","maximize"],macosx:["close","minimize","maximize"],windows11:["minimize","maximize","close"],windows10:["minimize","maximize","close"],windows8:["minimize","maximize","close"],windows7:["minimize","maximize","close"],windowsxp:["minimize","maximize","close"],linux:["minimize","maximize","close"]};export function orderControls(e,i){return o[e].filter(e=>i.includes(e))}function veil(e,i){const t=Math.round(100*(1-i));return t>=100?e:`color-mix(in oklab, ${e} ${t}%, transparent)`}export function windowSlots(e){const{os:i,color:t,accent:r,transparency:o,active:n,elevation:s}=e,l=a[i],d=Math.min(Math.max(o,0),1),p="var(--plass-surface)",c=l.tint[n?0:1],g=0===c?p:`color-mix(in oklab, ${p} ${100-c}%, var(--plass-fg))`,h=r&&n,m=l.paint,u=m?n?m.fill:`color-mix(in oklab, ${m.fill} 45%, #c6c9ce)`:null,b=h?`var(--plass-${t}-solid)`:u??g,w=h?`var(--plass-${t}-on-solid)`:m?n?m.ink:`color-mix(in oklab, ${m.ink} 60%, transparent)`:n?"var(--plass-fg)":"var(--plass-muted-fg)",x=l.band.side>0,f=x?veil(h?`var(--plass-${t}-solid)`:u??g,d):"transparent",v=x?`color-mix(in oklab, ${h?`var(--plass-${t}-solid)`:u??"var(--plass-border)"} 72%, black)`:h&&l.accentBorder?`var(--plass-${t}-solid)`:n?"var(--plass-border)":"color-mix(in oklab, var(--plass-border) 55%, transparent)",k=h||(m?.dark??!1);return{"--p-window-bar":veil(b,d),"--p-window-bar-fg":w,"--p-window-bar-image":l.image??"none","--p-window-bar-shadow":l.shadow??"none","--p-window-body":veil(p,d),"--p-window-line":v,"--p-window-band":f,"--p-window-hover":k?"rgb(255 255 255 / 0.18)":"color-mix(in oklab, var(--plass-fg) 9%, transparent)","--p-window-press":k?"rgb(255 255 255 / 0.28)":"color-mix(in oklab, var(--plass-fg) 16%, transparent)","--p-window-shadow":`var(--plass-shadow-${n?s:Math.max(s-1,0)})`,"--p-accent":`var(--plass-${t}-accent)`,"--p-ring":`var(--plass-${t}-ring)`}}function Glyph({size:i,stroke:t,round:a,children:r}){return e("svg",{viewBox:"0 0 10 10",width:i,height:i,fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:a?"round":"square",strokeLinejoin:a?"round":"miter","aria-hidden":"true",children:r})}function controlGlyph(t,a,r,o){const n=r.stroke,s=r.boxRadius>0||"square"!==r.shape,l=r.boxRadius;return"minimize"===t?e(Glyph,{size:o,stroke:n,round:s,children:e("path",{d:"plate"===r.shape?"M2 7.5h6":"M1.5 5h7"})}):"close"===t?e(Glyph,{size:o,stroke:n,round:s,children:e("path",{d:"m1.6 1.6 6.8 6.8M8.4 1.6 1.6 8.4"})}):a?i(Glyph,{size:o,stroke:n,round:s,children:[e("rect",{x:"1.4",y:"3.4",width:"5.2",height:"5.2",rx:l}),e("path",{d:"M3.6 3.4v-2h5v5h-2"})]}):e(Glyph,{size:o,stroke:n,round:s,children:e("rect",{x:"1.5",y:"1.5",width:"7",height:"7",rx:l})})}const n={close:"#ff5f57",minimize:"#febc2e",maximize:"#28c840"},s={close:"#cf4b36",minimize:"#4b85d4",maximize:"#4b85d4"},l={macos:null,macosx:null,windows11:"#c42b1c",windows10:"#e81123",windows8:"#e81123",windows7:"#e04a45",windowsxp:null,linux:null};export function PlWindowControls({os:i,metrics:r,controls:o,maximized:d,active:p,labels:c,onCommand:g}){const h=a[i],m=orderControls(i,o);if(0===m.length)return null;const u="dot"===h.shape||"gloss-dot"===h.shape,b="circle"===h.shape,w="plate"===h.shape,x="aero"===h.shape;return e("div",{className:t("group/controls flex shrink-0 items-center",x?"self-start":"self-stretch"),style:{gap:r.gap},onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:m.map(a=>{const o="maximize"===a&&d?c.restore:c[a],m="close"===a?l[i]:null,{face:f,ink:v,image:k,plate:y}=function controlFace(e,i,t){switch(e.shape){case"dot":case"gloss-dot":return{face:t?n[i]:"color-mix(in oklab, var(--plass-fg) 22%, transparent)",ink:"rgb(0 0 0 / 0.55)",image:"gloss-dot"===e.shape?"radial-gradient(circle at 50% 26%, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0) 62%)":void 0,plate:"gloss-dot"===e.shape?"inset 0 0 0 1px rgb(0 0 0 / 0.22), inset 0 -1px 1px rgb(0 0 0 / 0.15)":void 0};case"plate":return{face:t?s[i]:`color-mix(in oklab, ${s[i]} 45%, #c6c9ce)`,ink:"#ffffff",image:"linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.05) 55%, rgb(0 0 0 / 0.14))",plate:"inset 0 0 0 1px rgb(255 255 255 / 0.4)"};case"aero":return{face:"rgb(255 255 255 / 0.3)",image:"linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.08) 52%, rgb(255 255 255 / 0.3))",plate:"inset 0 0 0 1px rgb(255 255 255 / 0.55)"};default:return{}}}(h,a,p);return e("button",{type:"button","aria-label":o,title:o,className:t("relative flex shrink-0 cursor-pointer items-center justify-center","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease)]","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]",u||b?"rounded-full":"",b?"bg-(--p-window-hover)":"",f?"bg-(--p-window-face)":"",m?"hover:bg-(--p-window-danger) hover:text-white active:bg-(--p-window-danger)":u?"":w?"hover:brightness-110 active:brightness-95":b?"hover:bg-(--p-window-press) active:bg-(--p-window-press)":x?"hover:brightness-110 active:brightness-95":"hover:bg-(--p-window-hover) active:bg-(--p-window-press)"),style:{width:u?r.control.height:"close"===a?r.closeWidth:r.control.width,height:r.control.height,borderRadius:w?h.boxRadius+1:x?"0 0 3px 3px":void 0,backgroundImage:k,boxShadow:y,color:v,...f?{"--p-window-face":f}:{},...m?{"--p-window-danger":m}:{}},onClick:()=>g(a),children:e("span",{className:t("flex items-center justify-center",u?"opacity-0 [transition:opacity_var(--plass-duration)_var(--plass-ease)] group-hover/controls:opacity-100":""),children:controlGlyph(a,d,h,r.glyph)})},a)})})}

package/dist/locales/de.d.ts

@@ -0,0 +1,3 @@
+/** German. */
+import type { PlassLabels } from '../internal/labels.js';
+export declare const de: PlassLabels;

package/dist/locales/de.js

@@ -0,0 +1 @@
+export const de={close:"Schließen",cancel:"Abbrechen",confirm:"Bestätigen",clear:"Leeren",done:"Fertig",skip:"Überspringen",search:"Suchen",selectAll:"Alle auswählen",selectRow:"Zeile auswählen",remove:"Entfernen",dismiss:"Ausblenden",open:"Öffnen",previous:"Zurück",next:"Weiter",reveal:"Anzeigen",hide:"Verbergen",increase:"Erhöhen",decrease:"Verringern",preview:"Vorschau",empty:"Nichts vorhanden",breadcrumb:"Navigationspfad",breadcrumbExpand:"Ausgeblendete Schritte anzeigen",carousel:"Karussell",carouselPrevious:"Vorheriges Bild",carouselNext:"Nächstes Bild",commandPalette:"Befehlspalette",commandPalettePlaceholder:"Befehle durchsuchen",gallery:"Galerie",chart:"Diagramm",minimize:"Minimieren",maximize:"Maximieren",restore:"Wiederherstellen",resizeWindow:"Fenstergröße ändern",overlay:"Overlay",pagination:"Seitennavigation",paginationPrevious:"Vorherige Seite",paginationNext:"Nächste Seite",paginationFirst:"Erste Seite",paginationLast:"Letzte Seite",rating:"Bewertung",sidebar:"Seitenleiste",sidebarClose:"Seitenleiste schließen",sidebarResize:"Breite der Seitenleiste ändern",skipToContent:"Zum Inhalt springen",backToTop:"Nach oben",onThisPage:"Auf dieser Seite",typing:"Schreibt …",newTab:"(wird in einem neuen Tab geöffnet)",transferAvailable:"Verfügbar",transferSelected:"Ausgewählt",transferToSelected:"Zu den ausgewählten verschieben",transferToAvailable:"Zu den verfügbaren verschieben",copy:"Kopieren",copied:"Kopiert",copyFailed:"Kopieren nicht möglich",raw:"Unformatiert",code:"Code",previousMonth:"Vorheriger Monat",nextMonth:"Nächster Monat",previousYear:"Vorheriges Jahr",nextYear:"Nächstes Jahr",previousYears:"Vorherige Jahre",nextYears:"Nächste Jahre",chooseMonth:"Monat wählen",chooseYear:"Jahr wählen",today:"Heute",thisMonth:"Dieser Monat",thisYear:"Dieses Jahr",now:"Jetzt",hour:"Stunde",minute:"Minute",second:"Sekunde",meridiem:"AM/PM",start:"Beginn",end:"Ende"};

package/dist/locales/en.d.ts

@@ -0,0 +1,2 @@
+import type { PlassLabels } from '../internal/labels.js';
+export declare const en: PlassLabels;

package/dist/locales/en.js

@@ -0,0 +1 @@
+import{defaultLabels as e}from"../internal/labels.js";export const en=e;

package/dist/locales/es.d.ts

@@ -0,0 +1,3 @@
+/** Spanish. */
+import type { PlassLabels } from '../internal/labels.js';
+export declare const es: PlassLabels;

package/dist/locales/es.js

@@ -0,0 +1 @@
+export const es={close:"Cerrar",cancel:"Cancelar",confirm:"Confirmar",clear:"Borrar",done:"Hecho",skip:"Omitir",search:"Buscar",selectAll:"Seleccionar todo",selectRow:"Seleccionar fila",remove:"Quitar",dismiss:"Descartar",open:"Abrir",previous:"Anterior",next:"Siguiente",reveal:"Mostrar",hide:"Ocultar",increase:"Aumentar",decrease:"Disminuir",preview:"Vista previa",empty:"No hay nada aquí",breadcrumb:"Ruta de navegación",breadcrumbExpand:"Mostrar los pasos ocultos",carousel:"Carrusel",carouselPrevious:"Diapositiva anterior",carouselNext:"Diapositiva siguiente",commandPalette:"Paleta de comandos",commandPalettePlaceholder:"Buscar comandos",gallery:"Galería",chart:"Gráfico",minimize:"Minimizar",maximize:"Maximizar",restore:"Restaurar",resizeWindow:"Redimensionar la ventana",overlay:"Capa",pagination:"Paginación",paginationPrevious:"Página anterior",paginationNext:"Página siguiente",paginationFirst:"Primera página",paginationLast:"Última página",rating:"Valoración",sidebar:"Barra lateral",sidebarClose:"Cerrar la barra lateral",sidebarResize:"Redimensionar la barra lateral",skipToContent:"Saltar al contenido",backToTop:"Volver arriba",onThisPage:"En esta página",typing:"Escribiendo…",newTab:"(se abre en una pestaña nueva)",transferAvailable:"Disponibles",transferSelected:"Seleccionados",transferToSelected:"Mover a seleccionados",transferToAvailable:"Mover a disponibles",copy:"Copiar",copied:"Copiado",copyFailed:"No se pudo copiar",raw:"Sin formato",code:"Código",previousMonth:"Mes anterior",nextMonth:"Mes siguiente",previousYear:"Año anterior",nextYear:"Año siguiente",previousYears:"Años anteriores",nextYears:"Años siguientes",chooseMonth:"Elegir un mes",chooseYear:"Elegir un año",today:"Hoy",thisMonth:"Este mes",thisYear:"Este año",now:"Ahora",hour:"Hora",minute:"Minuto",second:"Segundo",meridiem:"a. m./p. m.",start:"Inicio",end:"Fin"};

package/dist/locales/fr.d.ts

@@ -0,0 +1,3 @@
+/** French. */
+import type { PlassLabels } from '../internal/labels.js';
+export declare const fr: PlassLabels;

package/dist/locales/fr.js

@@ -0,0 +1 @@
+export const fr={close:"Fermer",cancel:"Annuler",confirm:"Confirmer",clear:"Effacer",done:"Terminé",skip:"Ignorer",search:"Rechercher",selectAll:"Tout sélectionner",selectRow:"Sélectionner la ligne",remove:"Retirer",dismiss:"Masquer",open:"Ouvrir",previous:"Précédent",next:"Suivant",reveal:"Afficher",hide:"Masquer",increase:"Augmenter",decrease:"Diminuer",preview:"Aperçu",empty:"Rien ici",breadcrumb:"Fil d’Ariane",breadcrumbExpand:"Afficher les étapes masquées",carousel:"Carrousel",carouselPrevious:"Diapositive précédente",carouselNext:"Diapositive suivante",commandPalette:"Palette de commandes",commandPalettePlaceholder:"Rechercher une commande",gallery:"Galerie",chart:"Graphique",minimize:"Réduire",maximize:"Agrandir",restore:"Restaurer",resizeWindow:"Redimensionner la fenêtre",overlay:"Voile",pagination:"Pagination",paginationPrevious:"Page précédente",paginationNext:"Page suivante",paginationFirst:"Première page",paginationLast:"Dernière page",rating:"Note",sidebar:"Barre latérale",sidebarClose:"Fermer la barre latérale",sidebarResize:"Redimensionner la barre latérale",skipToContent:"Aller au contenu",backToTop:"Revenir en haut",onThisPage:"Sur cette page",typing:"Écrit…",newTab:"(s’ouvre dans un nouvel onglet)",transferAvailable:"Disponibles",transferSelected:"Sélectionnés",transferToSelected:"Déplacer vers les sélectionnés",transferToAvailable:"Déplacer vers les disponibles",copy:"Copier",copied:"Copié",copyFailed:"Copie impossible",raw:"Brut",code:"Code",previousMonth:"Mois précédent",nextMonth:"Mois suivant",previousYear:"Année précédente",nextYear:"Année suivante",previousYears:"Années précédentes",nextYears:"Années suivantes",chooseMonth:"Choisir un mois",chooseYear:"Choisir une année",today:"Aujourd’hui",thisMonth:"Ce mois-ci",thisYear:"Cette année",now:"Maintenant",hour:"Heure",minute:"Minute",second:"Seconde",meridiem:"AM/PM",start:"Début",end:"Fin"};

package/dist/locales/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The library's own vocabulary, translated.
+ *
+ * Every pack is a whole `PlassLabels`, so a missing key is a type error rather
+ * than a word that quietly stays English, and every one of them is a **named
+ * export from its own module**. That is the shape rather than a
+ * `locales['ko']` lookup, and the reason is the bundle: a lookup table has to
+ * be in the build for the key to be found in it, so a French application would
+ * ship the Korean one. An import ships one.
+ *
+ * ```tsx
+ * import { PlassProvider } from 'plass-ui';
+ * import { ko } from 'plass-ui/locales';
+ *
+ * <PlassProvider locale="ko-KR" labels={ko}>…</PlassProvider>
+ * ```
+ *
+ * `locale` and `labels` are two different jobs and both are needed. `locale` is
+ * the BCP 47 tag `Intl` formats dates and numbers against; `labels` is the
+ * words `Intl` has no opinion about.
+ *
+ * **The set is short on purpose.** A pack is only worth shipping when somebody
+ * who reads the language has read it, so this is the list that has been read
+ * rather than the list a machine could produce. Adding one is a file of the
+ * same shape and a pull request.
+ */
+export { de } from './de.js';
+export { en } from './en.js';
+export { es } from './es.js';
+export { fr } from './fr.js';
+export { ja } from './ja.js';
+export { ko } from './ko.js';
+export { zhHans } from './zh-Hans.js';

package/dist/locales/index.js

@@ -0,0 +1 @@
+export{de}from"./de.js";export{en}from"./en.js";export{es}from"./es.js";export{fr}from"./fr.js";export{ja}from"./ja.js";export{ko}from"./ko.js";export{zhHans}from"./zh-Hans.js";

package/dist/locales/ja.d.ts

@@ -0,0 +1,3 @@
+/** Japanese. */
+import type { PlassLabels } from '../internal/labels.js';
+export declare const ja: PlassLabels;