plass-ui 1.8.0 → 1.8.1

package/CHANGELOG.md

@@ -4,6 +4,17 @@
 
 ## vNext (2026--)
 
+## 1.8.1 (2026-10-09)
+
+### Breaking changes
+
+- **`PlConfirmProvider` asks its questions in an alert dialog.** `confirm` and `alert` open a `role="alertdialog"` rather than a `role="dialog"`, which is what WAI-ARIA calls a dialog that breaks into what the reader was doing and waits for an answer, so a screen reader announces the question as an alert. Its name, description, focus and dismissal are as before. A test that finds the question by its role, `getByRole('dialog')`, finds it as `getByRole('alertdialog')` now.
+
+### Fixed
+
+- **A full-width `PlSegmentedButton` whose labels together need more than its row no longer runs out of its groove.** Each segment kept the width its label needs, so three long labels in a narrow row laid out wider than the row and ran past the end of the groove. The segments now shrink in proportion to what each needs and their labels end in an ellipsis, as the Flutter set's do; a row that has room shares its width as before. In a full-width set a label is now held in a `<span>` of its own.
+- **An editor shows each component's own `variant` default.** `PlassStyleProps` documented `variant` as `'solid'`, so that is what an editor showed on every component that takes it, while most of them default to `'glass'`, `PlTextField`, `PlSelect`, `PlCard` and `PlDataTable` among them, and `PlPagination`, `PlBlockquote`, `PlSidebarTrigger` and the charts default to `'ghost'`. Each component's props now say its own default, and the shared comment says the default is the component's.
+
 ## 1.8.0 (2026-10-07)
 
 ### Breaking changes

package/README.md

@@ -134,7 +134,7 @@ The list also names two exports that are not counted, because each shares a fold
 
 ### Feedback
 
-`PlAlert` · `PlConfirmProvider` · `PlDrawer` · `PlEmpty` · `PlMeter` · `PlModal` · `PlOverlay` · `PlPopconfirm` · `PlPopover` · `PlProgressBox` · `PlProgressCircular` · `PlProgressLinear` · `PlSkeleton` · `PlToast` · `PlTooltip` · `PlTour`
+`PlAlert` · `PlConfirmProvider` · `PlDrawer` · `PlEmpty` · `PlMeter` · `PlModal` · `PlOverlay` · `PlPopconfirm` · `PlPopover` · `PlProgressBox` · `PlProgressCircular` · `PlProgressLinear` · `PlSkeleton` · `PlToastProvider` · `PlTooltip` · `PlTour`
 
 ### Inputs
 

package/dist/components/accordion/PlAccordion.d.ts

@@ -8,6 +8,8 @@ import type { PlassElevation, PlassHeadingLevel, PlassStyleProps } from '../../t
  */
 export type PlAccordionHeadingLevel = PlassHeadingLevel;
 export interface PlAccordionProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — an accordion is part of the page it
      * is set into, not a panel floating over it.

package/dist/components/alert/PlAlert.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlAlertProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — an alert belongs to the flow of the
      * page it interrupts. The one that floats above it is a dialog.

package/dist/components/badge/PlBadge.d.ts

@@ -6,6 +6,8 @@ import type { PlassCorner, PlassElevation, PlassStyleProps } from '../../types.j
  */
 export type PlBadgeOverlap = 'square' | 'circle';
 export interface PlBadgeProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'content'> {
+    /** @default 'solid' */
+    variant?: PlassStyleProps['variant'];
     /**
      * What the badge says — usually a count, sometimes a word.
      *

package/dist/components/blockquote/PlBlockquote.d.ts

@@ -7,6 +7,8 @@ import type { PlassElevation, PlassStyleProps } from '../../types.js';
  * an event handler written against one works on the other.
  */
 export interface PlBlockquoteProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'figure'>, 'color'> {
+    /** @default 'ghost' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a quote is set *into* a page rather
      * than floating over it, so it is raised even less often than a `PlCard`.

package/dist/components/bottom-navigation/PlBottomNavigation.d.ts

@@ -16,6 +16,8 @@ export type PlBottomNavigationValue = string | number;
  */
 export type PlBottomNavigationLabels = 'all' | 'selected' | 'none';
 export interface PlBottomNavigationProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** The destination the reader is on. Use with `onValueChange` for a controlled bar. */
     value?: PlBottomNavigationValue | null;
     /** Which starts current, for an uncontrolled bar. */

package/dist/components/box/PlBox.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlBoxProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default and it is flat — the glass edge is
      * what separates the box from the page. Raise it only for a surface that

package/dist/components/button/PlButton.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlButtonProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
+    /** @default 'solid' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `1` is the default, because a moulded key **rests on**
      * the sheet rather than lying flush with it. Hover adds a level and pressing

package/dist/components/button-group/PlButtonGroup.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassOrientation, PlassStyleProps } from '../../types.js';
 export interface PlButtonGroupProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'solid' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Which way the buttons run. A vertical group is a stacked menu of equal
      * actions; a horizontal one is the default because that is what a toolbar is.

package/dist/components/card/PlCard.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlCardProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `1` is the default: a card is a sheet lying **on** the
      * page wash rather than printed into it, and the small amount of grey under

package/dist/components/carousel/PlCarousel.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlCarouselProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth of the frame. `0` — the default — is flat.
      * @default 0

package/dist/components/chip/PlChip.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlChipProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a chip is a token sitting *on*
      * something else, so it is raised even less often than a `PlButton`.

package/dist/components/collapsible/PlCollapsible.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlCollapsibleProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a fold is part of the page it is set
      * into, not a panel floating over it.

package/dist/components/color-picker/PlColorPicker.d.ts

@@ -22,6 +22,8 @@ export interface PlColorPickerLabels {
 /** The English the picker uses for the parts nobody can read a name off. */
 export declare const defaultColorPickerLabels: PlColorPickerLabels;
 export interface PlColorPickerProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * The four parts of a labelled field, as every other one names them: the
      * `label`, the `control`, the `description` and the `error`. `className`

package/dist/components/combobox/PlCombobox.d.ts

@@ -25,6 +25,8 @@ export interface PlComboboxOption {
 /** One value, or an array of them, depending on `multiple`. */
 type Selection<Multiple extends boolean | undefined> = Multiple extends true ? PlComboboxValue[] : PlComboboxValue | null;
 export interface PlComboboxProps<Multiple extends boolean | undefined = false> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
     /**

package/dist/components/confirm/PlConfirmProvider.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{PlButton as o}from"../button/PlButton.js";import{useLabels as t}from"../../internal/labels.js";import{lazyPart as l}from"../../internal/lazy.js";const c=/* @__PURE__ */l(()=>import("../modal/PlModal.js").then(e=>e.PlModal));function ConfirmModal({open:n,...o}){const[t,l]=r.useState(!1);return r.useLayoutEffect(()=>{l(!0)},[]),e(c,{open:!0===n&&t,...o})}const i=/* @__PURE__ */r.createContext(null);export function PlConfirmProvider({size:l,color:s,confirmLabel:u,cancelLabel:a,acknowledgeLabel:f,width:d,children:m}){const h=t(),[p,w]=r.useState(!1),[C,b]=r.useState(null),v=r.useRef(null),k=r.useRef([]),P=r.useRef(0),z=r.useRef(null),j=r.useCallback(e=>{const n=v.current;if(!n)return;n.resolve(e);const r=k.current.shift();if(r)return v.current=r,void b(r);v.current=null,w(!1)},[]),x=r.useCallback((e,n)=>new Promise(r=>{P.current+=1;const o={id:P.current,kind:e,options:n,resolve:r};v.current?k.current.push(o):(v.current=o,b(o),w(!0))}),[]),E=r.useMemo(()=>({confirm:e=>x("confirm",e),alert:e=>x("alert",e).then(()=>{})}),[x]);r.useEffect(()=>function whenIdle(e){if("function"==typeof window.requestIdleCallback){const n=window.requestIdleCallback(e,{timeout:2e3});return()=>window.cancelIdleCallback(n)}const n=window.setTimeout(e,500);return()=>window.clearTimeout(n)}(c.preload),[]);const L=r.useCallback(()=>{const e=[v.current,...k.current];v.current=null,k.current=[],e.forEach(e=>e?.resolve(!1)),w(!1),b(null)},[]);r.useEffect(()=>()=>{v.current?.resolve(!1),k.current.forEach(e=>e.resolve(!1)),v.current=null,k.current=[]},[]);const g=C?.options,y="alert"===C?.kind,M="confirm"===(g?.initialFocus??"cancel")||y,R=r.useRef(!1);r.useLayoutEffect(()=>{p&&R.current&&z.current?.focus(),R.current=p},[p,C]);const I=C?e(r.Suspense,{fallback:null,children:e(ConfirmModal,{open:p,onUnavailable:L,onOpenChange:e=>{e||j(!1)},showClose:!1,initialFocus:z,size:g?.size??l,color:g?.color??s,width:g?.width??d,dismissible:g?.dismissible??!0,title:g?.title,description:g?.description,actions:n(r.Fragment,{children:[y?null:e(o,{ref:M?void 0:z,variant:"ghost",color:"secondary",size:g?.size??l,onClick:()=>j(!1),children:g?.cancelLabel??a??h.cancel}),e(o,{ref:M?z:void 0,color:g?.color??s,size:g?.size??l,onClick:()=>j(!0),children:g?.confirmLabel??(y?f??h.acknowledge:u??h.confirm)})]},C?.id),children:g?.children})}):null;return n(i.Provider,{value:E,children:[m,I]})}export function usePlConfirm(){const e=r.useContext(i);if(!e)throw new Error("[plass-ui] usePlConfirm was called outside a <PlConfirmProvider>.");return e}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{PlButton as o}from"../button/PlButton.js";import{useLabels as t}from"../../internal/labels.js";import{lazyPart as l}from"../../internal/lazy.js";const c=/* @__PURE__ */l(()=>import("../modal/PlModal.js").then(e=>e.PlModal));function ConfirmModal({open:r,...o}){const[t,l]=n.useState(!1);return n.useLayoutEffect(()=>{l(!0)},[]),e(c,{open:!0===r&&t,...o})}const i=/* @__PURE__ */n.createContext(null);export function PlConfirmProvider({size:l,color:s,confirmLabel:u,cancelLabel:a,acknowledgeLabel:f,width:d,children:m}){const h=t(),[p,w]=n.useState(!1),[C,b]=n.useState(null),v=n.useRef(null),k=n.useRef([]),P=n.useRef(0),z=n.useRef(null),j=n.useCallback(e=>{const r=v.current;if(!r)return;r.resolve(e);const n=k.current.shift();if(n)return v.current=n,void b(n);v.current=null,w(!1)},[]),x=n.useCallback((e,r)=>new Promise(n=>{P.current+=1;const o={id:P.current,kind:e,options:r,resolve:n};v.current?k.current.push(o):(v.current=o,b(o),w(!0))}),[]),E=n.useMemo(()=>({confirm:e=>x("confirm",e),alert:e=>x("alert",e).then(()=>{})}),[x]);n.useEffect(()=>function whenIdle(e){if("function"==typeof window.requestIdleCallback){const r=window.requestIdleCallback(e,{timeout:2e3});return()=>window.cancelIdleCallback(r)}const r=window.setTimeout(e,500);return()=>window.clearTimeout(r)}(c.preload),[]);const L=n.useCallback(()=>{const e=[v.current,...k.current];v.current=null,k.current=[],e.forEach(e=>e?.resolve(!1)),w(!1),b(null)},[]);n.useEffect(()=>()=>{v.current?.resolve(!1),k.current.forEach(e=>e.resolve(!1)),v.current=null,k.current=[]},[]);const g=C?.options,y="alert"===C?.kind,M="confirm"===(g?.initialFocus??"cancel")||y,R=n.useRef(!1);n.useLayoutEffect(()=>{p&&R.current&&z.current?.focus(),R.current=p},[p,C]);const I=C?e(n.Suspense,{fallback:null,children:e(ConfirmModal,{open:p,onUnavailable:L,onOpenChange:e=>{e||j(!1)},showClose:!1,role:"alertdialog",initialFocus:z,size:g?.size??l,color:g?.color??s,width:g?.width??d,dismissible:g?.dismissible??!0,title:g?.title,description:g?.description,actions:r(n.Fragment,{children:[y?null:e(o,{ref:M?void 0:z,variant:"ghost",color:"secondary",size:g?.size??l,onClick:()=>j(!1),children:g?.cancelLabel??a??h.cancel}),e(o,{ref:M?z:void 0,color:g?.color??s,size:g?.size??l,onClick:()=>j(!0),children:g?.confirmLabel??(y?f??h.acknowledge:u??h.confirm)})]},C?.id),children:g?.children})}):null;return r(i.Provider,{value:E,children:[m,I]})}export function usePlConfirm(){const e=n.useContext(i);if(!e)throw new Error("[plass-ui] usePlConfirm was called outside a <PlConfirmProvider>.");return e}

package/dist/components/data-table/PlDataTable.d.ts

@@ -91,6 +91,8 @@ export interface PlDataTableColumn<Row> {
     unsearchable?: boolean;
 }
 export interface PlDataTableProps<Row> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onSelect'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a table is a grid set into the page
      * rather than a panel floating over it.

package/dist/components/file-picker/PlFilePicker.d.ts

@@ -16,6 +16,8 @@ export interface PlFileBatch {
     source: 'drop' | 'dialog';
 }
 export interface PlFilePickerProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'title' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a dropzone is cut into the page
      * rather than floating over it.

package/dist/components/hot-keys/PlHotKeys.d.ts

@@ -17,6 +17,8 @@ export interface PlHotKeysCluster {
     right: string;
 }
 export interface PlHotKeysProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * The keys, innermost punctuation and all.
      *
@@ -54,6 +56,8 @@ export interface PlHotKeysProps extends PlassStyleProps, Omit<React.ComponentPro
     elevation?: PlassElevation;
 }
 export interface PlKbdProps extends Pick<PlassStyleProps, 'variant' | 'size' | 'density'>, Omit<React.ComponentPropsWithoutRef<'kbd'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     children?: React.ReactNode;
 }
 /**

package/dist/components/list/PlList.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlListProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a list is a sheet lying flat, not a
      * key resting on one.

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

@@ -15,6 +15,8 @@ import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassFieldLabe
  */
 export type PlNumberFieldSteppers = 'end' | 'split' | 'none';
 export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
     /**

package/dist/components/otp-field/PlOtpField.d.ts

@@ -9,6 +9,8 @@ import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProp
  */
 export type PlOtpCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
 export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
     /**

package/dist/components/pagination/PlPagination.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassStyleProps } from '../../types.js';
 export interface PlPaginationProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'onChange'> {
+    /** @default 'ghost' */
+    variant?: PlassStyleProps['variant'];
     /** How many pages there are. Fewer than two and the whole control renders nothing. */
     count: number;
     /** The current page, 1-based. Use with `onPageChange` for a controlled row. */

package/dist/components/pill/PlPill.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { PlassElevation, PlassPosition, PlassStyleProps } from '../../types.js';
 export interface PlPillProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onClick' | 'title'> {
+    /** @default 'solid' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `2` here, against the `0` almost everything else takes.
      *

package/dist/components/scroll-zone/PlScrollZone.d.ts

@@ -48,6 +48,8 @@ export type PlScrollZoneMode = 'item' | 'page' | 'hold';
  */
 export type PlScrollZoneButtonPlacement = 'inline' | 'overlay';
 export interface PlScrollZoneProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Which way the children run, and therefore which way the zone scrolls.
      * @default 'horizontal'

package/dist/components/segmented-button/PlSegmentedButton.d.ts

@@ -33,7 +33,12 @@ export interface PlSegmentedButtonProps extends Omit<PlassStyleProps, 'variant'>
     readOnly?: boolean;
     /** Identifies the value when a form is submitted. */
     name?: string;
-    /** The segments share the full width, each taking an equal part of it. */
+    /**
+     * The segments share the full width, an equal part each. A segment whose
+     * label needs more than its part keeps the width it needs, and the others
+     * share the rest. Labels that together need more than the row end in an
+     * ellipsis.
+     */
     fullWidth?: boolean;
     children?: React.ReactNode;
 }

package/dist/components/segmented-button/PlSegmentedButton.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useCommitChange as s}from"../../internal/commit-change.js";import{controlNaming as r,useDisabled as l}from"../../internal/form.js";import{glowPointerMove as n}from"../../internal/glow.js";import{useDefaults as o}from"../../internal/defaults.js";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as d}from"@base-ui/react/radio-group";import{controlHeightClasses as c,controlSlots as u,controlTextClasses as p,focusRingInsetClasses as f,forcedCheckedTextClasses as m,forcedFieldEdgeClasses as h,forcedFillClasses as g,gapClasses as v,glassClasses as b,hasContent as y,iconClasses as x,paddingXClasses as w,transitionClasses as k}from"../../internal/styles.js";const j=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1,disabled:!1,readOnly:!1}),P={solid:`${b} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)] ${h}`,glass:`${b} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},R={solid:"plass-fill data-[placed]:[--p-fill-on:1] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${b} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${b} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`},$={solid:"data-[checked]:text-(--p-on-solid)",glass:"data-[checked]:text-(--p-accent)",ghost:"data-[checked]:text-(--p-accent)"};export const PlSegment=/* @__PURE__ */a.forwardRef(function PlSegment({value:s,startIcon:r,endIcon:o,disabled:d=!1,className:u,children:h,onPointerMove:g,...b},P){const{variant:R,size:A,density:z,fullWidth:N,disabled:C,readOnly:O}=a.useContext(j),S=l(d),W=!S&&!C&&!O;return t(i.Root,{ref:P,value:s,disabled:S,"data-segment":"",className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",c[A],p[A],v[A],w[z][A],"rounded-full",k,x,W?"plass-glow":"","not-data-[checked]:[--p-glow:var(--p-soft)]","not-data-[checked]:[--p-flash:var(--p-soft-hover)]","text-(--plass-muted-fg) not-data-[checked]:not-data-[disabled]:not-data-[readonly]:hover:text-(--plass-fg)",$[R],m,f,"data-[disabled]:cursor-not-allowed",C?"":"data-[disabled]:opacity-50","data-[readonly]:cursor-default",N?"flex-1":"",u??""].filter(Boolean).join(" "),onPointerMove:n(W,g),...b,children:[y(r)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r}):null,h,y(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]})});export const PlSegmentedButton=/* @__PURE__ */a.forwardRef(function PlSegmentedButton({variant:n="glass",size:i,color:c,density:p,elevation:f=0,value:m,defaultValue:h=null,onValueChange:v,disabled:b=!1,readOnly:y=!1,name:x,fullWidth:w=!1,className:$,style:A,children:z,"aria-label":N,"aria-labelledby":C,...O},S){const W=o(),B=l(b),E=i??W.size??"md",F=c??W.color??"primary",M=p??W.density??"default",[V,q]=a.useState(h),I=void 0!==m,G=I?m:V,H=a.useRef(null),L=a.useRef(null),T=a.useRef(!1);a.useEffect(()=>{T.current=!0},[]);const D=a.useRef(0),J=a.useCallback(e=>{L.current=e,e&&!T.current&&e.setAttribute("data-placed","")},[]),K=a.useCallback(e=>{const t=H.current,a=L.current;if(!t||!a)return;const s=t.querySelector("[data-segment][data-checked]");if(!s)return;const r=s.offsetLeft,l=s.offsetTop,n=s.offsetWidth,o=s.offsetHeight,i=!e||!a.hasAttribute("data-ready");i&&(cancelAnimationFrame(D.current),a.removeAttribute("data-ready")),a.style.setProperty("--p-seg-x",`${r}px`),a.style.setProperty("--p-seg-y",`${l}px`),a.style.setProperty("--p-seg-w",`${n}px`),a.style.setProperty("--p-seg-h",`${o}px`),a.setAttribute("data-placed",""),i&&(D.current=requestAnimationFrame(()=>{a.setAttribute("data-ready","")}))},[]);a.useEffect(()=>()=>cancelAnimationFrame(D.current),[]),s(H,[G,n,E,M,w],()=>K(!0),L),a.useEffect(()=>{const e=H.current;if(!e)return;const t=new ResizeObserver(()=>K(!1));return t.observe(e),()=>t.disconnect()},[K]);const Q=a.useMemo(()=>({variant:n,size:E,density:M,fullWidth:w,disabled:B,readOnly:y}),[n,E,M,w,B,y]);return e(j.Provider,{value:Q,children:t(d,{ref:e=>{H.current=e,"function"==typeof S?S(e):S&&(S.current=e)},value:G,onValueChange:e=>{const t=e??null;I||q(t),v?.(t)},disabled:B,readOnly:y,name:x,className:["relative inline-flex items-center rounded-full",P[n],k,y?"saturate-[0.55]":"",B?"opacity-50 saturate-[0.35]":"",w?"flex w-full":"",$??""].filter(Boolean).join(" "),style:{...u(F,f,n),...A},...r(N,C),...O,children:[null!=G?e("span",{ref:J,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","top-(--p-seg-y) left-(--p-seg-x) h-(--p-seg-h) w-(--p-seg-w)",R[n],g,"[transition-property:left,top,width,height]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] motion-safe:data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ")}):null,z]})})});
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useCommitChange as s}from"../../internal/commit-change.js";import{controlNaming as l,useDisabled as r}from"../../internal/form.js";import{glowPointerMove as n}from"../../internal/glow.js";import{useDefaults as o}from"../../internal/defaults.js";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as d}from"@base-ui/react/radio-group";import{controlHeightClasses as c,controlSlots as u,controlTextClasses as p,focusRingInsetClasses as f,forcedCheckedTextClasses as h,forcedFieldEdgeClasses as m,forcedFillClasses as g,gapClasses as v,glassClasses as b,hasContent as y,iconClasses as x,paddingXClasses as w,transitionClasses as k}from"../../internal/styles.js";const j=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",fullWidth:!1,overfull:!1,disabled:!1,readOnly:!1}),R={solid:`${b} bg-(--plass-glass-press) p-1 [box-shadow:var(--p-elev),var(--plass-well)] ${m}`,glass:`${b} border bg-(--plass-glass) p-1 [border-color:var(--plass-glass-line)] [box-shadow:var(--p-elev),var(--plass-well)]`,ghost:""},P={solid:"plass-fill data-[placed]:[--p-fill-on:1] [box-shadow:var(--plass-shadow-1),var(--p-lift)]",glass:`${b} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,ghost:`${b} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`},S={solid:"data-[checked]:text-(--p-on-solid)",glass:"data-[checked]:text-(--p-accent)",ghost:"data-[checked]:text-(--p-accent)"};export const PlSegment=/* @__PURE__ */a.forwardRef(function PlSegment({value:s,startIcon:l,endIcon:o,disabled:d=!1,className:u,children:m,onPointerMove:g,...b},R){const{variant:P,size:A,density:C,fullWidth:$,overfull:N,disabled:W,readOnly:z}=a.useContext(j),O=r(d),B=!O&&!W&&!z;return t(i.Root,{ref:R,value:s,disabled:O,"data-segment":"",className:["relative z-10 inline-flex cursor-pointer items-center justify-center select-none","font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",c[A],p[A],v[A],w[C][A],"rounded-full",k,x,B?"plass-glow":"","not-data-[checked]:[--p-glow:var(--p-soft)]","not-data-[checked]:[--p-flash:var(--p-soft-hover)]","text-(--plass-muted-fg) not-data-[checked]:not-data-[disabled]:not-data-[readonly]:hover:text-(--plass-fg)",S[P],h,f,"data-[disabled]:cursor-not-allowed",W?"":"data-[disabled]:opacity-50","data-[readonly]:cursor-default",$?N?"min-w-0 flex-[1_1_auto]":"flex-1 shrink-0":"shrink-0",u??""].filter(Boolean).join(" "),onPointerMove:n(B,g),...b,children:[y(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,$?e("span",{"data-segment-label":"",className:"min-w-0 truncate",children:m}):m,y(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]})});export const PlSegmentedButton=/* @__PURE__ */a.forwardRef(function PlSegmentedButton({variant:n="glass",size:i,color:c,density:p,elevation:f=0,value:h,defaultValue:m=null,onValueChange:v,disabled:b=!1,readOnly:y=!1,name:x,fullWidth:w=!1,className:S,style:A,children:C,"aria-label":$,"aria-labelledby":N,...W},z){const O=o(),B=r(b),F=i??O.size??"md",q=c??O.color??"primary",E=p??O.density??"default",[M,V]=a.useState(m),I=void 0!==h,L=I?h:M,_=a.useRef(null),G=a.useRef(null),[H,T]=a.useState(!1),D=a.useCallback(()=>{const e=_.current;if(!e||!w)return void T(!1);const t=getComputedStyle(e),a=e.clientWidth-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight);let s=0;e.querySelectorAll("[data-segment]").forEach(e=>{const t=e.querySelector("[data-segment-label]");s+=e.getBoundingClientRect().width+(t?Math.max(0,t.scrollWidth-t.clientWidth):0)}),T(s>a+1)},[w]),J=a.useRef(!1);a.useEffect(()=>{J.current=!0},[]);const K=a.useRef(0),Q=a.useCallback(e=>{G.current=e,e&&!J.current&&e.setAttribute("data-placed","")},[]),U=a.useCallback(e=>{const t=_.current,a=G.current;if(!t||!a)return;const s=t.querySelector("[data-segment][data-checked]");if(!s)return;const l=s.offsetLeft,r=s.offsetTop,n=s.offsetWidth,o=s.offsetHeight,i=!e||!a.hasAttribute("data-ready");i&&(cancelAnimationFrame(K.current),a.removeAttribute("data-ready")),a.style.setProperty("--p-seg-x",`${l}px`),a.style.setProperty("--p-seg-y",`${r}px`),a.style.setProperty("--p-seg-w",`${n}px`),a.style.setProperty("--p-seg-h",`${o}px`),a.setAttribute("data-placed",""),i&&(K.current=requestAnimationFrame(()=>{a.setAttribute("data-ready","")}))},[]);a.useEffect(()=>()=>cancelAnimationFrame(K.current),[]),s(_,[L,n,F,E,w],()=>{D(),U(!0)},G),a.useEffect(()=>{const e=_.current;if(!e)return;const t=new ResizeObserver(()=>{D(),U(!1)});return t.observe(e),()=>t.disconnect()},[D,U]);const X=a.useMemo(()=>({variant:n,size:F,density:E,fullWidth:w,overfull:H,disabled:B,readOnly:y}),[n,F,E,w,H,B,y]);return e(j.Provider,{value:X,children:t(d,{ref:e=>{_.current=e,"function"==typeof z?z(e):z&&(z.current=e)},value:L,onValueChange:e=>{const t=e??null;I||V(t),v?.(t)},disabled:B,readOnly:y,name:x,className:["relative inline-flex items-center rounded-full",R[n],k,y?"saturate-[0.55]":"",B?"opacity-50 saturate-[0.35]":"",w?"flex w-full":"",S??""].filter(Boolean).join(" "),style:{...u(q,f,n),...A},...l($,N),...W,children:[null!=L?e("span",{ref:Q,"aria-hidden":"true",className:["pointer-events-none absolute rounded-full","top-(--p-seg-y) left-(--p-seg-x) h-(--p-seg-h) w-(--p-seg-w)",P[n],g,"[transition-property:left,top,width,height]","[transition-timing-function:var(--plass-ease)]","[transition-duration:0ms] motion-safe:data-[ready]:[transition-duration:var(--plass-duration)]"].join(" ")}):null,C]})})});

package/dist/components/select/PlSelect.d.ts

@@ -19,6 +19,8 @@ export interface PlSelectOption {
     disabled?: boolean;
 }
 export interface PlSelectProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
     /**

package/dist/components/sidebar/PlSidebarTrigger.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { type PlIconButtonProps } from '../icon-button/PlIconButton.js';
 import type { PlPageLayoutCollapse, PlassSidebarSide } from '../../internal/page-layout.js';
 export interface PlSidebarTriggerProps extends Omit<PlIconButtonProps, 'icon' | 'label'> {
+    /** @default 'ghost' */
+    variant?: PlIconButtonProps['variant'];
     /** Which of the layout's two sidebars it opens. @default 'start' */
     side?: PlassSidebarSide;
     /**

package/dist/components/table/PlTable.d.ts

@@ -38,6 +38,8 @@ export interface PlTableColumn<Row> {
     render?: (row: Row, index: number) => React.ReactNode;
 }
 export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` is the default — a table is a grid set into the page
      * rather than a panel floating over it.

package/dist/components/text-field/PlTextField.d.ts

@@ -9,6 +9,8 @@ export type PlTextFieldResize = 'none' | 'vertical' | 'horizontal' | 'both';
  */
 type NativeControlProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'color' | 'size' | 'onChange' | 'children'>;
 export interface PlTextFieldProps extends PlassStyleProps, NativeControlProps {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Classes on the parts a `className` does not reach. */
     classNames?: PlassFieldClassNames;
     /**

package/dist/components/toast/PlToast.d.ts

@@ -61,6 +61,8 @@ export interface PlToastOptions extends PlToastData {
     onRemove?: () => void;
 }
 export interface PlToastProviderProps extends Pick<PlassStyleProps, 'variant' | 'size' | 'density'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** The default colour family. A single toast overrides it in `add`. */
     color?: PlassColor;
     /** @default 'bottom-end' */

package/dist/components/toolbar/PlToolbar.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import type { PlassElevation, PlassPosition, PlassStyleProps } from '../../types.js';
 export interface PlToolbarProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /**
      * Drop shadow depth. `0` — the default — is flat even when the bar is pinned:
      * a shadow under a header is a way of saying "there is content beneath this",

package/dist/components/transfer/PlTransfer.d.ts

@@ -10,6 +10,8 @@ export interface PlTransferItem {
     disabled?: boolean;
 }
 export interface PlTransferProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** @default 'glass' */
+    variant?: PlassStyleProps['variant'];
     /** Everything that can be on either side, in the order the lists show it. */
     items: readonly PlTransferItem[];
     /** What is on the trailing side. Use with `onValueChange` for a controlled pair. */

package/dist/internal/chart-frame.d.ts

@@ -107,6 +107,8 @@ declare function givenHeight(height: number | string | undefined, ladder: number
  */
 export declare const markTransitionClasses: string;
 export interface ChartBaseProps extends Omit<PlBoxProps, 'children' | 'title'> {
+    /** @default 'ghost' */
+    variant?: PlBoxProps['variant'];
     /**
      * How tall the drawing is. A number is pixels; a string is any CSS length.
      * Defaults to the `size` ladder.