plass-ui 1.3.0 → 1.5.0

package/dist/components/animate-reveal/PlAnimateReveal.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, PlassSide } from '../../types.js';
+export interface PlAnimateRevealProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content is uncovered or covered again. `out` is the same wipe
+     * run backwards, so it closes from the edge it opened towards.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /**
+     * Which edge the wipe starts at. Physical, as `PlassSide` is everywhere — a
+     * heading uncovered from the top is uncovered from the top in every writing
+     * direction.
+     * @default 'left'
+     */
+    from?: PlassSide;
+    /**
+     * Fades in behind the wipe.
+     *
+     * **Off by default**, which is the opposite of every other effect here and is
+     * the whole point of this one: a reveal is not a fade. Turn it on only if you
+     * want both.
+     * @default false
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content uncovered behind a moving edge.
+ *
+ * The only entrance in the set where **nothing moves and no colour changes**.
+ * A fade changes the ink, a slide changes the position, a grow changes the
+ * size; this changes how much of the element is drawn and leaves every pixel it
+ * has drawn exactly where it will finally be. That makes it the effect for
+ * anything whose position is itself the information — a heading over the
+ * paragraph it belongs to, a rule between two sections, the plot area of a
+ * chart, a row of figures that must not be read from the wrong place.
+ *
+ * It is also the cheapest entrance in the set to lay out, because there is
+ * nothing to lay out: no wrapper, no `overflow` box, no second element in the
+ * flow. `clip-path` paints less of the element and the page around it never
+ * learns that anything happened.
+ *
+ * `fade` is off by default, alone among the effects that offer it. Fading a
+ * reveal is asking for two entrances at once, and the reason to have reached
+ * for this one is usually that the first was the problem.
+ */
+export declare const PlAnimateReveal: React.ForwardRefExoticComponent<PlAnimateRevealProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-reveal/PlAnimateReveal.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{useRender as t}from"@base-ui/react/use-render";import{isInfinite as a,revealClip as n,useAnimateElement as i}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const PlAnimateReveal=/* @__PURE__ */e.forwardRef(function PlAnimateReveal({duration:e=520,delay:l=0,easing:o,repeat:m=1,alternate:p,paused:d,trigger:c="mount",play:f,once:g=!0,threshold:u=.2,timeline:y,range:h,stagger:v=0,durationStep:N=0,reverse:R=!1,mode:b="in",from:j="left",fade:A=!1,render:P,className:S,style:w,children:x,...k},q){const z=i({effect:"reveal",duration:e,delay:l,easing:o,repeat:m,alternate:p,mode:b,clip:n(j),opacity:A?0:1,trigger:c,play:f,once:g,threshold:u,paused:d,infinite:a(m),timeline:y,range:h,stagger:v,durationStep:N,reverse:R,children:x});return t({render:P,ref:[q,z.ref],props:{...r(k,z.props),className:s(z.className,S),style:{...z.style,...w},children:z.children}})});

package/dist/components/animate-reveal/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateReveal } from './PlAnimateReveal.js';
+export type { PlAnimateRevealProps } from './PlAnimateReveal.js';

package/dist/components/animate-reveal/index.js

@@ -0,0 +1 @@
+export{PlAnimateReveal}from"./PlAnimateReveal.js";

package/dist/components/animate-rotate/PlAnimateRotate.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateMode, PlassAnimateProps } from '../../types.js';
-export interface PlAnimateRotateProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps } from '../../types.js';
+export interface PlAnimateRotateProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content turns into place or out of it.
      * @default 'in'

package/dist/components/animate-rotate/PlAnimateRotate.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const PlAnimateRotate=/* @__PURE__ */e.forwardRef(function PlAnimateRotate({duration:e=440,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,mode:g="in",from:u=-180,to:y=0,origin:h="center",fade:N=!0,render:R,className:j,style:A,children:P,...$},b){const w=a({effect:"rotate",duration:e,delay:o,easing:i,repeat:s,alternate:l,mode:g,angle:`${u}deg`,angleTo:`${y}deg`,opacity:N?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(s)});return r({render:R,ref:[b,w.ref],props:{...$,className:n(w.className,j),style:{transformOrigin:h,...w.style,...A},...w.props,children:P}})});
+"use client";import*as e from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{useRender as t}from"@base-ui/react/use-render";import{isInfinite as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateRotate=/* @__PURE__ */e.forwardRef(function PlAnimateRotate({duration:e=440,delay:o=0,easing:s,repeat:l=1,alternate:d,paused:m,trigger:p="mount",play:c,once:g=!0,threshold:f=.2,timeline:u,range:y,stagger:h=0,durationStep:N=0,reverse:R=!1,mode:b="in",from:j=-180,to:v=0,origin:A="center",fade:P=!0,render:S,className:$,style:w,children:x,...T},k){const q=n({effect:"rotate",duration:e,delay:o,easing:s,repeat:l,alternate:d,mode:b,angle:`${j}deg`,angleTo:`${v}deg`,opacity:P?0:1,trigger:p,play:c,once:g,threshold:f,paused:m,infinite:a(l),timeline:u,range:y,origin:A,stagger:h,durationStep:N,reverse:R,children:x});return t({render:S,ref:[k,q.ref],props:{...r(T,q.props),className:i(q.className,$),style:{...q.style,...w},children:q.children}})});

package/dist/components/animate-scramble/PlAnimateScramble.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateTrigger } from '../../types.js';
+export interface PlAnimateScrambleProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /**
+     * The line that resolves. A string, and it has to be: the effect works on
+     * characters, and there is no character in a `<strong>`.
+     */
+    children: string;
+    /**
+     * The glyphs the unsettled characters are drawn from.
+     *
+     * Left out, it is **the line's own characters**. Every scrambler that ships a
+     * default alphabet ships an English one, and English noise over a Korean or a
+     * Greek headline is a different script flickering rather than a word
+     * arriving. Set it for the caller who genuinely wants a terminal look.
+     */
+    characters?: string;
+    /**
+     * How long the line takes to settle, in milliseconds.
+     * @default 1200
+     */
+    duration?: number;
+    /** How long it waits before starting, in milliseconds. @default 0 */
+    delay?: number;
+    /**
+     * How often the unsettled characters are redrawn, in milliseconds.
+     *
+     * Not every frame, on purpose. At sixty a second a line of changing glyphs
+     * strobes, which is unpleasant to look at and is the kind of flicker a
+     * reader with a sensitivity to it should never be handed.
+     * @default 45
+     */
+    tick?: number;
+    /**
+     * What starts it. `visible` for `PlAnimateCounter`'s reason: a line that
+     * resolved off screen delivered text that was simply already there.
+     * @default 'visible'
+     */
+    trigger?: PlassAnimateTrigger;
+    /** Runs it, when `trigger` is `manual`. */
+    play?: boolean;
+    /** With `visible`, whether it runs only the first time. @default true */
+    once?: boolean;
+    /** With `visible`, how much has to be on screen to count. @default 0.2 */
+    threshold?: number;
+    /** Holds it where it is. */
+    paused?: boolean;
+    /** Renders something other than a `<span>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+}
+/**
+ * A line of text resolving out of noise.
+ *
+ * The second of the two effects that animate **content** rather than a box, and
+ * it takes a `string` rather than a node for the same reason a
+ * [PlAnimateCounter](./animate-counter) takes a number: there is no character
+ * to scramble inside a `<strong>`.
+ *
+ * **The noise is made of the line's own characters.** Every scrambler that
+ * ships a default alphabet ships an English one, and English noise over a
+ * Korean, Greek or Arabic headline is not a word arriving — it is a different
+ * script flickering where a word is about to be. Shuffling the string's own
+ * glyphs costs nothing and is right in every script; it also keeps the line's
+ * colour and width steady, because every frame is drawn out of exactly the
+ * characters the finished line is made of.
+ *
+ * It settles **left to right**, which is what makes it read as a word arriving
+ * rather than as a slot machine, and whitespace is never scrambled — the gaps
+ * between words are what keeps a line of noise looking like a sentence.
+ *
+ * **A screen reader is told the line, once**, and never the noise. Everything a
+ * `PlAnimateCounter` says about that applies here word for word.
+ */
+export declare const PlAnimateScramble: React.ForwardRefExoticComponent<PlAnimateScrambleProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/animate-scramble/PlAnimateScramble.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useRender as s}from"@base-ui/react/use-render";import{useAnimationRun as i}from"../../internal/animate.js";import{usePrefersReducedMotion as m}from"../../internal/media.js";import{poolOf as o,scrambleAt as c}from"../../internal/scramble.js";import{cx as l,srOnlyClasses as u}from"../../internal/styles.js";export const PlAnimateScramble=/* @__PURE__ */a.forwardRef(function PlAnimateScramble({children:d,characters:f,duration:p=1200,delay:h=0,tick:x=45,trigger:b="visible",play:j,once:M=!0,threshold:g=.2,paused:A,render:y,className:F,...v},N){const S=m(),q=i({trigger:b,play:j,once:M,threshold:g,paused:A,infinite:!1,nonce:d}),E=a.useMemo(()=>f??o(d),[f,d]),[P,R]=a.useState(()=>d),k=a.useRef(0);return a.useEffect(()=>{k.current=0},[q.runs,d]),a.useEffect(()=>{if(S)return void R(d);if(!q.started)return k.current=0,void R(c(d,E,0,0));if(A)return;const e=Math.max(1,p);let r,t=0,a=0,n=-1;const step=s=>{r??=s-k.current,k.current=s-r;const i=k.current-h,m=Math.min(1,i/e),o=Math.floor(Math.max(0,i)/Math.max(1,x));o!==n&&(n=o,a+=1,R(c(d,E,Math.max(0,m),a))),m<1?t=requestAnimationFrame(step):R(d)};return t=requestAnimationFrame(step),()=>cancelAnimationFrame(t)},[q.started,q.runs,S,A,d,E,p,h,x]),s({render:y??e("span",{}),ref:[N,q.ref],props:{className:l(F),"data-plass-animation":"scramble","data-state":q.state,children:t(r,{children:[e("span",{className:u,children:d}),e("span",{"aria-hidden":"true",children:P})]}),...n(v,q.handlers)}})});

package/dist/components/animate-scramble/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateScramble } from './PlAnimateScramble.js';
+export type { PlAnimateScrambleProps } from './PlAnimateScramble.js';

package/dist/components/animate-scramble/index.js

@@ -0,0 +1 @@
+export{PlAnimateScramble}from"./PlAnimateScramble.js";

package/dist/components/animate-shake/PlAnimateShake.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateProps } from '../../types.js';
+export interface PlAnimateShakeProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Plays the shake again whenever this value changes, and never on the first
+     * render.
+     *
+     * The prop the component exists around. `play` is a boolean, so replaying
+     * with it means toggling off and on — two renders for one event, and a piece
+     * of state whose only job is to be flipped back. A refusal is an **event**,
+     * and a value that has changed is the closest React has to one: a count of
+     * failed attempts already is this.
+     *
+     * ```tsx
+     * <PlAnimateShake replay={attempts}>…</PlAnimateShake>
+     * ```
+     */
+    replay?: unknown;
+    /**
+     * How far it travels either side of where it started. A number is pixels.
+     * @default 6
+     */
+    distance?: number | string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A refusal.
+ *
+ * The one effect in the set that is a **response** rather than an entrance: it
+ * is what a form does when the password was wrong again, what a locked control
+ * does when it is pressed. So it starts held still and plays only when it is
+ * told to, where every other effect here starts on mount.
+ *
+ * `replay` is the prop it exists around. A refusal can happen twice, and
+ * `play`, being a boolean, cannot say "again" — replaying with it means
+ * toggling off and on, which is two renders for one event and a piece of state
+ * whose only job is to be flipped back. A value that has changed is the closest
+ * React has to an event, and the count of failed attempts a form already keeps
+ * is exactly that value.
+ *
+ * It is not in `PlassAnimation`, for `PlAnimateFloat`'s reason: that union is
+ * the set of ways content can arrive, and this is not an arrival.
+ *
+ * Three shudders either side of home and back to nothing, so a shaken element
+ * is exactly where it was. This is the one effect a caller will run over
+ * content that is still being typed into, and a field left a few pixels off its
+ * label would be worse than the error it was reporting.
+ *
+ * **A reader who asked for less motion sees none of it**, which is the whole
+ * reason the words matter more than the shake: whatever a refusal is saying has
+ * to be said in text as well, in something a screen reader is told about. The
+ * shake is emphasis, never the message.
+ */
+export declare const PlAnimateShake: React.ForwardRefExoticComponent<PlAnimateShakeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-shake/PlAnimateShake.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as n,useAnimateElement as s}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateShake=/* @__PURE__ */e.forwardRef(function PlAnimateShake({duration:e=400,delay:l=0,easing:o,repeat:p=1,alternate:m,paused:c,trigger:d="manual",play:f=!1,once:h=!0,threshold:u=.2,replay:y,distance:g=6,render:k,className:N,style:b,children:j,...x},A){const P=s({effect:null,duration:e,delay:l,easing:o,repeat:p,alternate:m,x:n(g),trigger:d,play:f,once:h,threshold:u,paused:c,infinite:!1,nonce:y,children:j});return r({render:k,ref:[A,P.ref],props:{...a(x,P.props),className:i(t,"plass-anim-shake",P.className,N),style:{...P.style,...b},"data-plass-animation":"shake",children:P.children}})});

package/dist/components/animate-shake/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateShake } from './PlAnimateShake.js';
+export type { PlAnimateShakeProps } from './PlAnimateShake.js';

package/dist/components/animate-shake/index.js

@@ -0,0 +1 @@
+export{PlAnimateShake}from"./PlAnimateShake.js";

package/dist/components/animate-slide/PlAnimateSlide.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateMode, PlassAnimateProps, PlassSide } from '../../types.js';
-export interface PlAnimateSlideProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, PlassSide } from '../../types.js';
+export interface PlAnimateSlideProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content slides in or slides away. `out` leaves by the same edge
      * it would have come from.

package/dist/components/animate-slide/PlAnimateSlide.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as i}from"../../internal/styles.js";export const PlAnimateSlide=/* @__PURE__ */e.forwardRef(function PlAnimateSlide({duration:e=360,delay:s=0,easing:o,repeat:l=1,alternate:d,paused:m,trigger:c="mount",play:p,once:f=!0,threshold:y=.2,mode:u="in",from:g="bottom",distance:h="100%",fade:x=!0,render:N,className:b,style:j,children:A,...P},S){const{x:w,y:R}=a(g,h),k=n({effect:"slide",duration:e,delay:s,easing:o,repeat:l,alternate:d,mode:u,x:w,y:R,opacity:x?0:1,trigger:c,play:p,once:f,threshold:y,paused:m,infinite:t(l)});return r({render:N,ref:[S,k.ref],props:{...P,className:i(k.className,b),style:{...k.style,...j},...k.props,children:A}})});
+"use client";import*as e from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{useRender as t}from"@base-ui/react/use-render";import{isInfinite as a,slideOffsets as i,useAnimateElement as n}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const PlAnimateSlide=/* @__PURE__ */e.forwardRef(function PlAnimateSlide({duration:e=360,delay:o=0,easing:l,repeat:d=1,alternate:m,paused:p,trigger:c="mount",play:f,once:g=!0,threshold:u=.2,timeline:y,range:h,stagger:S=0,durationStep:b=0,reverse:x=!1,mode:N="in",from:j="bottom",distance:v="100%",fade:A=!0,render:P,className:w,style:R,children:k,...q},z){const{x:B,y:C}=i(j,v),D=n({effect:"slide",duration:e,delay:o,easing:l,repeat:d,alternate:m,mode:N,x:B,y:C,opacity:A?0:1,trigger:c,play:f,once:g,threshold:u,paused:p,infinite:a(d),timeline:y,range:h,stagger:S,durationStep:b,reverse:x,children:k});return t({render:P,ref:[z,D.ref],props:{...r(q,D.props),className:s(D.className,w),style:{...D.style,...R},children:D.children}})});

package/dist/components/animate-split/PlAnimateSplit.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, PlassAnimation } from '../../types.js';
+/** What the line is cut into before the effect is told off across it. */
+export type PlAnimateSplitBy = 'word' | 'character';
+export interface PlAnimateSplitProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /**
+     * The line. A string, and it has to be: the component cuts it up, and there
+     * is nothing to cut inside a `<strong>`.
+     */
+    children: string;
+    /**
+     * What it is cut into.
+     *
+     * `word` by default, and it is the safe one. See the note on the page about
+     * `character` and the scripts it must not be used on.
+     * @default 'word'
+     */
+    by?: PlAnimateSplitBy;
+    /**
+     * Which of the entrances each part plays. A part starts where the component
+     * of that name starts when it is given nothing, so a `slide` part rises from
+     * its own height below and a `zoom` part grows from 0.4.
+     * @default 'fade'
+     */
+    effect?: PlassAnimation;
+    /**
+     * `in` plays the entrance; `out` is the same run backwards, held at the end.
+     * @default 'in'
+     */
+    mode?: PlassAnimateMode;
+    /** Renders something other than a `<span>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+}
+/**
+ * A line of text arriving one part at a time.
+ *
+ * The other five effects tell themselves off across their **children**, which a
+ * line of text does not have. This one makes them: it cuts the string into
+ * words or characters, wraps each in a span, and hands the set to exactly the
+ * same `stagger` machinery a `PlAnimateFade` around a list of `<li>`s uses. So
+ * `effect`, `stagger`, `durationStep` and `reverse` all mean what they mean
+ * everywhere else — this component is the splitting and nothing more.
+ *
+ * **`by="character"` is not safe in every script**, and that is the one thing
+ * to know before reaching for it. A character span breaks the shaping between
+ * letters, so Arabic stops joining. A character is a grapheme, what a reader
+ * counts as one, so an emoji, a flag or a Devanagari conjunct stays in one
+ * part. `word` keeps the shaping, is the default, and is what a headline wants
+ * anyway.
+ *
+ * **A screen reader is told the line, once.** The parts are hidden from the
+ * accessibility tree and the whole line sits beside them in a clipped span,
+ * which is what stops a split headline being read out one letter at a time —
+ * the defect this pattern is known for.
+ */
+export declare const PlAnimateSplit: React.ForwardRefExoticComponent<PlAnimateSplitProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/animate-split/PlAnimateSplit.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{mergeProps as n}from"@base-ui/react/merge-props";import{useRender as i}from"@base-ui/react/use-render";import{animBaseClass as s,animationClasses as o,animationSlots as c,isInfinite as p,revealClip as l,slideOffsets as m,staggerSlots as d,useAnimationRun as u}from"../../internal/animate.js";import{cx as f,srOnlyClasses as g}from"../../internal/styles.js";import{graphemesOf as h}from"../../internal/text.js";const y=/[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Bopomofo}\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}]/u;function effectStart(e){switch(e){case"slide":return{opacity:0,...m("bottom","100%")};case"grow":return{opacity:0,scale:.8};case"zoom":return{opacity:0,scale:.4};case"rotate":return{opacity:0,angle:"-180deg",angleTo:"0deg"};case"reveal":return{opacity:1,clip:l("left")};default:return{opacity:0}}}export const PlAnimateSplit=/* @__PURE__ */a.forwardRef(function PlAnimateSplit({children:l,by:m="word",effect:S="fade",mode:w="in",duration:b=400,delay:j=0,easing:x,repeat:N=1,alternate:v,paused:k,trigger:$="mount",play:A,once:F=!0,threshold:H=.2,timeline:K,range:M,stagger:P=40,durationStep:T=0,reverse:z=!1,render:B,className:L,style:O,...R},q){const C=a.useMemo(()=>function piecesOf(e,t){const r=[];for(const a of e.split(/(\s+)/)){if(""===a)continue;if("word"===t||""===a.trim()){r.push([a]);continue}let e=[];for(const t of h(a))0===e.length||y.test(t)?(e=[t],r.push(e)):e.push(t)}return r}(l,m),[l,m]),D=u({trigger:"view"===K?"mount":$,play:A,once:F,threshold:H,paused:k,infinite:p(N)}),E={...effectStart(S),duration:b,delay:j,easing:x,repeat:N,alternate:v,mode:w,timeline:K,range:M},G=C.reduce((e,t)=>""===t[0].trim()?e:e+t.length,0),I=`${s} ${o[S]}`;let J=-1;const renderPart=(t,r)=>(J+=1,e("span",{className:`${I} inline-block whitespace-normal`,style:{...c(d(E,{index:J,count:G,stagger:P,durationStep:T,reverse:z})),"--p-anim-state":D.state},children:t},r));return i({render:B??e("span",{}),ref:[q,D.ref],props:{...n(R,D.handlers),className:f(L),style:O,"data-plass-animation":S,"data-state":D.state,children:r(t,{children:[e("span",{className:g,children:l}),e("span",{"aria-hidden":"true",children:C.map((t,r)=>""===t[0].trim()?e(a.Fragment,{children:t[0]},r):1===t.length?renderPart(t[0],r):e("span",{className:"inline-block",children:t.map((e,t)=>renderPart(e,t))},r))})]})}})});

package/dist/components/animate-split/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAnimateSplit } from './PlAnimateSplit.js';
+export type { PlAnimateSplitBy, PlAnimateSplitProps } from './PlAnimateSplit.js';

package/dist/components/animate-split/index.js

@@ -0,0 +1 @@
+export{PlAnimateSplit}from"./PlAnimateSplit.js";

package/dist/components/animate-typing/PlAnimateTyping.d.ts

@@ -42,8 +42,9 @@ export interface PlAnimateTypingProps extends Omit<PlassAnimateProps, 'alternate
  * for a screen reader, which reads it once and is not made to sit through the
  * performance — and what animates is a visible copy that is `aria-hidden`. So
  * the effect costs a reader who cannot see it nothing, and costs a reader who
- * can nothing either: the box is not laid out from the characters that have
- * arrived, so the text around it does not reflow on every frame.
+ * can nothing either: the characters still to come are laid out after the
+ * caret without being drawn, so the box holds the whole string from the first
+ * frame and nothing around it moves as the text arrives.
  *
  * `repeat`, `hold` and `erase` are what make it a loop: type, hold, delete,
  * type again. Without `erase` a repeat clears in one frame, which is right for

package/dist/components/animate-typing/PlAnimateTyping.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{isInfinite as n,useAnimationRun as a}from"../../internal/animate.js";import{usePrefersReducedMotion as i}from"../../internal/media.js";import{srOnlyClasses as s}from"../../internal/styles.js";function textOf(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(textOf).join(""):""}export const PlAnimateTyping=/* @__PURE__ */r.forwardRef(function PlAnimateTyping({text:o,speed:u=24,hold:m=1400,erase:l=!1,eraseSpeed:c,caret:f=!0,caretChar:p="|",duration:d,delay:h=0,repeat:g=1,paused:y,trigger:x="mount",play:T,once:j=!0,threshold:v=.2,className:N,style:S,children:w,...A},M){const O=a({trigger:x,play:T,once:j,threshold:v,paused:y,infinite:n(g)}),I=i(),E=o??textOf(w),P=r.useMemo(()=>function graphemesOf(e,t){return"undefined"!=typeof Intl&&"Segmenter"in Intl?[...new Intl.Segmenter(t,{granularity:"grapheme"}).segment(e)].map(e=>e.segment):[...e]}(E),[E]),R=P.length,[b,C]=r.useState(0),k=r.useRef(0),q=d&&R>0?d/R:1e3/Math.max(u,1),z=1e3/Math.max(c??2*u,1);return r.useEffect(()=>{k.current=0},[R]),r.useEffect(()=>{if(I||0===R)return void C(R);if(!O.started)return k.current=0,void C(0);if(y)return;let e,t=!1,r=k.current,n=1,a=!1;const i="infinite"===g?1/0:Math.max(1,g);if(r>=R&&1===i)return;const step=()=>{if(!t){if(a)return r-=1,k.current=r,C(r),r<=0&&(a=!1,n+=1),void(e=setTimeout(step,a?z:q));if(r+=1,k.current=r,C(r),r<R)e=setTimeout(step,q);else if(!(n>=i)){if(l)return a=!0,void(e=setTimeout(step,m));n+=1,e=setTimeout(()=>{t||(r=0,k.current=0,C(0),e=setTimeout(step,q))},m)}}};return C(r),e=setTimeout(step,0===r?h:q),()=>{t=!0,clearTimeout(e)}},[O.started,y,I,R,q,z,h,m,l,g]),t("div",{ref:e=>{O.ref(e),"function"==typeof M?M(e):M&&(M.current=e)},className:N,style:S,"data-plass-animation":"typing","data-state":O.state,...O.handlers,...A,children:[e("span",{className:s,children:E}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[P.slice(0,b).join(""),f?e("span",{className:"plass-caret",children:p}):null]})]})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{isInfinite as s,useAnimationRun as i}from"../../internal/animate.js";import{usePrefersReducedMotion as n}from"../../internal/media.js";import{srOnlyClasses as l}from"../../internal/styles.js";import{graphemesOf as o,textOf as c}from"../../internal/text.js";export const PlAnimateTyping=/* @__PURE__ */r.forwardRef(function PlAnimateTyping({text:m,speed:u=24,hold:p=1400,erase:d=!1,eraseSpeed:f,caret:h=!0,caretChar:y="|",duration:g,delay:j=0,repeat:x=1,paused:T,trigger:v="mount",play:N,once:b=!0,threshold:M=.2,className:w,style:A,children:E,...P},R){const S=i({trigger:v,play:N,once:b,threshold:M,paused:T,infinite:s(x)}),k=n(),C=m??c(E),q=r.useMemo(()=>o(C),[C]),z=q.length,[B,D]=r.useState(0),F=r.useRef(0),G=g&&z>0?g/z:1e3/Math.max(u,1),H=1e3/Math.max(f??2*u,1);return r.useEffect(()=>{F.current=0},[z,S.runs]),r.useEffect(()=>{if(k||0===z)return void D(z);if(!S.started)return F.current=0,void D(0);if(T)return;let e,t=!1,r=F.current,a=1,s=!1;const i="infinite"===x?1/0:Math.max(1,x);if(r>=z&&1===i)return;const step=()=>{if(!t){if(s)return r-=1,F.current=r,D(r),r<=0&&(s=!1,a+=1),void(e=setTimeout(step,s?H:G));if(r+=1,F.current=r,D(r),r<z)e=setTimeout(step,G);else if(!(a>=i)){if(d)return s=!0,void(e=setTimeout(step,p));a+=1,e=setTimeout(()=>{t||(r=0,F.current=0,D(0),e=setTimeout(step,G))},p)}}};return D(r),e=setTimeout(step,0===r?j:G),()=>{t=!0,clearTimeout(e)}},[S.started,S.runs,T,k,z,G,H,j,p,d,x]),t("div",{ref:e=>{S.ref(e),"function"==typeof R?R(e):R&&(R.current=e)},className:w,style:A,"data-plass-animation":"typing","data-state":S.state,...a(P,S.handlers),children:[e("span",{className:l,children:C}),t("span",{"aria-hidden":"true",className:"relative whitespace-pre-wrap",children:[q.slice(0,B).join(""),h?e("span",{className:"plass-caret absolute",children:y}):null,e("span",{"data-sample":q.slice(B).join(""),className:"invisible before:content-[attr(data-sample)]",children:h?e("span",{className:"inline-block",children:y}):null})]})]})});

package/dist/components/animate-zoom/PlAnimateZoom.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAnimateMode, PlassAnimateProps } from '../../types.js';
-export interface PlAnimateZoomProps extends PlassAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { PlassAnimateMode, PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps } from '../../types.js';
+export interface PlAnimateZoomProps extends PlassAnimateProps, PlassAnimateStaggerProps, PlassAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content comes forward or falls away.
      * @default 'in'

package/dist/components/animate-zoom/PlAnimateZoom.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";import{cx as n}from"../../internal/styles.js";export const PlAnimateZoom=/* @__PURE__ */e.forwardRef(function PlAnimateZoom({duration:e=320,delay:o=0,easing:s,repeat:i=1,alternate:l,paused:m,trigger:c="mount",play:d,once:p=!0,threshold:f=.2,mode:u="in",from:y=.4,fade:g=!0,render:h,className:N,style:j,children:A,...P},Z){const b=a({effect:"zoom",duration:e,delay:o,easing:s,repeat:i,alternate:l,mode:u,scale:y,opacity:g?0:1,trigger:c,play:d,once:p,threshold:f,paused:m,infinite:t(i)});return r({render:h,ref:[Z,b.ref],props:{...P,className:n(b.className,N),style:{transformOrigin:"center",...b.style,...j},...b.props,children:A}})});
+"use client";import*as e from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{useRender as t}from"@base-ui/react/use-render";import{isInfinite as a,useAnimateElement as n}from"../../internal/animate.js";import{cx as o}from"../../internal/styles.js";export const PlAnimateZoom=/* @__PURE__ */e.forwardRef(function PlAnimateZoom({duration:e=320,delay:i=0,easing:s,repeat:l=1,alternate:m,paused:d,trigger:p="mount",play:c,once:f=!0,threshold:g=.2,timeline:u,range:y,stagger:h=0,durationStep:N=0,reverse:b=!1,mode:j="in",from:v=.4,fade:A=!0,render:P,className:S,style:Z,children:w,...x},z){const R=n({effect:"zoom",duration:e,delay:i,easing:s,repeat:l,alternate:m,mode:j,scale:v,opacity:A?0:1,trigger:p,play:c,once:f,threshold:g,paused:d,infinite:a(l),timeline:u,range:y,origin:"center",stagger:h,durationStep:N,reverse:b,children:w});return t({render:P,ref:[z,R.ref],props:{...r(x,R.props),className:o(R.className,S),style:{...R.style,...Z},children:R.children}})});

package/dist/components/app-logo/PlAppLogo.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassColor, PlassSize, PlassVariant } from '../../types.js';
+/**
+ * How the artwork is framed, which is the one question this component exists to
+ * answer.
+ *
+ * - `bare` — drawn as it was given, at the height `size` asks for and whatever
+ *   width that comes to. No plate, no crop, no padding. The default, and the
+ *   only one that is correct for a mark drawn with its own background, its own
+ *   margin, or the product's name set into it.
+ * - `plate` — an app icon: a tile with the artwork inset in it and the corners
+ *   cut to the house radius. What a mark drawn as a bare glyph needs before it
+ *   can sit next to anything else.
+ * - `circle` — the same tile, round. For the products whose icon is a disc.
+ */
+export type PlAppLogoShape = 'bare' | 'plate' | 'circle';
+export interface PlAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * The mark. An `<img>`, an inline `<svg>`, a `PlIcon` — whatever the product's
+     * artwork actually is.
+     */
+    children?: React.ReactNode;
+    /** A picture to draw as the mark, instead of `children`. */
+    src?: string;
+    /**
+     * What the picture says, for a reader who cannot see it.
+     *
+     * Leave it empty when `name` is set: the wordmark beside the mark already
+     * says the product's name, and a picture that repeats it is a screen reader
+     * saying it twice.
+     */
+    alt?: string;
+    /** The product's name, set beside the mark. */
+    name?: React.ReactNode;
+    /** A line under the name — an environment, a tenant, a plan. */
+    description?: React.ReactNode;
+    /** How the artwork is framed. @default 'bare' */
+    shape?: PlAppLogoShape;
+    /**
+     * What the plate is made of. Only read when `shape` is not `bare`.
+     * @default 'solid'
+     */
+    variant?: PlassVariant;
+    /** The height of the mark, and the type scale of the name beside it. @default 'md' */
+    size?: PlassSize;
+    /** The family the plate takes. @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Renders something other than a `<span>`. A logo is nearly always the way
+     * back to the front page, so `render={<a href="/" />}` is the ordinary case.
+     */
+    render?: useRender.RenderProp;
+}
+/**
+ * A product's mark, and its name beside it.
+ *
+ * The whole component is the **framing**, which is the one thing a logo needs
+ * and the one thing every project gets wrong twice: `bare` is the default
+ * because a mark drawn with its own background, its own margin, or the
+ * product's name set into it must not be put on a plate or cropped to a circle.
+ * `plate` and `circle` are for a mark drawn as a bare glyph, which cannot sit
+ * next to anything else until it has been given an edge.
+ *
+ * It is not a [PlAvatar](./avatar). An avatar is a picture of a person or a
+ * thing and is always a circle or a fillet, with initials behind it when the
+ * picture fails; a logo is artwork the product owns, it has no fallback worth
+ * inventing, and its shape is a decision somebody already made.
+ *
+ * **With a `name`, the mark is decorative.** The wordmark beside it already
+ * says what the product is called, and a picture that says it again is a screen
+ * reader reading the name twice. That is why `alt` is a prop rather than
+ * something derived from `name`.
+ *
+ * A logo is nearly always the way back to the front page. `render={<a href="/"
+ * />}` makes it one without changing anything about how it is drawn.
+ */
+export declare const PlAppLogo: React.ForwardRefExoticComponent<PlAppLogoProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/app-logo/PlAppLogo.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as s,Fragment as l}from"react/jsx-runtime";import*as a from"react";import{useRender as t}from"@base-ui/react/use-render";import{useDefaults as r}from"../../internal/defaults.js";import{controlSlots as n,cx as i,forcedFieldEdgeClasses as o,glassClasses as c,hasContent as m,metaTextClasses as d,radiusClasses as p}from"../../internal/styles.js";const x={xs:"h-5",sm:"h-6",md:"h-8",lg:"h-10",xl:"h-12"},g={xs:"size-5",sm:"size-6",md:"size-8",lg:"size-10",xl:"size-12"},f={xs:"text-sm",sm:"text-base",md:"text-lg",lg:"text-xl",xl:"text-2xl"},u={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},h={solid:`[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:var(--p-lift)] ${o}`,glass:`${c} bg-(--plass-glass) text-(--p-accent) border [border-color:var(--plass-glass-line)]`,ghost:"bg-(--p-soft) text-(--p-accent)"};export const PlAppLogo=/* @__PURE__ */a.forwardRef(function PlAppLogo({children:a,src:o,alt:c="",name:b,description:v,shape:z="bare",variant:j="solid",size:N,color:w,render:y,className:k,style:A,...L},P){const $=r(),_=N??$.size??"md",F=w??$.color??"primary",R="bare"!==z,q=m(b)||m(v),B=o?e("img",{src:o,alt:c,className:R?"size-[70%] object-contain":"h-full w-auto"}):a;return t({render:y,ref:P,props:{className:i("inline-flex items-center text-(--plass-fg) [&_svg]:h-full [&_svg]:w-auto",u[_],k),style:{...n(F,1,j),...A},children:s(l,{children:[e("span",{"aria-hidden":!!m(b)||void 0,className:i("flex shrink-0 items-center justify-center overflow-hidden",R?g[_]:x[_],R?h[j]:"","circle"===z?"rounded-full":R?p[_]:""),children:B}),q?s("span",{className:"flex min-w-0 flex-col",children:[m(b)?e("span",{className:i("truncate font-semibold",f[_]),children:b}):null,m(v)?e("span",{className:i("truncate text-(--plass-muted-fg)",d[_]),children:v}):null]}):null]}),...L}})});

package/dist/components/app-logo/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAppLogo } from './PlAppLogo.js';
+export type { PlAppLogoProps, PlAppLogoShape } from './PlAppLogo.js';

package/dist/components/app-logo/index.js

@@ -0,0 +1 @@
+export{PlAppLogo}from"./PlAppLogo.js";

package/dist/components/area-chart/PlAreaChart.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/chart-frame.js';
+import { type ChartMarkers } from '../../internal/chart-line.js';
+import type { PlassChartCurve, PlassChartValueLabels } from '../../types.js';
+export interface PlAreaChartProps extends CartesianChartProps {
+    /**
+     * How the edge of the band gets from one point to the next. The same three
+     * shapes a [PlLineChart](./line-chart) offers, and they mean the same things.
+     * @default 'linear'
+     */
+    curve?: PlassChartCurve;
+    /**
+     * Stacks the bands, each one riding on the total of those below it.
+     *
+     * - `true` — absolute totals. The top edge is the sum, which is the thing a
+     *   stacked area is usually drawn to show.
+     * - `'full'` — every category normalised to 100%, so the chart is about
+     *   *share* and stops being about size. The value axis becomes a percentage
+     *   and says so.
+     * @default false
+     */
+    stacked?: boolean | 'full';
+    /**
+     * Dots on the points. `none` by default rather than `auto`: a filled band
+     * already has a visible edge, and a row of dots on it is ink that says
+     * nothing the fill did not.
+     * @default 'none'
+     */
+    markers?: ChartMarkers;
+    /** @default 'none' */
+    valueLabels?: PlassChartValueLabels;
+    /**
+     * Draws the band straight through a `null` instead of breaking at it. Off,
+     * and on an area it matters more than on a line: a fill that closes across a
+     * missing month paints a made-up number over a larger part of the chart.
+     * @default false
+     */
+    connectNulls?: boolean;
+}
+/**
+ * A line with the space under it filled — which changes what the chart is
+ * about.
+ *
+ * A line says where a value went. An area says how much of something there was,
+ * and stacked it says how that amount was made up. That is the whole test for
+ * reaching for this instead of a [PlLineChart](./line-chart): if the quantity
+ * does not add up to anything — a temperature, a rate, a score — the fill under
+ * it is decoration, and a chart with two of them is two washes fighting.
+ *
+ * Unstacked bands are a wash at about a quarter opacity, fading out downward,
+ * so two of them overlapping stay readable. Stacked bands are opaquer, because
+ * there the fill *is* the mark rather than a hint at the line above it.
+ */
+export declare function PlAreaChart({ curve, stacked, markers, valueLabels, connectNulls, series, yAxis, format, locale, ...props }: PlAreaChartProps): React.JSX.Element;

package/dist/components/area-chart/PlAreaChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{CartesianChart as t}from"../../internal/chart-frame.js";import{LineSeries as a}from"../../internal/chart-line.js";import{stackToFull as n,writeChartValue as o}from"../../internal/chart.js";import{useDefaults as l}from"../../internal/defaults.js";export function PlAreaChart({curve:s="linear",stacked:i=!1,markers:c="none",valueLabels:m="none",connectNulls:u=!1,series:f,yAxis:d,format:p,locale:x,...h}){const j=l(),k=x??j.locale,v=r.useId().replace(/:/g,""),A="full"===i,b=r.useMemo(()=>A?n(f,e=>o(e,p,k)):f,[f,A,p,k]);return e(t,{...h,series:b,format:p,locale:x,yAxis:A?{min:0,max:100,tickFormat:e=>`${e}%`,...d}:d,stacked:!1!==i,inset:!0,includeZero:!0,headroom:"none"===m?0:10,children:r=>e(a,{context:r,curve:s,filled:!0,stacked:!1!==i,markers:c,valueLabels:m,connectNulls:u,gradient:!1,idPrefix:v})})}

package/dist/components/area-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { PlAreaChart } from './PlAreaChart.js';
+export type { PlAreaChartProps } from './PlAreaChart.js';

package/dist/components/area-chart/index.js

@@ -0,0 +1 @@
+export{PlAreaChart}from"./PlAreaChart.js";

package/dist/components/aspect-ratio/PlAspectRatio.d.ts

@@ -7,8 +7,9 @@ import type { PlassSize } from '../../types.js';
  * These are `object-fit`'s own values rather than a nicer set of words, for the
  * reason the library keeps `aspect-ratio`'s own syntax below: inventing
  * `fill-the-box` would only make a reader look up which CSS it maps to.
+ * `scale-down` is `contain` that never enlarges a file smaller than the box.
  */
-export type PlAspectFit = 'cover' | 'contain' | 'fill' | 'none';
+export type PlAspectFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 export interface PlAspectRatioProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * The proportion the box holds, written the way CSS writes it — a number

package/dist/components/aspect-ratio/PlAspectRatio.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{cx as t,radiusClasses as c}from"../../internal/styles.js";const r=/* @__PURE__ */["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),l={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const PlAspectRatio=/* @__PURE__ */e.forwardRef(function PlAspectRatio({ratio:e=1,fit:n="cover",rounded:s=!1,size:a,render:f,className:m,style:u,children:d,...p},j){const b=i(),v=a??b.size??"md",g=t("relative block w-full overflow-hidden",r,l[n],s?c[v]:"",m);return o({render:f,ref:j,props:{className:g,style:{aspectRatio:e,...u},children:d,...p}})});
+"use client";import*as e from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{cx as t,radiusClasses as c}from"../../internal/styles.js";const l=/* @__PURE__ */["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none","scale-down":"[&>img]:object-scale-down [&>video]:object-scale-down [&>picture>img]:object-scale-down"};export const PlAspectRatio=/* @__PURE__ */e.forwardRef(function PlAspectRatio({ratio:e=1,fit:n="cover",rounded:s=!1,size:a,render:f,className:m,style:d,children:u,...j},b){const p=i(),v=a??p.size??"md",g=t("relative block w-full overflow-hidden",l,r[n],s?c[v]:"",m);return o({render:f,ref:b,props:{className:g,style:{aspectRatio:e,...d},children:u,...j}})});

package/dist/components/avatar/PlAvatar.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Avatar as s}from"@base-ui/react/avatar";import{AvatarGroupContext as o}from"../../internal/avatar-group.js";import{controlHeightClasses as n,controlSlots as l,controlSquareClasses as i,glassClasses as c,hasContent as d,radiusClasses as m,srOnlyClasses as p,transitionClasses as f}from"../../internal/styles.js";const v={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},g={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft-press) [box-shadow:var(--p-elev)]"},h=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",f].join(" ");function PersonIcon(){return r("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */a.forwardRef(function PlAvatar({src:c,srcSet:f,alt:u,name:x,initials:b,shape:j,variant:y,size:w,color:z,elevation:N,delay:C,imageProps:A,onLoadingStatusChange:P,className:k,style:B,children:S,...I},L){const F=t(),M=a.useContext(o),R=j??M?.shape??"circle",Z=y??M?.variant??"ghost",_=w??M?.size??F.size??"md",O=z??M?.color??F.color??"primary",U=N??M?.elevation??0,q=x?function initialsOf(e){const r=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===r.length?"":((Array.from(r[0])[0]??"")+(r.length>1?Array.from(r[r.length-1])[0]??"":"")).toLocaleUpperCase()}(x):"",D=u??x,E=d(S)?S:(b??q)||e(PersonIcon,{}),G=d(S)||Boolean(b??q),H=[h,n[_],i[_],v[_],"circle"===R?"rounded-full":m[_],g[Z],k??""].filter(Boolean).join(" ");return r(s.Root,{ref:L,className:H,style:{...l(O,U,Z),...B},...I,children:[c?e(s.Image,{src:c,srcSet:f,alt:D??"",className:"size-full object-cover",onLoadingStatusChange:P,...A}):null,r(s.Fallback,{delay:c?C:void 0,className:"flex size-full items-center justify-center",children:[D&&G?e("span",{className:p,children:D}):null,e("span",{"aria-hidden":!(!D||!G)||void 0,className:"contents",children:E})]})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Avatar as s}from"@base-ui/react/avatar";import{controlHeightClasses as o,controlSlots as l,controlSquareClasses as n,forcedFieldEdgeClasses as i,glassClasses as c,hasContent as d,radiusClasses as m,srOnlyClasses as p,transitionClasses as f}from"../../internal/styles.js";const g={xs:"text-[0.5625rem]",sm:"text-[0.6875rem]",md:"text-[0.8125rem]",lg:"text-[1rem]",xl:"text-[1.1875rem]"},v={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",i].join(" "),glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft-press) [box-shadow:var(--p-elev)]"},h=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden","align-middle leading-none font-semibold tracking-wide whitespace-nowrap","[&_svg]:pointer-events-none [&_svg]:size-[55%]",f].join(" ");function PersonIcon(){return r("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const PlAvatar=/* @__PURE__ */a.forwardRef(function PlAvatar({src:a,srcSet:i,alt:c,name:f,initials:u,shape:x,variant:b,size:j,color:y,elevation:w,delay:N,imageProps:z,onLoadingStatusChange:A,className:C,style:P,children:k,...B},S){const I=t(),L=x??"circle",F=b??"ghost",M=j??I.size??"md",R=y??I.color??"primary",Z=w??0,_=f?function initialsOf(e){const r=e.normalize("NFC").trim().split(/\s+/).filter(Boolean);return 0===r.length?"":((Array.from(r[0])[0]??"")+(r.length>1?Array.from(r[r.length-1])[0]??"":"")).toLocaleUpperCase()}(f):"",O=c??f,U=d(k)?k:(u??_)||e(PersonIcon,{}),q=d(k)||Boolean(u??_),D=[h,o[M],n[M],g[M],"circle"===L?"rounded-full":m[M],v[F],C??""].filter(Boolean).join(" ");return r(s.Root,{ref:S,className:D,style:{...l(R,Z,F),...P},...B,children:[a?e(s.Image,{src:a,srcSet:i,alt:O??"",className:"size-full object-cover",onLoadingStatusChange:A,...z}):null,r(s.Fallback,{delay:a?N:void 0,className:"flex size-full items-center justify-center",children:[O&&q?e("span",{className:p,children:O}):null,e("span",{"aria-hidden":!(!O||!q)||void 0,className:"contents",children:U})]})]})});

package/dist/components/back-top/PlBackTop.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { type PlassScrollTarget } from '../../internal/scroll-target.js';
 import type { PlassColor, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
 /** What is scrolled, and what is watched. */
-export type PlBackTopTarget = Window | HTMLElement | React.RefObject<HTMLElement | null> | (() => Window | HTMLElement | null);
+export type PlBackTopTarget = PlassScrollTarget;
 export interface PlBackTopProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
     /**
      * What is scrolled. The window by default; a ref or an element for a panel