plass-ui 1.2.0 → 1.4.0

package/dist/components/flex/PlFlex.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassAlignItems, PlassJustify, PlassOrientation, PlassResponsive } from '../../types.js';
+export interface PlFlexProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way the children run. `horizontal` is a row, `vertical` is a column.
+     *
+     * Responsive: `direction={{ xs: 'vertical', md: 'horizontal' }}` stacks on a
+     * phone and lines up on a laptop, which is most of what this component is
+     * for.
+     * @default 'horizontal'
+     */
+    direction?: PlassResponsive<PlassOrientation>;
+    /**
+     * Runs the children the other way along that axis — the last one first.
+     *
+     * It reverses the **painting order and nothing else**: the DOM order is what
+     * a screen reader reads and what the Tab key walks, and neither of them
+     * changes here. Use it for a visual arrangement, never to reorder content.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * The gap between children, on Tailwind's spacing scale — `spacing={4}` is
+     * `1rem`, the same length `gap-4` is. Fractions are allowed, so `1.5` is
+     * `0.375rem`.
+     * @default 2
+     */
+    spacing?: PlassResponsive<number>;
+    /** The gap between rows only. Falls back to `spacing`. */
+    rowSpacing?: PlassResponsive<number>;
+    /** The gap between columns only. Falls back to `spacing`. */
+    columnSpacing?: PlassResponsive<number>;
+    /** How the box distributes the space its children did not use, along the axis. */
+    justify?: PlassJustify;
+    /** How the children sit against each other across the axis. @default 'stretch' */
+    alignItems?: PlassAlignItems;
+    /** Where the lines sit when the box is longer across than its content. */
+    alignContent?: PlassJustify;
+    /**
+     * Whether children that run out of room continue on the next line.
+     *
+     * `false` by default, which is what a flex box already does — a row that
+     * wraps is a decision rather than the absence of one, and the opposite
+     * default would silently reflow a toolbar somebody sized to fit.
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Lays the box out **inline**, so it sits in a line of text and is only as
+     * wide as its children.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<ul />}`,
+     * `render={<nav />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    /** What is laid out. */
+    children?: React.ReactNode;
+}
+/**
+ * A row or a column, and the gap between the things in it.
+ *
+ * This is the layout box with no arithmetic in it — the one to reach for when
+ * the answer is "these, side by side, with a gap". A [PlGrid](./grid) divides a
+ * row into columns and needs a `PlGridItem` to take them; here the children
+ * are whatever they are and the box only decides which way they run.
+ *
+ * **`direction` is responsive and resolves in CSS**, which is the whole reason
+ * it is worth a component rather than three Tailwind classes. `{ xs:
+ * 'vertical', md: 'horizontal' }` is a form that stacks on a phone and lines up
+ * on a laptop, decided by the stylesheet — so a server renders it correctly at
+ * every width, and dragging a window costs no re-render. It is also the only
+ * way to say that in a project that imports `plass-ui/styles.css` and has no
+ * Tailwind of its own.
+ *
+ * It draws **nothing**: no surface, no padding, no `variant`, `color`, `size`
+ * or `density`. A flex box is the arrangement of the surfaces inside it, and
+ * `spacing` — the space *between* children — is the only measurement it owns.
+ */
+export declare const PlFlex: React.ForwardRefExoticComponent<PlFlexProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/flex/PlFlex.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as i,justifyClasses as a,spacingValue as l}from"../../internal/grid.js";import{responsiveSlots as t,withBaseline as o}from"../../internal/responsive.js";import{cx as s}from"../../internal/styles.js";export const PlFlex=/* @__PURE__ */e.forwardRef(function PlFlex({direction:e,reverse:p=!1,spacing:c,rowSpacing:f,columnSpacing:m,justify:g,alignItems:u,alignContent:x,wrap:d=!1,inline:y=!1,render:w,className:j,style:v,children:h,...F},N){const P=s("plass-flex",y?"inline-flex":"flex",d?"flex-wrap":"flex-nowrap","gap-x-(--p-gap-x) gap-y-(--p-gap-y)",g?a[g]:"",u?i[u]:"",x?n[x]:"",j);return r({render:w,ref:N,props:{className:P,style:{...t("dir",o(e,"horizontal"),e=>function directionValue(e,r){const n="vertical"===e?"column":"row";return r?`${n}-reverse`:n}(e,p)),...t("gap-x",o(m??c,2),l),...t("gap-y",o(f??c,2),l),...v},children:h,...F}})});

package/dist/components/flex/index.d.ts

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

package/dist/components/flex/index.js

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

package/dist/components/floating-action-button/PlFloatingActionButton.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { type PlButtonProps } from '../button/PlButton.js';
+import type { PlassCorner, PlassElevation, PlassSize, PlassVariant } from '../../types.js';
+export interface PlFloatingActionButtonProps extends Omit<PlButtonProps, 'children' | 'startIcon' | 'endIcon'> {
+    /** The glyph. Sized in `em` against the button, exactly as a `startIcon` is. */
+    icon: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. It is the accessible name whether
+     * or not the words are drawn — a floating button is a disc with a mark in it
+     * nine times out of ten, and an unnamed one is the most common accessibility
+     * defect this pattern ships with.
+     */
+    label: string;
+    /**
+     * Draws the label beside the glyph.
+     *
+     * Worth turning on for the action a first-time reader would not guess from a
+     * glyph, and worth turning off again once they would.
+     * @default false
+     */
+    extended?: boolean;
+    /**
+     * Which corner of the window it sits in.
+     * @default 'bottom-end'
+     */
+    corner?: PlassCorner;
+    /**
+     * How far it stands off the two edges it is against. A number is pixels.
+     * @default '1.5rem'
+     */
+    offset?: number | string;
+    /**
+     * Whether it pins itself to the window at all.
+     *
+     * On by default, because that is what this component is. Turn it off to put
+     * the same button somewhere of your own — the end of a card, a toolbar — and
+     * keep the shape and the shadow.
+     * @default true
+     */
+    floating?: boolean;
+    /** @default 'solid' */
+    variant?: PlassVariant;
+    /**
+     * One step up the ladder from a `PlButton`'s default.
+     * @default 'lg'
+     */
+    size?: PlassSize;
+    /**
+     * How far off the page. `3` — the top of the ladder — and unlike every other
+     * default in the library it is not a compromise: this is the one control that
+     * genuinely floats over the content rather than resting on it.
+     * @default 3
+     */
+    elevation?: PlassElevation;
+}
+/**
+ * The one action a screen is about, floating over it.
+ *
+ * It is a [PlButton](./button) in a corner, and everything that makes it one is
+ * the button's: the three materials, the elevation ladder, the pointer light,
+ * `loading`, `readOnly` and `disabled`. What this adds is the **pinning**, the
+ * shape, and one rule.
+ *
+ * **`label` is required and is always the accessible name.** A floating button
+ * is a disc with a mark in it nine times out of ten, and `extended` decides
+ * only whether the words are also drawn — never whether they exist. An icon
+ * with no name is the defect this pattern ships with everywhere else.
+ *
+ * The icon-only form is a **disc**, which is [PlIconButton](./icon-button)'s
+ * deliberate exception to the radius rule: the flat run along a control's edge
+ * is there for a line of text to sit on, and a glyph has no line of text. The
+ * extended form is **not** a pill for exactly that reason — it has words along
+ * its edge, so it takes the house fillet like every other labelled control.
+ *
+ * **One per screen.** Two floating buttons in one corner is two primary
+ * actions, which is none; and a screen whose main action is already a button in
+ * the content does not want a second copy of it in the corner.
+ */
+export declare const PlFloatingActionButton: React.ForwardRefExoticComponent<PlFloatingActionButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/floating-action-button/PlFloatingActionButton.js

@@ -0,0 +1 @@
+"use client";import{jsx as t}from"react/jsx-runtime";import*as o from"react";import{PlButton as n}from"../button/PlButton.js";import{PlIconButton as e}from"../icon-button/PlIconButton.js";import{useDefaults as r}from"../../internal/defaults.js";import{cx as i,toLength as s}from"../../internal/styles.js";const a={"top-start":["Start","Start"],"top-end":["Start","End"],"bottom-start":["End","Start"],"bottom-end":["End","End"]};export const PlFloatingActionButton=/* @__PURE__ */o.forwardRef(function PlFloatingActionButton({icon:o,label:l,extended:c=!1,corner:m="bottom-end",offset:f,floating:d=!0,variant:u="solid",size:p,elevation:b=3,className:j,style:x,...B},g){const v=r(),z=p??v.size??"lg",[E,P]=a[m],S=s(f)??"1.5rem",y=d?{position:"fixed",[`insetBlock${E}`]:S,[`insetInline${P}`]:S}:{},I={ref:g,variant:u,size:z,elevation:b,className:i(d?"z-30":"",j),style:{...y,...x},...B};return c?t(n,{...I,startIcon:o,children:l}):t(e,{...I,icon:o,label:l})});

package/dist/components/floating-action-button/index.d.ts

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

package/dist/components/floating-action-button/index.js

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

package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useRender as r}from"@base-ui/react/use-render";import{controlHeightClasses as i,controlSlots as l,controlSquareClasses as o,cx as n,focusRingClasses as d,glassClasses as c,hasContent as p,iconSizeClasses as u,srOnlyClasses as f,transitionClasses as m}from"../../internal/styles.js";const g=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),v={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},b={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},h={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},x={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"}},y={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},w={solid:/* @__PURE__ */[c,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[c,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},N=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:i="md",color:o="primary",density:d="default",elevation:c=2,value:p,defaultValue:u=null,onValueChange:f,position:k="fixed",safeArea:z=!0,disabled:j=!1,label:P,render:C,className:A,style:R,children:F,...q},B){const[$,E]=s.useState(u),I=void 0!==p,L=I?p:$,O=s.useRef(null),S=s.useRef(null),V=s.useCallback(e=>{const t=O.current,a=S.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{V(!0)},[V,L,a,i,d,j,F]),s.useEffect(()=>{const e=O.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>V(!1));return t.observe(e),()=>t.disconnect()},[V]);const W=s.useCallback(e=>{I||E(e),f?.(e)},[I,f]),D=s.useMemo(()=>({value:L??null,change:W,size:i,disabled:j}),[L,W,i,j]),H=n("flex w-full justify-center px-4","static"===k?"":"pointer-events-none",z?b[i]:v[i],y[k],A);return r({render:C??e("nav",{}),ref:B,props:{"aria-label":P,className:H,style:{...l(o,c,"solid"),...R},children:e(g.Provider,{value:D,children:t("div",{ref:O,className:n("pointer-events-auto relative inline-flex items-center rounded-full",w[a],h[d][i],x[d][i],m),children:[null!=L?e("span",{ref:S,"aria-hidden":"true",className:N}):null,F]})}),...q}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:l,href:c,disabled:v=!1,className:b,children:h,onClick:x,...y},w){const N=s.useContext(g),k=v||N.disabled,z=null!==N.value&&N.value===r,j=n("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",i[N.size],o[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,d,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":z?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",b),P=t(a,{children:[p(l)?e("span",{className:n("flex shrink-0 items-center justify-center",u[N.size]),children:l}):null,p(h)?e("span",{className:f,children:h}):null]}),C={"data-disc":"","data-current":z?"":void 0,"data-disabled":k?"":void 0},press=e=>{k?e.preventDefault():(N.change(r),x?.(e))};return c?e("a",{ref:w,href:k?void 0:c,"aria-current":z?"page":void 0,"aria-disabled":k||void 0,...C,className:j,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:k,"aria-current":z?"page":void 0,...C,className:j,onClick:press,...y,children:P})});
+"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{useRender as i}from"@base-ui/react/use-render";import{controlHeightClasses as l,controlSlots as o,controlSquareClasses as n,cx as d,focusRingClasses as c,glassClasses as p,hasContent as u,iconSizeClasses as f,srOnlyClasses as m,transitionClasses as g}from"../../internal/styles.js";const v=/* @__PURE__ */s.createContext({value:null,change:()=>{},size:"md",disabled:!1}),b={xs:"pb-2",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"},h={xs:"pb-[calc(env(safe-area-inset-bottom)+0.5rem)]",sm:"pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",md:"pb-[calc(env(safe-area-inset-bottom)+1rem)]",lg:"pb-[calc(env(safe-area-inset-bottom)+1.25rem)]",xl:"pb-[calc(env(safe-area-inset-bottom)+1.5rem)]"},x={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={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={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},N={solid:/* @__PURE__ */[p,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[p,"border bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:""},z=/* @__PURE__ */["pointer-events-none absolute rounded-full","top-(--p-disc-y) left-(--p-disc-x) h-(--p-disc-h) w-(--p-disc-w)","[background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-1),var(--p-lift)]","data-[quiet]:opacity-50 data-[quiet]:saturate-[0.35]","[transition-property:left,top,width,height,opacity,filter]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ");export const PlFloatingBottomNavigation=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigation({variant:a="glass",size:l,color:n,density:c,elevation:p=2,value:u,defaultValue:f=null,onValueChange:m,position:j="fixed",safeArea:k=!0,disabled:P=!1,label:C,render:A,className:R,style:F,children:q,...B},$){const E=r(),I=l??E.size??"md",L=n??E.color??"primary",O=c??E.density??"default",[S,V]=s.useState(f),W=void 0!==u,D=W?u:S,H=s.useRef(null),M=s.useRef(null),T=s.useCallback(e=>{const t=H.current,a=M.current;if(!t||!a)return;const s=t.querySelector("[data-disc][data-current]");if(!s)return;const r=!e||!a.hasAttribute("data-ready");r&&a.removeAttribute("data-ready"),a.style.setProperty("--p-disc-x",`${s.offsetLeft}px`),a.style.setProperty("--p-disc-y",`${s.offsetTop}px`),a.style.setProperty("--p-disc-w",`${s.offsetWidth}px`),a.style.setProperty("--p-disc-h",`${s.offsetHeight}px`),a.toggleAttribute("data-quiet",s.hasAttribute("data-disabled")),r&&a.offsetWidth,a.setAttribute("data-ready","")},[]);s.useLayoutEffect(()=>{T(!0)},[T,D,a,I,O,P,q]),s.useEffect(()=>{const e=H.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(()=>T(!1));return t.observe(e),()=>t.disconnect()},[T]);const G=s.useCallback(e=>{W||V(e),m?.(e)},[W,m]),J=s.useMemo(()=>({value:D??null,change:G,size:I,disabled:P}),[D,G,I,P]),K=d("flex w-full justify-center px-4","static"===j?"":"pointer-events-none",k?h[I]:b[I],w[j],R);return i({render:A??e("nav",{}),ref:$,props:{"aria-label":C,className:K,style:{...o(L,p,"solid"),...F},children:e(v.Provider,{value:J,children:t("div",{ref:H,className:d("pointer-events-auto relative inline-flex items-center rounded-full",N[a],x[O][I],y[O][I],g),children:[null!=D?e("span",{ref:M,"aria-hidden":"true",className:z}):null,q]})}),...B}})});export const PlFloatingBottomNavigationItem=/* @__PURE__ */s.forwardRef(function PlFloatingBottomNavigationItem({value:r,icon:i,href:o,disabled:p=!1,className:b,children:h,onClick:x,...y},w){const N=s.useContext(v),z=p||N.disabled,j=null!==N.value&&N.value===r,k=d("relative z-10 inline-flex shrink-0 items-center justify-center rounded-full",l[N.size],n[N.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,c,z?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":j?"cursor-pointer text-(--p-on-solid)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",b),P=t(a,{children:[u(i)?e("span",{className:d("flex shrink-0 items-center justify-center",f[N.size]),children:i}):null,u(h)?e("span",{className:m,children:h}):null]}),C={"data-disc":"","data-current":j?"":void 0,"data-disabled":z?"":void 0},press=e=>{z?e.preventDefault():(N.change(r),x?.(e))};return o?e("a",{ref:w,href:z?void 0:o,"aria-current":j?"page":void 0,"aria-disabled":z||void 0,...C,className:k,onClick:press,...y,children:P}):e("button",{ref:w,type:"button",disabled:z,"aria-current":j?"page":void 0,...C,className:k,onClick:press,...y,children:P})});

package/dist/components/footer/PlFooter.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassSize, PlassVariant } from '../../types.js';
+import { type PlassMeasure } from '../../internal/responsive.js';
+import type { PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassResponsive, PlassSize, PlassVariant } from '../../types.js';
 /** How wide the content inside the sheet is allowed to get. */
-export type PlFooterWidth = PlassSize | 'none';
+export type PlFooterWidth = PlassMeasure;
 export interface PlFooterProps extends Omit<React.ComponentPropsWithoutRef<'footer'>, 'color' | 'title'> {
     /**
      * How the bar sits in the page's scroll.
@@ -45,7 +46,7 @@ export interface PlFooterProps extends Omit<React.ComponentPropsWithoutRef<'foot
      * spans the window. The same ladder `PlContainer`'s `maxWidth` uses.
      * @default 'none'
      */
-    maxWidth?: PlFooterWidth;
+    maxWidth?: PlassResponsive<PlFooterWidth>;
     /** The gutter and the air above and below. @default true */
     padded?: boolean;
     /**

package/dist/components/footer/PlFooter.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as t}from"@base-ui/react/use-render";import{PlPageLayoutContext as o}from"../../internal/page-layout.js";import{cx as a,sheetPaddingXClasses as s,sheetPaddingYClasses as i,sheetRestClasses as l,surfaceSlots as m,transitionClasses as n}from"../../internal/styles.js";const d=l,c={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},f={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const PlFooter=/* @__PURE__ */r.forwardRef(function PlFooter({position:l="static",variant:x="glass",size:u="md",color:p="primary",density:w="default",elevation:y=0,divider:b=!0,maxWidth:v="none",padded:g=!0,label:h,render:j,className:k,style:z,children:N,...C},F){const{register:P}=r.useContext(o),R=r.useCallback(e=>{P("footer",e),"function"==typeof F?F(e):F&&(F.current=e)},[P,F]),W=a("w-full min-w-0",d[x],b?"border-t [border-color:var(--plass-divider)]":"",c[l],n,k);return t({render:j??e("footer",{}),ref:R,props:{"aria-label":h,className:W,style:{...m(p,y),...z},children:e("div",{className:a("w-full",g?a(s[w][u],i[w][u]):"","none"===v?"":a(f[v],"mx-auto")),children:N}),...C}})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useRender as o}from"@base-ui/react/use-render";import{PlPageLayoutContext as s}from"../../internal/page-layout.js";import{measureSlots as i}from"../../internal/responsive.js";import{cx as a,sheetPaddingXClasses as l,sheetPaddingYClasses as n,sheetRestClasses as d,surfaceSlots as m,transitionClasses as c}from"../../internal/styles.js";const f=d,p={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"};export const PlFooter=/* @__PURE__ */r.forwardRef(function PlFooter({position:d="static",variant:u="glass",size:y,color:x,density:b,elevation:v=0,divider:j=!0,maxWidth:h,padded:w=!0,label:z,render:N,className:g,style:k,children:C,...F},P){const R=i(h),W=t(),q=y??W.size??"md",A=x??W.color??"primary",B=b??W.density??"default",{register:D}=r.useContext(s),E=r.useCallback(e=>{D("footer",e),"function"==typeof P?P(e):P&&(P.current=e)},[D,P]),G=a("w-full min-w-0",f[u],j?"border-t [border-color:var(--plass-divider)]":"",p[d],c,g);return o({render:N??e("footer",{}),ref:E,props:{"aria-label":z,className:G,style:{...m(A,v),...k},children:e("div",{style:R.style,className:a("w-full",w?a(l[B][q],n[B][q]):"",R.className,void 0===h?"":"mx-auto"),children:C}),...F}})});

package/dist/components/gallery/PlGallery.d.ts

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import type { PlassColor, PlassResponsive, PlassSize } from '../../types.js';
+/**
+ * How the tiles are arranged.
+ *
+ * Four, and they answer four different questions rather than being four looks.
+ * `grid` is a contact sheet: every tile the same shape, whatever shape the
+ * files are. `masonry` keeps each picture's own proportion and stacks the
+ * columns. `justified` keeps the proportions *and* fills every row to the edge,
+ * scaling each row to a common height — the arrangement a photograph library
+ * uses, and the only one where no tile is cropped and no space is left over.
+ * `quilted` is a grid whose tiles may take more than one cell, for a set where
+ * some pictures matter more than others.
+ */
+export type PlGalleryLayout = 'grid' | 'masonry' | 'justified' | 'quilted';
+/** What a tile does when the pointer is on it. */
+export type PlGalleryHover = 'none' | 'lift' | 'dim' | 'zoom';
+/** Where a tile's words go. */
+export type PlGalleryCaption = 'none' | 'below' | 'overlay' | 'hover';
+/** One picture in the set. */
+export interface PlGalleryItem {
+    /** Where the picture is. */
+    src: string;
+    /** What the picture says. Required, for the reason `PlImage` requires it. */
+    alt: string;
+    /** A stable identity. Defaults to `src`. */
+    id?: string;
+    /** The first line of the caption. */
+    title?: React.ReactNode;
+    /** The second, one step down the scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * A larger file for the viewer, when the tile is a thumbnail. Falls back to
+     * `src`, so a set that has only one size of each picture needs nothing here.
+     */
+    full?: string;
+    /**
+     * The picture's own proportion, as a number or a CSS ratio.
+     *
+     * `masonry` and `justified` are laid out from this, and both are laid out
+     * *before* anything has loaded — which is the whole reason it is data rather
+     * than a measurement. A set without it falls back to the gallery's own
+     * `ratio`, and comes out as a grid of squares in a masonry's clothing.
+     */
+    ratio?: number | string;
+    /** How many columns the tile takes in `quilted`. @default 1 */
+    cols?: number;
+    /** How many rows the tile takes in `quilted`. @default 1 */
+    rows?: number;
+}
+/** The parts of a gallery a `className` does not reach. */
+export interface PlGalleryClassNames {
+    /** One tile's `<li>`. */
+    item?: string;
+    /** The picture inside it. */
+    image?: string;
+    /** The box the two lines of words sit in. */
+    caption?: string;
+    /** The first of them. */
+    title?: string;
+    /** The second. */
+    description?: string;
+}
+export interface PlGalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'children' | 'onSelect'> {
+    /** The pictures, in the order they are drawn. */
+    items: readonly PlGalleryItem[];
+    /** How the tiles are arranged. @default 'grid' */
+    layout?: PlGalleryLayout;
+    /**
+     * How many tiles across, per breakpoint. Read by `grid`, `masonry` and
+     * `quilted`; `justified` decides for itself, row by row.
+     * @default { xs: 2, sm: 3, lg: 4 }
+     */
+    columns?: PlassResponsive<number>;
+    /**
+     * The space between tiles — a step of the size ladder, a number in pixels, or
+     * a CSS length.
+     * @default 'md'
+     */
+    gap?: PlassSize | number | string;
+    /**
+     * The shape of a tile in `grid`, and what an item with no `ratio` of its own
+     * falls back to everywhere else.
+     * @default 1
+     */
+    ratio?: number | string;
+    /**
+     * How tall a row aims to be in `justified`, and how tall one cell is in
+     * `quilted`. Rows come out near it rather than on it, because the last thing
+     * a justified row does is scale to the width it actually has.
+     * @default 220
+     */
+    rowHeight?: number;
+    /** Rounds the tiles. @default true */
+    rounded?: boolean;
+    /**
+     * Where a tile's `title` and `description` go. `below` puts them under the
+     * picture, `overlay` writes them across the foot of it, and `hover` is
+     * `overlay` that arrives with the pointer.
+     * @default 'none'
+     */
+    caption?: PlGalleryCaption;
+    /**
+     * What a tile does under the pointer.
+     *
+     * `lift` and `dim` are depth and colour, which is how everything else in the
+     * library answers a pointer. `zoom` is the one that scales, and it is the
+     * exception the design language names: what moves is a photograph inside a
+     * frame that stays exactly where it was, with no text on it to resample.
+     * @default 'lift'
+     */
+    hover?: PlGalleryHover;
+    /**
+     * Opens the picture full size when a tile is chosen, with the rest of the set
+     * an arrow key away.
+     *
+     * The viewer is fetched on demand, so a gallery that does not offer one does
+     * not carry it.
+     * @default false
+     */
+    preview?: boolean;
+    /** Called when a tile is chosen, whether or not there is a viewer. */
+    onItemSelect?: (item: PlGalleryItem, index: number) => void;
+    /** The list's accessible name. @default 'Gallery' */
+    label?: string;
+    /**
+     * How a tile and the viewer's counter say where in the set they are.
+     * @default (index, total) => `${index} of ${total}`
+     */
+    itemLabel?: (index: number, total: number) => string;
+    /** What is drawn when `items` is empty. Nothing at all by default. */
+    empty?: React.ReactNode;
+    /** @default 'md' */
+    size?: PlassSize;
+    /** @default 'primary' */
+    color?: PlassColor;
+    /** Class names for the parts behind the root. */
+    classNames?: PlGalleryClassNames;
+}
+/**
+ * A set of pictures, arranged.
+ *
+ * The four layouts are the component: everything else — the captions, the
+ * pointer treatment, the viewer — is the same in all of them, and choosing
+ * between a contact sheet, a masonry, a justified library and a quilt is one
+ * prop rather than four components.
+ *
+ * **None of them measures anything.** A tile's shape comes from the item's own
+ * `ratio`, which means the whole arrangement is right in the first frame the
+ * browser paints and does not move again as the files arrive — the same bargain
+ * `PlImage`'s `ratio` makes one level up, and the reason a gallery of forty
+ * photographs does not reflow forty times.
+ */
+export declare const PlGallery: React.ForwardRefExoticComponent<PlGalleryProps & React.RefAttributes<HTMLUListElement>>;

package/dist/components/gallery/PlGallery.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as i}from"../../internal/labels.js";import{dealColumns as r,ratioOf as o}from"../../internal/gallery.js";import{responsiveSlots as n,withBaseline as m}from"../../internal/responsive.js";import{usePlBreakpointValue as p}from"../../hooks/usePlBreakpoint.js";import{cx as c,focusRingClasses as d,hasContent as u,metaTextClasses as f,radiusClasses as g,surfaceSlots as h,toLength as x,transitionClasses as v}from"../../internal/styles.js";import{PlImage as y}from"../image/PlImage.js";const b=/* @__PURE__ */a.lazy(()=>import("./PlGalleryViewer.js").then(e=>({default:e.PlGalleryViewer}))),w={xs:2,sm:3,lg:4},_={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"},j={none:"",lift:"group-hover/tile:[box-shadow:var(--plass-shadow-2)] group-focus-visible/tile:[box-shadow:var(--plass-shadow-2)]",dim:"",zoom:""},N={none:"",lift:"",dim:"group-hover/tile:[&_img]:[filter:brightness(0.82)] group-focus-visible/tile:[&_img]:[filter:brightness(0.82)]",zoom:"group-hover/tile:[&_img]:scale-106 group-focus-visible/tile:[&_img]:scale-106"};export const PlGallery=/* @__PURE__ */a.forwardRef(function PlGallery({items:z,layout:k="grid",columns:M,gap:$="md",ratio:q=1,rowHeight:P=220,rounded:G=!0,caption:S="none",hover:C="lift",preview:I=!1,onItemSelect:R,label:A,itemLabel:B,empty:F,size:L,color:V,className:H,classNames:W,style:D,...E},J){const K=s(),O=L??K.size??"md",Q=V??K.color??"primary",T=i(),U=A??T.gallery,X=B??((e,l)=>`${e} of ${l}`),[Y,Z]=a.useState(null),ee=m(M??w,2),le=Math.max(1,p(ee)??2),te="string"==typeof $&&$ in _?_[$]:x($)??_.md,ae=G?g[O]:"",se=o(q,1),tile=(a,s,i)=>{const r=u(a.title)||u(a.description),o="none"!==S&&r,n="overlay"===S||"hover"===S,m=e(y,{src:a.src,alt:a.alt,ratio:"grid"===k?q:"quilted"===k?"auto":a.ratio??q,fit:"cover",rounded:!1,size:O,color:Q,className:c("size-full",W?.image)}),p=o?l("div",{className:c("min-w-0",n?c("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===S?c("opacity-0 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100","[transition:opacity_var(--plass-duration)_var(--plass-ease)]"):""):"flex flex-col gap-0.5 pt-1.5",W?.caption),children:[u(a.title)?e("span",{className:c("truncate font-medium",f[O],n?"":"text-(--plass-fg)",W?.title),children:a.title}):null,u(a.description)?e("span",{className:c("truncate",f[O],n?"text-white/80":"text-(--plass-muted-fg)",W?.description),children:a.description}):null]}):null,g=l("span",{className:c("relative block overflow-hidden",ae,"quilted"===k||"justified"===k?"size-full":"","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",j[C],N[C],"[&_img]:[transition:opacity_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease),scale_var(--plass-duration)_var(--plass-ease)]"),children:[m,n?p:null]}),h=n||!o?g:l(t,{children:[g,p]});return e("li",{className:c("group/tile relative m-0 min-w-0 list-none","justified"===k?"flex flex-col":"",W?.item),style:i,children:I||R?e("button",{type:"button","aria-label":`${a.alt} — ${X(s+1,z.length)}`,className:c("block w-full bg-transparent p-0 text-start",I?"cursor-zoom-in":"cursor-pointer",d,v,ae,"justified"===k?"flex-1":""),onClick:()=>(e=>{R?.(z[e],e),I&&Z(e)})(s),children:h}):h},a.id??a.src)};let ie;if("masonry"===k){const l=z.map(e=>o(e.ratio,se));ie=r(l,le).map((l,t)=>e("li",{className:"m-0 flex min-w-0 flex-1 list-none flex-col",style:{gap:te},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:te},children:l.map(e=>tile(z[e],e,{}))})},t))}else ie="justified"===k?z.map((e,l)=>{const t=o(e.ratio,se);return tile(e,l,{flexGrow:t,flexBasis:t*P+"px",maxWidth:"100%"})}):z.map((e,l)=>tile(e,l,"quilted"===k?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===z.length&&u(F)?e(t,{children:F}):l(t,{children:[e("ul",{ref:J,role:"list","aria-label":U,className:c("plass-gallery m-0 list-none p-0","justified"===k?"flex flex-wrap":"","masonry"===k?"flex items-start":"","grid"===k?"plass-gallery-grid grid":"","quilted"===k?"plass-gallery-quilted grid":"",H),style:{gap:te,...h(Q,0),...n("cols",ee,e=>String(Math.max(1,Math.round(e)))),..."quilted"===k?{gridAutoRows:`${P}px`,gridAutoFlow:"dense"}:null,...D},...E,children:ie}),I?e(a.Suspense,{fallback:null,children:e(b,{items:z,index:Y,onIndexChange:Z,size:O,color:Q,label:U,itemLabel:X})}):null]})});

package/dist/components/gallery/PlGalleryViewer.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { PlGalleryItem } from './PlGallery.js';
+import type { PlassColor, PlassSize } from '../../types.js';
+export interface PlGalleryViewerProps {
+    items: readonly PlGalleryItem[];
+    /** Which picture is open, or `null` for none. */
+    index: number | null;
+    onIndexChange: (index: number | null) => void;
+    size: PlassSize;
+    color: PlassColor;
+    /** The overlay's own name — the gallery's. */
+    label: string;
+    /** Resolved by the gallery, so the viewer resolves nothing a second time. */
+    itemLabel: (index: number, total: number) => string;
+}
+/**
+ * One picture from a `PlGallery`, full size, with the rest of the set an arrow
+ * key away.
+ *
+ * A file of its own rather than a branch inside `PlGallery`, and that is the
+ * whole point of it: this is the only thing in the component that needs an
+ * overlay, and an overlay is more than the gallery that opens it. Reached
+ * through `React.lazy`, a wall of thumbnails costs nothing for a viewer nobody
+ * opened.
+ *
+ * It is not a `PlCarousel`. A carousel is a set somebody is being shown in
+ * order; this is one picture with a way to the next — so there is no autoplay,
+ * no wrap, and the arrows stop at the ends rather than looping back to a
+ * photograph the reader has already seen.
+ */
+export declare function PlGalleryViewer({ items, index, onIndexChange, size, color, label, itemLabel }: PlGalleryViewerProps): React.JSX.Element;

package/dist/components/gallery/PlGalleryViewer.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useLabels as t}from"../../internal/labels.js";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as s,metaTextClasses as i}from"../../internal/styles.js";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{PlOverlay as r}from"../overlay/PlOverlay.js";export function PlGalleryViewer({items:o,index:c,onIndexChange:m,size:u,color:d,label:p,itemLabel:f}){const x=t(),v=null!==c,h=null===c?void 0:o[c],g=null===c||c<=0,b=null===c||c>=o.length-1,go=e=>{e>=0&&e<o.length&&m(e)};return e(r,{open:v,onOpenChange:e=>{e||m(null)},tone:"glass",dismissible:!0,size:u,color:d,label:p,onKeyDown:e=>{null===c||e.metaKey||e.ctrlKey||e.altKey||("ArrowRight"===e.key?(e.preventDefault(),go(c+1)):"ArrowLeft"===e.key&&(e.preventDefault(),go(c-1)))},children:l("div",{className:"flex max-w-[90vw] flex-col gap-3",children:[l("div",{className:"relative flex items-center justify-center",children:[h?e("img",{src:h.full??h.src,alt:h.alt,className:"max-h-[80vh] max-w-[90vw] object-contain"},h.id??h.src):null,o.length>1?l("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(a,{variant:"solid",elevation:1,size:u,color:d,label:x.previous,disabled:g,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(n,{})}),onClick:()=>go((c??0)-1)}),e(a,{variant:"solid",elevation:1,size:u,color:d,label:x.next,disabled:b,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(n,{})}),onClick:()=>go((c??0)+1)})]}):null]}),h&&(h.title||h.description)?l("div",{className:"flex min-w-0 flex-col gap-0.5 text-center",children:[h.title?e("span",{className:"truncate font-medium text-(--plass-fg)",children:h.title}):null,h.description?e("span",{className:s("truncate text-(--plass-muted-fg)",i[u]),children:h.description}):null]}):null,o.length>1?e("p",{className:s("m-0 text-center text-(--plass-muted-fg)",i[u]),"aria-live":"polite",children:f((c??0)+1,o.length)}):null]})})}

package/dist/components/gallery/index.d.ts

@@ -0,0 +1,2 @@
+export { PlGallery } from './PlGallery.js';
+export type { PlGalleryCaption, PlGalleryClassNames, PlGalleryHover, PlGalleryItem, PlGalleryLayout, PlGalleryProps } from './PlGallery.js';

package/dist/components/gallery/index.js

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

package/dist/components/gauge-chart/PlGaugeChart.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { type ChartBaseProps } from '../../internal/chart-frame.js';
+import type { PlassColor, PlassThreshold } from '../../types.js';
+export interface PlGaugeChartProps extends Omit<ChartBaseProps, 'legend' | 'tooltip'> {
+    /**
+     * The reading. `null` draws the dial with nothing on it, which is the honest
+     * picture of an instrument that has not been told anything.
+     */
+    value: number | null;
+    /** The bottom of the scale. @default 0 */
+    min?: number;
+    /** And the top of it. @default 100 */
+    max?: number;
+    /**
+     * How far round the dial goes, in degrees, opened symmetrically about twelve
+     * o'clock. `180` is the half-dial a dashboard tile wants; `270` is the
+     * instrument shape; `360` is a ring.
+     * @default 180
+     */
+    sweep?: number;
+    /** How thick the arc is, as a fraction of its radius. @default 0.22 */
+    thickness?: number;
+    /**
+     * Where the arc changes colour — the same `{ from, color }` bands a
+     * [`PlMeter`](../feedback/meter) takes, read the same way: the highest band
+     * at or below the value wins, and below all of them `color` stands.
+     */
+    thresholds?: readonly PlassThreshold[];
+    /**
+     * How many marks are drawn around the dial, ends included. `false` — the
+     * default — draws none: a gauge on a dashboard is read as a proportion, and
+     * ticks are for an instrument somebody takes a *number* off.
+     * @default false
+     */
+    ticks?: number | false;
+    /** Writes `min` and `max` at the two ends of the arc. @default true */
+    showRange?: boolean;
+    /**
+     * What goes in the middle. Left out, it is the value written through
+     * `format` — which is what the dial is for, so replacing it is for adding to
+     * it rather than for taking it away.
+     */
+    center?: React.ReactNode;
+    /** A line under the value: the unit, or what is being measured. */
+    caption?: React.ReactNode;
+    /** The family the arc takes where no threshold applies. @default 'primary' */
+    color?: PlassColor;
+}
+/**
+ * One number on a scale that is known in advance, drawn as a dial.
+ *
+ * It is a [`PlMeter`](../feedback/meter) bent into an arc, and the two are
+ * deliberately the same idea in two shapes: `value`, `min`, `max` and
+ * `thresholds` mean exactly what they mean there, so a page can move a reading
+ * from a bar to a dial without changing what it says. Reach for the bar in a
+ * row of fields and for this one in a tile of its own, where a dial reads at a
+ * glance from across a room and a four-pixel bar does not.
+ *
+ * It is not a [`PlPieChart`](./pie-chart) with `shape="semi"`. A pie is *parts
+ * of a whole* and every slice is a category; this is one value against a scale,
+ * and the unfilled part of the arc is not a second category — it is the rest of
+ * the dial.
+ */
+export declare function PlGaugeChart({ value, min, max, sweep, thickness, thresholds, ticks, showRange, center, caption, height, format, locale: localeProp, label, empty, size: sizeProp, variant, color: colorProp, padded, className, ...box }: PlGaugeChartProps): React.JSX.Element;

package/dist/components/gauge-chart/PlGaugeChart.js

@@ -0,0 +1 @@
+"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as s from"react";import{ChartSurface as l,useMeasuredWidth as r}from"../../internal/chart-frame.js";import{arcPath as n,chartFontSizes as i,compactNumber as o,plotHeights as h,ringPath as m,textWidth as c,truncate as d}from"../../internal/chart.js";import{useDefaults as f}from"../../internal/defaults.js";import{numberFormatter as p}from"../../internal/format.js";import{useLabels as u}from"../../internal/labels.js";import{cx as x,hasContent as M,metaTextClasses as g}from"../../internal/styles.js";import{bandColor as v}from"../../internal/threshold.js";function pointAt(t,a,e,s){const l=(s-90)*Math.PI/180;return[t+e*Math.cos(l),a+e*Math.sin(l)]}export function PlGaugeChart({value:y,min:b=0,max:k=100,sweep:j=180,thickness:N=.22,thresholds:$,ticks:w=!1,showRange:A=!0,center:z,caption:P,height:S,format:W,locale:q,label:C,empty:D,size:I,variant:L="ghost",color:R,padded:B=!1,className:F,...G}){const T=f(),Y=I??T.size??"md",E=R??T.color??"primary",H=q??T.locale,J=s.useRef(null),K=r(J),O=u(),Q=s.useCallback(t=>W?p(H,W).format(t):o(t,H),[W,H]),U=Math.max(1,Math.min(360,j)),V=U/2,X=-V,Z=V,_=k-b,tt=null===y||Number.isNaN(y)||0===_?null:Math.min(1,Math.max(0,(y-b)/_)),at=null===y?E:v(y,E,$),et="number"==typeof S?S:h[Y],st=i[Y],lt=Math.min(.9,Math.max(.05,N)),rt=V*Math.PI/180,nt=U>=360?1:Math.max(0,-Math.cos(rt)),it=U>=180?1:Math.sin(rt),ot=Math.sin(rt),ht=-Math.cos(rt),mt=A&&U<330?[b,k].map(t=>d(Q(t),Math.max(0,.28*K),st)):[],ct=mt.reduce((t,a)=>Math.max(t,c(a,st)),0),dt=.35*st,ft=!1===w?0:.85*st,pt=ht<=.25,ut=pt?0:.5*st,xt=pt?st:st*(.35+.55*ht),Mt=mt.length>0?ht*ut+xt+.25*st:0,gt=Math.max(dt,ft),vt=Math.max(dt,ft),yt=Math.max(dt,ft,Mt),bt=[(K/2-gt)/Math.max(.05,it),(et-vt-yt)/(1+nt)];if(ct>0&&ot>.05){const t=pt?ct/2:ct;bt.push(Math.max(0,K/2-dt-t)/ot-ut)}const kt=Math.max(0,Math.min(...bt)),jt=kt*(1-lt),Nt=K/2,$t=vt+kt*(1+nt)+yt,wt=vt+kt+Math.max(0,(et-$t)/2),At=kt<=0||0===_,zt=M(P)?1.85*st:0,Pt=wt-jt*(1-Math.min(1,nt))/2,St=Math.min(jt,Math.abs(wt-Pt)),Wt=Math.min(jt,Math.abs(wt-Pt-zt/2)),qt=2*Math.sqrt(Math.max(0,jt*jt-Wt*Wt)),Ct=z??(null===y?"—":Q(y)),Dt="string"==typeof Ct?c(Ct,1):0,It=Dt>0?Math.max(st,Math.min(2*st,function fitType(t,a,e,s,l){const r=t*t/(4*l*l)+s*s,n=2*a*s,i=a*a-e*e;return r<=0||i>=0?0:(Math.sqrt(n*n-4*r*i)-n)/(2*r)}(Dt,St,jt,.42,.86))):2*st,Lt=!1===w?0:Math.max(2,Math.floor(w));return t(l,{...G,variant:L,color:E,size:Y,padded:B,legendSide:"bottom",className:F,legend:null,table:null,children:t("div",{ref:J,className:"relative w-full",style:{height:et},role:void 0===C?void 0:"img","aria-label":void 0===C?void 0:null===y?C:`${C}: ${Q(y)} / ${Q(k)}`,children:At?t("div",{className:x("flex h-full items-center justify-center text-(--plass-muted-fg)",g[Y]),children:D??O.empty}):K>0?a(e,{children:[a("svg",{width:K,height:et,viewBox:`0 0 ${K} ${et}`,"aria-hidden":"true",className:"block",children:[t("path",{d:n(Nt,wt,kt,jt,X,Z),fill:`var(--plass-${E}-soft)`}),null!==tt?t("path",{d:m(Nt,wt,(kt+jt)/2,X,Z),fill:"none",stroke:`var(--plass-${at}-fill)`,strokeWidth:kt-jt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-tt,style:{transition:"stroke-dashoffset var(--plass-duration-slow) var(--plass-ease), stroke var(--plass-duration) var(--plass-ease)"}}):null,Lt>0?Array.from({length:Lt},(a,e)=>{const s=X+U*e/(Lt-1),[l,r]=pointAt(Nt,wt,kt+.25*st,s),[n,i]=pointAt(Nt,wt,kt+.6*st,s);return t("line",{x1:l,y1:r,x2:n,y2:i,stroke:"var(--plass-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,mt.length>0?[[mt[0],X,"start"],[mt[1],Z,"end"]].map(([a,e,s])=>{const[l,r]=pointAt(Nt,wt,kt+ut,e);return t("text",{x:l,y:r+xt,textAnchor:pt?"middle":"start"===s?"end":"start",fontSize:st,fill:"var(--plass-muted-fg)",children:a},s)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:Pt+zt/2,maxWidth:qt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold text-(--plass-fg) tabular-nums",style:{fontSize:It},children:Ct}),P?t("span",{className:x("text-(--plass-muted-fg)",g[Y]),children:P}):null]})]}):null})})}

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

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

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

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

package/dist/components/grid/PlGrid.js

@@ -1 +1 @@
-"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignContentClasses as a,alignItemsClasses as n,columnCount as s,justifyClasses as p,responsiveSlots as i,spacingValue as l,withBaseline as t}from"../../internal/grid.js";import{cx as o}from"../../internal/styles.js";export const PlGrid=/* @__PURE__ */r.forwardRef(function PlGrid({columns:r,spacing:c,rowSpacing:g,columnSpacing:m,justify:f,alignItems:d,alignContent:u,wrap:x=!0,render:y,className:w,style:j,children:h,...G},N){const P=o("plass-grid flex",x?"flex-wrap":"flex-nowrap","gap-x-(--p-gap-x) gap-y-(--p-gap-y)",f?p[f]:"",d?n[d]:"",u?a[u]:"",w);return e({render:y,ref:N,props:{className:P,style:{...i("cols",t(r,12),s),...i("gap-x",t(m??c,2),l),...i("gap-y",t(g??c,2),l),...j},children:h,...G}})});
+"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignContentClasses as n,alignItemsClasses as a,columnCount as s,justifyClasses as i,spacingValue as p}from"../../internal/grid.js";import{responsiveSlots as o,withBaseline as t}from"../../internal/responsive.js";import{cx as l}from"../../internal/styles.js";export const PlGrid=/* @__PURE__ */r.forwardRef(function PlGrid({columns:r,spacing:c,rowSpacing:m,columnSpacing:f,justify:g,alignItems:d,alignContent:u,wrap:x=!0,render:y,className:w,style:j,children:h,...G},N){const P=l("plass-grid flex",x?"flex-wrap":"flex-nowrap","gap-x-(--p-gap-x) gap-y-(--p-gap-y)",g?i[g]:"",d?a[d]:"",u?n[u]:"",w);return e({render:y,ref:N,props:{className:P,style:{...o("cols",t(r,12),s),...o("gap-x",t(f??c,2),p),...o("gap-y",t(m??c,2),p),...j},children:h,...G}})});

package/dist/components/grid/PlGridItem.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignSelfClasses as s,offsetValue as t,responsiveSlots as n,spanValue as i}from"../../internal/grid.js";import{cx as o}from"../../internal/styles.js";export const PlGridItem=/* @__PURE__ */e.forwardRef(function PlGridItem({span:e,offset:a,alignSelf:l,render:f,className:m,style:c,children:d,...p},u){const g=o("plass-grid-item",l?s[l]:"",m);return r({render:f,ref:u,props:{className:g,style:{...n("span",e,i),...n("offset",a,t),...c},children:d,...p}})});
+"use client";import*as r from"react";import{useRender as e}from"@base-ui/react/use-render";import{alignSelfClasses as s,offsetValue as t,spanValue as n}from"../../internal/grid.js";import{responsiveSlots as i}from"../../internal/responsive.js";import{cx as o}from"../../internal/styles.js";export const PlGridItem=/* @__PURE__ */r.forwardRef(function PlGridItem({span:r,offset:a,alignSelf:l,render:m,className:f,style:p,children:c,...d},u){const g=o("plass-grid-item",l?s[l]:"",f);return e({render:m,ref:u,props:{className:g,style:{...i("span",r,n),...i("offset",a,t),...p},children:c,...d}})});

package/dist/components/header/PlHeader.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassAlign, PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassSize, PlassVariant } from '../../types.js';
+import { type PlassMeasure } from '../../internal/responsive.js';
+import type { PlassAlign, PlassColor, PlassDensity, PlassElevation, PlassPosition, PlassResponsive, PlassSize, PlassVariant } from '../../types.js';
 /** How wide the row inside the bar is allowed to get. */
-export type PlHeaderWidth = PlassSize | 'none';
+export type PlHeaderWidth = PlassMeasure;
 export interface PlHeaderProps extends Omit<React.ComponentPropsWithoutRef<'header'>, 'color' | 'title'> {
     /**
      * The leading slot: the logo, the product's name, the thing that is the same
@@ -79,7 +80,7 @@ export interface PlHeaderProps extends Omit<React.ComponentPropsWithoutRef<'head
      * a header and the container under it line up on the same edge.
      * @default 'none'
      */
-    maxWidth?: PlHeaderWidth;
+    maxWidth?: PlassResponsive<PlHeaderWidth>;
     /** The gutter down each side of the row. @default true */
     padded?: boolean;
     /**

package/dist/components/header/PlHeader.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useRender as i}from"@base-ui/react/use-render";import{PlPageLayoutContext as t}from"../../internal/page-layout.js";import{cx as a,hasContent as n,sheetPaddingXClasses as l,sheetRestClasses as m,sheetSectionGapClasses as d,surfaceSlots as c,transitionClasses as o}from"../../internal/styles.js";const x={xs:"min-h-10",sm:"min-h-12",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},f={xs:"py-2",sm:"py-2",md:"py-3",lg:"py-4",xl:"py-5"},p={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-7",xl:"gap-8"},u={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"},h=m,y={static:"",sticky:"sticky top-0 z-20",fixed:"fixed inset-x-0 top-0 z-30"},w={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},g={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const PlHeader=/* @__PURE__ */s.forwardRef(function PlHeader({brand:m,actions:v,align:b="start",position:j="sticky",variant:N="glass",size:k="md",color:z="primary",density:C="default",elevation:H=0,divider:P=!0,maxWidth:R="none",padded:W=!0,label:q,render:A,className:B,style:D,children:E,...F},G){const{register:I}=s.useContext(t),J=s.useCallback(e=>{I("header",e),"function"==typeof G?G(e):G&&(G.current=e)},[I,G]),K=a("w-full min-w-0",h[N],P?"border-b [border-color:var(--plass-divider)]":"",y[j],o,B);return i({render:A??e("header",{}),ref:J,props:{"aria-label":q,className:K,style:{...c(z,H),...D},children:r("div",{className:a("flex w-full items-center",x[k],f[k],p[k],W?l[C][k]:"","none"===R?"":a(u[R],"mx-auto")),children:[n(m)?e("div",{className:a("flex min-w-0 items-center",w[b],d[k]),children:m}):"center"===b?e("div",{"aria-hidden":"true",className:w[b]}):null,n(E)?e("div",{className:a(g[b],d[k]),children:E}):null,n(v)?e("div",{className:a("flex min-w-0 items-center justify-end",w[b],d[k]),children:v}):"center"===b?e("div",{"aria-hidden":"true",className:w[b]}):null]}),...F}})});
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{useDefaults as i}from"../../internal/defaults.js";import{useRender as t}from"@base-ui/react/use-render";import{PlPageLayoutContext as n}from"../../internal/page-layout.js";import{measureSlots as a}from"../../internal/responsive.js";import{cx as l,hasContent as m,sheetPaddingXClasses as d,sheetRestClasses as c,sheetSectionGapClasses as o,surfaceSlots as f,transitionClasses as p}from"../../internal/styles.js";const u={xs:"min-h-10",sm:"min-h-12",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},x={xs:"py-2",sm:"py-2",md:"py-3",lg:"py-4",xl:"py-5"},y={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-7",xl:"gap-8"},h=c,v={static:"",sticky:"sticky top-0 z-20",fixed:"fixed inset-x-0 top-0 z-30"},g={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},j={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const PlHeader=/* @__PURE__ */r.forwardRef(function PlHeader({brand:c,actions:b,align:w="start",position:N="sticky",variant:k="glass",size:z,color:C,density:H,elevation:P=0,divider:R=!0,maxWidth:W,padded:q=!0,label:A,render:B,className:D,style:E,children:F,...G},I){const J=a(W),K=i(),L=z??K.size??"md",M=C??K.color??"primary",O=H??K.density??"default",{register:Q}=r.useContext(n),S=r.useCallback(e=>{Q("header",e),"function"==typeof I?I(e):I&&(I.current=e)},[Q,I]),T=l("w-full min-w-0",h[k],R?"border-b [border-color:var(--plass-divider)]":"",v[N],p,D);return t({render:B??e("header",{}),ref:S,props:{"aria-label":A,className:T,style:{...f(M,P),...E},children:s("div",{style:J.style,className:l("flex w-full items-center",u[L],x[L],y[L],q?d[O][L]:"",J.className,void 0===W?"":"mx-auto"),children:[m(c)?e("div",{className:l("flex min-w-0 items-center",g[w],o[L]),children:c}):"center"===w?e("div",{"aria-hidden":"true",className:g[w]}):null,m(F)?e("div",{className:l(j[w],o[L]),children:F}):null,m(b)?e("div",{className:l("flex min-w-0 items-center justify-end",g[w],o[L]),children:b}):"center"===w?e("div",{"aria-hidden":"true",className:g[w]}):null]}),...G}})});