plass-ui 1.6.0 → 1.8.0

package/dist/components/navigation-menu/PlNavigationMenu.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { NavigationMenu as BaseUINavigationMenu } from '@base-ui/react/navigation-menu';
+import type { useRender } from '@base-ui/react/use-render';
 import type { PlassOrientation, PlassStyleProps } from '../../types.js';
 export interface PlNavigationMenuProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'>, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
     /**
@@ -21,7 +23,7 @@ export interface PlNavigationMenuProps extends Pick<PlassStyleProps, 'size' | 'c
     /** The items. */
     children?: React.ReactNode;
 }
-export interface PlNavigationMenuItemProps {
+interface PlNavigationMenuItemBaseProps {
     /** The word in the row. */
     label: React.ReactNode;
     /**
@@ -46,7 +48,11 @@ export interface PlNavigationMenuItemProps {
      * uncontrolled one — Base UI gives each item an identity of its own.
      */
     value?: string;
-    /** Unavailable. The word stays in the row and opens nothing. */
+    /**
+     * Unavailable. The word stays in the row, dimmed, and opens nothing or goes
+     * nowhere: a link item loses its `href` and its `render`. It is announced as
+     * unavailable, and neither the arrow keys nor Tab stop on it.
+     */
     disabled?: boolean;
     /**
      * The page the reader is on. A link item is marked `aria-current="page"` and
@@ -56,13 +62,41 @@ export interface PlNavigationMenuItemProps {
     active?: boolean;
     /** How many columns the panel lays its links out in. @default 1 */
     columns?: number;
-    /** The panel's contents — usually `PlNavigationMenuLink`s. */
-    children?: React.ReactNode;
     /** Classes on the word in the row, alongside the component's own. */
     className?: string;
     /** Inline styles on that word. */
     style?: React.CSSProperties;
 }
+/** An item that goes somewhere: an `href`, a `render`, or both, and no panel. */
+interface PlNavigationMenuItemLinkProps extends PlNavigationMenuItemBaseProps {
+    /**
+     * Renders the item's link as something other than an `<a>`: the `Link` a
+     * router brings. Base UI's own escape hatch, handed to its link part.
+     *
+     * Giving one makes the item a link, as an `href` does, and an `href` on the
+     * element wins over the item's own, as on `PlTextLink`. The arrow keys that
+     * move along the row stay Base UI's. A disabled item leaves it out.
+     */
+    render?: useRender.RenderProp<BaseUINavigationMenu.Link.State>;
+    /** A link has no panel. */
+    children?: undefined;
+}
+/** An item that opens a panel. */
+interface PlNavigationMenuItemPanelProps extends PlNavigationMenuItemBaseProps {
+    /** The panel's contents — usually `PlNavigationMenuLink`s. */
+    children?: React.ReactNode;
+    /** Not on an item that opens a panel, which is a trigger rather than a link. */
+    render?: undefined;
+}
+/**
+ * The props of a `PlNavigationMenuItem`.
+ *
+ * A union, so that `render` cannot be given to an item that opens a panel. That
+ * item is a trigger, and a router's `Link` in its place would be a link that
+ * expands, which is neither of the two things a row's word can be. A call
+ * without `render` is the same as before.
+ */
+export type PlNavigationMenuItemProps = PlNavigationMenuItemLinkProps | PlNavigationMenuItemPanelProps;
 export interface PlNavigationMenuLinkProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'title'> {
     /** Where it goes. */
     href: string;
@@ -72,6 +106,14 @@ export interface PlNavigationMenuLinkProps extends Omit<React.ComponentPropsWith
     description?: React.ReactNode;
     /** A glyph before the title. */
     startIcon?: React.ReactNode;
+    /**
+     * Renders the link as something other than an `<a>`: the `Link` a router
+     * brings. Base UI's own escape hatch, handed to its link part.
+     *
+     * An `href` on the element wins over the one above, as on `PlTextLink`, and
+     * the arrow keys that move between the links stay Base UI's.
+     */
+    render?: useRender.RenderProp<BaseUINavigationMenu.Link.State>;
 }
 /**
  * One row inside a panel: where it goes, what it is called, and a line saying
@@ -86,11 +128,12 @@ export declare const PlNavigationMenuLink: React.ForwardRefExoticComponent<PlNav
 /**
  * One word in the row, and what opens under it.
  *
- * With children it is a trigger and a panel; with an `href` and nothing else it
- * is a link, and the difference is not cosmetic — the second is announced as a
- * destination and the first as something that expands.
+ * With children it is a trigger and a panel; with an `href` or a `render` and
+ * nothing else it is a link, and the difference is not cosmetic — the second is
+ * announced as a destination and the first as something that expands. A
+ * `render` reaching a trigger from a caller the type did not check is ignored.
  */
-export declare function PlNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, active, columns, children, className, style }: PlNavigationMenuItemProps): React.ReactElement;
+export declare function PlNavigationMenuItem({ label, href, target, rel, render, startIcon, value, disabled, active, columns, children, className, style }: PlNavigationMenuItemProps): React.ReactElement;
 /**
  * A site's navigation: a row of destinations, some of which open a panel of
  * more of them.
@@ -102,8 +145,10 @@ export declare function PlNavigationMenuItem({ label, href, target, rel, startIc
  * index. Reach for a menu when the row *does* something and for this when the
  * row *goes* somewhere.
  *
- * One panel is open at a time and it resizes between items rather than closing
- * and reopening, which is Base UI's doing and is what makes crossing the row
- * read as one surface rather than three.
+ * One panel is open at a time, which is Base UI's doing, and the sheet eases
+ * from one item's panel to the next, in size and in place, rather than closing
+ * and reopening, which is what makes crossing the row read as one surface
+ * rather than three.
  */
 export declare const PlNavigationMenu: React.ForwardRefExoticComponent<PlNavigationMenuProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/navigation-menu/PlNavigationMenu.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a,Fragment as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as n}from"../../internal/defaults.js";import{NavigationMenu as r}from"@base-ui/react/navigation-menu";import{ChevronIcon as l}from"../../internal/icons.js";import{safeRel as i}from"../../internal/link.js";import{controlHeightClasses as o,controlTextClasses as c,controlTextLeadingClasses as d,cx as p,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as x,paddingXClasses as y,radiusClasses as N,surfaceSlots as b,transitionClasses as w}from"../../internal/styles.js";const j=/* @__PURE__ */s.createContext({size:"md",density:"default"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","aria-[current=page]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),z=/* @__PURE__ */[h,"relative 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] overflow-hidden","[transition:opacity_var(--plass-duration)_var(--plass-ease),width_var(--plass-duration)_var(--plass-ease),height_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",w,v,"hover:bg-(--p-soft)",m].join(" "),_={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */s.forwardRef(function PlNavigationMenuLink({href:t,title:n,description:l,startIcon:o,className:c,children:u,target:m,rel:h,...v},b){const{size:w,density:P}=s.useContext(j);return a(r.Link,{ref:b,href:t,target:m,rel:i(m,h),className:p(k,N[w],f[w],y[P][w],"py-2",c),...v,children:[g(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null,a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:p("font-medium",d[w]),children:n}),g(l)?e("span",{className:p("text-(--plass-muted-fg)",x[w]),children:l}):null,u]})]})});export function PlNavigationMenuItem({label:n,href:d,target:u,rel:m,startIcon:h,value:v,disabled:x=!1,active:b=!1,columns:w=1,children:z,className:k,style:C}){const{size:M,density:I}=s.useContext(j),L=void 0!==d&&!g(z),V=p(P,o[M],c[M],f[M],y[I][M],N[M],k);return e(r.Item,{value:v,children:L?a(r.Link,{href:d,target:u,rel:i(u,m),"aria-current":b?"page":void 0,className:V,style:C,children:[g(h)?h:null,n]}):a(t,{children:[a(r.Trigger,{disabled:x,className:V,style:C,children:[g(h)?h:null,n,e(r.Icon,{className:"flex items-center [transition:rotate_var(--plass-duration)_var(--plass-ease)] data-[popup-open]:rotate-180",children:e(l,{})})]}),e(r.Content,{className:p("grid gap-1",_[M]),style:w>1?{gridTemplateColumns:`repeat(${w}, minmax(0, 1fr))`}:void 0,children:z})]})})}export const PlNavigationMenu=/* @__PURE__ */s.forwardRef(function PlNavigationMenu({size:t,color:l,density:i,orientation:o="horizontal",value:c,defaultValue:d,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:x,children:y,...w},P){const k=n(),_=t??k.size??"md",C=l??k.color??"primary",M=i??k.density??"default",I=s.useMemo(()=>({size:_,density:M}),[_,M]);return e(j.Provider,{value:I,children:a(r.Root,{ref:P,orientation:o,value:c,defaultValue:d,onValueChange:e=>u?.(e),delay:m,closeDelay:h,className:v,style:{...b(C,3),...x},...w,children:[e(r.List,{className:p("m-0 flex list-none items-center p-0","vertical"===o?"flex-col items-stretch":"flex-row",f[_]),children:y}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:g,collisionPadding:12,children:e(r.Popup,{className:p(z,N[_]),children:e(r.Viewport,{})})})})]})})});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as o}from"../../internal/icons.js";import{safeRel as s}from"../../internal/link.js";import{controlHeightClasses as l,controlTextClasses as d,controlTextLeadingClasses as p,cx as c,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as y,paddingXClasses as b,radiusClasses as x,surfaceSlots as w,transitionClasses as N}from"../../internal/styles.js";const j=/* @__PURE__ */n.createContext({size:"md",density:"default",orientation:"horizontal"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center p-0","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",N,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","aria-[current=page]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),F=/* @__PURE__ */[h,"relative 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] overflow-hidden","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["[transition-property:opacity,width,height]","in-data-[instant]:[transition-property:opacity]"].join(" "),z=/* @__PURE__ */["plass-portal z-(--plass-z-portal) [outline:none]","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]"].join(" "),C=/* @__PURE__ */["[transition-property:top,left,right,bottom]","motion-reduce:[transition-property:none] data-[instant]:[transition-property:none]"].join(" "),S=/* @__PURE__ */new Set(["width","height","top","left","right","bottom"]),M=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",N,v,"hover:bg-(--p-soft)",m].join(" "),A={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */n.forwardRef(function PlNavigationMenuLink({href:a,title:r,description:o,startIcon:l,className:d,children:u,target:m,rel:h,render:v,...w},N){const{size:P,density:F}=n.useContext(j);return t(i.Link,{ref:N,render:v,href:a,target:m,rel:s(m,h),className:c(M,x[P],f[P],b[F][P],"py-2",d),...w,children:[g(l)?e("span",{className:c("flex h-[1lh] shrink-0 items-center",p[P]),children:l}):null,t("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:c("font-medium",p[P]),children:r}),g(o)?e("span",{className:c("text-(--plass-muted-fg)",y[P]),children:o}):null,u]})]})});export function PlNavigationMenuItem({label:r,href:p,target:u,rel:m,render:h,startIcon:v,value:y,disabled:w=!1,active:N=!1,columns:F=1,children:k,className:z,style:C}){const{size:S,density:M,orientation:L}=n.useContext(j),R=(void 0!==p||void 0!==h)&&!g(k),I=c(P,"vertical"===L&&"w-full",l[S],d[S],f[S],b[M][S],x[S],z);return e(i.Item,{value:y,children:R?t(i.Link,{render:w?void 0:h,href:w?void 0:p,target:u,rel:s(u,m),"aria-current":N?"page":void 0,role:w?"link":void 0,"aria-disabled":w||void 0,"data-disabled":w?"":void 0,className:I,style:C,children:[g(v)?v:null,r]}):t(a,{children:[t(i.Trigger,{disabled:w,...w?{tabIndex:-1}:{},className:I,style:C,children:[g(v)?v:null,r,e(i.Icon,{className:c("flex items-center","vertical"===L?"-rotate-90 rtl:rotate-90":"[transition:rotate_var(--plass-duration)_var(--plass-ease)] motion-reduce:[transition-duration:0ms] data-[popup-open]:rotate-180"),children:e(o,{})})]}),e(i.Content,{keepMounted:!0,className:c("grid w-max max-w-[calc(var(--available-width)-2px)] gap-1 [&[hidden]]:hidden",A[S]),style:F>1?{gridTemplateColumns:`repeat(${F}, minmax(0, 1fr))`}:void 0,children:k})]})})}export const PlNavigationMenu=/* @__PURE__ */n.forwardRef(function PlNavigationMenu({size:a,color:o,density:s,orientation:l="horizontal",value:d,defaultValue:p,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:y,children:b,...N},P){const M=r(),A=a??M.size??"md",L=o??M.color??"primary",R=s??M.density??"default",I=n.useMemo(()=>({size:A,density:R,orientation:l}),[A,R,l]),[V,O]=n.useState(p??null),T=void 0!==d?d:V,[W,q]=n.useState(T),[E,$]=n.useState(!1);W!==T&&(q(T),$(null!==T&&null!==W));const[D,_]=n.useState(null),[B,G]=n.useState(null),H=n.useRef(null),J=n.useCallback(()=>{const e=H.current;if(!D||!e||!B)return;const t=getComputedStyle(B),a=Number.parseFloat(t.width),n=Number.parseFloat(t.height);if(!(a>0&&n>0))return;const r=getComputedStyle(e),i=Number.parseFloat(r.borderLeftWidth)+Number.parseFloat(r.borderRightWidth),o=Number.parseFloat(r.borderTopWidth)+Number.parseFloat(r.borderBottomWidth);D.style.setProperty("--p-panel-w",`${a+i}px`),D.style.setProperty("--p-panel-h",`${n+o}px`)},[D,B]);return n.useLayoutEffect(()=>{null!==T&&J()},[T,J]),n.useEffect(()=>{if(!B||"undefined"==typeof ResizeObserver)return;let e=0;const t=new ResizeObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(J)});return t.observe(B),()=>{cancelAnimationFrame(e),t.disconnect()}},[B,J]),n.useEffect(()=>{const e=H.current;if(!E||!D||!e)return;const t=[D,e];let a=0;const settle=()=>{for(const e of t)getComputedStyle(e).getPropertyValue("width");t.some(e=>e.getAnimations().some(e=>e instanceof CSSTransition&&S.has(e.transitionProperty)&&"finished"!==e.playState))?a=requestAnimationFrame(settle):$(!1)};return a=requestAnimationFrame(settle),()=>{cancelAnimationFrame(a)}},[E,D]),e(j.Provider,{value:I,children:t(i.Root,{ref:P,orientation:l,value:d,defaultValue:p,onValueChange:e=>{void 0===d&&O(e),u?.(e)},delay:m,closeDelay:h,className:v,style:{...w(L,3),...y},...N,children:[e(i.List,{className:c("m-0 flex list-none items-center p-0","vertical"===l?"flex-col items-stretch":"flex-row",f[A]),children:b}),e(i.Portal,{keepMounted:!0,children:e(i.Positioner,{ref:_,className:c(z,E?C:"[transition-property:none]"),side:"vertical"===l?"inline-end":"bottom",align:"vertical"===l?"start":"center",sideOffset:g,collisionPadding:12,children:e(i.Popup,{ref:H,className:c(F,E?k:"[transition-property:opacity]",x[A]),children:e(i.Viewport,{ref:G,className:"w-max"})})})})]})})});

package/dist/components/number-field/PlNumberField.d.ts

@@ -99,13 +99,15 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
     decrementLabel?: string;
     /**
      * The name of what the field holds, wired to the control by Base UI's Field.
-     * `labelPlacement` decides whether it sits above the box or in its top edge.
-     * There is still no floating variant on purpose: a floating label needs a
-     * `transform` on the thing being typed into, and the notch does not move.
+     * `labelPlacement` decides whether it sits above the box, in its top edge, or
+     * inside it until the field is focused or filled.
      */
     label?: React.ReactNode;
     /**
-     * Where the `label` goes — above the control, or in its top edge.
+     * Where the `label` goes — above the control, in its top edge, or inside it
+     * where the number would be written until the field is focused or filled.
+     * With a `startIcon` or `split` steppers a `float` label stays in the edge,
+     * because that is where it would rest.
      * Falls back to the nearest `PlassProvider`, then to `top`.
      * @default 'top'
      */
@@ -149,4 +151,4 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
  * clamping, the press-and-hold repeat on the steppers, and the hidden input that
  * submits with a form.
  */
-export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;
+export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel: incrementLabelProp, decrementLabel: decrementLabelProp, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, endIcon, fullWidth, disabled: disabledProp, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: PlNumberFieldProps): React.JSX.Element;

package/dist/components/number-field/PlNumberField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{useLabels as t}from"../../internal/labels.js";import{NumberField as s}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MinusIcon as r,PlusIcon as i}from"../../internal/icons.js";import{hotKeyHandler as o}from"../../internal/keys.js";import{glowPointerMove as c}from"../../internal/glow.js";import{FieldNotch as d,notchShellStyle as m}from"../../internal/notch.js";import{controlHeightClasses as p,controlTextLeadingClasses as u,cx as f,disabledClasses as h,fieldReadOnlyClasses as b,fieldRestClasses as g,focusRingClasses as x,focusWithinRingClasses as v,gapClasses as y,hasContent as N,iconClasses as j,metaTextClasses as w,paddingXClasses as k,radiusClasses as S,stackGapClasses as _,surfaceSlots as V,transitionClasses as z}from"../../internal/styles.js";const O=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",z,"focus-within:[transition-duration:0ms]",j].join(" "),C=v,I=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",x,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:x="glass",size:v,color:j,density:z,elevation:P=0,value:B,defaultValue:D,onValueChange:L,onValueCommitted:W,min:q,max:F,step:K,largeStep:R,smallStep:E,snapOnStep:G,allowWheelScrub:M=!1,format:$,locale:A,steppers:H="end",incrementLabel:J,decrementLabel:Q,label:T,labelPlacement:U,description:X,error:Y,invalid:Z,startIcon:ee,endIcon:le,fullWidth:ae=!1,disabled:te=!1,readOnly:se=!1,required:ne=!1,name:re,placeholder:ie,id:oe,className:ce,hotKeys:de,classNames:me,style:pe,...ue}){const fe=a(),he=t(),be=J??he.increase,ge=Q??he.decrease,xe=A??fe.locale,ve=v??fe.size??"md",ye=j??fe.color??"primary",Ne=z??fe.density??"default",je="notch"===(U??fe.labelPlacement??"top")&&N(T),we=N(Y),ke=Z??we,Se=ke?"danger":ye,_e=!te&&!se,Ve=k[Ne][ve],ze={end:`${Ve} pe-1`,split:"px-1",none:Ve},Oe=e(s.Decrement,{"aria-label":ge,className:I,children:e(r,{})}),Ce=e(s.Increment,{"aria-label":be,className:I,children:e(i,{})}),Ie="none"!==H&&!se,Pe=e(n.Label,{className:f(w[ve],"font-semibold",te?"text-(--plass-muted-fg)":"text-(--plass-fg)",me?.label),children:T});return l(n.Root,{disabled:te,invalid:ke,className:["flex-col align-top",_[ve],ae?"flex w-full":"inline-flex",ce??""].filter(Boolean).join(" "),style:{...V(Se,P),...pe},...ue,children:[N(T)&&!je?Pe:null,e(s.Root,{id:oe,name:re,className:"contents",value:B,defaultValue:D,onValueChange:e=>L?.(e),onValueCommitted:e=>W?.(e),min:q,max:F,step:K,largeStep:R,smallStep:E,snapOnStep:G,allowWheelScrub:M,format:$,locale:xe,disabled:te,readOnly:se,required:ne,children:e(d,{notched:je,size:ve,density:Ne,variant:x,disabled:te,readOnly:se,label:Pe,children:l(s.Group,{style:je?m:void 0,onPointerMove:c(_e),className:[O,je?"":C,p[ve],u[ve],S[ve],y[ve],Ie?ze[H]:Ve,te?h[x]:se?b[x]:g[x],_e?"plass-glow":"",me?.control].filter(Boolean).join(" "),children:[Ie&&"split"===H?Oe:null,ee?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:ee}):null,e(s.Input,{placeholder:ie,onKeyDown:o(de,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===H&&Ie?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),le?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:le}):null,Ie&&"end"===H?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[Oe,Ce]}):null,Ie&&"split"===H?Ce:null]})})}),X?e(n.Description,{className:f("m-0",w[ve],"text-(--plass-muted-fg)",me?.description),children:X}):null,e(n.Error,we?{match:!0,className:f(w[ve],"text-(--p-accent)",me?.error),children:Y}:{className:f(w[ve],"text-(--p-accent)",me?.error)})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{controlNaming as t,useDisabled as a}from"../../internal/form.js";import{useDefaults as n,useLocale as r}from"../../internal/defaults.js";import{ownsPress as s}from"../../internal/focusable.js";import{useLabels as i}from"../../internal/labels.js";import{NumberField as o}from"@base-ui/react/number-field";import{Field as c}from"@base-ui/react/field";import{MinusIcon as d,PlusIcon as m}from"../../internal/icons.js";import{hotKeyHandler as p}from"../../internal/keys.js";import{useFieldLight as u}from"../../internal/glow.js";import{FieldNotch as f,floatControlClassName as h,notchShellStyle as b,resolveNotch as g}from"../../internal/notch.js";import{controlHeightClasses as x,controlTextLeadingClasses as v,cx as y,disabledClasses as j,fieldDescriptionClasses as N,fieldReadOnlyClasses as w,fieldRestClasses as k,fieldSlots as S,focusRingClasses as _,focusWithinRingClasses as V,gapClasses as z,hasContent as D,iconClasses as O,metaTextClasses as C,paddingXClasses as I,radiusClasses as P,stackGapClasses as q,transitionClasses as B}from"../../internal/styles.js";const L=/* @__PURE__ */["relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",B,O].join(" "),W=V,F=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center p-0","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) enabled:hover:text-(--p-accent)","active:bg-(--p-soft-press)",_,"disabled:cursor-not-allowed disabled:bg-transparent"].join(" ");export function PlNumberField({variant:_="glass",size:V,color:O,density:B,elevation:K=0,value:R,defaultValue:T,onValueChange:E,onValueCommitted:G,min:$,max:A,step:H,largeStep:J,smallStep:M,snapOnStep:Q,allowWheelScrub:U=!1,format:X,locale:Y,steppers:Z="end",incrementLabel:ee,decrementLabel:le,label:te,labelPlacement:ae,description:ne,error:re,invalid:se,startIcon:ie,endIcon:oe,fullWidth:ce=!1,disabled:de=!1,readOnly:me=!1,required:pe=!1,name:ue,placeholder:fe,id:he,className:be,hotKeys:ge,classNames:xe,style:ve,"aria-label":ye,"aria-labelledby":je,...Ne}){const we=n(),ke=a(de),Se=i(),_e=ee??Se.increase,Ve=le??Se.decrease,ze=r(Y),De=V??we.size??"md",Oe=O??we.color??"primary",Ce=B??we.density??"default",Ie=ae??we.labelPlacement??"top",Pe="none"!==Z&&!me,{notched:qe,float:Be}=g(Ie,te,D(ie)||Pe&&"split"===Z),Le=D(re),We=se??Le,Fe=We?"danger":Oe,Ke=!ke&&!me,Re=u(Ke),Te=I[Ce][De],Ee={end:`${Te} pe-1`,split:"px-1",none:Te},Ge=y(F,!ke&&"disabled:opacity-50"),$e=e(o.Decrement,{"aria-label":Ve,className:Ge,children:e(d,{})}),Ae=e(o.Increment,{"aria-label":_e,className:Ge,children:e(m,{})}),He=e(c.Label,{className:y(C[De],"font-semibold",ke?"text-(--plass-muted-fg)":"text-(--plass-fg)",xe?.label),children:te});return l(c.Root,{disabled:ke,invalid:We,className:["flex-col align-top",q[De],ce?"flex w-full":"inline-flex",be??""].filter(Boolean).join(" "),style:{...S(Fe,K),...ve},...Ne,children:[D(te)&&!qe?He:null,e(o.Root,{id:he,name:ue,className:"contents",value:R,defaultValue:T,onValueChange:e=>E?.(e),onValueCommitted:e=>G?.(e),min:$,max:A,step:H,largeStep:J,smallStep:M,snapOnStep:Q,allowWheelScrub:U,format:X,locale:ze,disabled:ke,readOnly:me,required:pe,children:e(f,{notched:qe,size:De,density:Ce,variant:_,disabled:ke,readOnly:me,float:Be,label:He,children:l(o.Group,{style:qe?b:void 0,...Re,onPointerDown:e=>{const l=e.currentTarget.querySelector('input:not([type="hidden"])');ke||s(e.target,e.currentTarget,l)||(e.preventDefault(),l?.focus())},className:[L,qe?"":W,x[De],v[De],P[De],z[De],Pe?Ee[Z]:Te,ke?j[_]:me?w[_]:k[_],Ke?"plass-glow":"",xe?.control].filter(Boolean).join(" "),children:[Pe&&"split"===Z?$e:null,ie?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:ie}):null,e(o.Input,{placeholder:Be?fe||" ":fe,...t(ye,je),onKeyDown:p(ge,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent p-0 [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===Z&&Pe?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",Be?h:""].filter(Boolean).join(" ")}),oe?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:oe}):null,Pe&&"end"===Z?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[$e,Ae]}):null,Pe&&"split"===Z?Ae:null]})})}),ne?e(c.Description,{className:y(N(De),xe?.description),children:ne}):null,e(c.Error,Le?{match:!0,className:y(C[De],"text-(--p-accent)",xe?.error),children:re}:{className:y(C[De],"text-(--p-accent)",xe?.error)})]})}

package/dist/components/otp-field/PlOtpField.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{Field as n}from"@base-ui/react/field";import{OTPField as s}from"@base-ui/react/otp-field";import{hotKeyHandler as o}from"../../internal/keys.js";import{cx as i,disabledClasses as m,fieldReadOnlyClasses as d,fieldRestClasses as c,hasContent as u,metaTextClasses as p,stackGapClasses as f,surfaceSlots as h,transitionClasses as x}from"../../internal/styles.js";const g={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},b={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},y={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},v={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},N={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */l.forwardRef(function PlOtpField({variant:$="glass",size:j,color:w,density:V,elevation:F=0,length:C=6,charset:I="numeric",mask:M=!1,groupSize:O,separator:S="–",value:k,defaultValue:z,onValueChange:R,onComplete:q,onValueInvalid:A,autoSubmit:D=!1,label:K,description:L,error:P,invalid:_,name:E,required:T=!1,disabled:B=!1,readOnly:G=!1,autoFocus:H=!1,slotLabel:J,className:Q,hotKeys:U,classNames:W,style:X,...Y},Z){const ee=t(),ae=r(),le=J??ae.otpSlot,te=l.useId(),re=j??ee.size??"md",ne=w??ee.color??"primary",se=V??ee.density??"default",oe=Math.min(12,Math.max(2,Math.round(C))),ie=u(P),me=_??ie,de=me?"danger":ne,ce=i("text-center font-medium [font-family:inherit]",g[re],y[re],b[re],x,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",B?m[$]:G?d[$]:c[$]),ue=O&&O>0?Math.round(O):0;return a(n.Root,{disabled:B,invalid:me,className:i("inline-flex flex-col align-top",f[re],Q),style:{...h(de,F),...X},children:[u(K)?e(n.Label,{className:i(p[re],"font-semibold",B?"text-(--plass-muted-fg)":"text-(--plass-fg)",W?.label),children:e("span",{id:`${te}-label`,children:K})}):null,e(s.Root,{ref:Z,onKeyDown:o(U,void 0),length:oe,validationType:N[I],mask:M,name:E,required:T,disabled:B,readOnly:G,autoSubmit:D,value:k,defaultValue:z,onValueChange:e=>R?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>A?.(e),className:i("flex items-center",v[se][re],W?.control),...Y,children:Array.from({length:oe},(t,r)=>a(l.Fragment,{children:[ue>0&&r>0&&r%ue===0?e("span",{"aria-hidden":"true",className:i("select-none px-0.5 text-(--plass-muted-fg)",y[re]),children:S}):null,e(s.Input,{className:ce,autoFocus:H&&0===r,"aria-labelledby":u(K)?`${te}-label ${te}-${r}`:`${te}-${r}`})]},r))}),Array.from({length:oe},(a,l)=>e("span",{id:`${te}-${l}`,hidden:!0,children:le(l+1,oe)},l)),u(L)?e(n.Description,{className:i("m-0",p[re],"text-(--plass-muted-fg)",W?.description),children:L}):null,e(n.Error,ie?{match:!0,className:i(p[re],"text-(--p-accent)",W?.error),children:P}:{className:i(p[re],"text-(--p-accent)",W?.error)})]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDisabled as r,useLabelReference as t}from"../../internal/form.js";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{Field as o}from"@base-ui/react/field";import{OTPField as i}from"@base-ui/react/otp-field";import{hotKeyHandler as m}from"../../internal/keys.js";import{cx as d,disabledClasses as c,fieldDescriptionClasses as u,fieldReadOnlyClasses as p,fieldRestClasses as f,hasContent as h,metaTextClasses as x,stackGapClasses as g,surfaceSlots as b,transitionClasses as y}from"../../internal/styles.js";const v={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},N={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},$={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},j={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},w={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */l.forwardRef(function PlOtpField({variant:V="glass",size:F,color:C,density:I,elevation:M=0,length:O=6,charset:S="numeric",mask:k=!1,groupSize:z,separator:R="–",value:q,defaultValue:A,onValueChange:B,onComplete:D,onValueInvalid:K,autoSubmit:L=!1,label:P,description:_,error:E,invalid:T,name:G,required:H=!1,disabled:J=!1,readOnly:Q=!1,autoFocus:U=!1,slotLabel:W,className:X,hotKeys:Y,classNames:Z,style:ee,"aria-label":ae,"aria-labelledby":le,...re},te){const ne=n(),se=r(J),oe=s(),ie=W??oe.otpSlot,me=l.useId(),de=F??ne.size??"md",ce=C??ne.color??"primary",ue=I??ne.density??"default",pe=Math.min(12,Math.max(2,Math.round(O))),fe=h(E),he=T??fe,xe=he?"danger":ce,ge=d("text-center font-medium [font-family:inherit]",v[de],$[de],N[de],y,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]",se?c[V]:Q?p[V]:f[V]),be=z&&z>0?Math.round(z):0,ye=t(ae,le),ve=ye.labelledBy??(h(P)?`${me}-label`:void 0);return a(o.Root,{disabled:se,invalid:he,className:d("inline-flex flex-col align-top",g[de],X),style:{...b(xe,M),...ee},children:[h(P)?e(o.Label,{className:d(x[de],"font-semibold",se?"text-(--plass-muted-fg)":"text-(--plass-fg)",Z?.label),children:e("span",{id:`${me}-label`,children:P})}):null,e(i.Root,{ref:te,onKeyDown:m(Y,void 0),length:pe,validationType:w[S],mask:k,name:G,required:H,disabled:se,readOnly:Q,autoSubmit:L,value:q,defaultValue:A,onValueChange:e=>B?.(e),onValueComplete:e=>D?.(e),onValueInvalid:e=>K?.(e),className:d("flex items-center",j[ue][de],Z?.control),"aria-label":ae,"aria-labelledby":ye.labelledBy,...re,children:Array.from({length:pe},(r,t)=>a(l.Fragment,{children:[be>0&&t>0&&t%be===0?e("span",{"aria-hidden":"true",className:d("select-none px-0.5 text-(--plass-muted-fg)",$[de]),children:R}):null,e(i.Input,{className:ge,autoFocus:U&&0===t,"aria-labelledby":ve?`${ve} ${me}-${t}`:`${me}-${t}`})]},t))}),Array.from({length:pe},(a,l)=>e("span",{id:`${me}-${l}`,hidden:!0,children:ie(l+1,pe)},l)),ye.node,h(_)?e(o.Description,{className:d(u(de),Z?.description),children:_}):null,e(o.Error,fe?{match:!0,className:d(x[de],"text-(--p-accent)",Z?.error),children:E}:{className:d(x[de],"text-(--p-accent)",Z?.error)})]})});

package/dist/components/overlay/PlOverlay.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Dialog as r}from"@base-ui/react/dialog";import{cx as t,surfaceSlots as i}from"../../internal/styles.js";const o={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},n={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},c=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:m,defaultOpen:d,onOpenChange:f,tone:b="scrim",dismissible:u=!1,modal:x=!0,align:y="center",size:g,color:j,label:k,className:h,classNames:v,style:z,children:w,...N}){const O=s(),P=l(),_=k??P.overlay,B=g??O.size??"md",C=j??O.color??"primary";return e(r.Root,{open:m,defaultOpen:d,modal:x,disablePointerDismissal:!u,onOpenChange:(e,a)=>{u||e||"escape-key"!==a.reason?f?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:t("plass-portal fixed inset-0 z-(--plass-z-portal)",c,o[b],v?.backdrop)}),e(r.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",n[y],p[B]].join(" "),children:e(r.Popup,{"aria-label":_,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",c,h??""].filter(Boolean).join(" "),style:{...i(C,0),...z},...N,children:w})})]})})}
+"use client";import{jsx as a,jsxs as e}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{Dialog as l}from"@base-ui/react/dialog";import{cx as i,surfaceSlots as t}from"../../internal/styles.js";const o={scrim:"bg-(--plass-scrim) [backdrop-filter:var(--plass-scrim-blur)] [-webkit-backdrop-filter:var(--plass-scrim-blur)]",glass:/* @__PURE__ */["[--p-dim:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)] [background-color:var(--p-dim)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]","[@media(prefers-reduced-transparency:reduce)]:[background:linear-gradient(var(--p-dim),var(--p-dim)),var(--plass-surface)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},n={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},c=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:m,defaultOpen:d,onOpenChange:u,tone:f="scrim",dismissible:b=!1,modal:y=!0,align:g="center",size:x,color:v,label:j,className:k,classNames:h,style:z,children:w,...N}){const O=s(),P=r(),_=j??P.overlay,B=x??O.size??"md",C=v??O.color??"primary";return a(l.Root,{open:m,defaultOpen:d,modal:y,disablePointerDismissal:!b,onOpenChange:(a,e)=>{b||a||"escape-key"!==e.reason?u?.(a):e.cancel()},children:e(l.Portal,{children:[a(l.Backdrop,{className:i("plass-portal fixed inset-0 z-(--plass-z-portal)",c,o[f],h?.backdrop)}),a(l.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",n[g],p[B]].join(" "),children:a(l.Popup,{"aria-label":_,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",c,k??""].filter(Boolean).join(" "),style:{...t(C,0),...z},...N,children:w})})]})})}

package/dist/components/page-layout/PlPageLayout.d.ts

@@ -28,13 +28,17 @@ export interface PlPageLayoutProps extends React.ComponentPropsWithoutRef<'div'>
      * - `content` — the sidebars run the full height of the window and the header
      *   sits between them, belonging to the view rather than to the site. The
      *   arrangement of an application.
+     *
+     * A `fixed` header spans the window whatever this says, so the sidebars
+     * start below it; a header meant to sit between them is `sticky`.
      * @default 'full'
      */
     headerSpan?: PlPageLayoutSpan;
     /**
      * The same question for the footer, and it is worth answering separately: a
      * dashboard with a full-height navigation rail still usually wants its
-     * copyright line under the content rather than under the rail.
+     * copyright line under the content rather than under the rail. A `fixed`
+     * footer spans the window whatever this says, so the sidebars end above it.
      * @default 'full'
      */
     footerSpan?: PlPageLayoutSpan;
@@ -95,17 +99,24 @@ export interface PlPageLayoutProps extends React.ComponentPropsWithoutRef<'div'>
      * to walk past all forty on every page before reaching the article, and this
      * is the one link that spares them. It costs a sighted reader nothing,
      * because it is invisible until it is tabbed to.
+     *
+     * Never drawn by a layout inside another `PlPageLayout`, whose content is a
+     * `<div>` rather than a second `<main>`: the page has one of each already.
      * @default true
      */
     skipLink?: boolean;
     /** What that link says. @default 'Skip to content' */
     skipLabel?: React.ReactNode;
     /**
-     * The `id` the skip link jumps to, put on the `<main>`.
+     * The `id` the skip link jumps to, put on the `<main>`. Not put anywhere by
+     * a layout inside another, which has neither.
      * @default 'main'
      */
     mainId?: string;
-    /** Anything else the `<main>` needs — a `className`, an `aria-label`. */
+    /**
+     * Anything else the `<main>` needs — a `className`, an `aria-label`. Inside
+     * another layout it goes on the `<div>` that takes the `<main>`'s place.
+     */
     mainProps?: Omit<React.ComponentPropsWithoutRef<'main'>, 'id' | 'children'>;
     /** The colour family the skip link lights up in. @default 'primary' */
     color?: PlassColor;

package/dist/components/page-layout/PlPageLayout.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{PlPageLayoutContext as r,PlassSidebarSideContext as s}from"../../internal/page-layout.js";import{controlSlots as a,cx as i,hasContent as u,toLength as c}from"../../internal/styles.js";const d=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:f,footer:p,sidebar:m,endSidebar:h,headerSpan:v="full",footerSpan:x="full",scroll:y="page",height:b="viewport",collapseBelow:g="md",sidebarOpen:w,defaultSidebarOpen:P=!1,onSidebarOpenChange:k,endSidebarOpen:S,defaultEndSidebarOpen:C=!1,onEndSidebarOpenChange:O,skipLink:j=!0,skipLabel:N,mainId:$="main",mainProps:R,color:z,className:L,style:E,children:M,...B},H){const _=t(),I=n(),T=N??I.skipToContent,q=z??_.color??"primary",[A,D]=o.useState(P),[F,G]=o.useState(C),J=o.useMemo(()=>({start:w??A,end:S??F}),[w,A,S,F]),K=o.useCallback((e,l)=>{if("start"===e)return void 0===w&&D(l),void k?.(l);void 0===S&&G(l),O?.(l)},[w,S,k,O]),Q=o.useRef(null),U=o.useCallback(e=>{Q.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),V=o.useRef({header:null,footer:null}),W=o.useRef(null),X=o.useCallback(()=>{const e=Q.current;if(e)for(const l of d){const o=V.current[l],t="header"===l?v:x;if(!o){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,s="sticky"===n||"fixed"===n;e.style.setProperty(`--p-layout-${l}`,s&&"full"===t?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"fixed"===n?r:"0px")}},[v,x]),Y=o.useCallback(()=>{const e=W.current;if(e){e.disconnect();for(const l of d){const o=V.current[l];o&&e.observe(o)}}X()},[X]);o.useEffect(()=>(W.current=new ResizeObserver(()=>X()),Y(),()=>{W.current?.disconnect(),W.current=null}),[X,Y]);const Z=o.useCallback((e,l)=>{V.current[e]=l,Y()},[Y]),ee=o.useMemo(()=>({present:!0,register:Z,collapseBelow:g,open:J,setOpen:K,scroll:y}),[Z,g,J,K,y]),le=o.useMemo(()=>({...ee,register:()=>{}}),[ee]),oe="content"===y,te=c("viewport"===b||"auto"===b?void 0:b),ne=void 0!==te?"":"auto"===b?oe?"h-full":"min-h-full":oe?"h-dvh":"min-h-dvh",re=u(f)?f:null,se=u(p)?p:null;return e(r.Provider,{value:ee,children:l("div",{ref:U,className:i("relative flex w-full flex-col",oe?"overflow-hidden":"",ne,"full"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",L),style:void 0===te?E:{...oe?{height:te}:{minHeight:te},...E},...B,children:[j?e("a",{href:`#${$}`,className:i("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:a(q,2,"solid"),children:T}):null,"full"===v?re:null,l("div",{className:i("flex w-full flex-1",oe?"min-h-0":""),children:[u(m)?e(s.Provider,{value:"start",children:m}):null,l("div",{className:i("flex min-w-0 flex-1 flex-col",oe?"min-h-0":"","content"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","content"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":""),children:["content"===v?re:null,e("main",{...R,id:$,className:i("min-w-0 flex-1",oe?"min-h-0 overflow-y-auto":"",R?.className),children:e(r.Provider,{value:le,children:M})}),"content"===x?se:null]}),u(h)?e(s.Provider,{value:"end",children:h}):null]}),"full"===x?se:null]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PlPageLayoutContext as n,PlassSidebarSideContext as s}from"../../internal/page-layout.js";import{controlSlots as a,cx as i,hasContent as u,toLength as c}from"../../internal/styles.js";const f=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:d,footer:p,sidebar:m,endSidebar:h,headerSpan:v="full",footerSpan:x="full",scroll:y="page",height:b="viewport",collapseBelow:g="md",sidebarOpen:w,defaultSidebarOpen:P=!1,onSidebarOpenChange:k,endSidebarOpen:S,defaultEndSidebarOpen:C=!1,onEndSidebarOpenChange:O,skipLink:j=!0,skipLabel:N,mainId:$="main",mainProps:z,color:L,className:R,style:E,children:M,...B},H){const _=l(),I=r(),T=N??I.skipToContent,V=L??_.color??"primary",q=o.useContext(n).present,A=q?"div":"main",[D,F]=o.useState(P),[G,J]=o.useState(C),K=o.useMemo(()=>({start:w??D,end:S??G}),[w,D,S,G]),Q=o.useCallback((e,t)=>{if("start"===e)return void 0===w&&F(t),void k?.(t);void 0===S&&J(t),O?.(t)},[w,S,k,O]),U=o.useRef(null),W=o.useCallback(e=>{U.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),X=o.useRef({header:null,footer:null}),Y=o.useRef(null),Z=o.useCallback(()=>{const e=U.current;if(!e)return;const t=f.map(e=>{const t=X.current[e];return t?{slot:e,position:getComputedStyle(t).position,extent:t.offsetHeight}:{slot:e,position:null,extent:0}}),write=(t,o)=>{e.style.getPropertyValue(t)!==o&&e.style.setProperty(t,o)};for(const{slot:e,position:o,extent:l}of t){const t="fixed"===o;write(`--p-layout-${e}`,t||"sticky"===o&&"full"===("header"===e?v:x)?`${l}px`:"0px"),write(`--p-layout-${e}-inset`,t?`${l}px`:"0px")}},[v,x]),ee=o.useRef(Z);o.useLayoutEffect(()=>{ee.current=Z,Z()},[Z]),o.useLayoutEffect(()=>{const e=new ResizeObserver(()=>ee.current());for(const t of f){const o=X.current[t];o&&e.observe(o)}return Y.current=e,()=>{e.disconnect(),Y.current=null}},[]);const te=o.useCallback((e,t)=>{const o=X.current[e];if(o===t)return;X.current[e]=t;const l=Y.current;l&&(o&&l.unobserve(o),t?l.observe(t):(U.current?.style.setProperty(`--p-layout-${e}`,"0px"),U.current?.style.setProperty(`--p-layout-${e}-inset`,"0px")))},[]),oe=o.useCallback(()=>ee.current(),[]),le=o.useMemo(()=>({present:!0,register:te,remeasure:oe,collapseBelow:g,open:K,setOpen:Q,scroll:y}),[te,oe,g,K,Q,y]),re=o.useMemo(()=>({...le,register:()=>{},remeasure:()=>{}}),[le]),ne="content"===y,se=c("viewport"===b||"auto"===b?void 0:b),ae=void 0!==se?"":"auto"===b?ne?"h-full":"min-h-full":ne?"h-dvh":"min-h-dvh",ie=u(d)?d:null,ue=u(p)?p:null,ce=(u(m)||u(h))&&("content"===v&&null!==ie||"content"===x&&null!==ue);return e(n.Provider,{value:le,children:t("div",{ref:W,className:i("plass-layout relative flex w-full flex-col",ne?"overflow-hidden":"",ae,"[padding-top:var(--p-layout-header-inset,0px)]","[padding-bottom:var(--p-layout-footer-inset,0px)]",R),style:void 0===se?E:{...ne?{height:se}:{minHeight:se},...E},...B,children:[j&&!q?e("a",{href:`#${$}`,className:i("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:a(V,2,"solid"),children:T}):null,"full"===v?ie:null,t("div",{className:i("flex w-full flex-1",ne?"min-h-0":"",ce?"z-1 [&>aside]:z-21":""),children:[u(m)?e(s.Provider,{value:"start",children:m}):null,t("div",{className:i("flex min-w-0 flex-1 flex-col",ne?"min-h-0":""),children:["content"===v?ie:null,e(A,{...z,id:q?void 0:$,className:i("min-w-0 flex-1",ne?"min-h-0 overflow-y-auto":"",z?.className),children:e(n.Provider,{value:re,children:M})}),"content"===x?ue:null]}),u(h)?e(s.Provider,{value:"end",children:h}):null]}),"full"===x?ue:null]})})});

package/dist/components/pagination/PlPagination.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PlButton as i}from"../button/PlButton.js";import{ChevronIcon as l}from"../../internal/icons.js";import{controlTextClasses as o,gapClasses as s,srOnlyClasses as c}from"../../internal/styles.js";function range(e,a){return Array.from({length:Math.max(0,a-e+1)},(a,t)=>e+t)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const m={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"};export const PlPagination=/* @__PURE__ */t.forwardRef(function PlPagination({variant:u="ghost",size:d,color:h,density:f,elevation:p=0,count:g,page:b,defaultPage:x=1,onPageChange:v,siblingCount:y=1,boundaryCount:M=1,showEdges:j=!1,showArrows:w=!0,disabled:L=!1,getPageHref:N,renderLink:P,label:C,pageLabel:k,previousLabel:D,nextLabel:I,firstLabel:z,lastLabel:K,statusLabel:B,className:$,children:A,...R},S){const W=n(),E=r(),F=C??E.pagination,H=D??E.paginationPrevious,q=I??E.paginationNext,G=z??E.paginationFirst,J=K??E.paginationLast,O=k??E.paginationPage,Q=B??E.paginationStatus,T=d??W.size??"md",U=h??W.color??"primary",V=f??W.density??"compact",[X,Y]=t.useState(x),Z=Math.min(Math.max(b??X,1),Math.max(g,1));if(g<2)return null;const _=function paginationRange(e,a,t,n){const r=range(1,Math.min(n,e)),i=range(Math.max(e-n+1,n+1),e),l=Math.max(Math.min(a-t,e-n-2*t-1),n+2),o=Math.min(Math.max(a+t,n+2*t+2),i.length>0?i[0]-2:e-1);return[...r,...l>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...range(l,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...i]}(g,Z,y,M),ee=Z<=1,ae=Z>=g,linkProps=(a,t,n)=>{if(!N||L)return null;if(t)return{render:e("a",{role:"link"}),"aria-disabled":!0,tabIndex:0};const r=N(a);return{render:P?P(a,r):e("a",{href:r}),rel:n}},press=(e,a)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||N&&!v||(e.preventDefault(),(e=>{const a=Math.min(Math.max(e,1),g);a!==Z&&(void 0===b&&Y(a),v?.(a))})(a))},stepper=(a,t,n,r,l,o,s)=>e("li",{className:"flex",children:e(i,{variant:u,size:T,color:U,density:V,elevation:p,disabled:L||r,focusableWhenDisabled:!L,"aria-label":t,startIcon:e("span",{className:`flex items-center ${l}`,children:o}),onClick:e=>press(e,n),...linkProps(n,r,s)})},a);return a("nav",{ref:S,"aria-label":F,className:["flex items-center",$??""].filter(Boolean).join(" "),...R,children:[a("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${s[T]}`,children:[j?stepper("first",G,1,ee,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,w?stepper("previous",H,Z-1,ee,"rotate-90 rtl:-rotate-90",e(l,{}),"prev"):null,_.map((a,t)=>e("li","number"==typeof a?{className:"flex",children:e(i,{variant:a===Z?"solid":u,size:T,color:U,density:V,elevation:p,disabled:L,"aria-label":O(a),"aria-current":a===Z?"page":void 0,className:"tabular-nums",onClick:e=>press(e,a),...linkProps(a,!1),children:a})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",o[T],m[T]].join(" "),children:"…"},`slot-${t}`)),w?stepper("next",q,Z+1,ae,"-rotate-90 rtl:rotate-90",e(l,{}),"next"):null,j?stepper("last",J,g,ae,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:c,"aria-live":"polite",children:Q(Z,g)}),A]})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as i}from"../../internal/labels.js";import{PlButton as l}from"../button/PlButton.js";import{ChevronIcon as o}from"../../internal/icons.js";import{controlTextClasses as s,gapClasses as m,srOnlyClasses as c}from"../../internal/styles.js";function range(e,a){return Array.from({length:Math.max(0,a-e+1)},(a,n)=>e+n)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const u={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"},d={backgroundImage:"none"};export const PlPagination=/* @__PURE__ */n.forwardRef(function PlPagination({variant:h="ghost",size:f,color:p,density:g,elevation:b=0,count:x,page:v,defaultPage:y=1,onPageChange:j,siblingCount:M=1,boundaryCount:N=1,showEdges:w=!1,showArrows:L=!0,disabled:P=!1,getPageHref:k,renderLink:C,label:I,pageLabel:D,previousLabel:z,nextLabel:K,firstLabel:B,lastLabel:$,statusLabel:A,className:R,children:S,...W},E){const F=r(),H=t(P),q=i(),G=I??q.pagination,J=z??q.paginationPrevious,O=K??q.paginationNext,Q=B??q.paginationFirst,T=$??q.paginationLast,U=D??q.paginationPage,V=A??q.paginationStatus,X=f??F.size??"md",Y=p??F.color??"primary",Z=g??F.density??"compact",[_,ee]=n.useState(y),ae=Math.min(Math.max(v??_,1),Math.max(x,1));if(x<2)return null;const ne=function paginationRange(e,a,n,t){const r=range(1,Math.min(t,e)),i=range(Math.max(e-t+1,t+1),e),l=Math.max(Math.min(a-n,e-t-2*n-1),t+2),o=Math.min(Math.max(a+n,t+2*n+2),i.length>0?i[0]-2:e-1);return[...r,...l>t+2?["start-ellipsis"]:t+1<e-t?[t+1]:[],...range(l,o),...o<e-t-1?["end-ellipsis"]:e-t>t?[e-t]:[],...i]}(x,ae,M,N),te=ae<=1,re=ae>=x,linkProps=(a,n,t)=>{if(!k||H)return null;if(n)return{render:e("a",{role:"link"}),"aria-disabled":!0,tabIndex:0};const r=k(a);return{render:C?C(a,r):e("a",{href:r}),rel:t}},press=(e,a)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||k&&!j||(e.preventDefault(),(e=>{const a=Math.min(Math.max(e,1),x);a!==ae&&(void 0===v&&ee(a),j?.(a))})(a))},stepper=(a,n,t,r,i,o,s)=>e("li",{className:"flex",children:e(l,{variant:h,size:X,color:Y,density:Z,elevation:b,disabled:H||r,focusableWhenDisabled:!H,"aria-label":n,startIcon:e("span",{className:`flex items-center ${i}`,children:o}),onClick:e=>press(e,t),...linkProps(t,r,s)})},a);return a("nav",{ref:E,"aria-label":G,className:["flex items-center",R??""].filter(Boolean).join(" "),...W,children:[a("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${m[X]}`,children:[w?stepper("first",Q,1,te,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,L?stepper("previous",J,ae-1,te,"rotate-90 rtl:-rotate-90",e(o,{}),"prev"):null,ne.map((n,t)=>e("li","number"==typeof n?{className:"flex",children:a(l,{variant:n===ae?"solid":h,size:X,color:Y,density:Z,elevation:b,disabled:H,"aria-label":U(n),"aria-current":n===ae?"page":void 0,className:n===ae||"solid"===h?"tabular-nums [--p-fill-on:1]":"tabular-nums",style:d,onClick:e=>press(e,n),...linkProps(n,!1),children:[e("span",{"aria-hidden":"true",className:"plass-fill-layer"}),n]})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",s[X],u[X]].join(" "),children:"…"},`slot-${t}`)),L?stepper("next",O,ae+1,re,"-rotate-90 rtl:rotate-90",e(o,{}),"next"):null,w?stepper("last",T,x,re,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:c,"aria-live":"polite",children:V(ae,x)}),S]})});

package/dist/components/panes/PlPanes.d.ts

@@ -62,7 +62,10 @@ export interface PlPaneProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
  * window being resized without a single line of JavaScript running, so the
  * component measures itself only twice — once on mount, to turn a `'240px'`
  * default into a fraction, and once at the start of each drag, to know what a
- * pixel of pointer movement is worth.
+ * pixel of pointer movement is worth. Until the first measurement the panes are
+ * drawn from their `defaultSize`s alone wherever those settle the split on
+ * their own (see `presplit`), so a split rendered on the server does not move
+ * as it hydrates.
  *
  * The handles are interleaved here rather than written by the caller, so the
  * children of a `PlPanes` are just panes. That does mean the direct children have

package/dist/components/panes/PlPanes.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{cx as o,transitionClasses as s}from"../../internal/styles.js";import{useResponsiveValue as a}from"../../internal/responsive.js";const l=/* @__PURE__ */r.createContext({basis:null,id:void 0}),c={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},u={xs:4,sm:6,md:8,lg:10,xl:12};function toPixels(e,t,r){if(null==e)return;if("number"==typeof e)return t*e/100;const n=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!n)return;const i=Number(n[1]);if(!Number.isNaN(i))switch(n[2]){case"px":return i;case"%":return t*i/100;case"rem":return i*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return i*parseFloat(r&&getComputedStyle(r).fontSize||"16");default:return}}export const PlPanes=/* @__PURE__ */r.forwardRef(function PlPanes({orientation:d,resizable:m=!0,color:f,size:p,onResize:g,onResizeEnd:h,label:x,className:v,style:b,children:z,...w},y){const P=a(d,"horizontal"),S=n(),R=f??S.color??"primary",C=p??S.size??"md",M=r.Children.toArray(z).filter(r.isValidElement),N=M.length,$=r.useId(),paneId=e=>M[e]?.props.id??`${$}-pane-${e}`,j=r.useRef(null),k=r.useCallback(e=>{j.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),E=r.useRef([]);E.current=M.map(e=>e.props);const[A,D]=r.useState(null),F=A&&A.length===N?A:null,I=r.useRef(null);I.current=F;const B="horizontal"===P,T=u[C]*Math.max(0,N-1);function grip(e){const t=j.current,r=I.current;if(!m||!t||!r||void 0===r[e+1])return null;const n=t.getBoundingClientRect(),i=(B?n.width:n.height)-T;if(i<=0)return null;const o=E.current[e],s=E.current[e+1],a=r[e]*i,l=a+r[e+1]*i,c=Math.max(toPixels(o?.minSize,i,t)??0,l-(toPixels(s?.maxSize,i,t)??l)),u=Math.min(toPixels(o?.maxSize,i,t)??l,l-(toPixels(s?.minSize,i,t)??0));return u<c?null:{root:t,current:r,extent:i,start:a,pair:l,resize(t){const n=Math.min(u,Math.max(c,a+t)),o=[...r];return o[e]=n/i,o[e+1]=(l-n)/i,D(o),g?.(o.map(e=>100*e)),o}}}r.useEffect(()=>{const e=j.current;if(!e)return;const measure=()=>{const t=e.getBoundingClientRect(),r=(B?t.width:t.height)-T;r<=0||D(t=>t&&t.length===N?t:function initialFractions(e,t,r){const n=e.map(e=>toPixels(e.defaultSize,t,r)),i=n.reduce((e,t)=>e+(t??0),0),o=n.filter(e=>void 0===e).length,s=o>0?Math.max(0,t-i)/o:0,a=n.map(e=>Math.max(0,e??s)),l=a.reduce((e,t)=>e+t,0);return l<=0?a.map(()=>1/Math.max(1,a.length)):a.map(e=>e/l)}(E.current,r,e))};measure();const t=new ResizeObserver(measure);return t.observe(e),()=>t.disconnect()},[N,B,T]);const X=r.useRef(null);r.useEffect(()=>()=>X.current?.(),[]);const Y=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",c[C],s,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",m?o(B?"cursor-col-resize":"cursor-row-resize","touch-none","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:k,className:o("flex h-full w-full",B?"flex-row":"flex-col","min-h-0 min-w-0",v),style:{"--p-accent":`var(--plass-${R}-accent)`,"--p-soft":`var(--plass-${R}-soft)`,"--p-ring":`var(--plass-${R}-ring)`,...b},...w,children:M.map((n,a)=>t(r.Fragment,{children:[a>0?e("div",{role:"separator","aria-label":x,"aria-controls":paneId(a-1),"aria-orientation":B?"vertical":"horizontal","aria-valuenow":F?Math.round(100*F[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!m||void 0,tabIndex:m?0:-1,className:Y,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const r=grip(e);if(!r)return;const n=B?t.clientX:t.clientY,o=B&&"rtl"===getComputedStyle(r.root).direction?-1:1;let s=r.current;const a=i({target:t.currentTarget,pointerId:t.pointerId,onMove:e=>{const t=B?e.clientX:e.clientY;s=r.resize((t-n)*o)},onEnd:()=>{X.current=null,h?.(s.map(e=>100*e))}});X.current=a}(a-1,e)},onKeyDown:e=>{const t=B?"ArrowLeft":"ArrowUp",r=B?"ArrowRight":"ArrowDown";if(e.key!==t&&e.key!==r)return;e.preventDefault();const n=B&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1,i=e.key===r?16:-16;!function nudge(e,t){const r=grip(e);if(!r)return;const n=r.resize(t);h?.(n.map(e=>100*e))}(a-1,i*n)},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--plass-border)",s,B?"h-full w-px":"h-px w-full",m?"group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)":"")})}):null,e(l.Provider,{value:{basis:F?`calc((100% - ${T}px) * ${F[a].toFixed(6)})`:null,id:paneId(a)},children:n})]},n.key??a))})});export const PlPane=/* @__PURE__ */r.forwardRef(function PlPane({defaultSize:t,minSize:n,maxSize:i,className:s,style:a,children:c,...u},d){const{basis:m,id:f}=r.useContext(l);return e("div",{ref:d,id:f,className:o("relative min-h-0 min-w-0 overflow-auto",s),style:{flex:m?`0 0 ${m}`:"1 1 0%",...a},...u,children:c})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{layoutBox as o}from"../../internal/layout-box.js";import{cx as a,transitionClasses as s}from"../../internal/styles.js";import{useResponsiveValue as l}from"../../internal/responsive.js";const u="1 1 0%",c=/* @__PURE__ */n.createContext({flex:u,id:void 0}),m={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},f={xs:4,sm:6,md:8,lg:10,xl:12};function parseLength(e){if(null==e)return;if("number"==typeof e)return{amount:e,unit:"%"};const t=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!t)return;const n=Number(t[1]);return Number.isNaN(n)?void 0:{amount:n,unit:t[2]}}function toPixels(e,t,n){const r=parseLength(e);if(r)switch(r.unit){case"px":return r.amount;case"%":return t*r.amount/100;case"rem":return r.amount*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return r.amount*parseFloat(n&&getComputedStyle(n).fontSize||"16")}}function basisOf(e,t){return`calc((100% - ${t}px) * ${e.toFixed(6)})`}function initialFractions(e,t,n){const r=e.map(e=>toPixels(e.defaultSize,t,n)),i=r.reduce((e,t)=>e+(t??0),0),o=r.filter(e=>void 0===e).length,a=o>0?Math.max(0,t-i)/o:0,s=r.map(e=>Math.max(0,e??a)),l=s.reduce((e,t)=>e+t,0);return l<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/l)}export const PlPanes=/* @__PURE__ */n.forwardRef(function PlPanes({orientation:p,resizable:d=!0,color:x,size:h,onResize:g,onResizeEnd:v,label:b,className:z,style:w,children:y,...P},S){const $=l(p,"horizontal"),M=r(),N=x??M.color??"primary",R=h??M.size??"md",j=n.Children.toArray(y).filter(n.isValidElement),C=j.length,F=n.useId(),paneId=e=>j[e]?.props.id??`${F}-pane-${e}`,k=n.useRef(null),E=n.useCallback(e=>{k.current=e,"function"==typeof S?S(e):S&&(S.current=e)},[S]),A=j.map(e=>e.props),D=n.useRef([]);D.current=A;const[O,I]=n.useState(null),L=O&&O.length===C?O:null,T=n.useRef(null);T.current=L;const X="horizontal"===$,Y=f[R]*Math.max(0,C-1),_=L?null:function presplit(e,t){const n=e.map(e=>parseLength(e.defaultSize)),r=new Set(n.map(e=>e?.unit));return r.has("rem")||r.has("em")?null:r.has("px")&&(r.has("%")||r.has(void 0))?r.has(void 0)?n.map(e=>{if(!e)return u;const n=Math.max(0,e.amount);return"px"===e.unit?`0 0 ${n}px`:`0 0 ${basisOf(n/100,t)}`}):null:initialFractions(e,100,null).map(e=>`0 0 ${basisOf(e,t)}`)}(A,Y);function grip(e){const t=k.current,n=T.current;if(!d||!t||!n||void 0===n[e+1])return null;const{content:r,perPixel:i}=o(t,X),a=r-Y;if(a<=0)return null;const s=D.current[e],l=D.current[e+1],u=n[e]*a,c=u+n[e+1]*a,m=Math.max(toPixels(s?.minSize,a,t)??0,c-(toPixels(l?.maxSize,a,t)??c)),f=Math.min(toPixels(s?.maxSize,a,t)??c,c-(toPixels(l?.minSize,a,t)??0));return f<m?null:{root:t,current:n,extent:a,start:u,pair:c,perPixel:i,resize(t){const r=Math.min(f,Math.max(m,u+t));if(r===u)return n;const i=[...n];return i[e]=r/a,i[e+1]=(c-r)/a,I(i),g?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=k.current;if(!e)return;const measure=()=>{const t=o(e,X).content-Y;t<=0||I(n=>n&&n.length===C?n:initialFractions(D.current,t,e))};measure();const t=new ResizeObserver(measure);return t.observe(e),()=>t.disconnect()},[C,X,Y]);const K=n.useRef(null);n.useEffect(()=>()=>K.current?.(),[]);const U=a("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",m[R],s,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",d?a(X?"cursor-col-resize":"cursor-row-resize","touch-none","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:E,className:a("flex h-full w-full",X?"flex-row":"flex-col","min-h-0 min-w-0",z),style:{"--p-accent":`var(--plass-${N}-accent)`,"--p-soft":`var(--plass-${N}-soft)`,"--p-ring":`var(--plass-${N}-ring)`,...w},...P,children:j.map((r,o)=>t(n.Fragment,{children:[o>0?e("div",{role:"separator","aria-label":b,"aria-controls":paneId(o-1),"aria-orientation":X?"vertical":"horizontal","aria-valuenow":L?Math.round(100*L[o-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!d||void 0,tabIndex:d?0:-1,className:U,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const n=grip(e);if(!n)return;const r=X?t.clientX:t.clientY,o=X&&"rtl"===getComputedStyle(n.root).direction?-1:1;let a=n.current;const s=i({target:t.currentTarget,pointerId:t.pointerId,onMove:e=>{const t=X?e.clientX:e.clientY;a=n.resize((t-r)*o*n.perPixel)},onEnd:()=>{K.current=null,v?.(a.map(e=>100*e))}});K.current=s}(o-1,e)},onKeyDown:e=>{const t=X?"ArrowLeft":"ArrowUp",n=X?"ArrowRight":"ArrowDown";if(e.key!==t&&e.key!==n)return;e.preventDefault();const r=X&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1,i=e.key===n?16:-16;!function nudge(e,t){const n=grip(e);if(!n)return;const r=n.resize(t);r!==n.current&&v?.(r.map(e=>100*e))}(o-1,i*r)},children:e("span",{"aria-hidden":"true",className:a("pointer-events-none bg-(--plass-border)",s,X?"h-full w-px":"h-px w-full",d?"group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)":"")})}):null,e(c.Provider,{value:{flex:L?`0 0 ${basisOf(L[o],Y)}`:_?.[o]??u,id:paneId(o)},children:r})]},r.key??o))})});export const PlPane=/* @__PURE__ */n.forwardRef(function PlPane({defaultSize:t,minSize:r,maxSize:i,className:o,style:s,children:l,...u},m){const{flex:f,id:p}=n.useContext(c);return e("div",{ref:m,id:p,className:a("relative min-h-0 min-w-0 overflow-auto",o),style:{flex:f,...s},...u,children:l})});

package/dist/components/pie-chart/PlPieChart.d.ts

@@ -26,6 +26,31 @@ export interface PlPieChartProps extends ChartBaseProps {
      * @default 0
      */
     startAngle?: number;
+    /**
+     * How much of the middle is cut out, as a fraction of the radius: `0` is a
+     * filled disc and `0.8` is a thin band. Clamped to `0`–`0.95`.
+     *
+     * `shape` already picks one — nothing for a `pie`, and a little under two
+     * thirds for a `donut` and a `semi`, which is the proportion that leaves a
+     * ring thick enough to read a colour off and a hole big enough to put the
+     * total in. This is for when the hole has a particular job: a wider one for a
+     * two-line readout, a narrower one on a small dashboard tile. Setting it on a
+     * `pie` opens a hole in one, which is a `donut` by another name.
+     */
+    innerRadius?: number;
+    /**
+     * The gap between two neighbouring slices, in degrees. Clamped to `0`–`10`.
+     *
+     * Left alone it is the 2px the library puts between any two marks, worked out
+     * at the rim — so the gap is a constant *on screen* rather than a constant in
+     * the data, and a small pie is not drawn with the same sliver of surface a
+     * large one gets. Widen it to make a ring read as separate segments; `0`
+     * closes it, which is what a pie of two or three slices usually wants.
+     *
+     * A slice narrower than twice the gap keeps none of it, or a one-degree
+     * sliver would invert and draw the whole circle instead of nothing.
+     */
+    padAngle?: number;
     /**
      * What goes in the hole. A `donut` or a `semi` with nothing in the middle is
      * a pie with a bite out of it; the total, or the one figure the chart is
@@ -55,4 +80,4 @@ export interface PlPieChartProps extends ChartBaseProps {
  * A slice's colour follows the slice and not its size, so a chart that is
  * refiltered or resorted keeps every category the colour it had.
  */
-export declare function PlPieChart({ data, categories, shape, startAngle, center, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlPieChartProps): React.JSX.Element;
+export declare function PlPieChart({ data, categories, shape, startAngle, innerRadius, padAngle, center, valueLabels, height, initialWidth, format, locale: localeProp, label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlPieChartProps): React.JSX.Element;

package/dist/components/pie-chart/PlPieChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as t,ChartLegendBar as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as s,markTransitionClasses as o,useMeasuredWidth as d,useVisibility as u}from"../../internal/chart-frame.js";import{arcPath as m,categoryAt as c,chartFontSizes as h,compactNumber as v,dimmedByHover as f,formatCategory as p,markGap as x,plotHeights as b,seriesColor as g,toValue as y}from"../../internal/chart.js";import{useDefaults as M}from"../../internal/defaults.js";import{numberFormatter as N}from"../../internal/format.js";import{useLabels as j}from"../../internal/labels.js";import{cx as w,metaTextClasses as I,srOnlyClasses as P}from"../../internal/styles.js";const z={pie:0,donut:.62,semi:.62};export function PlPieChart({data:k,categories:A,shape:S="pie",startAngle:$=0,center:L,valueLabels:B="none",height:E,format:R,locale:C,label:D,legend:O,tooltip:_,empty:F,size:K,variant:V="ghost",padded:W=!1,className:q,...G}){const H=M(),J=K??H.size??"md",Q=C??H.locale,T=a.useRef(null),U=d(T),X=j(),Y=a.useId(),Z=a.useId(),ee=a.useCallback(e=>R?N(Q,R).format(e):v(e,Q),[R,Q]),le=a.useMemo(()=>k.map(y),[k]),ae=a.useMemo(()=>le.map((e,l)=>({name:p(c(l,A,[le]),Q),data:[k[l]],color:e.color})),[le,A,k,Q]),te=u(ae),[ne,ie]=a.useState(null),re=ae.map((e,l)=>g(e,l)),se=le.reduce((e,l,a)=>te.visible[a]&&null!==l.value?e+Math.abs(l.value):e,0),oe="semi"===S,de="number"==typeof E?E:b[J],ue=h[J],me=!1===O?{interactive:!1}:!0===O||void 0===O?{}:O,ce=!1!==O&&ae.length>1,he=me.side??"bottom",ve=!1===_?{mode:"none"}:!0===_||void 0===_?{}:_,fe="none"===ve.mode,pe=U/2,xe=Math.max(0,Math.min(U/2,oe?de:de/2)-2),be=oe?Math.min(de,de/2+xe/2):de/2,ge=xe*z[S],ye=se<=0,Me=xe>0?Math.min(4,x/xe*(180/Math.PI)):0,Ne=oe?180:360,je=[];let we=oe?-90:$;le.forEach((e,l)=>{if(!te.visible[l]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/se,t=a*Ne;je.push({index:l,start:we,end:we+t,value:e.value,share:a}),we+=t});const share=e=>`${ee(e)} · ${Math.round(10*(Math.abs(e)/se*100+Number.EPSILON))/10}%`,Ie=null===ne?[]:[{seriesIndex:ne,name:ae[ne]?.name,color:le[ne]?.color??re[ne],value:le[ne]?.value??null,formatted:share(le[ne]?.value??0),label:le[ne]?.label}];return l(r,{...G,size:J,variant:V,padded:W,className:q,legendSide:he,legend:ce?e(n,{series:ae,colors:re,options:me,visibility:te,size:J,values:me.showValue?le.map(e=>null===e.value?void 0:ee(e.value)):void 0}):null,table:ye?null:e(t,{id:Y,caption:D,categories:ae.map(e=>e.name??""),series:[{name:D,data:k}],values:[le],format:ee,locale:Q}),children:[l("div",{ref:T,role:"img",tabIndex:ye?void 0:0,"aria-label":D??X.chart,"aria-describedby":ye?void 0:Z,onPointerLeave:()=>ie(null),onBlur:()=>ie(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const l=je.map(e=>e.index);if(0===l.length)return;const a=null===ne?-1:l.indexOf(ne),t="ArrowRight"===e.key?a+1:a-1;ie(l[(t+l.length)%l.length]),e.preventDefault()},className:w("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:de},children:[ye?e("div",{className:w("flex h-full items-center justify-center text-(--plass-muted-fg)",I[J]),children:F??X.empty}):U>0&&xe>0?l("svg",{width:U,height:de,viewBox:`0 0 ${U} ${de}`,"aria-hidden":"true",className:"block",children:[je.map(l=>{const a=f(te.hovered,l.index,te.visible)||null!==ne&&ne!==l.index,t=l.end-l.start>2*Me?Me/2:0;return e("path",{d:m(pe,be,xe,ge,l.start+t,l.end-t),fill:le[l.index].color??re[l.index],opacity:a?.32:1,onPointerEnter:fe?void 0:()=>ie(l.index),className:o},l.index)}),"all"===B?je.map(l=>{const a=((l.start+l.end)/2-90)*(Math.PI/180),t=ge>0?(ge+xe)/2:.68*xe,n=`${Math.round(100*l.share)}%`;return(l.end-l.start)*(Math.PI/180)*t<2*ue||xe-ge<1.6*ue?null:e("text",{x:pe+t*Math.cos(a),y:be+t*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:ue,fontWeight:600,fill:"var(--plass-surface)",className:"tabular-nums",children:n},l.index)}):null]}):null,L&&ge>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{insetInlineStart:pe-ge,top:be-ge,width:2*ge,height:oe?ge:2*ge},children:L}):null,null===ne||fe?null:ve.render?e("div",{className:"pointer-events-none absolute top-0 start-1/2 z-10",children:ve.render({index:ne,category:ae[ne]?.name??ne,items:Ie})}):e(s,{heading:ae[ne]?.name,items:Ie,x:pe,y:8,flip:!1,size:J})]}),ye?null:e("span",{id:Z,className:P,children:je.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,ae[e.index]?.name," ",le[e.index]?.label??share(e.value)]},e.index))}),fe?null:e(i,{heading:null===ne?void 0:ae[ne]?.name,items:Ie})]})}
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as n,ChartLegendBar as t,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as s,chartTableName as o,givenHeight as d,markTransitionClasses as u,useMeasuredSize as m,useVisibility as c}from"../../internal/chart-frame.js";import{arcPath as h,categoryAt as v,chartFontSizes as f,compactNumber as p,dimmedByHover as b,formatCategory as x,markGap as g,plotHeights as y,seriesColor as M,toValue as N}from"../../internal/chart.js";import{useDefaults as j,useLocale as w}from"../../internal/defaults.js";import{numberFormatter as I}from"../../internal/format.js";import{useLabels as P}from"../../internal/labels.js";import{cx as k,metaTextClasses as z,srOnlyClasses as $}from"../../internal/styles.js";const A={pie:0,donut:.62,semi:.62},clamp=(e,l,a)=>Math.min(a,Math.max(l,e));export function PlPieChart({data:S,categories:B,shape:E="pie",startAngle:L=0,innerRadius:R,padAngle:D,center:O,valueLabels:C="none",height:W,initialWidth:_,format:F,locale:K,label:V,"aria-label":q,"aria-labelledby":G,"aria-describedby":H,legend:J,tooltip:Q,empty:T,size:U,variant:X="ghost",padded:Y=!1,className:Z,...ee}){const le=j(),ae=U??le.size??"md",ne=w(K),te=a.useRef(null),{width:ie,height:re,guessed:se}=m(te,_),oe=P(),de=a.useId(),ue=a.useId(),me=a.useId(),ce=a.useId(),he=a.useCallback(e=>F?I(ne,F).format(e):p(e,ne),[F,ne]),ve=a.useMemo(()=>S.map(N),[S]),fe=a.useMemo(()=>ve.map((e,l)=>({name:x(v(l,B,[ve]),ne),data:[S[l]],color:e.color})),[ve,B,S,ne]),pe=!1===J?{interactive:!1}:!0===J||void 0===J?{}:J,be=!1!==J&&fe.length>1,xe=pe.side??"bottom",ge=c(fe,be&&!1!==pe.interactive),[ye,Me]=a.useState(null),setActive=e=>Me(null===e?null:ge.keys[e]??null),Ne=fe.map((e,l)=>M(e,l)),je=ve.reduce((e,l,a)=>ge.visible[a]&&null!==l.value?e+Math.abs(l.value):e,0),we="semi"===E,Ie=d(W,y[ae]),Pe=Ie??re??0,ke=f[ae],ze=!1===Q?{mode:"none"}:!0===Q||void 0===Q?{}:Q,$e="none"===ze.mode,Ae=ie/2,Se=Math.max(0,Math.min(ie/2,we?Pe:Pe/2)-2),Be=we?Math.min(Pe,Pe/2+Se/2):Pe/2,Ee=Se*clamp(R??A[E],0,.95),Le=je<=0,Re=!Le&&Boolean(O)&&Ee>0,De=void 0===D?Se>0?Math.min(4,g/Se*(180/Math.PI)):0:clamp(D,0,10),Oe=we?180:360,Ce=[];let We=we?-90:L;ve.forEach((e,l)=>{if(!ge.visible[l]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/je,n=a*Oe;Ce.push({index:l,start:We,end:We+n,value:e.value,share:a}),We+=n});const _e=null===ye?-1:ge.keys.indexOf(ye),Fe=Ce.some(e=>e.index===_e)?_e:null;null!==ye&&null===Fe&&Me(null);const share=e=>`${he(e)} · ${Math.round(10*(Math.abs(e)/je*100+Number.EPSILON))/10}%`,Ke=null===Fe?[]:[{seriesIndex:Fe,name:fe[Fe]?.name,color:ve[Fe]?.color??Ne[Fe],value:ve[Fe]?.value??null,formatted:share(ve[Fe]?.value??0),label:ve[Fe]?.label}],Ve=Ke.map(e=>({...e,name:void 0}));return l(r,{...ee,size:ae,variant:X,padded:Y,className:Z,legendSide:xe,legend:be?e(t,{series:fe,colors:Ne,options:pe,visibility:ge,size:ae,values:pe.showValue?ve.map(e=>null===e.value?void 0:he(e.value)):void 0}):null,table:Le?null:e(n,{id:de,...o({label:V,"aria-label":q,"aria-labelledby":G}),categories:fe.map(e=>e.name??""),series:[{name:q??V??"",data:S}],values:[ve],format:he,locale:ne}),children:[l("div",{ref:te,role:"img",tabIndex:Le?void 0:0,"aria-labelledby":G,"aria-label":q??V??oe.chart,"aria-describedby":k(H,Le?me:Re?`${ce} ${ue}`:ue),onPointerLeave:()=>setActive(null),onBlur:()=>setActive(null),onKeyDown:e=>{if($e)return;if("Escape"===e.key&&null!==Fe)return setActive(null),e.stopPropagation(),void e.preventDefault();if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const l=Ce.map(e=>e.index);if(0===l.length)return;const a=null===Fe?-1:l.indexOf(Fe),n="ArrowRight"===e.key,t=-1===a?n?0:l.length-1:(a+(n?1:-1)+l.length)%l.length;setActive(l[t]),e.preventDefault()},className:k("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",se&&"overflow-hidden"),style:{height:Ie??W},children:[Le?e("div",{id:me,className:k("flex h-full items-center justify-center text-(--plass-muted-fg)",z[ae]),children:T??oe.empty}):ie>0&&Se>0?l("svg",{width:ie,height:Pe,viewBox:`0 0 ${ie} ${Pe}`,"aria-hidden":"true",className:"block",children:[Ce.map(l=>{const a=b(ge.hovered,l.index,ge.visible)||null!==Fe&&Fe!==l.index,n=l.end-l.start>2*De?De/2:0;return e("path",{d:h(Ae,Be,Se,Ee,l.start+n,l.end-n),fill:ve[l.index].color??Ne[l.index],opacity:a?.32:1,onPointerEnter:$e?void 0:()=>setActive(l.index),className:u},l.index)}),"all"===C?Ce.map(l=>{const a=((l.start+l.end)/2-90)*(Math.PI/180),n=Ee>0?(Ee+Se)/2:.68*Se,t=`${Math.round(100*l.share)}%`;return(l.end-l.start)*(Math.PI/180)*n<2*ke||Se-Ee<1.6*ke?null:e("text",{x:Ae+n*Math.cos(a),y:Be+n*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:ke,fontWeight:600,fill:"var(--plass-surface)",className:"tabular-nums",children:t},l.index)}):null]}):null,Re?e("div",{id:ce,className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{insetInlineStart:Ae-Ee,top:Be-Ee,width:2*Ee,height:we?Ee:2*Ee},children:O}):null,null===Fe||$e?null:ze.render?e("div",{className:"pointer-events-none absolute top-0 start-1/2 z-10",children:ze.render({index:Fe,category:fe[Fe]?.name??Fe,items:Ke})}):e(s,{heading:fe[Fe]?.name,items:Ve,x:Ae,y:8,flip:!1,size:ae})]}),Le?null:e("span",{id:ue,className:$,children:Ce.map((e,n)=>l(a.Fragment,{children:[n>0||Re?", ":null,fe[e.index]?.name," ",ve[e.index]?.label??share(e.value)]},e.index))}),$e?null:e(i,{heading:null===Fe?void 0:fe[Fe]?.name,items:Ve})]})}

package/dist/components/pill/PlPill.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{glowPointerMove as r}from"../../internal/glow.js";import{useDefaults as o}from"../../internal/defaults.js";import{inertProps as n}from"../../internal/inert.js";import{controlSlots as i,controlTextClasses as a,cx as c,focusRingClasses as d,forcedEdgeClasses as m,gapClasses as p,glassClasses as f,hasContent as x,iconClasses as u,iconSizeClasses as h,metaTextClasses as v,paddingXClasses as g,sheetBodyClasses as b,transitionClasses as w}from"../../internal/styles.js";const y={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)] ${m}`,glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${f} text-(--p-accent) bg-(--p-soft)`},j={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},N={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},k={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},z={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},P={static:{top:"relative",bottom:"relative"},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const PlPill=/* @__PURE__ */l.forwardRef(function PlPill({variant:m="solid",size:f,color:_,density:R,elevation:C=2,startIcon:I,endIcon:$,title:H,description:M,details:O,expanded:B=!1,position:E="static",side:F="top",className:S,style:q,children:A,onClick:D,onPointerMove:G,...J},K){const L=o(),Q=f??L.size??"md",T=_??L.color??"secondary",U=R??L.density??"default",V=l.useRef(null),W=l.useId(),[X,Y]=l.useState(0),Z=x(O);l.useEffect(()=>{const e=V.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>Y(e.scrollHeight));return s.observe(e),Y(e.scrollHeight),()=>s.disconnect()},[Z]);const ee=Boolean(D),se=g[U][Q],te=s(t,{children:[x(I)?e("span",{className:c("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",h[Q]),children:I}):null,x(H)||x(M)||x(A)?s("span",{className:c("flex min-w-0 flex-1 flex-col items-center justify-center text-center",z[U][Q]),children:[x(H)?e("span",{className:"max-w-full truncate",children:H}):null,x(M)?e("span",{className:c("max-w-full truncate font-normal",v[Q],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:M}):null,A]}):null]});return s("div",{ref:K,className:c("inline-flex max-w-full flex-col overflow-hidden align-middle",k[Q],"font-medium whitespace-nowrap select-none",a[Q],y[m],w,u,ee?`plass-glow ${j[m]}`:"",P[E][F],S),style:{...i(T,C,m),...q},onPointerMove:r(ee,G),...J,children:[s("div",{className:c("flex shrink-0 items-center py-1",N[Q],p[Q],ee?"ps-0":se,x($)?"pe-1":ee?"pe-0":""),children:[ee?e("button",{type:"button",className:c("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",p[Q],se,d),"aria-expanded":Z?B:void 0,"aria-controls":Z?W:void 0,onClick:D,children:te}):te,x($)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:$}):null]}),Z?e("div",{id:W,className:c("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:B?X:0},...n(!B),children:e("div",{ref:V,className:c("whitespace-normal pb-2",se,b[Q]),children:O})}):null]})});
+"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{glowPointerMove as o}from"../../internal/glow.js";import{useDefaults as r}from"../../internal/defaults.js";import{inertProps as n}from"../../internal/inert.js";import{controlSlots as i,controlTextClasses as a,cx as c,focusRingClasses as d,forcedEdgeClasses as m,gapClasses as p,glassClasses as f,hasContent as u,iconClasses as x,iconSizeClasses as h,metaTextClasses as v,paddingXClasses as g,sheetBodyClasses as b,transitionClasses as w}from"../../internal/styles.js";const y={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)] ${m}`,glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${f} text-(--p-accent) bg-(--p-soft)`},j={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},N={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},k={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},z={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},P={static:{top:"relative",bottom:"relative"},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const PlPill=/* @__PURE__ */l.forwardRef(function PlPill({variant:m="solid",size:f,color:_,density:R,elevation:C=2,startIcon:I,endIcon:$,title:H,description:M,details:O,expanded:B=!1,position:E="static",side:F="top",className:L,style:S,children:q,onClick:A,onPointerMove:D,...G},J){const K=r(),Q=f??K.size??"md",T=_??K.color??"secondary",U=R??K.density??"default",V=l.useRef(null),W=l.useId(),[X,Y]=l.useState(null),Z=u(O);l.useLayoutEffect(()=>{const e=V.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>Y(e.scrollHeight));return s.observe(e),Y(e.scrollHeight),()=>s.disconnect()},[Z]);const ee=Boolean(A),se=g[U][Q],te=s(t,{children:[u(I)?e("span",{className:c("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",h[Q]),children:I}):null,u(H)||u(M)||u(q)?s("span",{className:c("flex min-w-0 flex-1 flex-col items-center justify-center text-center",z[U][Q]),children:[u(H)?e("span",{className:"max-w-full truncate",children:H}):null,u(M)?e("span",{className:c("max-w-full truncate font-normal",v[Q],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:M}):null,q]}):null]});return s("div",{ref:J,className:c("inline-flex max-w-full flex-col overflow-hidden align-middle",k[Q],"font-medium whitespace-nowrap select-none",a[Q],y[m],w,x,ee?`plass-glow ${j[m]}`:"",P[E][F],L),style:{...i(T,C,m),...S},onPointerMove:o(ee,D),...G,children:[s("div",{className:c("flex shrink-0 items-center py-1",N[Q],p[Q],ee?"ps-0":se,u($)?"pe-1":ee?"pe-0":""),children:[ee?e("button",{type:"button",className:c("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch py-0","rounded-[inherit]",p[Q],se,d),"aria-expanded":Z?B:void 0,"aria-controls":Z?W:void 0,onClick:A,children:te}):te,u($)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:$}):null]}),Z?e("div",{id:W,className:c("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:B?X??"auto":0},...n(!B),children:e("div",{ref:V,className:c("whitespace-normal pb-2",se,b[Q]),children:O})}):null]})});

package/dist/components/popconfirm/PlPopconfirm.d.ts

@@ -21,6 +21,13 @@ export interface PlPopconfirmProps {
      * the caller's, and `onConfirm` is where to report it from.
      */
     onConfirm?: () => void | Promise<unknown>;
+    /**
+     * The word a screen reader hears after the confirming button's name while it
+     * waits on `onConfirm` — "Deleting", "Revoking". It takes the place of the
+     * label set's `loading` for that button.
+     * @default 'Loading'
+     */
+    loadingLabel?: string;
     /** What cancelling does, beyond closing. */
     onCancel?: () => void;
     /** @default 'danger' */
@@ -58,4 +65,4 @@ export interface PlPopconfirmProps {
  * is not an inconsistency: nobody reaches for a popconfirm to ask whether to
  * save.
  */
-export declare function PlPopconfirm({ trigger, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, onConfirm, onCancel, color: colorProp, size: sizeProp, side, align, width, open: openProp, defaultOpen, onOpenChange, className }: PlPopconfirmProps): React.JSX.Element;
+export declare function PlPopconfirm({ trigger, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, onConfirm, loadingLabel, onCancel, color: colorProp, size: sizeProp, side, align, width, open: openProp, defaultOpen, onOpenChange, className }: PlPopconfirmProps): React.JSX.Element;

package/dist/components/popconfirm/PlPopconfirm.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{PlButton as i}from"../button/PlButton.js";import{PlPopover as n}from"../popover/PlPopover.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a}from"../../internal/styles.js";export function PlPopconfirm({trigger:l,title:c,description:m,confirmLabel:p,cancelLabel:d,onConfirm:f,onCancel:u,color:g,size:h,side:j="top",align:y="center",width:C=280,open:x,defaultOpen:P,onOpenChange:b,className:v}){const w=r(),z=s(),N=p??z.confirm,O=d??z.cancel,k=h??w.size??"md",L=g??"danger",[S,B]=t.useState(P??!1),F=x??S,[q,A]=t.useState(!1),setOpen=e=>{void 0===x&&B(e),b?.(e)};return e(n,{trigger:l,open:F,onOpenChange:e=>{q||(e||u?.(),setOpen(e))},title:c,description:m,side:j,align:y,width:C,color:L,size:k,showClose:!1,className:v,children:o("div",{className:a("mt-3 flex flex-wrap items-center justify-end gap-2"),children:[e(i,{variant:"ghost",color:"secondary",size:k,density:"compact",disabled:q,onClick:()=>{u?.(),setOpen(!1)},children:O}),e(i,{color:L,size:k,density:"compact",loading:q,autoFocus:!0,onClick:async()=>{const e=f?.();if(e instanceof Promise){A(!0);try{await e,setOpen(!1)}catch{}finally{A(!1)}}else setOpen(!1)},children:N})]})})}
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as i from"react";import{PlButton as n}from"../button/PlButton.js";import{PlPopover as t}from"../popover/PlPopover.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a}from"../../internal/styles.js";export function PlPopconfirm({trigger:l,title:c,description:m,confirmLabel:d,cancelLabel:p,onConfirm:f,loadingLabel:g,onCancel:u,color:h,size:j,side:y="top",align:b="center",width:C=280,open:x,defaultOpen:P,onOpenChange:v,className:w}){const z=r(),L=s(),N=d??L.confirm,O=p??L.cancel,k=j??z.size??"md",S=h??"danger",[B,F]=i.useState(P??!1),q=x??B,[A,D]=i.useState(!1),setOpen=e=>{void 0===x&&F(e),v?.(e)};return e(t,{trigger:l,open:q,onOpenChange:e=>{A||(e||u?.(),setOpen(e))},title:c,description:m,side:y,align:b,width:C,color:S,size:k,showClose:!1,className:w,children:o("div",{className:a("mt-3 flex flex-wrap items-center justify-end gap-2"),children:[e(n,{variant:"ghost",color:"secondary",size:k,density:"compact",disabled:A,onClick:()=>{u?.(),setOpen(!1)},children:O}),e(n,{color:S,size:k,density:"compact",loading:A,loadingLabel:g,autoFocus:!0,onClick:async()=>{const e=f?.();if(e instanceof Promise){D(!0);try{await e,setOpen(!1)}catch{}finally{D(!1)}}else setOpen(!1)},children:N})]})})}