plass-ui 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -4,6 +4,66 @@
 
 ## vNext (2026--)
 
+## 1.6.0 (2026-09-19)
+
+### Breaking changes
+
+- **`plass-ui/styles.css` leaves the page around the components alone.** The reset inside it took the bullets off every `<ul>`, flattened every `<h1>`–`<h6>` to body text, closed up the margins of `<p>`, `<blockquote>`, `<figure>` and `<pre>`, and zeroed every element's border, which reached the rest of the page as readily as the components — a list in an app's own body text lost its markers, and `<hr>` lost its line. Those rules are gone. The components now carry `m-0 list-none p-0` where they render a list and `m-0` where they render a heading or a paragraph, and the only border the file still zeroes is the one a browser draws on a form control. An app that was using the stylesheet as its page reset gets the browser's defaults back for its own prose and has to write them itself, or import Tailwind's Preflight. In the other direction, a page's own `p { margin: 1rem }` no longer reaches inside a component, because a utility outranks a type selector where the old `:where()` rule lost to it. `plass-ui/tailwind.css` never carried the reset and is unchanged.
+
+### Added
+
+- **A labelled field can put its label in its own top edge, with `labelPlacement="notch"`.** `top` is still the default, so nothing moves without being asked. A notch buys back a row of vertical space and ties the name to the box rather than to whatever is above it, and the cut is a real one: a `<legend>` in a `<fieldset>`, which is the only way to take a segment out of a border without knowing what is behind it — and a library that does not paint the page cannot know. It is on every field-shaped control, which is `PlTextField`, `PlSelect`, `PlCombobox`, `PlNumberField`, `PlFilePicker`, and the six that share a picker's trigger: `PlDatePicker`, `PlDateRangePicker`, `PlDateTimePicker`, `PlTimePicker`, `PlColorPicker` and `PlTreeSelect`. `PlassProvider` carries it as well, for a product whose forms all notch. Two things follow from the label sitting on the edge, and both are deliberate: focus thickens the edge rather than drawing a ring, because a ring is a rectangle and would run straight through the label; and the label is out of the flow, so it no longer widens the control and a long one wants `fullWidth`. `PlOtpField` is the one labelled field that does not take it: a notch is a segment out of one continuous edge, and a row of separate boxes with gaps between them has none, so its label stays above the row. `PlSwitch`'s own `labelPlacement` is a different axis — which side of a tick the label sits on — and is unchanged.
+
+- **The interaction light is on the field shells as well as on the keys.** `.plass-glow` was written for every interactive surface and reached three of them — `PlButton`, `PlToggle` and `PlPill` — so a form of Plass fields answered a pointer with nothing while the button under it bloomed. It is now on `PlTextField`, `PlNumberField`, `PlSelect`, `PlCombobox`, `PlFilePicker`'s drop zone, a pressable `PlChip`, each segment of a `PlSegmentedButton`, and the six triggers that share a picker's shell: `PlDatePicker`, `PlDateRangePicker`, `PlDateTimePicker`, `PlTimePicker`, `PlColorPicker` and `PlTreeSelect`. `surfaceSlots` declares `--p-glow` and `--p-flash` for it, in the family's own tint in all three variants — a `solid` field is the well rather than a coloured fill, and white light on it would be white light on a near-white sheet. The light goes out while a control is disabled or read-only. Both layers stay at `opacity: 0` until a pointer arrives, so a page of fields nobody is touching pays for two custom properties and nothing else.
+
+  Three are deliberately without it. A `PlCheckbox`, a `PlRadio` and a `PlSwitch`'s track are the size of the text beside them, and a 6rem bloom inside a 20px box is a flat wash that slides about rather than light. A `PlOtpField`'s slot **is** an `<input>`, which renders no `::before` or `::after` at all.
+
+- **A chart series takes `dashed`, so a forecast can be told from a measurement.** The Flutter build already had the field, documented and listed in its props table, and neither painter read it — a line marked as a forecast came out solid. It is drawn in both builds now, a 6px dash with a 4px gap, and `PlassChartSeries` on this side takes it too. Only a line has a line to dash: it does nothing on a bar, or on a stacked band, whose fill is the mark.
+
+- **`.plass-theme` recomputes a colour family on the element that carries it.** Setting `--plass-primary-solid` on a `<div>` moved the base and nothing else, because the gradient, the tint and the hairline are mixed from it on the nearest theme root, which still held the old colour — so a scoped override gave a control the new solid and the old everything else. An element with the class derives the whole set again from the bases declared beside it. It carries no theme of its own, unlike `.dark` and `data-theme`, so the subtree stays light or dark with the page. A popup rendered through a portal sits outside the element and is not covered; `.plass-portal` is the hook to declare the same values on.
+
+### Fixed
+
+- **The pointer bloom is drawn under a control's label rather than over it.** `.plass-glow::before` is positioned, and a positioned pseudo-element paints above every in-flow thing in its box, so the light was laid over the words on a key and over the value in a field. On a white label on a filled button that is invisible; on the dark ink a field is written in it is a value that got harder to read the moment a pointer arrived. The layer now takes `z-index: -1` inside a stacking context the surface owns, which paints it after the fill and before the content. The press flash stays over everything, which is the pair the Flutter build has always drawn and the pair this library's own design language describes.
+
+- **A `PlSegmentedButton`'s segments take the light of whatever they are standing on.** All of them read the set's own two slots, so on a `solid` set an unchosen segment was lit in white — which is white light on the trough, a near-white sheet, and therefore nothing at all. A chosen segment rides the tile and keeps the white; an unchosen one takes the family's soft tint. The Flutter build makes the same distinction.
+
+- **A `PlFilePicker` says why it turned files away.** `onReject` was the only way to hear about it, so a picker a caller had not wired reported a refusal by doing nothing at all — a reader dropped ten files, saw six appear and had no way to learn what happened to the other four. The box now says it under itself, one line per reason and counted: "2 files are not an accepted type", "1 file is too large", "3 files did not fit". Grouped by reason rather than named one file at a time, because the batch that goes wrong is usually the big one, and what the limit _is_ stays in `hint` where a picker already says what it accepts. `showRejections={false}` turns it off for an app that says the same thing somewhere of its own, and `onReject` fires either way. It is a `role="status"` rather than an alert, and it sets no `aria-invalid`: what was rejected never reached the value, so a field holding four good files is a field holding four good files. `filesRejectedType`, `filesRejectedSize` and `filesRejectedCount` join the label pack in all seven languages, which takes it to a hundred keys.
+
+- **`PlColorPicker` takes `classNames`, which every other labelled field already did.** It was the one field a caller could not reach inside: `className` lands on the stack, and the trigger, the label, the description and the error had no way in at all. The four slots mean what they mean everywhere else, with one addition — with `inline` there is no trigger, so `control` is the panel, which is the square and the rails a reader actually acts on. `PlColorPicker` and `PlTreeSelect` are now both in the contract test that holds the vocabulary together, which is what will keep the next one from drifting.
+
+- **A `PlFilePicker` answers a file dragged onto it.** The drag-over state was written and then lost: a plain `bg-(--p-soft-hover)` and a plain `[border-color:var(--p-ring)]` laid over the resting fill and the resting edge are one class each against one class each, and two declarations of a property at one specificity are settled by the order Tailwind emitted them in — which put the resting pair last, so the box looked exactly the same whether or not a file was over it. The state now replaces the resting classes instead of stacking on them, and it says more than it used to: the sheet takes the family's wash, the dashed edge takes the ring colour, and a soft halo spreads outside the box, all three easing over the house duration. Nothing grows and nothing lifts, because a target that moves while you are aiming at it is a target you miss. The Flutter build, which resolves the same state in Dart rather than in a stylesheet, was never affected and gains the halo.
+
+- **A file let go over a `PlFilePicker`'s list lands in the picker.** The drag listeners sat on a wrapper the list was a sibling of, not a child of, so the bottom half of what looks like one drop target — and what the component's own source describes as one — passed the file to the browser, which navigated away from the page to open it. The list is inside the drop area now.
+
+- **A `PlNumberField`'s and a `PlOtpField`'s label are drawn like every other field's.** Both were a weight light of the rest — `font-medium` where a `PlTextField`, a `PlSelect`, a `PlCombobox` and every picker are `font-semibold` — and the number field also dimmed its whole label with `opacity-50` when disabled instead of taking the muted foreground the others take. A form holding two of them showed two weights of label. The Flutter build has always drawn both at the heavier weight, so this is also the two packages agreeing again.
+
+- **A `PlDatePicker` and a `PlDateRangePicker` take `density` from the provider.** The other four pickers resolve it, and these two let it ride through as an unread prop, so `<PlassProvider density="compact">` reached every field on a form except those two triggers, which kept the default track's padding. The Flutter build resolves it in all six and always did.
+
+- **Focusing a chart reads a summary rather than every number in it.** `aria-describedby` pointed at the hidden data table, and a screen reader flattens whatever that attribute names into one string — so a chart of four hundred cells announced four hundred numbers on every focus, ahead of anything else, and the same table is a sibling in the reading order, so it was heard twice. The description is now a line: each visible series and where it ended up on a chart with axes, every slice and its share on a pie, and each row and the span its cells cover on a heatmap. The table has not moved and still carries every value, which is what a reader steps into when they want one.
+
+- **A time axis whose two ends are the same moment opens a day around it.** `min` and `max` naming one instant left the axis with no width, and the two builds failed differently: a mark landed a screen off the plot here and on the origin in Flutter. The guard that already opened a day around a single instant in the data now covers a caller's own bounds too.
+
+- **A `PlAnimateFloat` takes a `distance` that has to be worked out, or that is negative.** The upward drift was written by putting a minus sign in front of the value, which only negates a plain number: `calc(1rem + 2px)` became `-calc(1rem + 2px)` and `-8` became `--8px`, and neither is a length, so the drift was dropped. It is now the same `calc(-1 * …)` a `PlAnimateSlide` uses, and a negative number drifts the other way.
+
+- **A `PlAnimateCounter` with an inline `format` builds one formatter.** The `Intl.NumberFormat` was memoised on the options object, and an object written inline — which is how the prop reads best — is a new reference on every render around the counter, so each one built another. It is now keyed by what the options say.
+
+- **`PlAnimateLighting` starts over when it is hovered or played again.** The rewind clears `animation-name` on the element, and an inline style cannot reach a pseudo-element, so the arc carried on from wherever the last pass had left it. The root now carries `data-plass-rewind` for the length of that read, and the stylesheet answers it.
+
+- **`PlAnimateLighting` turns on the curve it was given.** The arc is drawn on a pseudo-element, and `linear` was written into it, so `easing` reached the root and stopped there. It is the default now rather than the only answer, which is what `curve` already does in the Flutter build.
+
+- **`PlAnimateTyping` types a new string of the same length again.** The reset watched how many characters there were rather than what they said, so "design" becoming "deploy" appeared whole instead of being typed. The Flutter build already started over.
+
+- **A `PlAnimateMarquee` measures itself once rather than on every render around it.** `children` was a dependency of the effect that measures the strip, and it is a new reference on every render a parent does, so each one read the layout back and built a new `ResizeObserver`. The observer on the track is what catches content that changes the strip, so the measurement now happens when the size does.
+
+- **A `PlAnimateMarquee` with a `speed` of zero or less stands still.** The travel was divided by the speed, so zero gave an infinite number of milliseconds: the strip carried an `animation-duration` of `Infinityms`, which no browser reads. A speed of zero or less is now read as not moving and holds the strip where it is, as `paused` does, and an explicit `duration` still decides on its own.
+
+- **Copying a text effect gives its line once.** `PlAnimateSplit`, `PlAnimateScramble`, `PlAnimateCounter` and `PlAnimateTyping` each draw their line and keep a clipped copy of it beside them for a screen reader, and a selection took both: "Internationalization is long" came back as "Internationalization is longInternationalization is long". The clipped copy is now left out of the selection, and a screen reader still reads it.
+
+- **A floating `PlBackTop` floats, and clears the safe area.** `floating` pinned the button with a `fixed` utility, which `PlButton`'s own `relative` beat at the same specificity later in the stylesheet, so the button scrolled with the page instead of staying in the corner — every demo on the site passes `floating={false}`, which is why nobody saw it. It is pinned inline now, as `PlFloatingActionButton` is, 24px off the bottom end corner with `env(safe-area-inset-bottom)` added to that, so it no longer sits under the home indicator or the navigation bar of an edge-to-edge screen. A `style` of your own still replaces the pinning.
+
+- **A vertical `PlStepper` names its panel after the step it sits in.** Only the horizontal panel was a `role="group"` named by its step, so a screen reader landing in a vertical one was told nothing about which step it belonged to. Both are named now, which is what the stepper page has always said.
+
 ## 1.5.0 (2026-09-15)
 
 ### Breaking changes

package/README.md

@@ -8,6 +8,8 @@
 
 Live previews and full props for every component. Pick **React** in the sidebar. This README is just the quick start.
 
+![Plass UI components arranged around the Plass mark: a search field, a settings card, radio buttons and checkboxes, buttons and chips, a segmented button and pagination, a success alert, a slider, a progress bar and a meter, an avatar stack, a badge and a rating](https://plass.cdget.com/showcase.png)
+
 ---
 
 > **Plass is one design language, shipped as two libraries.** 127 components made of tinted glass and gradients, in React and in Flutter, under the same names and the same numbers. React adds three more for problems only the DOM has.
@@ -118,33 +120,51 @@ One thing does **not** change with the theme, and it is deliberate: the colour o
 
 Every component is exported under a `Pl` prefix. `Button`, `Card` and `Table` are the most-taken identifiers in the ecosystem, and a consumer should not have to alias ours on import.
 
+130 of them. The [Flutter package](https://pub.dev/packages/plass_ui) holds 127 of these under the same names: `PlFlex`, `PlPortal` and `PlVisuallyHidden` answer problems only the DOM has, and `PlContextMenu` is a second trigger onto `PlMenu`'s surface. Every component has a page of its own with live previews and the full props table.
+
+### Charts
+
+`PlAreaChart` · `PlBarChart` · `PlGaugeChart` · `PlHeatmapChart` · `PlLineChart` · `PlPieChart` · `PlScatterChart` · `PlSparkline` · `PlTimelineChart`
+
 ### Display
 
-`PlAvatar` · `PlBadge` · `PlBlockquote` · `PlBreadcrumb` · `PlChip` · `PlDivider` · `PlHighlight` · `PlHotKeys` · `PlIcon` · `PlList` · `PlTable` · `PlTextLink` · `PlTimeline` · `PlTypography`
+`PlAppLogo` · `PlAvatar` · `PlBadge` · `PlBlockquote` · `PlBreadcrumb` · `PlChip` · `PlCodeBlock` · `PlDataList` · `PlDataTable` · `PlDivider` · `PlGallery` · `PlHighlight` · `PlHotKeys` · `PlIcon` · `PlImage` · `PlList` · `PlMockup` · `PlStat` · `PlTable` · `PlTextLink` · `PlTimeline` · `PlTree` · `PlTypography` · `PlVisuallyHidden`
 
 ### Feedback
 
-`PlAlert` · `PlDrawer` · `PlModal` · `PlOverlay` · `PlPopover` · `PlProgressBox` · `PlProgressCircular` · `PlProgressLinear` · `PlSkeleton` · `PlToast` · `PlTooltip`
+`PlAlert` · `PlConfirmProvider` · `PlDrawer` · `PlEmpty` · `PlMeter` · `PlModal` · `PlOverlay` · `PlPopconfirm` · `PlPopover` · `PlProgressBox` · `PlProgressCircular` · `PlProgressLinear` · `PlSkeleton` · `PlToast` · `PlTooltip` · `PlTour`
 
 ### Inputs
 
-`PlButton` · `PlButtonGroup` · `PlCheckbox` · `PlCombobox` · `PlDatePicker` · `PlDateRangePicker` · `PlDateTimePicker` · `PlFilePicker` · `PlIconButton` · `PlNumberField` · `PlOtpField` · `PlPagination` · `PlRadioGroup` · `PlRating` · `PlSegmentedButton` · `PlSelect` · `PlSlider` · `PlSwitch` · `PlTextField` · `PlTimePicker`
+`PlButton` · `PlButtonGroup` · `PlCalendar` · `PlCheckbox` · `PlColorPicker` · `PlCombobox` · `PlDatePicker` · `PlDateRangePicker` · `PlDateTimePicker` · `PlFieldset` · `PlFilePicker` · `PlFloatingActionButton` · `PlForm` · `PlIconButton` · `PlNumberField` · `PlOtpField` · `PlPagination` · `PlRadioGroup` · `PlRating` · `PlSegmentedButton` · `PlSelect` · `PlSlider` · `PlSwitch` · `PlTextField` · `PlTimePicker` · `PlToggle` · `PlToggleGroup` · `PlTransfer` · `PlTreeSelect`
 
 ### Layout
 
-`PlAspectRatio` · `PlContainer` · `PlGrid` · `PlPanes` · `PlScrollZone`
+`PlAspectRatio` · `PlContainer` · `PlFlex` · `PlFooter` · `PlGrid` · `PlHeader` · `PlPageLayout` · `PlPanes` · `PlPortal` · `PlScrollArea` · `PlScrollZone` · `PlShow` · `PlSidebar` · `PlStack`
 
 ### Navigation
 
-`PlBottomNavigation` · `PlContextMenu` · `PlFloatingBottomNavigation` · `PlMenu`
+`PlAnchor` · `PlBackTop` · `PlBottomNavigation` · `PlCommandPalette` · `PlContextMenu` · `PlFloatingBottomNavigation` · `PlMenu` · `PlMenubar` · `PlNavigationMenu` · `PlStepper`
 
 ### Surfaces
 
-`PlAccordion` · `PlBox` · `PlCard` · `PlCarousel` · `PlChatBubble` · `PlCollapsible` · `PlPill` · `PlSpoiler` · `PlTabs` · `PlToolbar`
+`PlAccordion` · `PlBox` · `PlCard` · `PlCarousel` · `PlChatBubble` · `PlCollapsible` · `PlHoverCard` · `PlHowToSteps` · `PlPill` · `PlSpoiler` · `PlTabs` · `PlToolbar` · `PlWindowPane`
 
 ### Transitions
 
-`PlAnimateAppear` · `PlAnimateBlink` · `PlAnimateFade` · `PlAnimateGrow` · `PlAnimateHeadline` · `PlAnimateLighting` · `PlAnimateMarquee` · `PlAnimateRotate` · `PlAnimateSlide` · `PlAnimateTyping` · `PlAnimateZoom`
+`PlAnimateAppear` · `PlAnimateBlink` · `PlAnimateCounter` · `PlAnimateFade` · `PlAnimateFloat` · `PlAnimateGrow` · `PlAnimateHeadline` · `PlAnimateLighting` · `PlAnimateMarquee` · `PlAnimateReveal` · `PlAnimateRotate` · `PlAnimateScramble` · `PlAnimateShake` · `PlAnimateSlide` · `PlAnimateSplit` · `PlAnimateTyping` · `PlAnimateZoom`
+
+### Hooks
+
+React-only, and the machinery the library already ran on rather than anything new. Import them from the barrel or from `plass-ui/hooks`.
+
+`usePlBreakpoint` · `usePlBreakpointValue` · `usePlColorScheme` · `usePlDisclosure` · `usePlElementSize` · `usePlHotKeys` · `usePlMediaQuery` · `usePlOnScreen` · `usePlReducedMotion`
+
+`usePlassDefaults`, `usePlToast` and `usePlConfirm` live with the part they belong to instead, and come from `plass-ui/provider`, `plass-ui/toast` and `plass-ui/confirm`.
+
+## Changelog
+
+[CHANGELOG.md](https://github.com/jooy2/plass-ui/blob/main/packages/react/CHANGELOG.md) is this package's history, and [plass.cdget.com/changelog](https://plass.cdget.com/changelog) is the same list beside the Flutter package's. The two version independently, so a release on one side is not a release on the other.
 
 ## Development
 

package/dist/components/animate-counter/PlAnimateCounter.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as s}from"@base-ui/react/use-render";import{useAnimationRun as i}from"../../internal/animate.js";import{useDefaults as o}from"../../internal/defaults.js";import{usePrefersReducedMotion as u}from"../../internal/media.js";import{cx as m,srOnlyClasses as c}from"../../internal/styles.js";function easeOut(e){return 1-(1-e)**3}export const PlAnimateCounter=/* @__PURE__ */n.forwardRef(function PlAnimateCounter({value:l,from:f=0,duration:d=1200,delay:p=0,format:h,easing:g=easeOut,trigger:j="visible",play:A,once:F=!0,threshold:b=.2,paused:x,render:v,className:y,...N},q){const E=o(),M=u(),R=i({trigger:j,play:A,once:F,threshold:b,paused:x,infinite:!1,nonce:l}),w=n.useMemo(()=>new Intl.NumberFormat(E.locale,h),[E.locale,h]),[C,O]=n.useState(()=>M?l:f),P=n.useRef(0),I=n.useRef(g);n.useEffect(()=>{I.current=g}),n.useEffect(()=>{P.current=0},[R.runs,l,f]),n.useEffect(()=>{if(M)return void O(l);if(!R.started)return P.current=0,void O(f);if(x)return;const e=Math.max(1,d);let r,t=0;const step=n=>{r??=n-P.current,P.current=n-r;const a=Math.min(1,(P.current-p)/e);a<0?t=requestAnimationFrame(step):(O(f+(l-f)*I.current(a)),a<1&&(t=requestAnimationFrame(step)))};return t=requestAnimationFrame(step),()=>cancelAnimationFrame(t)},[R.started,R.runs,M,x,l,f,d,p]);const S=w.format(l);return s({render:v??e("span",{}),ref:[q,R.ref],props:{className:m("tabular-nums",y),"data-plass-animation":"counter","data-state":R.state,children:t(r,{children:[e("span",{className:c,children:S}),e("span",{"aria-hidden":"true",children:w.format(C)})]}),...a(N,R.handlers)}})});
+"use client";import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as s}from"@base-ui/react/use-render";import{useAnimationRun as i}from"../../internal/animate.js";import{useDefaults as o}from"../../internal/defaults.js";import{usePrefersReducedMotion as u}from"../../internal/media.js";import{cx as m,srOnlyCopyClasses as c}from"../../internal/styles.js";function easeOut(e){return 1-(1-e)**3}export const PlAnimateCounter=/* @__PURE__ */n.forwardRef(function PlAnimateCounter({value:l,from:f=0,duration:d=1200,delay:p=0,format:h,easing:g=easeOut,trigger:j="visible",play:y,once:A=!0,threshold:F=.2,paused:b,render:x,className:N,...v},R){const q=o(),E=u(),O=i({trigger:j,play:y,once:A,threshold:F,paused:b,infinite:!1,nonce:l}),k=`${q.locale??""}\0${JSON.stringify(h??null)}`,w=n.useRef(null);null!==w.current&&w.current.key===k||(w.current={key:k,formatter:new Intl.NumberFormat(q.locale,h)});const C=w.current.formatter,[M,P]=n.useState(()=>E?l:f),S=n.useRef(0),$=n.useRef(g);n.useEffect(()=>{$.current=g}),n.useEffect(()=>{S.current=0},[O.runs,l,f]),n.useEffect(()=>{if(E)return void P(l);if(!O.started)return S.current=0,void P(f);if(b)return;const e=Math.max(1,d);let r,t=0;const step=n=>{r??=n-S.current,S.current=n-r;const a=Math.min(1,(S.current-p)/e);a<0?t=requestAnimationFrame(step):(P(f+(l-f)*$.current(a)),a<1&&(t=requestAnimationFrame(step)))};return t=requestAnimationFrame(step),()=>cancelAnimationFrame(t)},[O.started,O.runs,E,b,l,f,d,p]);const I=C.format(l);return s({render:x??e("span",{}),ref:[R,O.ref],props:{className:m("tabular-nums",N),"data-plass-animation":"counter","data-state":O.state,children:t(r,{children:[e("span",{className:c,children:I}),e("span",{"aria-hidden":"true",children:C.format(M)})]}),...a(v,O.handlers)}})});

package/dist/components/animate-float/PlAnimateFloat.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as n,useAnimateElement as i}from"../../internal/animate.js";import{cx as s}from"../../internal/styles.js";export const PlAnimateFloat=/* @__PURE__ */e.forwardRef(function PlAnimateFloat({duration:e=3e3,delay:l=0,easing:o="ease-in-out",repeat:c="infinite",alternate:m,paused:p,trigger:d="mount",play:f,once:u=!0,threshold:y=.2,distance:h=8,orientation:g="vertical",render:N,className:b,style:j,children:v,...x},A){const F=n(h),P="vertical"===g,w=i({effect:null,duration:e,delay:l,easing:o,repeat:c,alternate:m,x:P?"0":F,y:P?`-${F}`:"0",trigger:d,play:f,once:u,threshold:y,paused:p,infinite:!0,children:v});return r({render:N,ref:[A,w.ref],props:{...a(x,w.props),className:s(t,"plass-anim-float",w.className,b),style:{...w.style,...j},"data-plass-animation":"float",children:w.children}})});
+"use client";import*as e from"react";import{mergeProps as a}from"@base-ui/react/merge-props";import{useRender as r}from"@base-ui/react/use-render";import{animBaseClass as t,lengthValue as n,useAnimateElement as i}from"../../internal/animate.js";import{cx as l}from"../../internal/styles.js";export const PlAnimateFloat=/* @__PURE__ */e.forwardRef(function PlAnimateFloat({duration:e=3e3,delay:s=0,easing:o="ease-in-out",repeat:c="infinite",alternate:p,paused:m,trigger:d="mount",play:f,once:u=!0,threshold:y=.2,distance:h=8,orientation:g="vertical",render:b,className:x,style:N,children:j,...v},A){const F=n(h),P="vertical"===g,w=i({effect:null,duration:e,delay:s,easing:o,repeat:c,alternate:p,x:P?"0":F,y:P?"number"==typeof h?-h+"px":`calc(-1 * ${F})`:"0",trigger:d,play:f,once:u,threshold:y,paused:m,infinite:!0,children:j});return r({render:b,ref:[A,w.ref],props:{...a(v,w.props),className:l(t,"plass-anim-float",w.className,x),style:{...w.style,...N},"data-plass-animation":"float",children:w.children}})});

package/dist/components/animate-marquee/PlAnimateMarquee.d.ts

@@ -15,6 +15,9 @@ export interface PlAnimateMarqueeProps extends PlassAnimateProps, React.Componen
      * How fast the content travels, in pixels per second. A speed rather than a
      * duration, so a strip of four logos and a strip of forty move at the same
      * pace instead of the long one becoming a blur.
+     *
+     * `0` or less holds the strip where it is, as `paused` does. `duration`
+     * overrides this.
      * @default 60
      */
     speed?: number;

package/dist/components/animate-marquee/PlAnimateMarquee.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{isInfinite as a,lengthValue as n,repeatValue as i,directionValue as s,useAnimationRun as o}from"../../internal/animate.js";import{inertProps as l}from"../../internal/inert.js";import{usePrefersReducedMotion as m}from"../../internal/media.js";import{cx as p}from"../../internal/styles.js";export const PlAnimateMarquee=/* @__PURE__ */t.forwardRef(function PlAnimateMarquee({duration:u,delay:c=0,easing:d,repeat:f="infinite",alternate:h,paused:v,trigger:g="mount",play:y,once:b=!0,threshold:j=.2,orientation:q="horizontal",reverse:x=!1,speed:R=60,gap:H="2rem",copies:M=2,pauseOnHover:w=!0,className:z,style:A,children:N,...O},S){const W=o({trigger:g,play:y,once:b,threshold:j,paused:v,infinite:a(f)}),G=t.useRef(null),P=t.useRef(null),[$,k]=t.useState(0),[C,E]=t.useState(!1),F="vertical"===q,I=m();t.useEffect(()=>{const e=G.current,t=P.current;if(!e||!t)return;const measure=()=>{const r=getComputedStyle(e),a=parseFloat(F?r.rowGap:r.columnGap)||0,n=F?t.offsetHeight:t.offsetWidth;k(n+a),E(F?e.scrollHeight>e.clientHeight:e.scrollWidth>e.clientWidth)};if(measure(),"undefined"==typeof ResizeObserver)return;const r=new ResizeObserver(measure);return r.observe(t),r.observe(e),()=>r.disconnect()},[F,N,I]);const B=u??($>0?$/R*1e3:12e3);return e("div",{ref:e=>{G.current=e,W.ref(e),"function"==typeof S?S(e):S&&(S.current=e)},className:p("plass-marquee",F&&"plass-marquee-vertical",z),style:{"--p-anim-gap":n(H),...d?{"--p-anim-ease":d}:{},"--p-anim-duration":`${Math.round(B)}ms`,"--p-anim-delay":`${c}ms`,"--p-anim-repeat":i(f),"--p-anim-direction":s(x?"out":"in",h),"--p-anim-state":W.state,...A},"data-plass-animation":"marquee","data-state":W.state,"data-pause-on-hover":w?"":void 0,tabIndex:I&&C?0:void 0,...r(O,W.handlers),children:Array.from({length:Math.max(1,M)},(t,r)=>(t=>e("div",{ref:0===t?P:void 0,className:"plass-marquee-track","aria-hidden":0===t?void 0:"true",...l(0!==t),children:N},t))(r))})});
+"use client";import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{mergeProps as r}from"@base-ui/react/merge-props";import{isInfinite as a,lengthValue as n,repeatValue as i,directionValue as s,useAnimationRun as o}from"../../internal/animate.js";import{inertProps as l}from"../../internal/inert.js";import{usePrefersReducedMotion as m}from"../../internal/media.js";import{cx as p}from"../../internal/styles.js";export const PlAnimateMarquee=/* @__PURE__ */t.forwardRef(function PlAnimateMarquee({duration:u,delay:c=0,easing:d,repeat:f="infinite",alternate:h,paused:v,trigger:g="mount",play:y,once:b=!0,threshold:j=.2,orientation:q="horizontal",reverse:x=!1,speed:R=60,gap:H="2rem",copies:M=2,pauseOnHover:w=!0,className:z,style:A,children:N,...O},S){const W=void 0===u&&R<=0,G=o({trigger:g,play:y,once:b,threshold:j,paused:v||W,infinite:a(f)}),P=t.useRef(null),$=t.useRef(null),[k,C]=t.useState(0),[E,F]=t.useState(!1),I="vertical"===q,B=m();t.useEffect(()=>{const e=P.current,t=$.current;if(!e||!t)return;const measure=()=>{const r=getComputedStyle(e),a=parseFloat(I?r.rowGap:r.columnGap)||0,n=I?t.offsetHeight:t.offsetWidth;C(n+a),F(I?e.scrollHeight>e.clientHeight:e.scrollWidth>e.clientWidth)};if(measure(),"undefined"==typeof ResizeObserver)return;const r=new ResizeObserver(measure);return r.observe(t),r.observe(e),()=>r.disconnect()},[I,B]);const D=u??(k>0&&!W?k/R*1e3:12e3);return e("div",{ref:e=>{P.current=e,G.ref(e),"function"==typeof S?S(e):S&&(S.current=e)},className:p("plass-marquee",I&&"plass-marquee-vertical",z),style:{"--p-anim-gap":n(H),...d?{"--p-anim-ease":d}:{},"--p-anim-duration":`${Math.round(D)}ms`,"--p-anim-delay":`${c}ms`,"--p-anim-repeat":i(f),"--p-anim-direction":s(x?"out":"in",h),"--p-anim-state":G.state,...A},"data-plass-animation":"marquee","data-state":G.state,"data-pause-on-hover":w?"":void 0,tabIndex:B&&E?0:void 0,...r(O,G.handlers),children:Array.from({length:Math.max(1,M)},(t,r)=>(t=>e("div",{ref:0===t?$:void 0,className:"plass-marquee-track","aria-hidden":0===t?void 0:"true",...l(0!==t),children:N},t))(r))})});

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

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

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

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

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

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

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

@@ -27,6 +27,12 @@ export interface PlBackTopProps extends Omit<React.ComponentPropsWithoutRef<'but
      * On by default, because that is what this component is. Turn it off to put
      * the button somewhere of your own — the end of an article, a toolbar — and
      * keep the appearing and the scrolling.
+     *
+     * A pinned button sits 24px off the bottom end corner, and
+     * `env(safe-area-inset-bottom)` on top of that, so it clears the home
+     * indicator or the navigation bar of an edge-to-edge screen. The pinning is
+     * an inline `position: fixed` with logical insets, so a `style` of your own
+     * replaces it and a class of your own cannot.
      * @default true
      */
     floating?: boolean;

package/dist/components/back-top/PlBackTop.js

@@ -1 +1 @@
-"use client";import{jsx as o}from"react/jsx-runtime";import*as e from"react";import{PlIconButton as t}from"../icon-button/PlIconButton.js";import{useDefaults as r}from"../../internal/defaults.js";import{resolveScrollTarget as n}from"../../internal/scroll-target.js";import{useLabels as i}from"../../internal/labels.js";import{focusablesIn as s}from"../../internal/focusable.js";import{usePrefersReducedMotion as l}from"../../internal/media.js";import{cx as a,transitionClasses as c}from"../../internal/styles.js";function ChevronUp(){return o("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:o("path",{d:"M4.5 9.5 8 6l3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlBackTop=/* @__PURE__ */e.forwardRef(function PlBackTop({target:d,visibilityHeight:f=400,label:m,icon:u,floating:p=!0,variant:v="glass",size:b,color:h,elevation:j=2,className:k,onClick:T,...g},x){const y=r(),w=i(),C=m??w.backToTop,z=b??y.size??"md",B=h??y.color??"primary",E=l(),[L,P]=e.useState(!1);return e.useEffect(()=>{const o=n(d);if(!o)return;const read=()=>P(function scrollTopOf(o){return o instanceof Window?o.scrollY:o.scrollTop}(o)>f);return read(),o.addEventListener("scroll",read,{passive:!0}),()=>o.removeEventListener("scroll",read)},[d,f]),o(t,{ref:x,label:C,icon:u??o(ChevronUp,{}),variant:v,size:z,color:B,elevation:j,onClick:o=>{if(T?.(o),o.defaultPrevented)return;const e=n(d);e?.scrollTo({top:0,behavior:E?"instant":"smooth"});const t=o.currentTarget;if(e&&document.activeElement===t){const o=e===window?document.body:e,r=s(o).find(o=>o!==t&&!o.closest('[aria-hidden="true"]'));r?r.focus({preventScroll:!0}):t.blur()}},"aria-hidden":!L||void 0,tabIndex:L?void 0:-1,className:a(p?"fixed end-6 bottom-6 z-30":"",c,L?"opacity-100":"pointer-events-none opacity-0",k),...g})});
+"use client";import{jsx as o}from"react/jsx-runtime";import*as e from"react";import{PlIconButton as t}from"../icon-button/PlIconButton.js";import{useDefaults as n}from"../../internal/defaults.js";import{resolveScrollTarget as r}from"../../internal/scroll-target.js";import{useLabels as i}from"../../internal/labels.js";import{focusablesIn as s}from"../../internal/focusable.js";import{usePrefersReducedMotion as l}from"../../internal/media.js";import{cx as a,transitionClasses as c}from"../../internal/styles.js";const d="1.5rem";function ChevronUp(){return o("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:o("path",{d:"M4.5 9.5 8 6l3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlBackTop=/* @__PURE__ */e.forwardRef(function PlBackTop({target:f,visibilityHeight:m=400,label:p,icon:u,floating:v=!0,variant:b="glass",size:h,color:j,elevation:k=2,className:y,style:T,onClick:g,...x},E){const w=n(),B=i(),C=p??B.backToTop,z=h??w.size??"md",L=j??w.color??"primary",P=l(),[I,N]=e.useState(!1);e.useEffect(()=>{const o=r(f);if(!o)return;const read=()=>N(function scrollTopOf(o){return o instanceof Window?o.scrollY:o.scrollTop}(o)>m);return read(),o.addEventListener("scroll",read,{passive:!0}),()=>o.removeEventListener("scroll",read)},[f,m]);const S=v?{position:"fixed",insetInlineEnd:d,insetBlockEnd:`calc(${d} + env(safe-area-inset-bottom, 0px))`}:{};return o(t,{ref:E,label:C,icon:u??o(ChevronUp,{}),variant:b,size:z,color:L,elevation:k,onClick:o=>{if(g?.(o),o.defaultPrevented)return;const e=r(f);e?.scrollTo({top:0,behavior:P?"instant":"smooth"});const t=o.currentTarget;if(e&&document.activeElement===t){const o=e===window?document.body:e,n=s(o).find(o=>o!==t&&!o.closest('[aria-hidden="true"]'));n?n.focus({preventScroll:!0}):t.blur()}},"aria-hidden":!I||void 0,tabIndex:I?void 0:-1,className:a(v?"z-30":"",c,I?"opacity-100":"pointer-events-none opacity-0",y),style:{...S,...T},...x})});

package/dist/components/blockquote/PlBlockquote.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{glassClasses as t,hasContent as a,metaTextClasses as o,radiusClasses as n,sheetPaddingXClasses as i,sheetPaddingYClasses as c,surfaceSlots as d,transitionClasses as m}from"../../internal/styles.js";const p={xs:"text-[0.75rem]/[1.25rem]",sm:"text-[0.8125rem]/[1.375rem]",md:"text-[0.9375rem]/[1.625rem]",lg:"text-[1.0625rem]/[1.875rem]",xl:"text-[1.25rem]/[2.125rem]"},f="border-s-2 [border-inline-start-color:var(--p-accent)]",u={solid:/* @__PURE__ */[t,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[t,"border border-s-2 bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"bg-transparent"};function QuoteMarkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const PlBlockquote=/* @__PURE__ */r.forwardRef(function PlBlockquote({variant:r="ghost",size:t,color:g,density:x,elevation:h=0,author:v,source:b,cite:j,icon:N,className:y,style:k,children:w,...z},B){const M=l(),q=t??M.size??"md",I=g??M.color??"primary",P=x??M.density??"default",Q=a(v)||a(b),Z=void 0===N?e(QuoteMarkIcon,{}):N,C=["flex flex-col text-(--plass-fg)",f,"ghost"===r?"":`${n[q]} rounded-s-none`,u[r],i[P][q],c[P][q],m,y??""].filter(Boolean).join(" "),R=s("blockquote",{cite:j,className:p[q],children:[a(Z)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--p-soft-press) [&>svg]:size-full",children:Z}):null,w]}),$={...d(I,h),...k};return Q?s("figure",{ref:B,className:C,style:$,...z,children:[R,s("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--plass-muted-fg)",o[q]].join(" "),children:[a(v)?s("span",{className:"font-medium text-(--plass-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),v]}):null,a(b)?e("cite",{className:"not-italic",children:b}):null]})]}):e("div",{ref:B,className:C,style:$,...z,children:R})});
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{glassClasses as t,hasContent as a,metaTextClasses as o,radiusClasses as n,sheetPaddingXClasses as i,sheetPaddingYClasses as c,surfaceSlots as m,transitionClasses as d}from"../../internal/styles.js";const p={xs:"text-[0.75rem]/[1.25rem]",sm:"text-[0.8125rem]/[1.375rem]",md:"text-[0.9375rem]/[1.625rem]",lg:"text-[1.0625rem]/[1.875rem]",xl:"text-[1.25rem]/[2.125rem]"},f="border-s-2 [border-inline-start-color:var(--p-accent)]",u={solid:/* @__PURE__ */[t,"bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[t,"border border-s-2 bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"bg-transparent"};function QuoteMarkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"M6.4 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6ZM13.3 3.6c-2.3.9-3.7 2.8-3.7 5.1 0 2 1.2 3.3 2.8 3.3 1.4 0 2.5-1 2.5-2.4 0-1.3-.9-2.2-2.1-2.2-.2 0-.4 0-.6.1.3-1 1.1-1.8 2.2-2.3l-1.1-1.6Z",fill:"currentColor"})})}export const PlBlockquote=/* @__PURE__ */r.forwardRef(function PlBlockquote({variant:r="ghost",size:t,color:g,density:x,elevation:h=0,author:v,source:b,cite:j,icon:N,className:y,style:k,children:w,...z},B){const M=l(),q=t??M.size??"md",I=g??M.color??"primary",P=x??M.density??"default",Q=a(v)||a(b),Z=void 0===N?e(QuoteMarkIcon,{}):N,$=["m-0 flex flex-col text-(--plass-fg)",f,"ghost"===r?"":`${n[q]} rounded-s-none`,u[r],i[P][q],c[P][q],d,y??""].filter(Boolean).join(" "),C=s("blockquote",{cite:j,className:`m-0 ${p[q]}`,children:[a(Z)?e("span",{"aria-hidden":"true",className:"mb-1 block size-[2em] text-(--p-soft-press) [&>svg]:size-full",children:Z}):null,w]}),R={...m(I,h),...k};return Q?s("figure",{ref:B,className:$,style:R,...z,children:[C,s("figcaption",{className:["mt-2 flex flex-wrap items-baseline gap-x-1.5 text-(--plass-muted-fg)",o[q]].join(" "),children:[a(v)?s("span",{className:"font-medium text-(--plass-fg)",children:[e("span",{"aria-hidden":"true",children:"— "}),v]}):null,a(b)?e("cite",{className:"not-italic",children:b}):null]})]}):e("div",{ref:B,className:$,style:R,...z,children:C})});

package/dist/components/breadcrumb/PlBreadcrumb.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{ArrowRightIcon as l,ChevronIcon as c,EllipsisIcon as i}from"../../internal/icons.js";import{textOf as o}from"../../internal/text.js";import{controlTextClasses as m,cx as u,focusRingClasses as d,gapClasses as p,hasContent as f,iconClasses as h,radiusClasses as x,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */a.createContext({size:"md",last:!1}),y={default:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},compact:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"}},N={xs:x.xs,sm:x.xs,md:x.xs,lg:x.sm,xl:x.sm},v=["chevron","arrow","slash","dot"];function absoluteHref(e,t){if(!t)return e;try{return new URL(e,t).href}catch{return e}}function breadcrumbListData(e,t){const r=e.map((e,r)=>{const{href:a,children:s}=e.props;return{"@type":"ListItem",position:r+1,name:o(s),...a?{item:absoluteHref(a,t)}:null}});return JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r}).replace(/</g,"\\u003c")}export const PlBreadcrumb=/* @__PURE__ */a.forwardRef(function PlBreadcrumb({size:r,color:o,density:p,separator:f="chevron",maxItems:x,itemsBeforeCollapse:N=1,itemsAfterCollapse:k=1,expandable:w=!0,label:j,expandLabel:C,structuredData:L=!1,baseUrl:B,className:I,style:M,children:z,...P},R){const S=s(),A=n(),E=j??A.breadcrumb,D=C??A.breadcrumbExpand,H=r??S.size??"md",$=o??S.color??"primary",F=p??S.density??"default",[U,_]=a.useState(!1),q=a.useRef(null),J=a.useRef(!1);a.useEffect(()=>{if(!U||!J.current)return;J.current=!1;const e=Array.from(q.current?.children??[]).filter(e=>"true"!==e.getAttribute("aria-hidden"));for(const t of e.slice(Math.max(0,N))){const e=t.querySelector("a[href], button:not(:disabled)");if(e)return void e.focus()}},[U,N]);const O=a.Children.toArray(z).filter(a.isValidElement),T=O.length,V=O.some(e=>!0===e.props.current),G=!U&&void 0!==x&&T>Math.max(x,1)&&T-N-k>1?[...O.slice(0,Math.max(0,N)),null,...O.slice(T-Math.max(0,k))]:O,K=function isSeparatorName(e){return"string"==typeof e&&v.includes(e)}(f)?function separatorMark(t){switch(t){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(c,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(l,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(f):f,Q=u("inline-flex items-center rounded-(--plass-radius-xs) px-0.5","text-(--plass-muted-fg)",g,h,w?u("cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)",d):"");return t("nav",{ref:R,"aria-label":E,className:u("flex",m[H],h,I),style:{"--p-accent":`var(--plass-${$}-accent)`,"--p-soft":`var(--plass-${$}-soft)`,"--p-ring":`var(--plass-${$}-ring)`,...M},...P,children:[L&&T>0?e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:breadcrumbListData(O,B)}}):null,e("ol",{ref:q,role:"list",className:u("flex list-none flex-wrap items-center p-0",y[F][H]),children:G.map((r,s)=>t(a.Fragment,{children:[s>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) select-none",children:K}):null,r?e(b.Provider,{value:{size:H,last:!V&&s===G.length-1},children:r}):e("li",{className:"flex shrink-0 items-center",children:w?e("button",{type:"button",className:Q,"aria-label":D,onClick:()=>{J.current=!0,_(!0)},children:e(i,{})}):e("span",{className:Q,"aria-hidden":"true",children:e(i,{})})})]},r?r.key??s:"fold"))})]})});export const PlBreadcrumbItem=/* @__PURE__ */a.forwardRef(function PlBreadcrumbItem({href:s,onClick:n,startIcon:l,endIcon:c,current:i,disabled:o=!1,className:m,children:h,...x},y){const{size:v,last:k}=a.useContext(b),w=i??k,j=Boolean(s||n)&&!w&&!o,C=u("inline-flex min-w-0 items-center px-1",p[v],N[v],g,o?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":w?"font-medium text-(--plass-fg)":j?u("cursor-pointer text-(--plass-muted-fg)","hover:bg-(--p-soft) hover:text-(--p-accent)",d):"text-(--plass-muted-fg)"),L=t(r,{children:[f(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",children:h}),f(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]});return e("li",{ref:y,className:u("flex min-w-0 items-center",m),...x,children:j&&s?e("a",{href:s,className:C,onClick:n,children:L}):j?e("button",{type:"button",className:C,onClick:n,children:L}):e("span",{className:C,"aria-current":w?"page":void 0,"aria-disabled":o||void 0,children:L})})});
+"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{ArrowRightIcon as l,ChevronIcon as c,EllipsisIcon as i}from"../../internal/icons.js";import{textOf as o}from"../../internal/text.js";import{controlTextClasses as m,cx as u,focusRingClasses as d,gapClasses as p,hasContent as f,iconClasses as h,radiusClasses as x,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */a.createContext({size:"md",last:!1}),y={default:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},compact:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"}},N={xs:x.xs,sm:x.xs,md:x.xs,lg:x.sm,xl:x.sm},v=["chevron","arrow","slash","dot"];function absoluteHref(e,t){if(!t)return e;try{return new URL(e,t).href}catch{return e}}function breadcrumbListData(e,t){const r=e.map((e,r)=>{const{href:a,children:s}=e.props;return{"@type":"ListItem",position:r+1,name:o(s),...a?{item:absoluteHref(a,t)}:null}});return JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r}).replace(/</g,"\\u003c")}export const PlBreadcrumb=/* @__PURE__ */a.forwardRef(function PlBreadcrumb({size:r,color:o,density:p,separator:f="chevron",maxItems:x,itemsBeforeCollapse:N=1,itemsAfterCollapse:k=1,expandable:w=!0,label:j,expandLabel:C,structuredData:L=!1,baseUrl:B,className:I,style:M,children:z,...P},R){const S=s(),A=n(),E=j??A.breadcrumb,D=C??A.breadcrumbExpand,H=r??S.size??"md",$=o??S.color??"primary",F=p??S.density??"default",[U,_]=a.useState(!1),q=a.useRef(null),J=a.useRef(!1);a.useEffect(()=>{if(!U||!J.current)return;J.current=!1;const e=Array.from(q.current?.children??[]).filter(e=>"true"!==e.getAttribute("aria-hidden"));for(const t of e.slice(Math.max(0,N))){const e=t.querySelector("a[href], button:not(:disabled)");if(e)return void e.focus()}},[U,N]);const O=a.Children.toArray(z).filter(a.isValidElement),T=O.length,V=O.some(e=>!0===e.props.current),G=!U&&void 0!==x&&T>Math.max(x,1)&&T-N-k>1?[...O.slice(0,Math.max(0,N)),null,...O.slice(T-Math.max(0,k))]:O,K=function isSeparatorName(e){return"string"==typeof e&&v.includes(e)}(f)?function separatorMark(t){switch(t){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(c,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(l,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(f):f,Q=u("inline-flex items-center rounded-(--plass-radius-xs) px-0.5","text-(--plass-muted-fg)",g,h,w?u("cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)",d):"");return t("nav",{ref:R,"aria-label":E,className:u("flex",m[H],h,I),style:{"--p-accent":`var(--plass-${$}-accent)`,"--p-soft":`var(--plass-${$}-soft)`,"--p-ring":`var(--plass-${$}-ring)`,...M},...P,children:[L&&T>0?e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:breadcrumbListData(O,B)}}):null,e("ol",{ref:q,role:"list",className:u("m-0 flex list-none flex-wrap items-center p-0",y[F][H]),children:G.map((r,s)=>t(a.Fragment,{children:[s>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) select-none",children:K}):null,r?e(b.Provider,{value:{size:H,last:!V&&s===G.length-1},children:r}):e("li",{className:"flex shrink-0 items-center",children:w?e("button",{type:"button",className:Q,"aria-label":D,onClick:()=>{J.current=!0,_(!0)},children:e(i,{})}):e("span",{className:Q,"aria-hidden":"true",children:e(i,{})})})]},r?r.key??s:"fold"))})]})});export const PlBreadcrumbItem=/* @__PURE__ */a.forwardRef(function PlBreadcrumbItem({href:s,onClick:n,startIcon:l,endIcon:c,current:i,disabled:o=!1,className:m,children:h,...x},y){const{size:v,last:k}=a.useContext(b),w=i??k,j=Boolean(s||n)&&!w&&!o,C=u("inline-flex min-w-0 items-center px-1",p[v],N[v],g,o?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":w?"font-medium text-(--plass-fg)":j?u("cursor-pointer text-(--plass-muted-fg)","hover:bg-(--p-soft) hover:text-(--p-accent)",d):"text-(--plass-muted-fg)"),L=t(r,{children:[f(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",children:h}),f(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]});return e("li",{ref:y,className:u("flex min-w-0 items-center",m),...x,children:j&&s?e("a",{href:s,className:C,onClick:n,children:L}):j?e("button",{type:"button",className:C,onClick:n,children:L}):e("span",{className:C,"aria-current":w?"page":void 0,"aria-disabled":o||void 0,children:L})})});

package/dist/components/button/PlButton.js

@@ -1 +1 @@
-"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Button as l}from"@base-ui/react/button";import{useRender as t}from"@base-ui/react/use-render";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{followPointer as n}from"../../internal/glow.js";import{Spinner as d}from"../../internal/icons.js";import{controlHeightClasses as p,controlSlots as c,controlSquareClasses as g,controlTextClasses as v,disabledClasses as m,focusRingClasses as b,forcedEdgeClasses as x,gapClasses as h,glassClasses as u,hasContent as f,iconClasses as $,paddingXClasses as j,radiusClasses as w,readOnlyFilterClasses as y,transitionClasses as k}from"../../internal/styles.js";const P={xs:`${p.xs} ${h.xs} ${w.xs} ${v.xs}`,sm:`${p.sm} ${h.sm} ${w.sm} ${v.sm}`,md:`${p.md} ${h.md} ${w.md} ${v.md}`,lg:`${p.lg} ${h.lg} ${w.lg} ${v.lg}`,xl:`${p.xl} ${h.xl} ${w.xl} ${v.xl}`},B={xs:`${g.xs} px-0`,sm:`${g.sm} px-0`,md:`${g.md} px-0`,lg:`${g.lg} px-0`,xl:`${g.xl} px-0`},z=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",k,b,$].join(" "),C={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[u,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-transparent"},D={solid:/* @__PURE__ */["hover:brightness-105","hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95","active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) active:bg-(--p-soft-hover)"},W={solid:/* @__PURE__ */["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`shadow-none ${y}`].join(" "),glass:/* @__PURE__ */[u,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${y}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${y}`};export const PlButton=/* @__PURE__ */r.forwardRef(function PlButton({variant:p,size:g,color:v,density:b,elevation:x,startIcon:h,endIcon:u,loading:$=!1,readOnly:w=!1,fullWidth:y=!1,disabled:k,focusableWhenDisabled:I=!1,render:M,className:N,style:F,children:O,onClick:R,onPointerMove:q,...A},E){const G=a(),H=r.useContext(i),J=p??H?.variant??"solid",K=g??H?.size??G.size??"md",L=v??H?.color??G.color??"primary",Q=b??H?.density??G.density??"default",S=x??H?.elevation??1,T=k??H?.disabled??!1,U=!f(O),V=$||w,X=!T&&!V,Y=[z,P[K],U?B[K]:j[Q][K],T?m[J]:w?W[J]:C[J],X?`${D[J]} cursor-pointer`:"",X?"plass-glow":"",$?"cursor-progress":"",y?"w-full":"",N??""].filter(Boolean).join(" ");return t({render:M??s(l,{disabled:T,focusableWhenDisabled:I}),ref:E,props:{className:Y,style:{...c(L,S,J),...F},"aria-disabled":V||T&&I||void 0,"aria-busy":$||void 0,"data-loading":$||void 0,"data-readonly":w||void 0,onClick:s=>{if(V)return s.preventDefault(),void s.stopPropagation();R?.(s)},onPointerMove:s=>{n(s),q?.(s)},...A,children:o(e,{children:[$?s(d,{}):h,O,u]})}})});
+"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Button as l}from"@base-ui/react/button";import{useRender as t}from"@base-ui/react/use-render";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{glowPointerMove as n}from"../../internal/glow.js";import{Spinner as d}from"../../internal/icons.js";import{controlHeightClasses as p,controlSlots as c,controlSquareClasses as g,controlTextClasses as v,disabledClasses as m,focusRingClasses as b,forcedEdgeClasses as x,gapClasses as h,glassClasses as u,hasContent as f,iconClasses as $,paddingXClasses as j,radiusClasses as w,readOnlyFilterClasses as y,transitionClasses as k}from"../../internal/styles.js";const P={xs:`${p.xs} ${h.xs} ${w.xs} ${v.xs}`,sm:`${p.sm} ${h.sm} ${w.sm} ${v.sm}`,md:`${p.md} ${h.md} ${w.md} ${v.md}`,lg:`${p.lg} ${h.lg} ${w.lg} ${v.lg}`,xl:`${p.xl} ${h.xl} ${w.xl} ${v.xl}`},B={xs:`${g.xs} px-0`,sm:`${g.sm} px-0`,md:`${g.md} px-0`,lg:`${g.lg} px-0`,xl:`${g.xl} px-0`},z=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",k,b,$].join(" "),C={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[u,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-transparent"},D={solid:/* @__PURE__ */["hover:brightness-105","hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95","active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) active:bg-(--p-soft-hover)"},W={solid:/* @__PURE__ */["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`shadow-none ${y}`].join(" "),glass:/* @__PURE__ */[u,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${y}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${y}`};export const PlButton=/* @__PURE__ */r.forwardRef(function PlButton({variant:p,size:g,color:v,density:b,elevation:x,startIcon:h,endIcon:u,loading:$=!1,readOnly:w=!1,fullWidth:y=!1,disabled:k,focusableWhenDisabled:I=!1,render:M,className:N,style:F,children:O,onClick:R,onPointerMove:q,...A},E){const G=a(),H=r.useContext(i),J=p??H?.variant??"solid",K=g??H?.size??G.size??"md",L=v??H?.color??G.color??"primary",Q=b??H?.density??G.density??"default",S=x??H?.elevation??1,T=k??H?.disabled??!1,U=!f(O),V=$||w,X=!T&&!V,Y=[z,P[K],U?B[K]:j[Q][K],T?m[J]:w?W[J]:C[J],X?`${D[J]} cursor-pointer`:"",X?"plass-glow":"",$?"cursor-progress":"",y?"w-full":"",N??""].filter(Boolean).join(" ");return t({render:M??s(l,{disabled:T,focusableWhenDisabled:I}),ref:E,props:{className:Y,style:{...c(L,S,J),...F},"aria-disabled":V||T&&I||void 0,"aria-busy":$||void 0,"data-loading":$||void 0,"data-readonly":w||void 0,onClick:s=>{if(V)return s.preventDefault(),void s.stopPropagation();R?.(s)},onPointerMove:n(X,q),...A,children:o(e,{children:[$?s(d,{}):h,O,u]})}})});

package/dist/components/checkbox/PlCheckbox.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Checkbox as o}from"@base-ui/react/checkbox";import{Field as s}from"@base-ui/react/field";import{controlSlots as i,cx as n,focusRingClasses as l,forcedCheckedClasses as c,forcedDisabledCheckedClasses as d,glassClasses as h,hasContent as p,metaTextClasses as m,tickRadiusClasses as f,tickRowTextClasses as u,tickSizeClasses as k,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,l].join(" "),x=/* @__PURE__ */["forced-colors:data-[indeterminate]:[background-color:Highlight]","forced-colors:data-[indeterminate]:[border-color:Highlight]","forced-colors:data-[indeterminate]:[color:HighlightText]"].join(" "),v=/* @__PURE__ */[h,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",c,x].join(" "),j=/* @__PURE__ */[h,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",c,x].join(" "),N=/* @__PURE__ */[h,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)",d,"forced-colors:data-[indeterminate]:[background-color:GrayText]","forced-colors:data-[indeterminate]:[color:Canvas]"].join(" "),y=/* @__PURE__ */["flex size-[70%] items-center justify-center","[&_path]:[stroke-dasharray:1] [&_path]:[stroke-dashoffset:0]","[&_path]:[transition:stroke-dashoffset_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[&_path]:[transition-duration:0ms]","data-[unchecked]:[&_path]:[stroke-dashoffset:1]"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a,color:l,label:c,description:d,error:h,invalid:g,disabled:x=!1,readOnly:C=!1,className:M,classNames:_,style:w,...L},z){const B=t(),D=a??B.size??"md",H=l??B.color??"primary",R=p(h),O=g??R,P=O?"danger":H,T=n(b,k[D],f[D],x?N:C?j:v,_?.control);return r(s.Root,{disabled:x,invalid:O,className:["inline-flex flex-col gap-1 align-top",M??""].filter(Boolean).join(" "),style:{...i(P,0,"solid"),...w},children:[r("div",{className:`flex items-start gap-2 ${u[D]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:z,className:T,disabled:x,readOnly:C,...L,children:e(o.Indicator,{keepMounted:!0,className:y,children:L.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),c||d?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[c?e(s.Label,{className:n(x?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",_?.label),children:c}):null,d?e(s.Description,{className:n(m[D],"text-(--plass-muted-fg)",_?.description),children:d}):null]}):null]}),e(s.Error,R?{match:!0,className:n(m[D],"text-(--p-accent)",_?.error),children:h}:{className:n(m[D],"text-(--p-accent)",_?.error)})]})});
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{Checkbox as o}from"@base-ui/react/checkbox";import{Field as s}from"@base-ui/react/field";import{controlSlots as i,cx as n,focusRingClasses as l,forcedCheckedClasses as c,forcedDisabledCheckedClasses as d,glassClasses as h,hasContent as p,metaTextClasses as m,tickRadiusClasses as f,tickRowTextClasses as u,tickSizeClasses as k,transitionClasses as g}from"../../internal/styles.js";const b=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,l].join(" "),x=/* @__PURE__ */["forced-colors:data-[indeterminate]:[background-color:Highlight]","forced-colors:data-[indeterminate]:[border-color:Highlight]","forced-colors:data-[indeterminate]:[color:HighlightText]"].join(" "),v=/* @__PURE__ */[h,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",c,x].join(" "),j=/* @__PURE__ */[h,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",c,x].join(" "),N=/* @__PURE__ */[h,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[background-image:var(--p-fill)] data-[indeterminate]:text-(--p-on-solid)",d,"forced-colors:data-[indeterminate]:[background-color:GrayText]","forced-colors:data-[indeterminate]:[color:Canvas]"].join(" "),y=/* @__PURE__ */["flex size-[70%] items-center justify-center","[&_path]:[stroke-dasharray:1] [&_path]:[stroke-dashoffset:0]","[&_path]:[transition:stroke-dashoffset_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[&_path]:[transition-duration:0ms]","data-[unchecked]:[&_path]:[stroke-dashoffset:1]"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */a.forwardRef(function PlCheckbox({size:a,color:l,label:c,description:d,error:h,invalid:g,disabled:x=!1,readOnly:C=!1,className:M,classNames:_,style:w,...L},z){const B=t(),D=a??B.size??"md",H=l??B.color??"primary",R=p(h),O=g??R,P=O?"danger":H,T=n(b,k[D],f[D],x?N:C?j:v,_?.control);return r(s.Root,{disabled:x,invalid:O,className:["inline-flex flex-col gap-1 align-top",M??""].filter(Boolean).join(" "),style:{...i(P,0,"solid"),...w},children:[r("div",{className:`flex items-start gap-2 ${u[D]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:z,className:T,disabled:x,readOnly:C,...L,children:e(o.Indicator,{keepMounted:!0,className:y,children:L.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),c||d?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[c?e(s.Label,{className:n(x?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",_?.label),children:c}):null,d?e(s.Description,{className:n("m-0",m[D],"text-(--plass-muted-fg)",_?.description),children:d}):null]}):null]}),e(s.Error,R?{match:!0,className:n(m[D],"text-(--p-accent)",_?.error),children:h}:{className:n(m[D],"text-(--p-accent)",_?.error)})]})});

package/dist/components/chip/PlChip.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{CloseIcon as a}from"../../internal/icons.js";import{textOf as n}from"../../internal/text.js";import{chipRemoveClasses as i,controlHeightClasses as d,controlSlots as p,controlTextClasses as c,disabledClasses as m,focusRingClasses as g,forcedEdgeClasses as b,gapClasses as f,glassClasses as h,hasContent as u,iconClasses as v,paddingXClasses as x,radiusClasses as j,transitionClasses as y}from"../../internal/styles.js";const w={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},k={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)] ${b}`,glass:/* @__PURE__ */[h,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},N={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},$={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},C=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",y,v].join(" "),I=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",g].join(" ");export const PlChip=/* @__PURE__ */t.forwardRef(function PlChip({variant:g="glass",size:b,color:h,density:v,elevation:y=0,startIcon:z,endIcon:B,count:P,onDelete:D,deleteLabel:F,selected:L=!1,disabled:R=!1,className:q,style:A,children:E,onClick:G,...H},J){const K=o(),M=r(),O=n(E).trim(),Q=F??(O?M.removeItem(O):M.remove),S=b??K.size??"md",T=h??K.color??"primary",U=v??K.density??"default",V=Boolean(G)&&!R,W=t.useId(),X=t.useId(),Y=w[S],Z=x[U][Y],_=[C,d[Y],c[Y],f[Y],j[Y],R?m[g]:k[g],!R&&L?N[g]:"",V?$[g]:"",V?"ps-0":Z,D?"pe-1":V?"pe-0":"",q??""].filter(Boolean).join(" "),ee=l(s,{children:[z,u(E)?e("span",{id:X,className:"min-w-0 truncate leading-[normal]",children:E}):null,B,u(P)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===g?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:P}):null]});return l("span",{ref:J,className:_,style:{...p(T,y,g),...A},"aria-disabled":!(!R||V)||void 0,...H,children:[V?e("button",{type:"button","aria-pressed":L,className:`${I} ${f[Y]} ${Z}`,onClick:G,children:ee}):ee,D?e("button",{type:"button",id:W,"aria-label":Q,"aria-labelledby":void 0===F&&!O&&u(E)?`${W} ${X}`:void 0,disabled:R,className:i,onClick:D,children:e(a,{})}):null]})});
+"use client";import{jsx as e,Fragment as s,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{glowPointerMove as t}from"../../internal/glow.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{CloseIcon as a}from"../../internal/icons.js";import{textOf as i}from"../../internal/text.js";import{chipRemoveClasses as p,controlHeightClasses as d,controlSlots as c,controlTextClasses as m,disabledClasses as g,focusRingClasses as b,forcedEdgeClasses as f,gapClasses as h,glassClasses as v,hasContent as u,iconClasses as x,paddingXClasses as j,radiusClasses as w,transitionClasses as y}from"../../internal/styles.js";const k={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"lg"},$={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev)] ${f}`,glass:/* @__PURE__ */[v,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-(--p-soft)"},N={solid:"[box-shadow:var(--p-elev),var(--p-lift)]",glass:"bg-(--plass-glass-press) [border-color:var(--p-line-hover)]",ghost:"bg-(--p-soft-press)"},C={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},I=/* @__PURE__ */["relative inline-flex max-w-full shrink-0 items-center select-none","align-middle leading-none font-medium whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",y,x].join(" "),P=/* @__PURE__ */["flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch rounded-[inherit]",b].join(" ");export const PlChip=/* @__PURE__ */o.forwardRef(function PlChip({variant:b="glass",size:f,color:v,density:x,elevation:y=0,startIcon:z,endIcon:B,count:M,onDelete:D,deleteLabel:F,selected:L=!1,disabled:R=!1,className:q,style:A,children:E,onClick:G,onPointerMove:H,...J},K){const O=r(),Q=n(),S=i(E).trim(),T=F??(S?Q.removeItem(S):Q.remove),U=f??O.size??"md",V=v??O.color??"primary",W=x??O.density??"default",X=Boolean(G)&&!R,Y=o.useId(),Z=o.useId(),_=k[U],ee=j[W][_],se=[I,d[_],m[_],h[_],w[_],R?g[b]:$[b],!R&&L?N[b]:"",X?`plass-glow ${C[b]}`:"",X?"ps-0":ee,D?"pe-1":X?"pe-0":"",q??""].filter(Boolean).join(" "),le=l(s,{children:[z,u(E)?e("span",{id:Z,className:"min-w-0 truncate leading-[normal]",children:E}):null,B,u(M)?e("span",{className:["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full px-1.5 py-px","text-[0.85em] leading-none font-semibold tabular-nums","solid"===b?"bg-(--plass-glow-on-fill) text-(--p-on-solid)":"bg-(--p-soft-press) text-(--p-accent)"].join(" "),children:M}):null]});return l("span",{ref:K,className:se,style:{...c(V,y,b),...A},"aria-disabled":!(!R||X)||void 0,onPointerMove:t(X,H),...J,children:[X?e("button",{type:"button","aria-pressed":L,className:`${P} ${h[_]} ${ee}`,onClick:G,children:le}):le,D?e("button",{type:"button",id:Y,"aria-label":T,"aria-labelledby":void 0===F&&!S&&u(E)?`${Y} ${Z}`:void 0,disabled:R,className:p,onClick:D,children:e(a,{})}):null]})});

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PlColorFormat } from '../../internal/color.js';
-import type { PlassElevation, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
 export type { PlColorFormat } from '../../internal/color.js';
 /** The names for the parts of the picker that have no text on them. */
 export interface PlColorPickerLabels {
@@ -22,6 +22,17 @@ 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'> {
+    /**
+     * The four parts of a labelled field, as every other one names them: the
+     * `label`, the `control`, the `description` and the `error`. `className`
+     * itself goes on the stack that holds all four, which is what a caller
+     * positions and sizes.
+     *
+     * `control` is the trigger the panel hangs off, or — with `inline` — the panel
+     * itself, because inline there is no trigger and the panel is what a reader
+     * acts on.
+     */
+    classNames?: PlassFieldClassNames;
     /** The colour, as a CSS string. Pass it to drive the picker yourself. */
     value?: string;
     /** Where an uncontrolled picker starts. @default '#1a58d1' */
@@ -41,8 +52,14 @@ export interface PlColorPickerProps extends PlassStyleProps, Omit<React.Componen
     inline?: boolean;
     /** The field under the panel that the value can be typed into. @default true */
     editable?: boolean;
-    /** Label above the control. */
+    /** The name of what the control holds. */
     label?: React.ReactNode;
+    /**
+     * Where the `label` goes — above the trigger, or in its top edge.
+     * Falls back to the nearest `PlassProvider`, then to `top`.
+     * @default 'top'
+     */
+    labelPlacement?: PlassFieldLabelPlacement;
     /** Helper text below it. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the control invalid. */

package/dist/components/color-picker/PlColorPicker.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{defaultPickerLabels as s}from"../../internal/calendar.js";import{PickerShell as o}from"../../internal/picker.js";import{useFieldsetDisabled as t,useFormReport as n}from"../../internal/form.js";import{CheckIcon as i}from"../../internal/icons.js";import{checkerBackground as d,clamp as c,cssColor as h,defaultSwatches as u,formatColor as f,parseColor as p,readableInk as m}from"../../internal/color.js";import{controlTextClasses as v,cx as b,focusRingClasses as g,metaTextClasses as x,radiusClasses as y,stackGapClasses as w,surfaceSlots as C}from"../../internal/styles.js";export const defaultColorPickerLabels={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"Pick a colour"};const k={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},N={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},j={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},P={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},S={xs:10,sm:12,md:14,lg:16,xl:18},_=/* @__PURE__ */["relative overflow-hidden border","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)]"].join(" "),O=/* @__PURE__ */["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function fractionsOf(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:c((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:c((e.clientY-a.top)/a.height,0,1)}}function arrowStep(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:s,text:o,onTextChange:t,withAlpha:n,swatches:u,editable:v,size:w,inert:C,invalid:$,labels:z}){const I=S[w],T=-I/2,D=h({h:r.h,s:100,v:100}),M=h(r),A=u?u.flatMap(e=>{const a=p(e);return a?[{swatch:e,parsed:a}]:[]}):[],track=e=>({onPointerDown:a=>{C||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!C&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),railProps=(e,a,r,l,s)=>({role:"slider",tabIndex:C?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":C||void 0,"aria-invalid":$||void 0,onKeyDown:e=>{if(C)return;if("Home"===e.key||"End"===e.key)return e.preventDefault(),void s("Home"===e.key?0:1);const a=arrowStep(e);a&&(e.preventDefault(),l(a.x+a.y))}});return a("div",{className:b("flex flex-col",k[w],P[w]),children:[e("div",{...track(e=>{const{x:a,y:o}=fractionsOf(e);s({hsv:{h:r.h,s:100*a,v:100*(1-o)},alpha:l})}),role:"slider",tabIndex:C?-1:0,"aria-label":z.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":C||void 0,"aria-invalid":$||void 0,onKeyDown:e=>{const a=arrowStep(e);!C&&a&&(e.preventDefault(),s({hsv:{h:r.h,s:c(r.s+a.x,0,100),v:c(r.v+a.y,0,100)},alpha:l}))},className:b(_,N[w],y[w],g,C?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:D,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:O,style:{width:I,height:I,left:`${r.s}%`,top:100-r.v+"%",marginLeft:T,marginTop:T,backgroundColor:M}})}),e("div",{...track(e=>s({hsv:{...r,h:360*fractionsOf(e).x},alpha:l})),...railProps(z.hue,r.h,360,e=>s({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l}),e=>s({hsv:{...r,h:360*e},alpha:l})),className:b(_,j[w],"rounded-full",g,C?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:O,style:{width:I,height:I,left:r.h/360*100+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:D}})}),n?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(z.alpha,100*l,100,e=>s({hsv:r,alpha:c(l+e/100,0,1)}),e=>s({hsv:r,alpha:e})),className:b(_,j[w],"rounded-full",g,C?"cursor-default":"cursor-pointer touch-none"),style:d,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${h(r,0)}, ${M})`}}),e("span",{className:O,style:{width:I,height:I,left:100*l+"%",top:"50%",marginLeft:T,marginTop:T,backgroundColor:h(r,l)}})]}):null,v?a("div",{className:b("flex items-center",P[w]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:I+6,height:I+6,...d},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:h(r,l)}})}),e("input",{type:"text",value:o,readOnly:C,spellCheck:!1,autoComplete:"off","aria-label":z.value,onChange:e=>t(e.target.value),className:b("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",y.xs,x[w],"text-(--plass-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]")})]}):null,A.length>0?e("div",{role:"group","aria-label":z.swatches,className:"grid grid-cols-8 gap-1",children:A.map(({swatch:a,parsed:o})=>{const t=f(o.hsv,o.alpha,"hex")===f(r,l,"hex");return e("button",{type:"button",disabled:C,"aria-label":a,"aria-pressed":t,onClick:()=>s(o),className:b("flex aspect-square items-center justify-center rounded-full border","[border-color:var(--plass-border)]","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",g,"[outline:none]",C?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:h(o.hsv,o.alpha)},children:t?e("span",{style:{color:m(o.hsv)},children:e(i,{})}):null},a)})}):null]})}function widthSamples(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const $={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:i,defaultValue:c="#1a58d1",onValueChange:m,format:g="hex",alpha:y=!1,swatches:k=u,inline:N=!1,editable:j=!0,label:P,description:S,error:_,invalid:O,required:z=!1,disabled:I=!1,readOnly:T=!1,fullWidth:D=!1,clearable:M=!1,name:A,open:L,defaultOpen:V=!1,onOpenChange:q,labels:B,variant:H="glass",size:K,color:R,density:E,elevation:W=0,className:U,style:X,...Y},F){const G=l(),J=K??G.size??"md",Q=R??G.color??"primary",Z=E??G.density??"default",ee=r.useMemo(()=>({...defaultColorPickerLabels,...B}),[B]),[ae,re]=r.useState(c),le=i??ae,[se,oe]=r.useState(V),te=L??se,[ne,ie]=r.useState(()=>p(le)??{hsv:$,alpha:1}),[de,ce]=r.useState(()=>le),he=f(ne.hsv,y?ne.alpha:1,g),ue=""===le;r.useEffect(()=>{const e=p(le);e?f(e.hsv,y?e.alpha:1,g)!==he&&(ce(le),ie(e)):ce(le)},[le,he,y,g]);const commit=(e,a)=>{ie(e);const r=f(e.hsv,y?e.alpha:1,g);ce(a??r),void 0===i&&re(r),m?.(r)},[fe,pe]=r.useState(null),me=r.useCallback(e=>{pe(e),"function"==typeof F?F(e):F&&(F.current=e)},[F]),ve=t(fe),be=I||ve,ge=be||T,xe=O??Boolean(_),ye=r.useId(),we=e(ColorPanel,{hsv:ne.hsv,alphaValue:ne.alpha,onChange:commit,text:de,onTextChange:e=>{ce(e);const a=p(e);a&&commit(a,e)},withAlpha:y,swatches:k,editable:j,size:J,inert:ge,invalid:N&&xe,labels:ee});n(A,()=>ue?"":he,N&&!be);const Ce=A?e("input",{type:"hidden",name:A,value:ue?"":he,disabled:be}):null;if(N){const r=xe?"danger":Q,l=[S?`${ye}-description`:null,_?`${ye}-error`:null].filter(Boolean).join(" ")||void 0;return a("div",{ref:me,role:"group","aria-labelledby":P?`${ye}-label`:void 0,"aria-describedby":l,className:b("flex flex-col",w[J],U),style:{...C(r,W),...X},...Y,children:[P?e("span",{id:`${ye}-label`,className:b(x[J],"font-semibold",be?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:P}):null,we,S?e("span",{id:`${ye}-description`,className:b(x[J],"text-(--plass-muted-fg)"),children:S}):null,_?e("span",{id:`${ye}-error`,className:b(x[J],"text-(--p-accent)"),children:_}):null,Ce]})}return e("div",{ref:F,className:D?"w-full":"inline-block",...Y,children:e(o,{variant:H,size:J,color:Q,density:Z,elevation:W,style:X,label:P,description:S,error:_,invalid:O,required:z,disabled:I,readOnly:T,fullWidth:D,className:U,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:d,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ue?"transparent":h(ne.hsv,y?ne.alpha:1)}})}),display:ue?ee.empty:he,samples:widthSamples(g,y),empty:ue,clearable:M,onClear:()=>{void 0===i&&re(""),ce(""),m?.("")},open:te,onOpenChange:e=>{void 0===L&&oe(e),q?.(e)},labels:{...s,clear:ee.clear},name:A,formValue:ue?"":he,children:e("div",{className:v[J],children:we})})})});
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{defaultPickerLabels as s}from"../../internal/calendar.js";import{PickerShell as o}from"../../internal/picker.js";import{useFieldsetDisabled as t,useFormReport as n}from"../../internal/form.js";import{CheckIcon as i}from"../../internal/icons.js";import{checkerBackground as d,clamp as c,cssColor as h,defaultSwatches as u,formatColor as f,parseColor as p,readableInk as m}from"../../internal/color.js";import{controlTextClasses as v,cx as b,focusRingClasses as g,metaTextClasses as x,radiusClasses as y,stackGapClasses as w,surfaceSlots as C}from"../../internal/styles.js";export const defaultColorPickerLabels={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"Pick a colour"};const k={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},N={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},P={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},j={xs:"gap-1.5",sm:"gap-2",md:"gap-2.5",lg:"gap-3",xl:"gap-3.5"},S={xs:10,sm:12,md:14,lg:16,xl:18},_=/* @__PURE__ */["relative overflow-hidden border","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)]"].join(" "),O=/* @__PURE__ */["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.4)]"].join(" ");function fractionsOf(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:c((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:c((e.clientY-a.top)/a.height,0,1)}}function arrowStep(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function ColorPanel({hsv:r,alphaValue:l,onChange:s,text:o,onTextChange:t,withAlpha:n,swatches:u,editable:v,size:w,inert:C,invalid:$,labels:z,className:I}){const T=S[w],D=-T/2,M=h({h:r.h,s:100,v:100}),A=h(r),L=u?u.flatMap(e=>{const a=p(e);return a?[{swatch:e,parsed:a}]:[]}):[],track=e=>({onPointerDown:a=>{C||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!C&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),railProps=(e,a,r,l,s)=>({role:"slider",tabIndex:C?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":C||void 0,"aria-invalid":$||void 0,onKeyDown:e=>{if(C)return;if("Home"===e.key||"End"===e.key)return e.preventDefault(),void s("Home"===e.key?0:1);const a=arrowStep(e);a&&(e.preventDefault(),l(a.x+a.y))}});return a("div",{className:b("flex flex-col",k[w],j[w],I),children:[e("div",{...track(e=>{const{x:a,y:o}=fractionsOf(e);s({hsv:{h:r.h,s:100*a,v:100*(1-o)},alpha:l})}),role:"slider",tabIndex:C?-1:0,"aria-label":z.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":C||void 0,"aria-invalid":$||void 0,onKeyDown:e=>{const a=arrowStep(e);!C&&a&&(e.preventDefault(),s({hsv:{h:r.h,s:c(r.s+a.x,0,100),v:c(r.v+a.y,0,100)},alpha:l}))},className:b(_,N[w],y[w],g,C?"cursor-default":"cursor-crosshair touch-none"),style:{backgroundColor:M,backgroundImage:"linear-gradient(to top, #000000, rgba(0, 0, 0, 0)), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0))"},children:e("span",{className:O,style:{width:T,height:T,left:`${r.s}%`,top:100-r.v+"%",marginLeft:D,marginTop:D,backgroundColor:A}})}),e("div",{...track(e=>s({hsv:{...r,h:360*fractionsOf(e).x},alpha:l})),...railProps(z.hue,r.h,360,e=>s({hsv:{...r,h:(r.h+2*e+360)%360},alpha:l}),e=>s({hsv:{...r,h:360*e},alpha:l})),className:b(_,P[w],"rounded-full",g,C?"cursor-default":"cursor-pointer touch-none"),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:O,style:{width:T,height:T,left:r.h/360*100+"%",top:"50%",marginLeft:D,marginTop:D,backgroundColor:M}})}),n?a("div",{...track(e=>s({hsv:r,alpha:fractionsOf(e).x})),...railProps(z.alpha,100*l,100,e=>s({hsv:r,alpha:c(l+e/100,0,1)}),e=>s({hsv:r,alpha:e})),className:b(_,P[w],"rounded-full",g,C?"cursor-default":"cursor-pointer touch-none"),style:d,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${h(r,0)}, ${A})`}}),e("span",{className:O,style:{width:T,height:T,left:100*l+"%",top:"50%",marginLeft:D,marginTop:D,backgroundColor:h(r,l)}})]}):null,v?a("div",{className:b("flex items-center",j[w]),children:[e("span",{"aria-hidden":"true",className:"shrink-0 rounded-full border [border-color:var(--plass-border)]",style:{width:T+6,height:T+6,...d},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:h(r,l)}})}),e("input",{type:"text",value:o,readOnly:C,spellCheck:!1,autoComplete:"off","aria-label":z.value,onChange:e=>t(e.target.value),className:b("min-w-0 flex-1 border bg-transparent px-1.5 py-1 font-mono lowercase","[border-color:var(--plass-border)]",y.xs,x[w],"text-(--plass-fg)","[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]")})]}):null,L.length>0?e("div",{role:"group","aria-label":z.swatches,className:"grid grid-cols-8 gap-1",children:L.map(({swatch:a,parsed:o})=>{const t=f(o.hsv,o.alpha,"hex")===f(r,l,"hex");return e("button",{type:"button",disabled:C,"aria-label":a,"aria-pressed":t,onClick:()=>s(o),className:b("flex aspect-square items-center justify-center rounded-full border","[border-color:var(--plass-border)]","[transition:box-shadow_var(--plass-duration)_var(--plass-ease)]",g,"[outline:none]",C?"cursor-default":"cursor-pointer hover:[box-shadow:var(--plass-shadow-1)]","[&_svg]:size-3"),style:{backgroundColor:h(o.hsv,o.alpha)},children:t?e("span",{style:{color:m(o.hsv)},children:e(i,{})}):null},a)})}):null]})}function widthSamples(e,a){return"hex"===e?[a?"#ffffffff":"#ffffff"]:"rgb"===e?[a?"rgba(255, 255, 255, 0.55)":"rgb(255, 255, 255)"]:[a?"hsla(360, 100%, 100%, 0.55)":"hsl(360, 100%, 100%)"]}const $={h:217,s:87,v:82};export const PlColorPicker=/* @__PURE__ */r.forwardRef(function PlColorPicker({value:i,defaultValue:c="#1a58d1",onValueChange:m,format:g="hex",alpha:y=!1,swatches:k=u,inline:N=!1,editable:P=!0,label:j,labelPlacement:S,description:_,error:O,invalid:z,required:I=!1,disabled:T=!1,readOnly:D=!1,fullWidth:M=!1,clearable:A=!1,name:L,open:V,defaultOpen:q=!1,onOpenChange:B,labels:H,variant:K="glass",size:R,color:E,density:W,elevation:U=0,className:X,classNames:Y,style:F,...G},J){const Q=l(),Z=R??Q.size??"md",ee=E??Q.color??"primary",ae=W??Q.density??"default",re=r.useMemo(()=>({...defaultColorPickerLabels,...H}),[H]),[le,se]=r.useState(c),oe=i??le,[te,ne]=r.useState(q),ie=V??te,[de,ce]=r.useState(()=>p(oe)??{hsv:$,alpha:1}),[he,ue]=r.useState(()=>oe),fe=f(de.hsv,y?de.alpha:1,g),pe=""===oe;r.useEffect(()=>{const e=p(oe);e?f(e.hsv,y?e.alpha:1,g)!==fe&&(ue(oe),ce(e)):ue(oe)},[oe,fe,y,g]);const commit=(e,a)=>{ce(e);const r=f(e.hsv,y?e.alpha:1,g);ue(a??r),void 0===i&&se(r),m?.(r)},[me,ve]=r.useState(null),be=r.useCallback(e=>{ve(e),"function"==typeof J?J(e):J&&(J.current=e)},[J]),ge=t(me),xe=T||ge,ye=xe||D,we=z??Boolean(O),Ce=r.useId(),ke=e(ColorPanel,{hsv:de.hsv,alphaValue:de.alpha,onChange:commit,text:he,onTextChange:e=>{ue(e);const a=p(e);a&&commit(a,e)},withAlpha:y,swatches:k,editable:P,size:Z,inert:ye,invalid:N&&we,labels:re,className:N?Y?.control:void 0});n(L,()=>pe?"":fe,N&&!xe);const Ne=L?e("input",{type:"hidden",name:L,value:pe?"":fe,disabled:xe}):null;if(N){const r=we?"danger":ee,l=[_?`${Ce}-description`:null,O?`${Ce}-error`:null].filter(Boolean).join(" ")||void 0;return a("div",{ref:be,role:"group","aria-labelledby":j?`${Ce}-label`:void 0,"aria-describedby":l,className:b("flex flex-col",w[Z],X),style:{...C(r,U),...F},...G,children:[j?e("span",{id:`${Ce}-label`,className:b(x[Z],"font-semibold",xe?"text-(--plass-muted-fg)":"text-(--plass-fg)",Y?.label),children:j}):null,ke,_?e("span",{id:`${Ce}-description`,className:b(x[Z],"text-(--plass-muted-fg)",Y?.description),children:_}):null,O?e("span",{id:`${Ce}-error`,className:b(x[Z],"text-(--p-accent)",Y?.error),children:O}):null,Ne]})}return e("div",{ref:J,className:M?"w-full":"inline-block",...G,children:e(o,{variant:K,size:Z,color:ee,density:ae,elevation:U,style:F,label:j,labelPlacement:S,description:_,error:O,invalid:z,required:I,disabled:T,readOnly:D,fullWidth:M,className:X,classNames:Y,startIcon:e("span",{"aria-hidden":"true",className:"block size-[1.15em] shrink-0 rounded-full border [border-color:var(--plass-border)]",style:d,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:pe?"transparent":h(de.hsv,y?de.alpha:1)}})}),display:pe?re.empty:fe,samples:widthSamples(g,y),empty:pe,clearable:A,onClear:()=>{void 0===i&&se(""),ue(""),m?.("")},open:ie,onOpenChange:e=>{void 0===V&&ne(e),B?.(e)},labels:{...s,clear:re.clear},name:L,formValue:pe?"":fe,children:e("div",{className:v[Z],children:ke})})})});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
+import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
 /**
  * What a combobox's value may be — the same two types a PlSelect submits, and
  * for the same reason: a form control's value is what a form sends, and every
@@ -92,8 +92,14 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
      * @default 0
      */
     elevation?: PlassElevation;
-    /** Label above the field, wired to it by Base UI's Field. */
+    /** The name of what the field holds, wired to it by Base UI's Field. */
     label?: React.ReactNode;
+    /**
+     * Where the `label` goes — above the field, or in its top edge.
+     * Falls back to the nearest `PlassProvider`, then to `top`.
+     * @default 'top'
+     */
+    labelPlacement?: PlassFieldLabelPlacement;
     /** Helper text below the field. */
     description?: React.ReactNode;
     /** Error message below. Its presence also turns the combobox invalid. */
@@ -148,5 +154,5 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
  * navigation across both the list and the chips, and the hidden input that makes
  * the whole thing submit with a form.
  */
-export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage: emptyMessageProp, limit, placeholder, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel: removeLabelProp, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
+export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage: emptyMessageProp, limit, placeholder, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel: removeLabelProp, inputRef, id, className, hotKeys, classNames, style, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
 export {};