plass-ui 1.8.0 → 1.8.2

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/switch/PlSwitch.js

@@ -1 +1 @@
-"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDisabled as l,useLabelReference as o}from"../../internal/form.js";import{useDefaults as s}from"../../internal/defaults.js";import{Switch as c}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{controlSlots as n,cx as d,fieldDescriptionClasses as h,focusRingClasses as m,hasContent as p,metaTextClasses as f,tickRowTextClasses as u}from"../../internal/styles.js";const b={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},g={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},x=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill","[transition-property:background-color,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",m].join(" "),k=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),w=/* @__PURE__ */[k,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[--p-fill-on:1]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),j=/* @__PURE__ */[k,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[--p-fill-on:1]","data-[checked]:shadow-none"].join(" "),v=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[--p-fill-on:1]"].join(" "),y=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:m,label:k,description:N,error:_,invalid:T,labelPlacement:B="end",disabled:P=!1,readOnly:R=!1,className:S,classNames:$,style:z,"aria-label":C,"aria-labelledby":H,...O},q){const D=s(),E=l(P),F=o(C,H),G=t??D.size??"md",L=m??D.color??"primary",A=p(_),I=T??A,J=I?"danger":L,K=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(c.Root,{ref:q,className:d(x,b[G],E?v:R?j:w,$?.control),disabled:E,readOnly:R,"aria-label":C,"aria-labelledby":F.labelledBy,...O,children:a(c.Thumb,{className:`${y} ${g[G]}`})})}),M=k||N?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===B?"flex-1":""].filter(Boolean).join(" "),children:[k?a(i.Label,{className:d(E?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",$?.label),children:k}):null,N?a(i.Description,{className:d(h(G),$?.description),children:N}):null]}):null;return e(i.Root,{disabled:E,invalid:I,className:["inline-flex flex-col gap-1 align-top",S??""].filter(Boolean).join(" "),style:{...n(J,0,"solid"),...z},children:[a("div",{className:`flex items-start gap-2.5 ${u[G]}`,children:e(r,"start"===B?{children:[M,K]}:{children:[K,M]})}),a(i.Error,A?{match:!0,className:d(f[G],"text-(--p-accent)",$?.error),children:_}:{className:d(f[G],"text-(--p-accent)",$?.error)}),F.node]})});
+"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDisabled as o}from"../../internal/form.js";import{useDefaults as l}from"../../internal/defaults.js";import{Switch as s}from"@base-ui/react/switch";import{Field as c}from"@base-ui/react/field";import{controlSlots as i,cx as n,fieldDescriptionClasses as d,focusRingClasses as h,hasContent as m,metaTextClasses as p,tickRowTextClasses as f}from"../../internal/styles.js";const u={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},b={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},g=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill","[transition-property:background-color,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",h].join(" "),x=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),k=/* @__PURE__ */[x,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[--p-fill-on:1]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),w=/* @__PURE__ */[x,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[--p-fill-on:1]","data-[checked]:shadow-none"].join(" "),j=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[--p-fill-on:1]"].join(" "),v=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:h,label:x,description:y,error:N,invalid:_,labelPlacement:T="end",disabled:P=!1,readOnly:R=!1,className:S,classNames:$,style:z,"aria-label":B,"aria-labelledby":C,...H},O){const q=l(),D=o(P),E=t??q.size??"md",F=h??q.color??"primary",G=m(N),L=_??G,A=L?"danger":F,I=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(s.Root,{ref:O,className:n(g,u[E],D?j:R?w:k,$?.control),disabled:D,readOnly:R,"aria-label":B,"aria-labelledby":C,...H,children:a(s.Thumb,{className:`${v} ${b[E]}`})})}),J=x||y?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===T?"flex-1":""].filter(Boolean).join(" "),children:[x?a(c.Label,{className:n(D?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",$?.label),children:x}):null,y?a(c.Description,{className:n(d(E),$?.description),children:y}):null]}):null;return e(c.Root,{disabled:D,invalid:L,className:["inline-flex flex-col gap-1 align-top",S??""].filter(Boolean).join(" "),style:{...i(A,0,"solid"),...z},children:[a("div",{className:`flex items-start gap-2.5 ${f[E]}`,children:e(r,"start"===T?{children:[J,I]}:{children:[I,J]})}),a(c.Error,G?{match:!0,className:n(p[E],"text-(--p-accent)",$?.error),children:N}:{className:n(p[E],"text-(--p-accent)",$?.error)})]})});

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.

package/dist/internal/form.d.ts

@@ -84,13 +84,16 @@ export declare function controlNaming(label: string | undefined, labelledBy: str
  * the hidden words it points at, for a Base UI part `controlNaming` cannot
  * reach.
  *
- * A checkbox, a switch, a radio, and the group around a slider's thumbs or a
- * code's slots read `aria-labelledby` themselves and fall back to the visible
- * label for anything but a reference of the caller's, `undefined` included. So
- * an `aria-label` given without an `aria-labelledby` is written into a hidden
- * node as well, and the part is pointed at that, which leaves the `aria-label`
- * as the name in the label's place. A caller's `aria-labelledby` comes back as
- * it was, and with neither there is no reference and no node.
+ * The group around a slider's thumbs or a code's slots reads `aria-labelledby`
+ * itself and falls back to the visible label for anything but a reference of
+ * the caller's, `undefined` included. So an `aria-label` given without an
+ * `aria-labelledby` is written into a hidden node as well, and the part is
+ * pointed at that, which leaves the `aria-label` as the name in the label's
+ * place. A caller's `aria-labelledby` comes back as it was, and with neither
+ * there is no reference and no node.
+ *
+ * A checkbox, a switch and a radio do not need it: since Base UI 1.9.0 they
+ * drop the label's reference for a non-blank `aria-label` of their own.
  */
 export declare function useLabelReference(label: string | undefined, labelledBy: string | undefined): {
     labelledBy: string | undefined;