plass-ui 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (253) hide show
  1. package/CHANGELOG.md +372 -0
  2. package/README.md +18 -16
  3. package/dist/components/accordion/PlAccordion.d.ts +1 -1
  4. package/dist/components/alert/PlAlert.js +1 -1
  5. package/dist/components/anchor/PlAnchor.d.ts +14 -1
  6. package/dist/components/anchor/PlAnchor.js +1 -1
  7. package/dist/components/animate-appear/PlAnimateAppear.js +1 -1
  8. package/dist/components/animate-blink/PlAnimateBlink.js +1 -1
  9. package/dist/components/animate-counter/PlAnimateCounter.js +1 -1
  10. package/dist/components/animate-fade/PlAnimateFade.js +1 -1
  11. package/dist/components/animate-float/PlAnimateFloat.js +1 -1
  12. package/dist/components/animate-grow/PlAnimateGrow.js +1 -1
  13. package/dist/components/animate-headline/PlAnimateHeadline.js +1 -1
  14. package/dist/components/animate-lighting/PlAnimateLighting.js +1 -1
  15. package/dist/components/animate-marquee/PlAnimateMarquee.d.ts +13 -4
  16. package/dist/components/animate-marquee/PlAnimateMarquee.js +1 -1
  17. package/dist/components/animate-reveal/PlAnimateReveal.js +1 -1
  18. package/dist/components/animate-rotate/PlAnimateRotate.js +1 -1
  19. package/dist/components/animate-scramble/PlAnimateScramble.js +1 -1
  20. package/dist/components/animate-shake/PlAnimateShake.js +1 -1
  21. package/dist/components/animate-slide/PlAnimateSlide.js +1 -1
  22. package/dist/components/animate-split/PlAnimateSplit.d.ts +7 -4
  23. package/dist/components/animate-split/PlAnimateSplit.js +1 -1
  24. package/dist/components/animate-typing/PlAnimateTyping.d.ts +3 -2
  25. package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
  26. package/dist/components/animate-zoom/PlAnimateZoom.js +1 -1
  27. package/dist/components/app-logo/PlAppLogo.js +1 -1
  28. package/dist/components/area-chart/PlAreaChart.d.ts +1 -1
  29. package/dist/components/area-chart/PlAreaChart.js +1 -1
  30. package/dist/components/aspect-ratio/PlAspectRatio.d.ts +2 -1
  31. package/dist/components/aspect-ratio/PlAspectRatio.js +1 -1
  32. package/dist/components/avatar/PlAvatar.js +1 -1
  33. package/dist/components/back-top/PlBackTop.d.ts +2 -1
  34. package/dist/components/back-top/PlBackTop.js +1 -1
  35. package/dist/components/badge/PlBadge.js +1 -1
  36. package/dist/components/bar-chart/PlBarChart.d.ts +1 -1
  37. package/dist/components/bar-chart/PlBarChart.js +1 -1
  38. package/dist/components/bottom-navigation/PlBottomNavigation.d.ts +3 -0
  39. package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
  40. package/dist/components/button/PlButton.d.ts +8 -0
  41. package/dist/components/button/PlButton.js +1 -1
  42. package/dist/components/calendar/PlCalendar.js +1 -1
  43. package/dist/components/card/PlCard.js +1 -1
  44. package/dist/components/carousel/PlCarousel.d.ts +1 -1
  45. package/dist/components/carousel/PlCarousel.js +1 -1
  46. package/dist/components/chat-bubble/PlChatBubble.d.ts +4 -1
  47. package/dist/components/chat-bubble/PlChatBubble.js +1 -1
  48. package/dist/components/checkbox/PlCheckbox.js +1 -1
  49. package/dist/components/chip/PlChip.d.ts +6 -2
  50. package/dist/components/chip/PlChip.js +1 -1
  51. package/dist/components/code-block/PlCodeBlock.d.ts +19 -2
  52. package/dist/components/code-block/PlCodeBlock.js +1 -1
  53. package/dist/components/color-picker/PlColorPicker.js +1 -1
  54. package/dist/components/combobox/PlCombobox.d.ts +6 -5
  55. package/dist/components/combobox/PlCombobox.js +1 -1
  56. package/dist/components/command-palette/PlCommandPalette.d.ts +6 -2
  57. package/dist/components/command-palette/PlCommandPalette.js +1 -1
  58. package/dist/components/confirm/PlConfirmProvider.js +1 -1
  59. package/dist/components/container/PlContainer.js +1 -1
  60. package/dist/components/data-table/PlDataTable.d.ts +20 -6
  61. package/dist/components/data-table/PlDataTable.js +1 -1
  62. package/dist/components/date-picker/PlDatePicker.js +1 -1
  63. package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
  64. package/dist/components/date-time-picker/PlDateTimePicker.js +1 -1
  65. package/dist/components/drawer/PlDrawer.js +1 -1
  66. package/dist/components/file-picker/PlFilePicker.d.ts +4 -1
  67. package/dist/components/file-picker/PlFilePicker.js +1 -1
  68. package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts +3 -0
  69. package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
  70. package/dist/components/form/PlForm.js +1 -1
  71. package/dist/components/gallery/PlGallery.d.ts +40 -2
  72. package/dist/components/gallery/PlGallery.js +1 -1
  73. package/dist/components/gallery/PlGalleryViewer.js +1 -1
  74. package/dist/components/gauge-chart/PlGaugeChart.js +1 -1
  75. package/dist/components/heatmap-chart/PlHeatmapChart.js +1 -1
  76. package/dist/components/highlight/PlHighlight.js +1 -1
  77. package/dist/components/hot-keys/PlHotKeys.js +1 -1
  78. package/dist/components/hover-card/PlHoverCard.d.ts +5 -3
  79. package/dist/components/hover-card/PlHoverCard.js +1 -1
  80. package/dist/components/how-to-steps/PlHowToSteps.js +1 -1
  81. package/dist/components/image/PlImage.d.ts +195 -8
  82. package/dist/components/image/PlImage.js +1 -1
  83. package/dist/components/image/PlImagePreview.d.ts +58 -0
  84. package/dist/components/image/PlImagePreview.js +1 -0
  85. package/dist/components/image/index.d.ts +1 -1
  86. package/dist/components/menu/PlMenu.d.ts +14 -5
  87. package/dist/components/menu/PlMenu.js +1 -1
  88. package/dist/components/meter/PlMeter.js +1 -1
  89. package/dist/components/navigation-menu/PlNavigationMenu.d.ts +7 -1
  90. package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
  91. package/dist/components/otp-field/PlOtpField.d.ts +6 -0
  92. package/dist/components/otp-field/PlOtpField.js +1 -1
  93. package/dist/components/page-layout/PlPageLayout.js +1 -1
  94. package/dist/components/pagination/PlPagination.d.ts +12 -9
  95. package/dist/components/pagination/PlPagination.js +1 -1
  96. package/dist/components/panes/PlPanes.d.ts +5 -0
  97. package/dist/components/panes/PlPanes.js +1 -1
  98. package/dist/components/pie-chart/PlPieChart.js +1 -1
  99. package/dist/components/pill/PlPill.js +1 -1
  100. package/dist/components/popover/PlPopover.d.ts +5 -5
  101. package/dist/components/popover/PlPopover.js +1 -1
  102. package/dist/components/progress-box/PlProgressBox.js +1 -1
  103. package/dist/components/progress-circular/PlProgressCircular.js +1 -1
  104. package/dist/components/progress-linear/PlProgressLinear.js +1 -1
  105. package/dist/components/radio-group/PlRadioGroup.js +1 -1
  106. package/dist/components/rating/PlRating.d.ts +1 -1
  107. package/dist/components/rating/PlRating.js +1 -1
  108. package/dist/components/scatter-chart/PlScatterChart.js +1 -1
  109. package/dist/components/scroll-area/PlScrollArea.js +1 -1
  110. package/dist/components/scroll-zone/PlScrollZone.d.ts +19 -6
  111. package/dist/components/scroll-zone/PlScrollZone.js +1 -1
  112. package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
  113. package/dist/components/select/PlSelect.js +1 -1
  114. package/dist/components/show/PlShow.d.ts +16 -0
  115. package/dist/components/show/PlShow.js +1 -1
  116. package/dist/components/sidebar/PlSidebar.js +1 -1
  117. package/dist/components/sidebar/PlSidebarTrigger.js +1 -1
  118. package/dist/components/skeleton/PlSkeleton.js +1 -1
  119. package/dist/components/slider/PlSlider.d.ts +13 -1
  120. package/dist/components/slider/PlSlider.js +1 -1
  121. package/dist/components/sparkline/PlSparkline.js +1 -1
  122. package/dist/components/spoiler/PlSpoiler.d.ts +15 -8
  123. package/dist/components/spoiler/PlSpoiler.js +1 -1
  124. package/dist/components/stat/PlStat.d.ts +4 -0
  125. package/dist/components/stat/PlStat.js +1 -1
  126. package/dist/components/stepper/PlStepper.d.ts +1 -1
  127. package/dist/components/stepper/PlStepper.js +1 -1
  128. package/dist/components/switch/PlSwitch.js +1 -1
  129. package/dist/components/table/PlTable.d.ts +5 -5
  130. package/dist/components/tabs/PlTabs.d.ts +26 -1
  131. package/dist/components/tabs/PlTabs.js +1 -1
  132. package/dist/components/text-link/PlTextLink.js +1 -1
  133. package/dist/components/time-picker/PlTimePicker.js +1 -1
  134. package/dist/components/timeline/PlTimeline.js +1 -1
  135. package/dist/components/timeline-chart/PlTimelineChart.js +1 -1
  136. package/dist/components/toast/PlToast.js +1 -1
  137. package/dist/components/toggle/PlToggle.js +1 -1
  138. package/dist/components/tooltip/PlTooltip.js +1 -1
  139. package/dist/components/tour/PlTour.js +1 -1
  140. package/dist/components/transfer/PlTransfer.d.ts +10 -1
  141. package/dist/components/transfer/PlTransfer.js +1 -1
  142. package/dist/components/tree/PlTree.js +1 -1
  143. package/dist/components/tree-select/PlTreeSelect.js +1 -1
  144. package/dist/components/typography/PlTypography.js +1 -1
  145. package/dist/components/window-pane/PlWindowPane.js +1 -1
  146. package/dist/css/area-chart.css +1 -0
  147. package/dist/css/back-top.css +2 -0
  148. package/dist/css/bar-chart.css +1 -0
  149. package/dist/css/calendar.css +1 -0
  150. package/dist/css/carousel.css +2 -0
  151. package/dist/css/color-picker.css +1 -0
  152. package/dist/css/combobox.css +1 -0
  153. package/dist/css/command-palette.css +1 -0
  154. package/dist/css/confirm.css +2 -0
  155. package/dist/css/data-table.css +5 -0
  156. package/dist/css/date-picker.css +1 -0
  157. package/dist/css/date-range-picker.css +1 -0
  158. package/dist/css/date-time-picker.css +1 -0
  159. package/dist/css/floating-action-button.css +2 -0
  160. package/dist/css/gallery.css +5 -0
  161. package/dist/css/gauge-chart.css +1 -0
  162. package/dist/css/heatmap-chart.css +1 -0
  163. package/dist/css/icon-button.css +1 -0
  164. package/dist/css/image.css +2 -0
  165. package/dist/css/line-chart.css +1 -0
  166. package/dist/css/menubar.css +1 -0
  167. package/dist/css/pagination.css +1 -0
  168. package/dist/css/pie-chart.css +1 -0
  169. package/dist/css/popconfirm.css +2 -0
  170. package/dist/css/scatter-chart.css +1 -0
  171. package/dist/css/scroll-zone.css +2 -0
  172. package/dist/css/sidebar.css +3 -0
  173. package/dist/css/sparkline.css +1 -0
  174. package/dist/css/spoiler.css +1 -0
  175. package/dist/css/stat.css +1 -0
  176. package/dist/css/time-picker.css +1 -0
  177. package/dist/css/timeline-chart.css +1 -0
  178. package/dist/css/tour.css +1 -0
  179. package/dist/css/transfer.css +4 -0
  180. package/dist/css/tree-select.css +2 -0
  181. package/dist/hooks/usePlElementSize.d.ts +4 -1
  182. package/dist/hooks/usePlElementSize.js +1 -1
  183. package/dist/hooks/usePlHotKeys.d.ts +5 -1
  184. package/dist/hooks/usePlHotKeys.js +1 -1
  185. package/dist/hooks/usePlOnScreen.d.ts +4 -0
  186. package/dist/hooks/usePlOnScreen.js +1 -1
  187. package/dist/internal/animate.d.ts +30 -2
  188. package/dist/internal/animate.js +1 -1
  189. package/dist/internal/calendar.js +1 -1
  190. package/dist/internal/chart-frame.d.ts +5 -1
  191. package/dist/internal/chart-frame.js +1 -1
  192. package/dist/internal/chart-line.js +1 -1
  193. package/dist/internal/chart.d.ts +81 -3
  194. package/dist/internal/chart.js +1 -1
  195. package/dist/internal/color-scheme.js +1 -1
  196. package/dist/internal/data-table.d.ts +5 -4
  197. package/dist/internal/data-table.js +1 -1
  198. package/dist/internal/date.d.ts +10 -0
  199. package/dist/internal/date.js +1 -1
  200. package/dist/internal/drag.d.ts +16 -0
  201. package/dist/internal/drag.js +1 -1
  202. package/dist/internal/focusable.d.ts +8 -0
  203. package/dist/internal/focusable.js +1 -0
  204. package/dist/internal/form.d.ts +61 -0
  205. package/dist/internal/form.js +1 -0
  206. package/dist/internal/gallery.d.ts +60 -14
  207. package/dist/internal/gallery.js +1 -1
  208. package/dist/internal/glow.d.ts +17 -0
  209. package/dist/internal/glow.js +1 -0
  210. package/dist/internal/highlight.js +1 -1
  211. package/dist/internal/image.d.ts +94 -0
  212. package/dist/internal/image.js +1 -0
  213. package/dist/internal/inert.d.ts +19 -0
  214. package/dist/internal/inert.js +1 -0
  215. package/dist/internal/keys.d.ts +19 -0
  216. package/dist/internal/keys.js +1 -1
  217. package/dist/internal/labels.d.ts +45 -1
  218. package/dist/internal/labels.js +1 -1
  219. package/dist/internal/link.d.ts +17 -0
  220. package/dist/internal/link.js +1 -1
  221. package/dist/internal/page-layout.d.ts +14 -7
  222. package/dist/internal/page-layout.js +1 -1
  223. package/dist/internal/picker.d.ts +43 -6
  224. package/dist/internal/picker.js +1 -1
  225. package/dist/internal/progress.d.ts +16 -8
  226. package/dist/internal/progress.js +1 -1
  227. package/dist/internal/scramble.d.ts +4 -0
  228. package/dist/internal/scramble.js +1 -1
  229. package/dist/internal/scroll-target.d.ts +5 -0
  230. package/dist/internal/scroll-target.js +1 -0
  231. package/dist/internal/steps.js +1 -1
  232. package/dist/internal/styles.d.ts +66 -0
  233. package/dist/internal/styles.js +1 -1
  234. package/dist/internal/text.d.ts +39 -0
  235. package/dist/internal/text.js +1 -0
  236. package/dist/internal/watermark.d.ts +44 -0
  237. package/dist/internal/watermark.js +1 -0
  238. package/dist/internal/wheel.d.ts +52 -0
  239. package/dist/internal/wheel.js +1 -0
  240. package/dist/internal/window.js +1 -1
  241. package/dist/locales/de.js +1 -1
  242. package/dist/locales/es.js +1 -1
  243. package/dist/locales/fr.js +1 -1
  244. package/dist/locales/ja.js +1 -1
  245. package/dist/locales/ko.js +1 -1
  246. package/dist/locales/zh-Hans.js +1 -1
  247. package/dist/provider/PlColorSchemeScript.js +1 -1
  248. package/dist/provider/PlassProvider.js +1 -1
  249. package/dist/styles.css +1 -1
  250. package/dist/tailwind.css +258 -11
  251. package/dist/tokens.css +258 -11
  252. package/dist/types.d.ts +16 -29
  253. package/package.json +15 -15
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import type { PlassDirection } from './direction.js';
2
3
  import type { PlassBreakpoint, PlassSide } from '../types.js';
3
4
  /**
4
5
  * The vocabulary a page's structure is written in, and the context the four
@@ -129,12 +130,18 @@ export declare function useCollapsed(breakpoint: PlPageLayoutCollapse): boolean;
129
130
  * question and a layout flips under RTL on its own. A drawer is attached to an
130
131
  * edge of the *window*, which `PlassSide` names physically for the same reason
131
132
  * a tooltip above a button is above it in every writing direction — so the two
132
- * have to be translated, and the document's own direction is what translates
133
- * them.
133
+ * have to be translated.
134
134
  *
135
- * Read during render rather than in an effect, which is safe here for a
136
- * narrower reason than it looks: the only caller is a sidebar that has already
137
- * collapsed, and collapsing is a client-side answer. There is no server render
138
- * of this to disagree with.
135
+ * `direction` is what the nearest `PlassProvider` was told, and it wins for the
136
+ * reason it wins there: a provider given a direction is describing a subtree
137
+ * that runs the other way from the page, and a drawer is portalled out of that
138
+ * subtree, so the document is the one place that cannot say which way it runs.
139
+ * Without one, the document's own direction is the answer, as it is for the
140
+ * provider.
141
+ *
142
+ * The document is read during render rather than in an effect, which is safe
143
+ * here for a narrower reason than it looks: the only caller is a sidebar that
144
+ * has already collapsed, and collapsing is a client-side answer. There is no
145
+ * server render of this to disagree with.
139
146
  */
140
- export declare function drawerSide(side: PlassSidebarSide): PlassSide;
147
+ export declare function drawerSide(side: PlassSidebarSide, direction?: PlassDirection): PlassSide;
@@ -1 +1 @@
1
- "use client";import*as e from"react";import{belowQuery as n}from"./breakpoints.js";import{useMediaQuery as t}from"./media.js";export const PlPageLayoutContext=/* @__PURE__ */e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PlassSidebarSideContext=/* @__PURE__ */e.createContext(null);export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(e){return t("none"===e?null:function collapseQuery(e){return"xs"===e?null:n(e)}(e))}export function drawerSide(e){const n="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?n?"right":"left":n?"left":"right"}
1
+ "use client";import*as e from"react";import{belowQuery as t}from"./breakpoints.js";import{useMediaQuery as n}from"./media.js";export const PlPageLayoutContext=/* @__PURE__ */e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PlassSidebarSideContext=/* @__PURE__ */e.createContext(null);export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(e){return n("none"===e?null:function collapseQuery(e){return"xs"===e?null:t(e)}(e))}export function drawerSide(e,t){const n=t?"rtl"===t:"undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?n?"right":"left":n?"left":"right"}
@@ -41,6 +41,41 @@ export declare function popupSlots(color: PlassColor, elevation: PlassElevation)
41
41
  export declare const pickerPopupClasses: string;
42
42
  /** The popup's own padding, one track tighter than a control's. */
43
43
  export declare const popupPaddingClasses: Record<PlassSize, string>;
44
+ export interface PopupArrowProps {
45
+ /**
46
+ * The `Arrow` part of whichever Base UI popup this is — `Popover.Arrow`,
47
+ * `PreviewCard.Arrow`, `Tooltip.Arrow`. Each of the three roots has its own,
48
+ * and only the primitive knows where to put it.
49
+ */
50
+ as: React.ElementType<{
51
+ className?: string;
52
+ children?: React.ReactNode;
53
+ }>;
54
+ /** How wide the wedge is, in pixels. Its height is half of that. */
55
+ size: number;
56
+ }
57
+ /**
58
+ * The wedge that points a floating sheet at what opened it.
59
+ *
60
+ * One drawing for all three, and it is the *stroked* one: a triangle filled
61
+ * with the sheet's own `--plass-glass-press`, with the hairline drawn along its
62
+ * two slanted sides only.
63
+ *
64
+ * Both of those are the glass rules rather than a preference. The fill is the
65
+ * same one declaration the plate carries, so the wedge stays on the plate's
66
+ * rung of the opacity ladder — a wedge stacked out of a line triangle and a
67
+ * fill triangle composites two translucent whites and comes out lighter than
68
+ * the sheet it grew from, which in the dark theme is 0.25 against the plate's
69
+ * 0.15. And `--plass-glass-line` is a cut edge rather than a colour to fill
70
+ * with, so it is stroked: on the two sides that are a cut edge, and not across
71
+ * the base, which is not one — the plate is on the other side of it.
72
+ *
73
+ * `non-scaling-stroke` is what keeps that hairline one pixel at every `size`.
74
+ * The path is written in a 10×5 viewBox and the box is drawn at whatever the
75
+ * component's ladder says, so a stroke that scaled would be thinner than the
76
+ * plate's border on a small sheet and thicker on a large one.
77
+ */
78
+ export declare function PopupArrow({ as: Arrow, size }: PopupArrowProps): React.JSX.Element;
44
79
  export interface PlassPickerShellProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'defaultValue'> {
45
80
  /**
46
81
  * Drop shadow depth of the *trigger*. `0`, like a `PlTextField`: a field is
@@ -88,11 +123,13 @@ interface InternalShellProps extends PlassPickerShellProps {
88
123
  open: boolean;
89
124
  onOpenChange: (open: boolean) => void;
90
125
  labels: PlassPickerLabels;
91
- /** `<input type="hidden">` rows, so the control submits with a form. */
92
- hiddenValues?: Array<{
93
- name: string;
94
- value: string;
95
- }>;
126
+ /** The name the value submits under. */
127
+ name?: string;
128
+ /**
129
+ * The value as a form submits it: one string, or one row per entry. An empty
130
+ * string, a list with an empty entry and an empty list are no value.
131
+ */
132
+ formValue: string | readonly string[];
96
133
  children: React.ReactNode;
97
134
  triggerRef?: React.Ref<HTMLButtonElement>;
98
135
  }
@@ -104,7 +141,7 @@ interface InternalShellProps extends PlassPickerShellProps {
104
141
  * and the way `invalid` re-points the whole colour family at `danger` so the
105
142
  * edge, the ring and the message turn over together.
106
143
  */
107
- export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
144
+ export declare function PickerShell({ variant, size, color, density, elevation, label, description, error, invalid, startIcon, fullWidth, disabled, readOnly, required, id, className, classNames, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, name, formValue, children, triggerRef, ...props }: InternalShellProps): React.JSX.Element;
108
145
  /**
109
146
  * The row of shortcuts under a picker's panel.
110
147
  *
@@ -1 +1 @@
1
- import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Field as a}from"@base-ui/react/field";import{Popover as r}from"@base-ui/react/popover";import{CloseIcon as t}from"./icons.js";import{WidthSizer as i}from"./sizer.js";import{chipRemoveClasses as n,controlHeightClasses as o,controlTextLeadingClasses as p,cx as d,disabledClasses as c,fieldReadOnlyClasses as u,fieldRestClasses as m,focusWithinRingClasses as f,gapClasses as h,glassClasses as g,iconClasses as x,metaTextClasses as b,paddingXClasses as v,radiusClasses as y,stackGapClasses as N,surfaceSlots as P,transitionClasses as j}from"./styles.js";export function popupSlots(e,l){return{...P(e,l),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const w=/* @__PURE__ */["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,f,x].join(" ");export const pickerPopupClasses=/* @__PURE__ */[g,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:f="glass",size:g="md",color:x="primary",density:j="default",elevation:k=0,label:C,description:$,error:z,invalid:O,startIcon:F,fullWidth:R=!1,disabled:S=!1,readOnly:q=!1,required:D=!1,id:I,className:_,classNames:B,style:E,display:L,samples:T,empty:V,clearable:W=!1,onClear:A,open:G,onOpenChange:H,labels:J,hiddenValues:K,children:M,triggerRef:Q,...U}){const X=s.useId(),Y=I??`${X}-trigger`,Z=`${X}-label`,ee=`${X}-description`,le=`${X}-error`,se=null!=z&&!1!==z&&""!==z,ae=O??se,re=ae?"danger":x,te=S||q,ie=[$?ee:null,se?le:null].filter(Boolean).join(" ")||void 0;return l(a.Root,{disabled:S,invalid:ae,className:d("flex-col align-top",N[g],R?"flex w-full":"inline-flex",_),style:{...P(re,k),...E},...U,children:[C?e(a.Label,{id:Z,htmlFor:Y,className:d(b[g],"font-semibold",S?"text-(--plass-muted-fg)":"text-(--plass-fg)",B?.label),children:C}):null,l(r.Root,{open:G,onOpenChange:e=>H(e),children:[l("span",{className:d(w,o[g],p[g],y[g],h[g],v[j][g],S?c[f]:q?u[f]:m[f],B?.control),children:[l(r.Trigger,{id:Y,ref:Q,disabled:S,"aria-labelledby":C?Z:void 0,"aria-describedby":ie,"aria-required":D||void 0,"aria-invalid":ae||void 0,className:d("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",h[g],"[outline:none]",te?"cursor-default":"cursor-pointer"),children:[F?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:F}):null,l("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:d("w-full truncate",V?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:L}),e(i,{samples:T??[]})]})]}),!W||V||te?null:e("button",{type:"button","aria-label":J.clear,className:d(n,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation(),A()},children:e(t,{})})]}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,align:"start",children:e(r.Popup,{initialFocus:!1,className:d(pickerPopupClasses,y[g],popupPaddingClasses[g],p[g]),style:popupSlots(re,3),children:M})})})]}),$?e(a.Description,{id:ee,className:d(b[g],"text-(--plass-muted-fg)",B?.description),children:$}):null,se?e(a.Error,{id:le,match:!0,className:d(b[g],"text-(--p-accent)",B?.error),children:z}):null,K?.map((l,s)=>e("input",{type:"hidden",name:l.name,value:l.value},s))]})}export function PickerFooter({size:l,children:s}){return e("div",{className:d("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",h[l]),children:s})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}
1
+ import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{Popover as l}from"@base-ui/react/popover";import{FormControl as r,leaveFormControl as i}from"./form.js";import{CloseIcon as o}from"./icons.js";import{WidthSizer as n}from"./sizer.js";import{chipRemoveClasses as d,controlHeightClasses as p,controlTextLeadingClasses as c,cx as u,disabledClasses as m,fieldReadOnlyClasses as f,fieldRestClasses as h,focusWithinRingClasses as g,gapClasses as x,glassClasses as b,iconClasses as v,metaTextClasses as y,paddingXClasses as N,radiusClasses as w,stackGapClasses as j,surfaceSlots as k,transitionClasses as P}from"./styles.js";export function popupSlots(e,s){return{...k(e,s),"--p-fill":`var(--plass-${e}-fill)`,"--p-on-solid":`var(--plass-${e}-on-solid)`}}const $=/* @__PURE__ */["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",P,g,v].join(" ");export const pickerPopupClasses=/* @__PURE__ */[b,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};const C=/* @__PURE__ */["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" ");export function PopupArrow({as:a,size:t}){return e(a,{className:C,children:s("svg",{width:t,height:t/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--plass-glass-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})})}export function PickerShell({variant:g="glass",size:b="md",color:v="primary",density:P="default",elevation:C=0,label:z,description:B,error:I,invalid:O,startIcon:R,fullWidth:q=!1,disabled:D=!1,readOnly:E=!1,required:F=!1,id:S,className:L,classNames:M,style:V,display:W,samples:_,empty:A,clearable:T=!1,onClear:G,open:H,onOpenChange:J,labels:K,name:Q,formValue:U,children:X,triggerRef:Y,...Z}){const ee=a.useId(),se=S??`${ee}-trigger`,ae=`${ee}-label`,te=`${ee}-value`,le=`${ee}-description`,re=`${ee}-error`,ie=null!=I&&!1!==I&&""!==I,oe=O??ie,ne=oe?"danger":v,de=D||E,pe=a.useRef(null);return s(t.Root,{disabled:D,invalid:oe,className:u("flex-col align-top",j[b],q?"flex w-full":"inline-flex",L),style:{...k(ne,C),...V},...Z,children:[z?e(t.Label,{id:ae,htmlFor:se,className:u(y[b],"font-semibold",D?"text-(--plass-muted-fg)":"text-(--plass-fg)",M?.label),children:z}):null,s(l.Root,{open:H,onOpenChange:e=>J(e),children:[s("span",{className:u($,p[b],c[b],w[b],x[b],N[P][b],D?m[g]:E?f[g]:h[g],M?.control),children:[e(t.Validity,{children:({validity:a})=>{const t=!1===a.valid,r=[B?le:null,ie||t&&!D&&!0!==O?re:null].filter(Boolean).join(" ")||void 0;return s(l.Trigger,{id:se,ref:Y,disabled:D,"aria-labelledby":z?`${ae} ${te}`:void 0,"aria-describedby":r,"aria-required":F||void 0,"aria-invalid":oe||t||void 0,onBlur:()=>{H||i(pe.current)},className:u("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",x[b],"[outline:none]",de?"cursor-default":"cursor-pointer"),children:[R?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:R}):null,s("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{id:te,className:u("w-full truncate",A?"text-(--plass-muted-fg)":"text-(--plass-fg)"),children:W}),q?null:e(n,{samples:_??[]})]})]})}}),!T||A||de?null:e("button",{type:"button","aria-label":K.clear,className:u(d,"text-(--plass-muted-fg)"),onClick:e=>{e.stopPropagation(),G()},children:e(o,{})})]}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,align:"start",children:e(l.Popup,{initialFocus:!1,className:u(pickerPopupClasses,w[b],popupPaddingClasses[b],c[b]),style:popupSlots(ne,3),children:X})})})]}),B?e(t.Description,{id:le,className:u(y[b],"text-(--plass-muted-fg)",M?.description),children:B}):null,e(t.Error,ie?{id:re,match:!0,className:u(y[b],"text-(--p-accent)",M?.error),children:I}:{id:re,className:u(y[b],"text-(--p-accent)",M?.error)}),e(r,{ref:pe,name:Q,value:U,required:F&&!E,disabled:D,standIn:()=>pe.current?.ownerDocument.getElementById(se)})]})}export function PickerFooter({size:s,children:a}){return e("div",{className:u("flex items-center justify-end border-t pt-1.5","[border-color:var(--plass-divider)]",x[s]),children:a})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--plass-divider)"})}
@@ -120,7 +120,13 @@ export declare const plateGapClasses: Record<PlassSize, string>;
120
120
  * also why the movement is on `width` and never on the paint: a gradient cannot
121
121
  * be transitioned, and a length can.
122
122
  */
123
- export declare const trackClasses = "bg-(--plass-track)";
123
+ export declare const trackClasses = "bg-(--plass-track) forced-colors:border forced-colors:[border-color:CanvasText]";
124
+ /**
125
+ * The filled part of a track. Forced-colours mode drops the gradient and
126
+ * repaints the groove in the page's colour, so there the track gets an edge and
127
+ * the fill the system's highlight.
128
+ */
129
+ export declare const fillClasses = "[background-image:var(--p-fill)] forced-colors:[background-color:Highlight] forced-colors:[border-color:Highlight] forced-colors:[color:HighlightText]";
124
130
  /** The bar's own duration, one step slower than a control's, so a fill reads as travel. */
125
131
  export declare const fillTransitionClasses = "[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";
126
132
  /**
@@ -134,13 +140,15 @@ export declare function progressFraction(value: number | null | undefined, min:
134
140
  /**
135
141
  * What the value reads as, both on screen and to a screen reader.
136
142
  *
137
- * Base UI's own default is `${value}%`, which is right only when the range
138
- * happens to be 0–100 — "3%" for step 3 of 4 is worse than saying nothing. So
139
- * the percentage is computed from the fraction, and a caller who passed
140
- * `format` gets Base UI's formatted string instead, because at that point they
141
- * have said what the number means.
143
+ * Without `format` it is a percentage of the range rather than of 100 — "3%"
144
+ * for step 3 of 4 is worse than saying nothing — written in `locale`, so a page
145
+ * in German reads "75 %". Base UI's own default is that percentage too, but it
146
+ * reads a value that is not finite as indeterminate where `progressFraction`
147
+ * clamps it, so the percentage is written here from the fraction. A caller who
148
+ * passed `format` gets Base UI's formatted string, in the same `locale`, because
149
+ * at that point they have said what the number means.
142
150
  */
143
- export declare function progressText(fraction: number | null, formatted: string | null, hasFormat: boolean): string | null;
151
+ export declare function progressText(fraction: number | null, formatted: string | null, hasFormat: boolean, locale: string | undefined): string | null;
144
152
  /**
145
153
  * The same string, shaped for Base UI's `getAriaValueText`.
146
154
  *
@@ -148,4 +156,4 @@ export declare function progressText(fraction: number | null, formatted: string
148
156
  * to Base UI — it already announces indeterminate progress, and re-inventing
149
157
  * that here would be one more English string the library has to own.
150
158
  */
151
- export declare function progressAriaText(fraction: number | null, hasFormat: boolean): ((formatted: string | null) => string) | undefined;
159
+ export declare function progressAriaText(fraction: number | null, hasFormat: boolean, locale: string | undefined): ((formatted: string | null) => string) | undefined;
@@ -1 +1 @@
1
- export function progressSlots(s){return{"--p-fill":`var(--plass-${s}-fill)`,"--p-solid":`var(--plass-${s}-solid)`,"--p-solid-to":`var(--plass-${s}-solid-to)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-press":`var(--plass-${s}-soft-press)`}}export const barThicknessClasses={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const trackClasses="bg-(--plass-track)";export const fillTransitionClasses="[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";export function progressFraction(s,r,e){return null==s||Number.isNaN(s)||e<=r?null:Math.min(1,Math.max(0,(s-r)/(e-r)))}export function progressText(s,r,e){return null===s?null:e?r:`${Math.round(100*s)}%`}export function progressAriaText(s,r){if(null!==s)return e=>progressText(s,e,r)??""}
1
+ import{numberFormatter as s}from"./format.js";import{forcedFieldEdgeClasses as r,forcedFillClasses as e}from"./styles.js";export function progressSlots(s){return{"--p-fill":`var(--plass-${s}-fill)`,"--p-solid":`var(--plass-${s}-solid)`,"--p-solid-to":`var(--plass-${s}-solid-to)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-press":`var(--plass-${s}-soft-press)`}}export const barThicknessClasses={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const trackClasses=`bg-(--plass-track) ${r}`;export const fillClasses=`[background-image:var(--p-fill)] ${e}`;export const fillTransitionClasses="[transition:width_var(--plass-duration-slow)_var(--plass-ease)]";export function progressFraction(s,r,e){return null==s||Number.isNaN(s)||e<=r?null:Math.min(1,Math.max(0,(s-r)/(e-r)))}const t={style:"percent"};export function progressText(r,e,o,l){return null===r?null:o?e:s(l,t).format(r)}export function progressAriaText(s,r,e){if(null!==s)return t=>progressText(s,t,r,e)??""}
@@ -12,6 +12,10 @@
12
12
  * of.
13
13
  *
14
14
  * `characters` overrides it for the caller who genuinely wants a terminal look.
15
+ *
16
+ * **A character is a grapheme**, what a reader counts as one: an emoji, a flag,
17
+ * a letter with its accent. Cut by code point instead, an emoji is halved into
18
+ * pieces that each draw as a broken glyph, and the noise flickers with them.
15
19
  */
16
20
  /** Everything in the text that is worth scrambling: no spaces, no repeats. */
17
21
  export declare function poolOf(text: string): string;
@@ -1 +1 @@
1
- export function poolOf(t){const o=new Set;for(const r of t)""!==r.trim()&&o.add(r);return Array.from(o).join("")}export function scrambleAt(t,o,r,n){const e=Array.from(t),a=Math.floor(e.length*Math.max(0,Math.min(1,r)));return 0===o.length?t:e.map((t,r)=>r<a||""===t.trim()?t:o[(31*r+17*n)%o.length]).join("")}
1
+ import{graphemesOf as t}from"./text.js";export function poolOf(o){const n=new Set;for(const r of t(o))""!==r.trim()&&n.add(r);return Array.from(n).join("")}export function scrambleAt(o,n,r,e){const m=t(o),a=t(n),f=Math.floor(m.length*Math.max(0,Math.min(1,r)));return 0===a.length?o:m.map((t,o)=>o<f||""===t.trim()?t:a[(31*o+17*e)%a.length]).join("")}
@@ -0,0 +1,5 @@
1
+ import type * as React from 'react';
2
+ /** What a component scrolls, or follows the scroll of. */
3
+ export type PlassScrollTarget = Window | HTMLElement | React.RefObject<HTMLElement | null> | (() => Window | HTMLElement | null);
4
+ /** What `target` names, or the window when it names nothing. */
5
+ export declare function resolveScrollTarget(target: PlassScrollTarget | undefined): Window | HTMLElement | null;
@@ -0,0 +1 @@
1
+ export function resolveScrollTarget(n){return void 0===n?"undefined"==typeof window?null:window:"function"==typeof n?n():"current"in n?n.current:n}
@@ -1 +1 @@
1
- export const bulletSizeValues={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"};export const bulletGapClasses={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const bulletStatusClasses={complete:"[background-image:var(--p-fill)] text-(--p-on-solid)",current:"[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:0_0_0_0.25rem_var(--p-soft)]",upcoming:"border-2 bg-(--plass-surface) text-(--plass-muted-fg) [border-color:var(--plass-border)]"};export const connectorColorClasses={complete:"[border-color:var(--p-line-hover)]",current:"[border-color:var(--plass-border)]",upcoming:"[border-color:var(--plass-border)]"};export const connectorStyleClasses={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""};export const titleStatusClasses={complete:"text-(--plass-fg)",current:"text-(--p-accent)",upcoming:"text-(--plass-muted-fg)"};export function statusAt(e,o){return null===o?"upcoming":e<o?"complete":e===o?"current":"upcoming"}
1
+ import{forcedFillClasses as e}from"./styles.js";export const bulletSizeValues={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"};export const bulletGapClasses={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const bulletStatusClasses={complete:`[background-image:var(--p-fill)] text-(--p-on-solid) ${e}`,current:`[background-image:var(--p-fill)] text-(--p-on-solid) [box-shadow:0_0_0_0.25rem_var(--p-soft)] ${e} forced-colors:[outline:2px_solid_Highlight] forced-colors:[outline-offset:2px]`,upcoming:"border-2 bg-(--plass-surface) text-(--plass-muted-fg) [border-color:var(--plass-border)]"};export const connectorColorClasses={complete:"[border-color:var(--p-line-hover)]",current:"[border-color:var(--plass-border)]",upcoming:"[border-color:var(--plass-border)]"};export const connectorStyleClasses={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""};export const titleStatusClasses={complete:"text-(--plass-fg)",current:"text-(--p-accent)",upcoming:"text-(--plass-muted-fg)"};export function statusAt(e,o){return null===o?"upcoming":e<o?"complete":e===o?"current":"upcoming"}
@@ -272,6 +272,13 @@ export declare const focusRingInsetClasses = "focus-visible:[outline:2px_solid_v
272
272
  *
273
273
  * Kept quiet until it is wanted: the glyph sits at 70% until the pointer or the
274
274
  * keyboard arrives.
275
+ *
276
+ * Drawn at the size of the label, and pressed from a 24px square, the minimum
277
+ * target size of WCAG 2.5.8. The `::before` is that square, centred on the
278
+ * glyph whatever size the glyph is, and placed out of the flow so the chip and
279
+ * the trigger keep their size. It comes after the label or the trigger in the
280
+ * markup and is positioned, so where the square reaches over one of them the ×
281
+ * has the press, and the neighbour keeps everything outside the square.
275
282
  */
276
283
  export declare const chipRemoveClasses: string;
277
284
  /** Icons track their label rather than carrying a size of their own. */
@@ -309,6 +316,65 @@ export declare function controlSlots(color: PlassColor, elevation: PlassElevatio
309
316
  * ring and the caret, and the glass stays clear.
310
317
  */
311
318
  export declare function surfaceSlots(color: PlassColor, elevation: PlassElevation): React.CSSProperties;
319
+ /**
320
+ * The edge a surface that is only a fill gets back in forced-colours mode.
321
+ *
322
+ * Windows' contrast themes drop every background image and box shadow, so a
323
+ * `solid` button — a gradient with no border — is left as a label floating on
324
+ * the page, and a `solid` field as a caret with no box around it. A border in a
325
+ * system colour gives both their shape back. Nothing changes outside that mode.
326
+ */
327
+ export declare const forcedEdgeClasses = "forced-colors:border forced-colors:[border-color:ButtonText]";
328
+ /**
329
+ * The same for a surface that is not a button — a field, a progress bar's
330
+ * track, a slider's rail, a badge, a message — in the colour the system draws
331
+ * text on the page.
332
+ */
333
+ export declare const forcedFieldEdgeClasses = "forced-colors:border forced-colors:[border-color:CanvasText]";
334
+ /**
335
+ * A state that is shown by a fill, in forced-colours mode.
336
+ *
337
+ * The system drops the gradient and repaints the background in the page's own
338
+ * colour, so a ticked box, a chosen segment, a pressed toggle and the filled
339
+ * part of a progress bar would look exactly like the empty ones. A system colour
340
+ * written by the page is kept in that mode, so these paint the state in the pair
341
+ * the system uses for a selection, `Highlight` behind `HighlightText`.
342
+ *
343
+ * Never `forced-color-adjust: none` for this. It would keep the colours, and it
344
+ * would also keep the gradient over them and the tinted shadow under them.
345
+ */
346
+ export declare const forcedFillClasses = "forced-colors:[background-color:Highlight] forced-colors:[border-color:Highlight] forced-colors:[color:HighlightText]";
347
+ /** The same, on a control Base UI marks `data-checked`. */
348
+ export declare const forcedCheckedClasses: string;
349
+ /**
350
+ * The same, on a control Base UI marks `data-pressed`.
351
+ *
352
+ * The attribute is what keeps the fill under the pointer. A pressed toggle's own
353
+ * `hover:` and `active:` washes are a class and a pseudo-class, which outrank
354
+ * `forcedFillClasses`' single class, and a wash that is not a system colour is
355
+ * repainted in the page's colour. Written as a class and an attribute, the fill
356
+ * ties with them and comes after them in the stylesheet.
357
+ */
358
+ export declare const forcedPressedClasses: string;
359
+ /**
360
+ * The label over a highlight that is a separate element — the tile under a
361
+ * chosen segment — which has to be written in the colour drawn on a highlight,
362
+ * or it is the page's text on the system's selection colour.
363
+ */
364
+ export declare const forcedCheckedTextClasses = "forced-colors:data-[checked]:[color:HighlightText]";
365
+ /**
366
+ * The row of a list or a menu that the pointer and the arrow keys have reached,
367
+ * in forced-colours mode. Its tint is the only thing that marks it, and the rows
368
+ * draw no focus ring because the tint is the focus indicator, so without this a
369
+ * keyboard reader in a contrast theme cannot see which row Enter would choose.
370
+ *
371
+ * The colour is written on everything inside the row as well: a description or
372
+ * a shortcut that sets a muted colour of its own is otherwise put back to the
373
+ * page's text colour, which is unreadable on the highlight.
374
+ */
375
+ export declare const forcedHighlightedClasses: string;
376
+ /** A checked control that is disabled, in the system's colour for unavailable. */
377
+ export declare const forcedDisabledCheckedClasses: string;
312
378
  /**
313
379
  * Disabled is **the light going out.** The key keeps its shape, its colour and
314
380
  * its place in the layout, and stops catching any light: no gloss, no tinted
@@ -1 +1 @@
1
- export const radiusClasses={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"};export const controlHeightClasses={xs:"h-6",sm:"h-8",md:"h-10",lg:"h-12",xl:"h-14"};export const controlSquareClasses={xs:"w-6",sm:"w-8",md:"w-10",lg:"w-12",xl:"w-14"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.8125rem]",md:"text-[0.875rem]",lg:"text-[1rem]",xl:"text-[1.125rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.875rem]/[1.25rem]",lg:"text-[1rem]/[1.5rem]",xl:"text-[1.125rem]/[1.75rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-6",xl:"px-7"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3.5",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-0 data-[checked]:size-1.5",sm:"size-0 data-[checked]:size-1.5",md:"size-0 data-[checked]:size-2",lg:"size-0 data-[checked]:size-2",xl:"size-0 data-[checked]:size-2.5"};export const tickRowTextClasses=controlTextLeadingClasses;export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.5rem",xl:"1.75rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.875rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const stackGapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2"};export const sheetPaddingXClasses={default:{xs:"px-2.5",sm:"px-3.5",md:"px-5",lg:"px-6",xl:"px-7"},compact:{xs:"px-2",sm:"px-2.5",md:"px-3.5",lg:"px-4",xl:"px-5"}};export const sheetPaddingYClasses={default:{xs:"py-2.5",sm:"py-3.5",md:"py-5",lg:"py-6",xl:"py-7"},compact:{xs:"py-2",sm:"py-2.5",md:"py-3.5",lg:"py-4",xl:"py-5"}};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const sheetLineClasses="border-t [border-color:var(--plass-divider)]";export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const glassClasses="[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]";export const transitionClasses=/* @__PURE__ */["[transition-property:background-color,background-image,border-color,box-shadow,color,filter,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ");export const focusRingClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:0px]";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--p-ring)] has-[:focus-visible]:[outline-offset:0px]";export const focusRingInsetClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]";export const chipRemoveClasses=/* @__PURE__ */["ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","size-[1.15em] cursor-pointer opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",focusRingClasses,"disabled:cursor-not-allowed"].join(" ");export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(s,e,a){const t="solid"===a;return{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-tint":`var(--plass-${s}-tint)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-glow":t?"var(--plass-glow-on-fill)":`var(--plass-${s}-soft)`,"--p-flash":t?"var(--plass-flash-on-fill)":`var(--plass-${s}-soft-hover)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`,"--p-lift":"0 6px 16px -4px var(--p-tint)","--p-lift-hover":"0 10px 24px -6px var(--p-tint)","--p-lift-press":"0 2px 6px -2px var(--p-tint)"}}export function surfaceSlots(s,e){return{"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`}}export const disabledClasses={solid:/* @__PURE__ */["cursor-not-allowed text-(--p-on-solid) [background-image:var(--p-fill)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),glass:/* @__PURE__ */[glassClasses,"cursor-not-allowed border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),ghost:"cursor-not-allowed bg-transparent text-(--p-accent) opacity-50 saturate-[0.35]"};export const readOnlyFilterClasses="saturate-[0.55]";export const sheetRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"};export const fieldRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-well)]","hover:bg-(--plass-glass-hover)","focus-within:bg-(--plass-glass-press)"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]","hover:bg-(--plass-glass-press) hover:[border-color:var(--p-line)]","focus-within:bg-(--plass-glass-press) focus-within:[border-color:var(--p-line-hover)]"].join(" "),ghost:/* @__PURE__ */["text-(--plass-fg) bg-transparent","hover:bg-(--p-soft)","focus-within:bg-(--p-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-well)] saturate-[0.55]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)] saturate-[0.55]"].join(" "),ghost:"text-(--plass-fg) bg-transparent saturate-[0.55]"};export function toLength(s){return"number"==typeof s?`${s}px`:s}export function hasContent(s){return null!=s&&!1!==s&&""!==s}export function cx(...s){return s.filter(Boolean).join(" ")}
1
+ export const radiusClasses={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-sm)",md:"rounded-(--plass-radius-md)",lg:"rounded-(--plass-radius-lg)",xl:"rounded-(--plass-radius-xl)"};export const controlHeightClasses={xs:"h-6",sm:"h-8",md:"h-10",lg:"h-12",xl:"h-14"};export const controlSquareClasses={xs:"w-6",sm:"w-8",md:"w-10",lg:"w-12",xl:"w-14"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.8125rem]",md:"text-[0.875rem]",lg:"text-[1rem]",xl:"text-[1.125rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.875rem]/[1.25rem]",lg:"text-[1rem]/[1.5rem]",xl:"text-[1.125rem]/[1.75rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-6",xl:"px-7"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3.5",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-0 data-[checked]:size-1.5",sm:"size-0 data-[checked]:size-1.5",md:"size-0 data-[checked]:size-2",lg:"size-0 data-[checked]:size-2",xl:"size-0 data-[checked]:size-2.5"};export const tickRowTextClasses=controlTextLeadingClasses;export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.5rem",xl:"1.75rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.875rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const stackGapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2"};export const sheetPaddingXClasses={default:{xs:"px-2.5",sm:"px-3.5",md:"px-5",lg:"px-6",xl:"px-7"},compact:{xs:"px-2",sm:"px-2.5",md:"px-3.5",lg:"px-4",xl:"px-5"}};export const sheetPaddingYClasses={default:{xs:"py-2.5",sm:"py-3.5",md:"py-5",lg:"py-6",xl:"py-7"},compact:{xs:"py-2",sm:"py-2.5",md:"py-3.5",lg:"py-4",xl:"py-5"}};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const sheetLineClasses="border-t [border-color:var(--plass-divider)]";export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const glassClasses="[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]";export const transitionClasses=/* @__PURE__ */["[transition-property:background-color,background-image,border-color,box-shadow,color,filter,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" ");export const focusRingClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:0px]";export const focusWithinRingClasses="has-[:focus-visible]:[outline:2px_solid_var(--p-ring)] has-[:focus-visible]:[outline-offset:0px]";export const focusRingInsetClasses="focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]";export const chipRemoveClasses=/* @__PURE__ */["relative ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full","before:absolute before:inset-[calc(50%-12px)]","size-[1.15em] cursor-pointer opacity-70","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",focusRingClasses,"disabled:cursor-not-allowed"].join(" ");export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(s,e,o){const r="solid"===o;return{"--p-fill":`var(--plass-${s}-fill)`,"--p-on-solid":`var(--plass-${s}-on-solid)`,"--p-accent":`var(--plass-${s}-accent)`,"--p-tint":`var(--plass-${s}-tint)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-glow":r?"var(--plass-glow-on-fill)":`var(--plass-${s}-soft)`,"--p-flash":r?"var(--plass-flash-on-fill)":`var(--plass-${s}-soft-hover)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`,"--p-lift":"0 6px 16px -4px var(--p-tint)","--p-lift-hover":"0 10px 24px -6px var(--p-tint)","--p-lift-press":"0 2px 6px -2px var(--p-tint)"}}export function surfaceSlots(s,e){return{"--p-accent":`var(--plass-${s}-accent)`,"--p-soft":`var(--plass-${s}-soft)`,"--p-soft-hover":`var(--plass-${s}-soft-hover)`,"--p-soft-press":`var(--plass-${s}-soft-press)`,"--p-line":`var(--plass-${s}-line)`,"--p-line-hover":`var(--plass-${s}-line-hover)`,"--p-ring":`var(--plass-${s}-ring)`,"--p-elev":`var(--plass-shadow-${e})`,"--p-elev-hover":`var(--plass-shadow-${Math.min(e+1,4)})`,"--p-elev-press":`var(--plass-shadow-${Math.max(e-1,0)})`}}export const forcedEdgeClasses="forced-colors:border forced-colors:[border-color:ButtonText]";export const forcedFieldEdgeClasses="forced-colors:border forced-colors:[border-color:CanvasText]";export const forcedFillClasses="forced-colors:[background-color:Highlight] forced-colors:[border-color:Highlight] forced-colors:[color:HighlightText]";export const forcedCheckedClasses=/* @__PURE__ */["forced-colors:data-[checked]:[background-color:Highlight]","forced-colors:data-[checked]:[border-color:Highlight]","forced-colors:data-[checked]:[color:HighlightText]"].join(" ");export const forcedPressedClasses=/* @__PURE__ */["forced-colors:data-[pressed]:[background-color:Highlight]","forced-colors:data-[pressed]:[border-color:Highlight]","forced-colors:data-[pressed]:[color:HighlightText]"].join(" ");export const forcedCheckedTextClasses="forced-colors:data-[checked]:[color:HighlightText]";export const forcedHighlightedClasses=/* @__PURE__ */["forced-colors:data-[highlighted]:[background-color:Highlight]","forced-colors:data-[highlighted]:[color:HighlightText]","forced-colors:data-[highlighted]:**:[color:HighlightText]"].join(" ");export const forcedDisabledCheckedClasses=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","forced-colors:data-[checked]:[background-color:GrayText]","forced-colors:data-[checked]:[color:Canvas]"].join(" ");export const disabledClasses={solid:/* @__PURE__ */["cursor-not-allowed text-(--p-on-solid) [background-image:var(--p-fill)]","opacity-50 saturate-[0.35] shadow-none","forced-colors:border forced-colors:[border-color:GrayText]"].join(" "),glass:/* @__PURE__ */[glassClasses,"cursor-not-allowed border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-border)]","opacity-50 saturate-[0.35] shadow-none"].join(" "),ghost:"cursor-not-allowed bg-transparent text-(--p-accent) opacity-50 saturate-[0.35]"};export const readOnlyFilterClasses="saturate-[0.55]";export const sheetRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-fg) bg-transparent"};export const fieldRestClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--p-elev),var(--plass-well)]",forcedFieldEdgeClasses,"hover:bg-(--plass-glass-hover)","focus-within:bg-(--plass-glass-press)"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]","hover:bg-(--plass-glass-press) hover:[border-color:var(--p-line)]","focus-within:bg-(--plass-glass-press) focus-within:[border-color:var(--p-line-hover)]"].join(" "),ghost:/* @__PURE__ */["text-(--plass-fg) bg-transparent","hover:bg-(--p-soft)","focus-within:bg-(--p-soft-hover)"].join(" ")};export const fieldReadOnlyClasses={solid:/* @__PURE__ */[glassClasses,"text-(--plass-fg) bg-(--plass-glass-press)",forcedFieldEdgeClasses,"[box-shadow:var(--plass-well)] saturate-[0.55]"].join(" "),glass:/* @__PURE__ */[glassClasses,"border text-(--plass-fg) bg-(--plass-glass-hover)","[border-color:var(--plass-border)]","[box-shadow:var(--plass-gloss-glass)] saturate-[0.55]"].join(" "),ghost:"text-(--plass-fg) bg-transparent saturate-[0.55]"};export function toLength(s){return"number"==typeof s?`${s}px`:s}export function hasContent(s){return null!=s&&!1!==s&&""!==s}export function cx(...s){return s.filter(Boolean).join(" ")}
@@ -0,0 +1,39 @@
1
+ /**
2
+ * Reading a node as the words it draws, and cutting those words the way a
3
+ * reader cuts them.
4
+ *
5
+ * Both halves exist because more than one component needs them and all of them
6
+ * have to arrive at the same answer as the Flutter build, which reads a widget
7
+ * with `plassTextOf` in `lib/src/internal/text.dart` and cuts with
8
+ * `String.characters`.
9
+ */
10
+ import * as React from 'react';
11
+ /**
12
+ * Everything in a node, flattened to its text.
13
+ *
14
+ * Strings and numbers are their own text, a list is its parts joined, and an
15
+ * element contributes the text of its `children` and nothing else — a walk in,
16
+ * not a render. What a component draws for itself is only decided when it
17
+ * renders and cannot be read here, so a `<PlIcon />` among the children adds
18
+ * nothing, which is exactly right for every caller: a picture of a thing is not
19
+ * its name.
20
+ *
21
+ * Three components need it, and all three need it for the same reason — a
22
+ * string where React would otherwise hand them a tree. `PlBreadcrumb` puts a
23
+ * step's `name` into structured data, `PlChip` hands a chip's words to the label
24
+ * pack so that a language can put a name where its own grammar puts it, and
25
+ * `PlAnimateTyping` types a string one grapheme at a time, because there is no
26
+ * honest way to reveal half of a `<strong>`.
27
+ */
28
+ export declare function textOf(node: React.ReactNode): string;
29
+ /**
30
+ * The text cut the way a reader would cut it.
31
+ *
32
+ * Not `[...text]`, and not `text.split('')`. A code point is not a character:
33
+ * `👩‍👩‍👧` is seven of them, a flag is two, and `한` typed on a Korean keyboard
34
+ * can be three. Cut by code point, each of those comes back as pieces that
35
+ * mean nothing on their own and draw as broken glyphs. `Intl.Segmenter` knows
36
+ * where the boundaries actually are; the spread is the fallback for a runtime
37
+ * that does not have it.
38
+ */
39
+ export declare function graphemesOf(text: string): string[];
@@ -0,0 +1 @@
1
+ import*as e from"react";export function textOf(t){return"string"==typeof t||"number"==typeof t?String(t):Array.isArray(t)?t.map(textOf).join(""):e.isValidElement(t)?textOf(t.props.children):""}let t;export function graphemesOf(e){const n=function segmenter(){return void 0===t&&(t="undefined"!=typeof Intl&&"Segmenter"in Intl?new Intl.Segmenter(void 0,{granularity:"grapheme"}):null),t}();return null===n?[...e]:[...n.segment(e)].map(e=>e.segment)}
@@ -0,0 +1,44 @@
1
+ import * as React from 'react';
2
+ /** Where a watermark sits on the picture. */
3
+ export type PlassWatermarkPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'tile';
4
+ /** A mark laid over a picture. A bare string is the text, in the usual corner. */
5
+ export interface PlassWatermarkOptions {
6
+ /** What it says. */
7
+ text: string;
8
+ /** One in a corner, or `'tile'` for the whole picture. @default 'bottom-end' */
9
+ placement?: PlassWatermarkPlacement;
10
+ /** How far through it the picture shows. @default 0.55 in a corner, 0.14 tiled */
11
+ opacity?: number;
12
+ /** The turn a tiled mark is set at, in degrees. @default -24 */
13
+ angle?: number;
14
+ /**
15
+ * The ink, as any CSS colour, a token or `currentColor` included. White is what
16
+ * reads on a photograph. @default 'white'
17
+ */
18
+ color?: string;
19
+ /** The type size, in pixels. @default 13 in a corner, 15 tiled */
20
+ fontSize?: number;
21
+ }
22
+ /** Normalised, so a bare string and a full object are one thing downstream. */
23
+ export declare function watermarkOptions(watermark: string | PlassWatermarkOptions): Required<PlassWatermarkOptions>;
24
+ /**
25
+ * A mark over a picture, in a corner or across the whole of it.
26
+ *
27
+ * It is `aria-hidden` and takes no pointer: a watermark is a claim about the
28
+ * file rather than something the page is telling a reader, and a screen reader
29
+ * announcing "Ada & Co" between the picture and its caption is reading out a
30
+ * stamp. The `alt` text is where a picture says what it is.
31
+ *
32
+ * The tiled layer is **rotated as one layer** rather than each copy being turned
33
+ * on its own, which is what keeps the repeat seamless — turning the tiles inside
34
+ * a straight grid leaves the grid's own lines showing through. It is drawn
35
+ * oversized and centred so the corners the turn opens up are still covered.
36
+ *
37
+ * That rotation is a `transform`, and the house rule it sits beside is about
38
+ * *controls*: a surface under a finger must not resample the label being pressed.
39
+ * Nothing here is pressed and the angle never changes, so it is the same
40
+ * allowance the chevrons in `PlGalleryViewer` are drawn with.
41
+ */
42
+ export declare function PlassWatermark({ watermark }: {
43
+ watermark: string | PlassWatermarkOptions;
44
+ }): React.JSX.Element | null;
@@ -0,0 +1 @@
1
+ "use client";import{jsx as t}from"react/jsx-runtime";export function watermarkOptions(t){const e="string"==typeof t?{text:t}:t,o=e.placement??"bottom-end",a="tile"===o;return{text:e.text,placement:o,opacity:e.opacity??(a?.14:.55),angle:e.angle??-24,color:e.color??"white",fontSize:e.fontSize??(a?15:13)}}const e="calc(max(100cqw, 100cqh) * 1.415)",o={"top-start":"top-2 start-2","top-end":"top-2 end-2","bottom-start":"bottom-2 start-2","bottom-end":"bottom-2 end-2"};export function PlassWatermark({watermark:a}){const{text:n,placement:r,opacity:s,angle:i,color:l,fontSize:c}=watermarkOptions(a);if(""===n)return null;if("tile"===r){const o=function tileUri(t,e){const o=Math.max(120,Math.round(t.length*e*.68)+48),a=Math.round(4.6*e),n=`<svg xmlns="http://www.w3.org/2000/svg" width="${o}" height="${a}"><text x="0" y="${Math.round(a/2)}" fill="white" font-family="system-ui, sans-serif" font-size="${e}" font-weight="600">${function escapeXml(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&apos;")}(t)}</text></svg>`;return`url("data:image/svg+xml,${encodeURIComponent(n)}")`}(n,c);return t("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0 overflow-hidden",style:{containerType:"size"},children:t("span",{className:"absolute block",style:{top:"50%",left:"50%",width:e,height:e,translate:"-50% -50%",opacity:s,transform:`rotate(${i}deg)`,backgroundColor:l,WebkitMaskImage:o,maskImage:o,WebkitMaskRepeat:"repeat",maskRepeat:"repeat"}})})}return t("span",{"aria-hidden":"true",className:`pointer-events-none absolute select-none font-semibold ${o[r]}`,style:{opacity:s,color:l,fontSize:c,textShadow:"0 1px 2px rgb(0 0 0 / 0.55)"},children:n})}
@@ -0,0 +1,52 @@
1
+ /**
2
+ * The wheel over a strip that runs the other way, and what happens when the
3
+ * strip runs out of room.
4
+ *
5
+ * Two components have the same problem and it is not the one it looks like. A
6
+ * mouse has one wheel, it points down the page, and a strip that runs across
7
+ * the box has no use for that direction — so what the wheel does over a shelf
8
+ * of cards or a bar of tabs is left to the browser, which is to say it is one
9
+ * thing on one machine and another on the next. The pointer being on the strip
10
+ * is the reader saying which of the two things under it they meant to move, and
11
+ * this is what acts on that.
12
+ *
13
+ * The second half is what happens at the end of the strip. A nested scroller
14
+ * that runs out hands the rest of the gesture to the page, and the reader who
15
+ * was flicking a shelf along gets the whole page moving instead, without having
16
+ * asked for it and usually without having noticed which pixel it happened at.
17
+ * `overscroll` is the choice between the two answers, and neither of them is
18
+ * "sometimes": see `PlassOverscroll`.
19
+ *
20
+ * Only the axis the browser has no answer for. A trackpad's two fingers, a tilt
21
+ * wheel and Shift held down all produce a horizontal gesture, which scrolls a
22
+ * horizontal strip on its own — and chains on its own, which is what
23
+ * `overscroll-behavior-x` is for. Nothing here touches those.
24
+ */
25
+ import * as React from 'react';
26
+ import type { PlassOverscroll } from '../types.js';
27
+ export interface WheelScrollOptions {
28
+ /** Whether the wheel is read at all. A strip that runs down the page is not. */
29
+ enabled: boolean;
30
+ /** What happens once the strip has nowhere left to go. */
31
+ overscroll: PlassOverscroll;
32
+ }
33
+ /**
34
+ * Turns a vertical wheel over a horizontal scroller into travel along it.
35
+ *
36
+ * A native listener rather than `onWheel`, because React attaches its own wheel
37
+ * listener to the root passively, and `preventDefault` inside a passive
38
+ * listener does nothing but log.
39
+ */
40
+ export declare function useWheelScroll(ref: React.RefObject<HTMLElement | null>, { enabled, overscroll }: WheelScrollOptions): void;
41
+ /**
42
+ * The class that keeps a scroller's *own* axis to itself.
43
+ *
44
+ * The other half of `overscroll`, and it is CSS rather than JavaScript because
45
+ * this axis is one the browser already scrolls: a two-finger swipe along the
46
+ * shelf, and on a Mac the swipe past the end of it that goes back a page.
47
+ *
48
+ * One axis, never both. A horizontal strip that also contained the vertical
49
+ * axis would be a box a finger cannot scroll the page from, which is most of
50
+ * the screen on a phone.
51
+ */
52
+ export declare function overscrollClasses(overscroll: PlassOverscroll, horizontal: boolean): string;
@@ -0,0 +1 @@
1
+ "use client";import*as e from"react";export function useWheelScroll(t,{enabled:r,overscroll:l}){e.useEffect(()=>{const e=t.current;if(!e||!r)return;let n=Number.NEGATIVE_INFINITY;const onWheel=t=>{if(Math.abs(t.deltaY)<=Math.abs(t.deltaX))return;const r=e.scrollWidth-e.clientWidth;if(r<=1)return;const o=t.deltaMode===t.DOM_DELTA_LINE?16*t.deltaY:t.deltaMode===t.DOM_DELTA_PAGE?t.deltaY*e.clientWidth:t.deltaY,a=Math.abs(e.scrollLeft);if(!(o>0?r-a>1:a>1))return void(("contain"===l||t.timeStamp-n<250)&&t.preventDefault());const i="rtl"===getComputedStyle(e).direction?-1:1;n=t.timeStamp,t.preventDefault(),e.scrollBy({left:o*i,behavior:"instant"})};return e.addEventListener("wheel",onWheel,{passive:!1}),()=>e.removeEventListener("wheel",onWheel)},[r,l,t])}export function overscrollClasses(e,t){return"contain"!==e?"":t?"overscroll-x-contain":"overscroll-y-contain"}
@@ -1 +1 @@
1
- import{jsx as e,jsxs as i}from"react/jsx-runtime";import{cx as t}from"./styles.js";const a={macos:{bar:38,radius:10,radiusBottom:10,padX:12,padEnd:12,gap:8,title:13,glyph:7,weight:500,frame:1,band:{side:0,bottom:0},control:{width:12,height:12},titleAlign:"center",controlsSide:"start",shape:"dot",rule:!1,stroke:1.4,boxRadius:0,tint:[6,3],accentBorder:!1,paint:null,image:null,shadow:null,glass:!1},macosx:{bar:26,radius:8,radiusBottom:0,padX:10,padEnd:10,gap:8,title:12,glyph:7,weight:700,frame:1,band:{side:0,bottom:0},control:{width:13,height:13},titleAlign:"center",controlsSide:"start",shape:"gloss-dot",rule:!0,stroke:1.5,boxRadius:0,tint:[0,0],accentBorder:!1,paint:{fill:"#e4e4e4",ink:"#333333",dark:!1},image:"repeating-linear-gradient(180deg, rgb(255 255 255 / 0.55) 0 1px, rgb(0 0 0 / 0.035) 1px 2px), linear-gradient(180deg, rgb(255 255 255 / 0.8), rgb(0 0 0 / 0.07))",shadow:"0 1px 0 rgb(255 255 255 / 0.85)",glass:!1},windows11:{bar:32,radius:8,radiusBottom:8,padX:12,padEnd:0,gap:0,title:12,glyph:10,weight:400,frame:1,band:{side:0,bottom:0},control:{width:46,height:32},titleAlign:"start",controlsSide:"end",shape:"square",rule:!1,tint:[3,1],stroke:1,boxRadius:1.6,accentBorder:!1,paint:null,image:null,shadow:null,glass:!1},windows10:{bar:30,radius:0,radiusBottom:0,padX:10,padEnd:0,gap:0,title:12,glyph:10,weight:400,frame:1,band:{side:0,bottom:0},control:{width:45,height:30},titleAlign:"start",controlsSide:"end",shape:"square",rule:!0,tint:[0,0],stroke:.9,boxRadius:0,accentBorder:!0,paint:null,image:null,shadow:null,glass:!1},windows8:{bar:32,radius:0,radiusBottom:0,padX:10,padEnd:0,gap:0,title:12,glyph:11,weight:400,frame:2,band:{side:0,bottom:0},control:{width:45,height:32},titleAlign:"start",controlsSide:"end",shape:"square",rule:!1,tint:[0,0],stroke:1,boxRadius:0,accentBorder:!0,paint:null,image:null,shadow:null,glass:!1},windows7:{bar:30,radius:7,radiusBottom:0,padX:10,padEnd:3,gap:2,title:12,glyph:10,weight:400,frame:1,band:{side:7,bottom:7},control:{width:29,height:20},closeWidth:45,titleAlign:"start",controlsSide:"end",shape:"aero",rule:!1,tint:[0,0],stroke:1.1,boxRadius:0,accentBorder:!1,paint:{fill:"rgb(198 218 242 / 0.45)",ink:"#12314f",dark:!1},image:"linear-gradient(180deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.1) 46%, rgb(255 255 255 / 0.34) 88%, rgb(255 255 255 / 0.5))",shadow:"0 0 6px rgb(255 255 255 / 0.95), 0 0 3px rgb(255 255 255 / 0.95)",glass:!0},windowsxp:{bar:30,radius:8,radiusBottom:0,padX:6,padEnd:4,gap:2,title:13,glyph:9,weight:700,frame:1,band:{side:4,bottom:4},control:{width:21,height:21},closeWidth:26,titleAlign:"start",controlsSide:"end",shape:"plate",rule:!1,tint:[0,0],stroke:1.8,boxRadius:3,accentBorder:!1,paint:{fill:"#1f66d6",ink:"#ffffff",dark:!0},image:"linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.26) 7%, rgb(0 0 0 / 0.11) 42%, rgb(0 0 0 / 0.05) 56%, rgb(255 255 255 / 0.22) 76%, rgb(255 255 255 / 0.34) 88%, rgb(0 0 0 / 0.16) 96%, rgb(0 0 0 / 0.34))",shadow:"0 1px 1px rgb(0 0 0 / 0.45)",glass:!1},linux:{bar:44,radius:12,radiusBottom:12,padX:10,padEnd:10,gap:6,title:14,glyph:10,weight:600,frame:1,band:{side:0,bottom:0},control:{width:24,height:24},titleAlign:"center",controlsSide:"end",shape:"circle",rule:!1,stroke:1.2,boxRadius:0,tint:[11,5],accentBorder:!1,paint:null,image:null,shadow:null,glass:!1}},r={xs:.8,sm:.9,md:1,lg:1.15,xl:1.3};export function windowMetrics(e,i){const t=a[e],o=r[i],round=e=>Math.round(e*o),n={width:round(t.control.width),height:round(t.control.height)},s=round(t.gap),l=void 0===t.closeWidth?n.width:round(t.closeWidth);return{bar:round(t.bar),radius:t.radius,radiusBottom:t.radiusBottom,frame:t.frame,band:{side:round(t.band.side),bottom:round(t.band.bottom)},padX:round(t.padX),padEnd:round(t.padEnd),gap:s,title:round(t.title),glyph:round(t.glyph),weight:t.weight,control:n,controlsWidth:e=>e<=0?0:l+(e-1)*n.width+(e-1)*s,closeWidth:l}}export function windowChrome(e){return a[e]}const o={macos:["close","minimize","maximize"],macosx:["close","minimize","maximize"],windows11:["minimize","maximize","close"],windows10:["minimize","maximize","close"],windows8:["minimize","maximize","close"],windows7:["minimize","maximize","close"],windowsxp:["minimize","maximize","close"],linux:["minimize","maximize","close"]};export function orderControls(e,i){return o[e].filter(e=>i.includes(e))}function veil(e,i){const t=Math.round(100*(1-i));return t>=100?e:`color-mix(in oklab, ${e} ${t}%, transparent)`}export function windowSlots(e){const{os:i,color:t,accent:r,transparency:o,active:n,elevation:s}=e,l=a[i],d=Math.min(Math.max(o,0),1),p="var(--plass-surface)",c=l.tint[n?0:1],g=0===c?p:`color-mix(in oklab, ${p} ${100-c}%, var(--plass-fg))`,h=r&&n,m=l.paint,u=m?n?m.fill:`color-mix(in oklab, ${m.fill} 45%, #c6c9ce)`:null,b=h?`var(--plass-${t}-solid)`:u??g,w=h?`var(--plass-${t}-on-solid)`:m?n?m.ink:`color-mix(in oklab, ${m.ink} 60%, transparent)`:n?"var(--plass-fg)":"var(--plass-muted-fg)",x=l.band.side>0,f=x?veil(h?`var(--plass-${t}-solid)`:u??g,d):"transparent",v=x?`color-mix(in oklab, ${h?`var(--plass-${t}-solid)`:u??"var(--plass-border)"} 72%, black)`:h&&l.accentBorder?`var(--plass-${t}-solid)`:n?"var(--plass-border)":"color-mix(in oklab, var(--plass-border) 55%, transparent)",k=h||(m?.dark??!1);return{"--p-window-bar":veil(b,d),"--p-window-bar-fg":w,"--p-window-bar-image":l.image??"none","--p-window-bar-shadow":l.shadow??"none","--p-window-body":veil(p,d),"--p-window-line":v,"--p-window-band":f,"--p-window-hover":k?"rgb(255 255 255 / 0.18)":"color-mix(in oklab, var(--plass-fg) 9%, transparent)","--p-window-press":k?"rgb(255 255 255 / 0.28)":"color-mix(in oklab, var(--plass-fg) 16%, transparent)","--p-window-shadow":`var(--plass-shadow-${n?s:Math.max(s-1,0)})`,"--p-accent":`var(--plass-${t}-accent)`,"--p-ring":`var(--plass-${t}-ring)`}}function Glyph({size:i,stroke:t,round:a,children:r}){return e("svg",{viewBox:"0 0 10 10",width:i,height:i,fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:a?"round":"square",strokeLinejoin:a?"round":"miter","aria-hidden":"true",children:r})}function controlGlyph(t,a,r,o){const n=r.stroke,s=r.boxRadius>0||"square"!==r.shape,l=r.boxRadius;return"minimize"===t?e(Glyph,{size:o,stroke:n,round:s,children:e("path",{d:"plate"===r.shape?"M2 7.5h6":"M1.5 5h7"})}):"close"===t?e(Glyph,{size:o,stroke:n,round:s,children:e("path",{d:"m1.6 1.6 6.8 6.8M8.4 1.6 1.6 8.4"})}):a?i(Glyph,{size:o,stroke:n,round:s,children:[e("rect",{x:"1.4",y:"3.4",width:"5.2",height:"5.2",rx:l}),e("path",{d:"M3.6 3.4v-2h5v5h-2"})]}):e(Glyph,{size:o,stroke:n,round:s,children:e("rect",{x:"1.5",y:"1.5",width:"7",height:"7",rx:l})})}const n={close:"#ff5f57",minimize:"#febc2e",maximize:"#28c840"},s={close:"#cf4b36",minimize:"#4b85d4",maximize:"#4b85d4"},l={macos:null,macosx:null,windows11:"#c42b1c",windows10:"#e81123",windows8:"#e81123",windows7:"#e04a45",windowsxp:null,linux:null};export function PlWindowControls({os:i,metrics:r,controls:o,maximized:d,active:p,labels:c,onCommand:g}){const h=a[i],m=orderControls(i,o);if(0===m.length)return null;const u="dot"===h.shape||"gloss-dot"===h.shape,b="circle"===h.shape,w="plate"===h.shape,x="aero"===h.shape;return e("div",{className:t("group/controls flex shrink-0 items-center",x?"self-start":"self-stretch"),style:{gap:r.gap},onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:m.map(a=>{const o="maximize"===a&&d?c.restore:c[a],m="close"===a?l[i]:null,{face:f,ink:v,image:k,plate:y}=function controlFace(e,i,t){switch(e.shape){case"dot":case"gloss-dot":return{face:t?n[i]:"color-mix(in oklab, var(--plass-fg) 22%, transparent)",ink:"rgb(0 0 0 / 0.55)",image:"gloss-dot"===e.shape?"radial-gradient(circle at 50% 26%, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0) 62%)":void 0,plate:"gloss-dot"===e.shape?"inset 0 0 0 1px rgb(0 0 0 / 0.22), inset 0 -1px 1px rgb(0 0 0 / 0.15)":void 0};case"plate":return{face:t?s[i]:`color-mix(in oklab, ${s[i]} 45%, #c6c9ce)`,ink:"#ffffff",image:"linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.05) 55%, rgb(0 0 0 / 0.14))",plate:"inset 0 0 0 1px rgb(255 255 255 / 0.4)"};case"aero":return{face:"rgb(255 255 255 / 0.3)",image:"linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.08) 52%, rgb(255 255 255 / 0.3))",plate:"inset 0 0 0 1px rgb(255 255 255 / 0.55)"};default:return{}}}(h,a,p);return e("button",{type:"button","aria-label":o,title:o,className:t("relative flex shrink-0 cursor-pointer items-center justify-center","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease)]","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]",u||b?"rounded-full":"",b?"bg-(--p-window-hover)":"",f?"bg-(--p-window-face)":"",m?"hover:bg-(--p-window-danger) hover:text-white active:bg-(--p-window-danger)":u?"":w?"hover:brightness-110 active:brightness-95":b?"hover:bg-(--p-window-press) active:bg-(--p-window-press)":x?"hover:brightness-110 active:brightness-95":"hover:bg-(--p-window-hover) active:bg-(--p-window-press)"),style:{width:u?r.control.height:"close"===a?r.closeWidth:r.control.width,height:r.control.height,borderRadius:w?h.boxRadius+1:x?"0 0 3px 3px":void 0,backgroundImage:k,boxShadow:y,color:v,...f?{"--p-window-face":f}:{},...m?{"--p-window-danger":m}:{}},onClick:()=>g(a),children:e("span",{className:t("flex items-center justify-center",u?"opacity-0 [transition:opacity_var(--plass-duration)_var(--plass-ease)] group-hover/controls:opacity-100":""),children:controlGlyph(a,d,h,r.glyph)})},a)})})}
1
+ import{jsx as e,jsxs as i}from"react/jsx-runtime";import{cx as t}from"./styles.js";const o={macos:{bar:38,radius:10,radiusBottom:10,padX:12,padEnd:12,gap:8,title:13,glyph:7,weight:500,frame:1,band:{side:0,bottom:0},control:{width:12,height:12},titleAlign:"center",controlsSide:"start",shape:"dot",rule:!1,stroke:1.4,boxRadius:0,tint:[6,3],accentBorder:!1,paint:null,image:null,shadow:null,glass:!1},macosx:{bar:26,radius:8,radiusBottom:0,padX:10,padEnd:10,gap:8,title:12,glyph:7,weight:700,frame:1,band:{side:0,bottom:0},control:{width:13,height:13},titleAlign:"center",controlsSide:"start",shape:"gloss-dot",rule:!0,stroke:1.5,boxRadius:0,tint:[0,0],accentBorder:!1,paint:{fill:"#e4e4e4",ink:"#333333",dark:!1},image:"repeating-linear-gradient(180deg, rgb(255 255 255 / 0.55) 0 1px, rgb(0 0 0 / 0.035) 1px 2px), linear-gradient(180deg, rgb(255 255 255 / 0.8), rgb(0 0 0 / 0.07))",shadow:"0 1px 0 rgb(255 255 255 / 0.85)",glass:!1},windows11:{bar:32,radius:8,radiusBottom:8,padX:12,padEnd:0,gap:0,title:12,glyph:10,weight:400,frame:1,band:{side:0,bottom:0},control:{width:46,height:32},titleAlign:"start",controlsSide:"end",shape:"square",rule:!1,tint:[3,1],stroke:1,boxRadius:1.6,accentBorder:!1,paint:null,image:null,shadow:null,glass:!1},windows10:{bar:30,radius:0,radiusBottom:0,padX:10,padEnd:0,gap:0,title:12,glyph:10,weight:400,frame:1,band:{side:0,bottom:0},control:{width:45,height:30},titleAlign:"start",controlsSide:"end",shape:"square",rule:!0,tint:[0,0],stroke:.9,boxRadius:0,accentBorder:!0,paint:null,image:null,shadow:null,glass:!1},windows8:{bar:32,radius:0,radiusBottom:0,padX:10,padEnd:0,gap:0,title:12,glyph:11,weight:400,frame:2,band:{side:0,bottom:0},control:{width:45,height:32},titleAlign:"start",controlsSide:"end",shape:"square",rule:!1,tint:[0,0],stroke:1,boxRadius:0,accentBorder:!0,paint:null,image:null,shadow:null,glass:!1},windows7:{bar:30,radius:7,radiusBottom:0,padX:10,padEnd:3,gap:2,title:12,glyph:10,weight:400,frame:1,band:{side:7,bottom:7},control:{width:29,height:20},closeWidth:45,titleAlign:"start",controlsSide:"end",shape:"aero",rule:!1,tint:[0,0],stroke:1.1,boxRadius:0,accentBorder:!1,paint:{fill:"rgb(198 218 242 / 0.45)",ink:"#12314f",dark:!1},image:"linear-gradient(180deg, rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.1) 46%, rgb(255 255 255 / 0.34) 88%, rgb(255 255 255 / 0.5))",shadow:"0 0 6px rgb(255 255 255 / 0.95), 0 0 3px rgb(255 255 255 / 0.95)",glass:!0},windowsxp:{bar:30,radius:8,radiusBottom:0,padX:6,padEnd:4,gap:2,title:13,glyph:9,weight:700,frame:1,band:{side:4,bottom:4},control:{width:21,height:21},closeWidth:26,titleAlign:"start",controlsSide:"end",shape:"plate",rule:!1,tint:[0,0],stroke:1.8,boxRadius:3,accentBorder:!1,paint:{fill:"#1f66d6",ink:"#ffffff",dark:!0},image:"linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.26) 7%, rgb(0 0 0 / 0.11) 42%, rgb(0 0 0 / 0.05) 56%, rgb(255 255 255 / 0.22) 76%, rgb(255 255 255 / 0.34) 88%, rgb(0 0 0 / 0.16) 96%, rgb(0 0 0 / 0.34))",shadow:"0 1px 1px rgb(0 0 0 / 0.45)",glass:!1},linux:{bar:44,radius:12,radiusBottom:12,padX:10,padEnd:10,gap:6,title:14,glyph:10,weight:600,frame:1,band:{side:0,bottom:0},control:{width:24,height:24},titleAlign:"center",controlsSide:"end",shape:"circle",rule:!1,stroke:1.2,boxRadius:0,tint:[11,5],accentBorder:!1,paint:null,image:null,shadow:null,glass:!1}},r={xs:.8,sm:.9,md:1,lg:1.15,xl:1.3};export function windowMetrics(e,i){const t=o[e],a=r[i],round=e=>Math.round(e*a),n={width:round(t.control.width),height:round(t.control.height)},s=round(t.gap),l=void 0===t.closeWidth?n.width:round(t.closeWidth);return{bar:round(t.bar),radius:t.radius,radiusBottom:t.radiusBottom,frame:t.frame,band:{side:round(t.band.side),bottom:round(t.band.bottom)},padX:round(t.padX),padEnd:round(t.padEnd),gap:s,title:round(t.title),glyph:round(t.glyph),weight:t.weight,control:n,controlsWidth:e=>e<=0?0:l+(e-1)*n.width+(e-1)*s,closeWidth:l}}export function windowChrome(e){return o[e]}const a={macos:["close","minimize","maximize"],macosx:["close","minimize","maximize"],windows11:["minimize","maximize","close"],windows10:["minimize","maximize","close"],windows8:["minimize","maximize","close"],windows7:["minimize","maximize","close"],windowsxp:["minimize","maximize","close"],linux:["minimize","maximize","close"]};export function orderControls(e,i){return a[e].filter(e=>i.includes(e))}function veil(e,i){const t=Math.round(100*(1-i));return t>=100?e:`color-mix(in oklab, ${e} ${t}%, transparent)`}export function windowSlots(e){const{os:i,color:t,accent:r,transparency:a,active:n,elevation:s}=e,l=o[i],d=Math.min(Math.max(a,0),1),p="var(--plass-surface)",c=l.tint[n?0:1],g=0===c?p:`color-mix(in oklab, ${p} ${100-c}%, var(--plass-fg))`,h=r&&n,u=l.paint,m=u?n?u.fill:`color-mix(in oklab, ${u.fill} 45%, #c6c9ce)`:null,b=h?`var(--plass-${t}-solid)`:m??g,w=h?`var(--plass-${t}-on-solid)`:u?n?u.ink:`color-mix(in oklab, ${u.ink} 60%, transparent)`:n?"var(--plass-fg)":"var(--plass-muted-fg)",x=l.band.side>0,f=x?veil(h?`var(--plass-${t}-solid)`:m??g,d):"transparent",v=x?`color-mix(in oklab, ${h?`var(--plass-${t}-solid)`:m??"var(--plass-border)"} 72%, black)`:h&&l.accentBorder?`var(--plass-${t}-solid)`:n?"var(--plass-border)":"color-mix(in oklab, var(--plass-border) 55%, transparent)",k=h||(u?.dark??!1);return{"--p-window-bar":veil(b,d),"--p-window-bar-fg":w,"--p-window-bar-image":l.image??"none","--p-window-bar-shadow":l.shadow??"none","--p-window-body":veil(p,d),"--p-window-line":v,"--p-window-band":f,"--p-window-hover":k?"rgb(255 255 255 / 0.18)":"color-mix(in oklab, var(--plass-fg) 9%, transparent)","--p-window-press":k?"rgb(255 255 255 / 0.28)":"color-mix(in oklab, var(--plass-fg) 16%, transparent)","--p-window-shadow":`var(--plass-shadow-${n?s:Math.max(s-1,0)})`,"--p-accent":`var(--plass-${t}-accent)`,"--p-ring":`var(--plass-${t}-ring)`}}function Glyph({size:i,stroke:t,round:o,children:r}){return e("svg",{viewBox:"0 0 10 10",width:i,height:i,fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:o?"round":"square",strokeLinejoin:o?"round":"miter","aria-hidden":"true",children:r})}function controlGlyph(t,o,r,a){const n=r.stroke,s=r.boxRadius>0||"square"!==r.shape,l=r.boxRadius;return"minimize"===t?e(Glyph,{size:a,stroke:n,round:s,children:e("path",{d:"plate"===r.shape?"M2 7.5h6":"M1.5 5h7"})}):"close"===t?e(Glyph,{size:a,stroke:n,round:s,children:e("path",{d:"m1.6 1.6 6.8 6.8M8.4 1.6 1.6 8.4"})}):o?i(Glyph,{size:a,stroke:n,round:s,children:[e("rect",{x:"1.4",y:"3.4",width:"5.2",height:"5.2",rx:l}),e("path",{d:"M3.6 3.4v-2h5v5h-2"})]}):e(Glyph,{size:a,stroke:n,round:s,children:e("rect",{x:"1.5",y:"1.5",width:"7",height:"7",rx:l})})}const n={close:"#ff5f57",minimize:"#febc2e",maximize:"#28c840"},s={close:"#cf4b36",minimize:"#4b85d4",maximize:"#4b85d4"},l={macos:null,macosx:null,windows11:"#c42b1c",windows10:"#e81123",windows8:"#e81123",windows7:"#e04a45",windowsxp:null,linux:null};export function PlWindowControls({os:i,metrics:r,controls:a,maximized:d,active:p,labels:c,onCommand:g}){const h=o[i],u=orderControls(i,a);if(0===u.length)return null;const m="dot"===h.shape||"gloss-dot"===h.shape,b="circle"===h.shape,w="plate"===h.shape,x="aero"===h.shape;return e("div",{className:t("group/controls flex shrink-0 items-center",x?"self-start":"self-stretch"),style:{gap:r.gap},onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:u.map(o=>{const a="maximize"===o&&d?c.restore:c[o],u="close"===o?l[i]:null,{face:f,ink:v,image:k,plate:y}=function controlFace(e,i,t){switch(e.shape){case"dot":case"gloss-dot":return{face:t?n[i]:"color-mix(in oklab, var(--plass-fg) 22%, transparent)",ink:"rgb(0 0 0 / 0.55)",image:"gloss-dot"===e.shape?"radial-gradient(circle at 50% 26%, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0) 62%)":void 0,plate:"gloss-dot"===e.shape?"inset 0 0 0 1px rgb(0 0 0 / 0.22), inset 0 -1px 1px rgb(0 0 0 / 0.15)":void 0};case"plate":return{face:t?s[i]:`color-mix(in oklab, ${s[i]} 45%, #c6c9ce)`,ink:"#ffffff",image:"linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.05) 55%, rgb(0 0 0 / 0.14))",plate:"inset 0 0 0 1px rgb(255 255 255 / 0.4)"};case"aero":return{face:"rgb(255 255 255 / 0.3)",image:"linear-gradient(180deg, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.08) 52%, rgb(255 255 255 / 0.3))",plate:"inset 0 0 0 1px rgb(255 255 255 / 0.55)"};default:return{}}}(h,o,p);return e("button",{type:"button","aria-label":a,title:a,className:t("group/control relative flex shrink-0 cursor-pointer items-center justify-center","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),filter_var(--plass-duration)_var(--plass-ease)]","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]",m||b?"rounded-full":"",b?"bg-(--p-window-hover)":"",f?"bg-(--p-window-face)":"",u?"hover:bg-(--p-window-danger) hover:text-white active:bg-(--p-window-danger)":m?"":w?"hover:brightness-110 active:brightness-95":b?"hover:bg-(--p-window-press) active:bg-(--p-window-press)":x?"hover:brightness-110 active:brightness-95":"hover:bg-(--p-window-hover) active:bg-(--p-window-press)"),style:{width:m?r.control.height:"close"===o?r.closeWidth:r.control.width,height:r.control.height,borderRadius:w?h.boxRadius+1:x?"0 0 3px 3px":void 0,backgroundImage:k,boxShadow:y,color:v,...f?{"--p-window-face":f}:{},...u?{"--p-window-danger":u}:{}},onClick:()=>g(o),children:e("span",{className:t("flex items-center justify-center",m?"opacity-0 [transition:opacity_var(--plass-duration)_var(--plass-ease)] group-hover/controls:opacity-100 group-focus-visible/control:opacity-100":""),children:controlGlyph(o,d,h,r.glyph)})},o)})})}
@@ -1 +1 @@
1
- export const de={close:"Schließen",cancel:"Abbrechen",confirm:"Bestätigen",clear:"Leeren",done:"Fertig",skip:"Überspringen",search:"Suchen",selectAll:"Alle auswählen",selectRow:"Zeile auswählen",remove:"Entfernen",dismiss:"Ausblenden",open:"Öffnen",previous:"Zurück",next:"Weiter",reveal:"Anzeigen",hide:"Verbergen",increase:"Erhöhen",decrease:"Verringern",preview:"Vorschau",empty:"Nichts vorhanden",breadcrumb:"Navigationspfad",breadcrumbExpand:"Ausgeblendete Schritte anzeigen",carousel:"Karussell",carouselPrevious:"Vorheriges Bild",carouselNext:"Nächstes Bild",commandPalette:"Befehlspalette",commandPalettePlaceholder:"Befehle durchsuchen",gallery:"Galerie",chart:"Diagramm",minimize:"Minimieren",maximize:"Maximieren",restore:"Wiederherstellen",resizeWindow:"Fenstergröße ändern",overlay:"Overlay",pagination:"Seitennavigation",paginationPrevious:"Vorherige Seite",paginationNext:"Nächste Seite",paginationFirst:"Erste Seite",paginationLast:"Letzte Seite",rating:"Bewertung",sidebar:"Seitenleiste",sidebarClose:"Seitenleiste schließen",sidebarResize:"Breite der Seitenleiste ändern",skipToContent:"Zum Inhalt springen",backToTop:"Nach oben",onThisPage:"Auf dieser Seite",typing:"Schreibt …",newTab:"(wird in einem neuen Tab geöffnet)",transferAvailable:"Verfügbar",transferSelected:"Ausgewählt",transferToSelected:"Zu den ausgewählten verschieben",transferToAvailable:"Zu den verfügbaren verschieben",copy:"Kopieren",copied:"Kopiert",copyFailed:"Kopieren nicht möglich",raw:"Unformatiert",code:"Code",previousMonth:"Vorheriger Monat",nextMonth:"Nächster Monat",previousYear:"Vorheriges Jahr",nextYear:"Nächstes Jahr",previousYears:"Vorherige Jahre",nextYears:"Nächste Jahre",chooseMonth:"Monat wählen",chooseYear:"Jahr wählen",today:"Heute",thisMonth:"Dieser Monat",thisYear:"Dieses Jahr",now:"Jetzt",hour:"Stunde",minute:"Minute",second:"Sekunde",meridiem:"AM/PM",start:"Beginn",end:"Ende"};
1
+ export const de={close:"Schließen",cancel:"Abbrechen",confirm:"Bestätigen",acknowledge:"OK",clear:"Leeren",done:"Fertig",skip:"Überspringen",search:"Suchen",selectAll:"Alle auswählen",selectRow:"Zeile auswählen",remove:"Entfernen",dismiss:"Ausblenden",open:"Öffnen",previous:"Zurück",next:"Weiter",reveal:"Anzeigen",hide:"Verbergen",increase:"Erhöhen",decrease:"Verringern",preview:"Vorschau",empty:"Nichts vorhanden",optional:"Optional",breadcrumb:"Navigationspfad",breadcrumbExpand:"Ausgeblendete Schritte anzeigen",carousel:"Karussell",carouselPrevious:"Vorheriges Bild",carouselNext:"Nächstes Bild",slide:"Bild",commandPalette:"Befehlspalette",commandPalettePlaceholder:"Befehle durchsuchen",gallery:"Galerie",chart:"Diagramm",minimize:"Minimieren",maximize:"Maximieren",restore:"Wiederherstellen",resizeWindow:"Fenstergröße ändern",overlay:"Overlay",notifications:"Benachrichtigungen",pagination:"Seitennavigation",paginationPrevious:"Vorherige Seite",paginationNext:"Nächste Seite",paginationFirst:"Erste Seite",paginationLast:"Letzte Seite",rating:"Bewertung",sidebar:"Seitenleiste",sidebarOpen:"Seitenleiste öffnen",sidebarClose:"Seitenleiste schließen",sidebarResize:"Breite der Seitenleiste ändern",skipToContent:"Zum Inhalt springen",backToTop:"Nach oben",onThisPage:"Auf dieser Seite",typing:"Schreibt …",messageSending:"Wird gesendet",messageSent:"Gesendet",messageDelivered:"Zugestellt",messageRead:"Gelesen",messageFailed:"Nicht zugestellt",spoilerWarning:"Kann Spoiler enthalten",filePickerTitle:"Dateien hier ablegen oder zum Durchsuchen klicken",newTab:"(wird in einem neuen Tab geöffnet)",transferAvailable:"Verfügbar",transferSelected:"Ausgewählt",transferToSelected:"Zu den ausgewählten verschieben",transferToAvailable:"Zu den verfügbaren verschieben",copy:"Kopieren",copied:"Kopiert",copyFailed:"Kopieren nicht möglich",raw:"Unformatiert",code:"Code",previousMonth:"Vorheriger Monat",nextMonth:"Nächster Monat",previousYear:"Vorheriges Jahr",nextYear:"Nächstes Jahr",previousYears:"Vorherige Jahre",nextYears:"Nächste Jahre",chooseMonth:"Monat wählen",chooseYear:"Jahr wählen",today:"Heute",thisMonth:"Dieser Monat",thisYear:"Dieses Jahr",now:"Jetzt",hour:"Stunde",minute:"Minute",second:"Sekunde",meridiem:"AM/PM",start:"Beginn",end:"Ende",paginationPage:e=>`Seite ${e}`,paginationStatus:(e,n)=>`Seite ${e} von ${n}`,ratingValue:(e,n)=>`${e.toLocaleString("de")} von ${n}`,ratingNone:"Keine Bewertung",carouselSlide:(e,n)=>`Bild ${e} von ${n}`,galleryItem:(e,n)=>`${e} von ${n}`,removeItem:e=>`${e} entfernen`,addCustom:e=>`„${e}“ hinzufügen`,otpSlot:(e,n)=>`Zeichen ${e} von ${n}`,transferMoved:(e,n)=>`${e} ${1===e?"Eintrag":"Einträge"} nach „${n}“ verschoben`};