plass-ui 1.7.0 → 1.8.1
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.
- package/CHANGELOG.md +229 -0
- package/README.md +3 -3
- package/dist/components/accordion/PlAccordion.d.ts +11 -4
- package/dist/components/accordion/PlAccordion.js +1 -1
- package/dist/components/alert/PlAlert.d.ts +2 -0
- package/dist/components/alert/PlAlert.js +1 -1
- package/dist/components/anchor/PlAnchor.js +1 -1
- package/dist/components/animate-appear/PlAnimateAppear.js +1 -1
- package/dist/components/animate-counter/PlAnimateCounter.d.ts +5 -2
- package/dist/components/animate-counter/PlAnimateCounter.js +1 -1
- package/dist/components/animate-float/PlAnimateFloat.js +1 -1
- package/dist/components/animate-headline/PlAnimateHeadline.js +1 -1
- package/dist/components/animate-lighting/PlAnimateLighting.js +1 -1
- package/dist/components/animate-marquee/PlAnimateMarquee.js +1 -1
- package/dist/components/animate-scramble/PlAnimateScramble.js +1 -1
- package/dist/components/animate-shake/PlAnimateShake.js +1 -1
- package/dist/components/animate-split/PlAnimateSplit.js +1 -1
- package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
- package/dist/components/app-logo/PlAppLogo.d.ts +51 -15
- package/dist/components/area-chart/PlAreaChart.js +1 -1
- package/dist/components/avatar/PlAvatar.js +1 -1
- package/dist/components/badge/PlBadge.d.ts +2 -0
- package/dist/components/bar-chart/PlBarChart.js +1 -1
- package/dist/components/blockquote/PlBlockquote.d.ts +2 -0
- package/dist/components/bottom-navigation/PlBottomNavigation.d.ts +17 -5
- package/dist/components/bottom-navigation/PlBottomNavigation.js +1 -1
- package/dist/components/box/PlBox.d.ts +2 -0
- package/dist/components/breadcrumb/PlBreadcrumb.d.ts +16 -3
- package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
- package/dist/components/button/PlButton.d.ts +2 -0
- package/dist/components/button/PlButton.js +1 -1
- package/dist/components/button-group/PlButtonGroup.d.ts +2 -0
- package/dist/components/calendar/PlCalendar.js +1 -1
- package/dist/components/card/PlCard.d.ts +4 -1
- package/dist/components/card/PlCard.js +1 -1
- package/dist/components/carousel/PlCarousel.d.ts +2 -0
- package/dist/components/carousel/PlCarousel.js +1 -1
- package/dist/components/checkbox/PlCheckbox.js +1 -1
- package/dist/components/chip/PlChip.d.ts +2 -0
- package/dist/components/chip/PlChip.js +1 -1
- package/dist/components/code-block/PlCodeBlock.js +1 -1
- package/dist/components/collapsible/PlCollapsible.d.ts +2 -0
- package/dist/components/collapsible/PlCollapsible.js +1 -1
- package/dist/components/color-picker/PlColorPicker.d.ts +2 -0
- package/dist/components/color-picker/PlColorPicker.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +3 -1
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/command-palette/PlCommandPalette.js +1 -1
- package/dist/components/confirm/PlConfirmProvider.js +1 -1
- package/dist/components/data-table/PlDataTable.d.ts +2 -0
- package/dist/components/data-table/PlDataTable.js +1 -1
- package/dist/components/date-picker/PlDatePicker.js +1 -1
- package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
- package/dist/components/date-time-picker/PlDateTimePicker.js +1 -1
- package/dist/components/drawer/PlDrawer.d.ts +27 -2
- package/dist/components/drawer/PlDrawer.js +1 -1
- package/dist/components/empty/PlEmpty.d.ts +4 -1
- package/dist/components/empty/PlEmpty.js +1 -1
- package/dist/components/file-picker/PlFilePicker.d.ts +31 -0
- package/dist/components/file-picker/PlFilePicker.js +1 -1
- package/dist/components/file-picker/index.d.ts +1 -1
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts +10 -0
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
- package/dist/components/footer/PlFooter.js +1 -1
- package/dist/components/gallery/PlGallery.js +1 -1
- package/dist/components/gauge-chart/PlGaugeChart.d.ts +11 -2
- package/dist/components/gauge-chart/PlGaugeChart.js +1 -1
- package/dist/components/header/PlHeader.js +1 -1
- package/dist/components/heatmap-chart/PlHeatmapChart.d.ts +1 -1
- package/dist/components/heatmap-chart/PlHeatmapChart.js +1 -1
- package/dist/components/hot-keys/PlHotKeys.d.ts +4 -0
- package/dist/components/image/PlImage.js +1 -1
- package/dist/components/image/PlImagePreview.d.ts +3 -2
- package/dist/components/list/PlList.d.ts +18 -5
- package/dist/components/list/PlList.js +1 -1
- package/dist/components/menu/PlMenu.d.ts +19 -7
- package/dist/components/menu/PlMenu.js +1 -1
- package/dist/components/menubar/PlMenubar.js +1 -1
- package/dist/components/meter/PlMeter.js +1 -1
- package/dist/components/mockup/PlMockup.d.ts +4 -3
- package/dist/components/mockup/PlMockup.js +1 -1
- package/dist/components/modal/PlModal.js +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.d.ts +52 -8
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/number-field/PlNumberField.d.ts +3 -1
- package/dist/components/number-field/PlNumberField.js +1 -1
- package/dist/components/otp-field/PlOtpField.d.ts +2 -0
- package/dist/components/otp-field/PlOtpField.js +1 -1
- package/dist/components/overlay/PlOverlay.js +1 -1
- package/dist/components/page-layout/PlPageLayout.js +1 -1
- package/dist/components/pagination/PlPagination.d.ts +2 -0
- package/dist/components/panes/PlPanes.d.ts +4 -1
- package/dist/components/panes/PlPanes.js +1 -1
- package/dist/components/pie-chart/PlPieChart.d.ts +1 -1
- package/dist/components/pie-chart/PlPieChart.js +1 -1
- package/dist/components/pill/PlPill.d.ts +2 -0
- package/dist/components/pill/PlPill.js +1 -1
- package/dist/components/popover/PlPopover.js +1 -1
- package/dist/components/progress-box/PlProgressBox.js +1 -1
- package/dist/components/progress-circular/PlProgressCircular.d.ts +11 -1
- package/dist/components/progress-circular/PlProgressCircular.js +1 -1
- package/dist/components/progress-linear/PlProgressLinear.js +1 -1
- package/dist/components/radio-group/PlRadioGroup.js +1 -1
- package/dist/components/scatter-chart/PlScatterChart.js +1 -1
- package/dist/components/scroll-zone/PlScrollZone.d.ts +2 -0
- package/dist/components/scroll-zone/PlScrollZone.js +1 -1
- package/dist/components/segmented-button/PlSegmentedButton.d.ts +6 -1
- package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
- package/dist/components/select/PlSelect.d.ts +2 -0
- package/dist/components/select/PlSelect.js +1 -1
- package/dist/components/sidebar/PlSidebar.d.ts +12 -0
- package/dist/components/sidebar/PlSidebar.js +1 -1
- package/dist/components/sidebar/PlSidebarTrigger.d.ts +2 -0
- package/dist/components/slider/PlSlider.d.ts +2 -1
- package/dist/components/slider/PlSlider.js +1 -1
- package/dist/components/sparkline/PlSparkline.d.ts +15 -3
- package/dist/components/sparkline/PlSparkline.js +1 -1
- package/dist/components/stepper/PlStepper.d.ts +11 -0
- package/dist/components/stepper/PlStepper.js +1 -1
- package/dist/components/switch/PlSwitch.js +1 -1
- package/dist/components/table/PlTable.d.ts +2 -0
- package/dist/components/tabs/PlTabs.js +1 -1
- package/dist/components/text-field/PlTextField.d.ts +2 -0
- package/dist/components/text-field/PlTextField.js +1 -1
- package/dist/components/text-link/PlTextLink.js +1 -1
- package/dist/components/time-picker/PlTimePicker.js +1 -1
- package/dist/components/timeline-chart/PlTimelineChart.js +1 -1
- package/dist/components/toast/PlToast.d.ts +2 -0
- package/dist/components/toast/PlToast.js +1 -1
- package/dist/components/toggle/PlToggle.js +1 -1
- package/dist/components/toolbar/PlToolbar.d.ts +2 -0
- package/dist/components/tour/PlTour.js +1 -1
- package/dist/components/transfer/PlTransfer.d.ts +2 -0
- package/dist/components/transfer/PlTransfer.js +1 -1
- package/dist/components/tree/PlTree.d.ts +12 -0
- package/dist/components/tree/PlTree.js +1 -1
- package/dist/components/tree-select/PlTreeSelect.js +1 -1
- package/dist/components/typography/PlTypography.d.ts +20 -7
- package/dist/components/typography/PlTypography.js +1 -1
- package/dist/components/visually-hidden/PlVisuallyHidden.d.ts +12 -3
- package/dist/components/visually-hidden/PlVisuallyHidden.js +1 -1
- package/dist/components/window-pane/PlWindowPane.d.ts +3 -0
- package/dist/components/window-pane/PlWindowPane.js +1 -1
- package/dist/css/accordion.css +4 -0
- package/dist/css/alert.css +5 -0
- package/dist/css/anchor.css +6 -0
- package/dist/css/animate-appear.css +3 -0
- package/dist/css/animate-blink.css +3 -0
- package/dist/css/animate-counter.css +4 -0
- package/dist/css/animate-fade.css +3 -0
- package/dist/css/animate-float.css +3 -0
- package/dist/css/animate-grow.css +3 -0
- package/dist/css/animate-headline.css +3 -0
- package/dist/css/animate-lighting.css +4 -0
- package/dist/css/animate-marquee.css +4 -0
- package/dist/css/animate-reveal.css +3 -0
- package/dist/css/animate-rotate.css +3 -0
- package/dist/css/animate-scramble.css +5 -0
- package/dist/css/animate-shake.css +3 -0
- package/dist/css/animate-slide.css +3 -0
- package/dist/css/animate-split.css +4 -0
- package/dist/css/animate-typing.css +4 -0
- package/dist/css/animate-zoom.css +3 -0
- package/dist/css/app-logo.css +2 -0
- package/dist/css/area-chart.css +12 -0
- package/dist/css/aspect-ratio.css +2 -0
- package/dist/css/avatar.css +2 -0
- package/dist/css/back-top.css +11 -0
- package/dist/css/badge.css +2 -0
- package/dist/css/bar-chart.css +10 -0
- package/dist/css/base.css +2 -3
- package/dist/css/blockquote.css +2 -0
- package/dist/css/bottom-navigation.css +4 -0
- package/dist/css/box.css +2 -0
- package/dist/css/breadcrumb.css +6 -0
- package/dist/css/button-group.css +2 -0
- package/dist/css/button.css +7 -0
- package/dist/css/calendar.css +17 -0
- package/dist/css/card.css +2 -0
- package/dist/css/carousel.css +10 -0
- package/dist/css/chat-bubble.css +6 -0
- package/dist/css/checkbox.css +3 -0
- package/dist/css/chip.css +8 -0
- package/dist/css/code-block.css +6 -0
- package/dist/css/collapsible.css +3 -0
- package/dist/css/color-picker.css +17 -0
- package/dist/css/combobox.css +10 -0
- package/dist/css/command-palette.css +7 -0
- package/dist/css/confirm.css +9 -0
- package/dist/css/container.css +5 -0
- package/dist/css/data-list.css +2 -0
- package/dist/css/data-table.css +15 -0
- package/dist/css/date-picker.css +16 -0
- package/dist/css/date-range-picker.css +16 -0
- package/dist/css/date-time-picker.css +16 -0
- package/dist/css/divider.css +2 -0
- package/dist/css/drawer.css +6 -0
- package/dist/css/empty.css +2 -0
- package/dist/css/fieldset.css +2 -0
- package/dist/css/file-picker.css +8 -0
- package/dist/css/flex.css +5 -0
- package/dist/css/floating-action-button.css +7 -0
- package/dist/css/floating-bottom-navigation.css +5 -0
- package/dist/css/footer.css +6 -0
- package/dist/css/form.css +2 -0
- package/dist/css/gallery.css +15 -0
- package/dist/css/gauge-chart.css +11 -0
- package/dist/css/grid.css +5 -0
- package/dist/css/header.css +6 -0
- package/dist/css/heatmap-chart.css +10 -0
- package/dist/css/highlight.css +2 -0
- package/dist/css/hot-keys.css +3 -0
- package/dist/css/hover-card.css +9 -0
- package/dist/css/how-to-steps.css +3 -0
- package/dist/css/icon-button.css +7 -0
- package/dist/css/icon.css +1 -0
- package/dist/css/image.css +7 -0
- package/dist/css/line-chart.css +12 -0
- package/dist/css/list.css +2 -0
- package/dist/css/menu.css +5 -0
- package/dist/css/menubar.css +5 -0
- package/dist/css/meter.css +6 -0
- package/dist/css/mockup.css +4 -0
- package/dist/css/modal.css +5 -0
- package/dist/css/navigation-menu.css +4 -0
- package/dist/css/number-field.css +10 -0
- package/dist/css/otp-field.css +6 -0
- package/dist/css/overlay.css +4 -0
- package/dist/css/page-layout.css +7 -0
- package/dist/css/pagination.css +8 -0
- package/dist/css/panes.css +7 -0
- package/dist/css/pie-chart.css +10 -0
- package/dist/css/pill.css +4 -0
- package/dist/css/popconfirm.css +12 -0
- package/dist/css/popover.css +11 -0
- package/dist/css/portal.css +1 -0
- package/dist/css/progress-box.css +5 -0
- package/dist/css/progress-circular.css +5 -0
- package/dist/css/progress-linear.css +5 -0
- package/dist/css/radio-group.css +3 -0
- package/dist/css/rating.css +6 -0
- package/dist/css/scatter-chart.css +10 -0
- package/dist/css/scroll-area.css +2 -0
- package/dist/css/scroll-zone.css +15 -0
- package/dist/css/segmented-button.css +5 -0
- package/dist/css/select.css +9 -0
- package/dist/css/show.css +1 -0
- package/dist/css/sidebar.css +16 -0
- package/dist/css/skeleton.css +2 -0
- package/dist/css/slider.css +3 -0
- package/dist/css/sparkline.css +10 -0
- package/dist/css/spoiler.css +10 -0
- package/dist/css/stack.css +5 -0
- package/dist/css/stat.css +2 -0
- package/dist/css/stepper.css +8 -0
- package/dist/css/switch.css +3 -0
- package/dist/css/table.css +3 -0
- package/dist/css/tabs.css +7 -0
- package/dist/css/text-field.css +8 -0
- package/dist/css/text-link.css +6 -0
- package/dist/css/time-picker.css +16 -0
- package/dist/css/timeline-chart.css +10 -0
- package/dist/css/timeline.css +6 -0
- package/dist/css/toast.css +5 -0
- package/dist/css/toggle.css +5 -0
- package/dist/css/toolbar.css +2 -0
- package/dist/css/tooltip.css +9 -0
- package/dist/css/tour.css +10 -0
- package/dist/css/transfer.css +13 -0
- package/dist/css/tree-select.css +14 -0
- package/dist/css/tree.css +3 -0
- package/dist/css/visually-hidden.css +2 -0
- package/dist/css/window-pane.css +9 -0
- package/dist/internal/animate.d.ts +59 -4
- package/dist/internal/animate.js +1 -1
- package/dist/internal/bottom-bar.js +1 -1
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +132 -11
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/commit-change.d.ts +38 -0
- package/dist/internal/commit-change.js +1 -0
- package/dist/internal/data-table.d.ts +2 -2
- package/dist/internal/data-table.js +1 -1
- package/dist/internal/date.d.ts +9 -0
- package/dist/internal/date.js +1 -1
- package/dist/internal/defaults.d.ts +34 -1
- package/dist/internal/defaults.js +1 -1
- package/dist/internal/direction.d.ts +8 -2
- package/dist/internal/direction.js +1 -1
- package/dist/internal/form.d.ts +43 -0
- package/dist/internal/form.js +1 -1
- package/dist/internal/format.d.ts +4 -1
- package/dist/internal/format.js +1 -1
- package/dist/internal/gallery.d.ts +28 -0
- package/dist/internal/gallery.js +1 -1
- package/dist/internal/glow.d.ts +7 -2
- package/dist/internal/glow.js +1 -1
- package/dist/internal/heading.d.ts +11 -0
- package/dist/internal/heading.js +1 -0
- package/dist/internal/highlight.d.ts +4 -2
- package/dist/internal/highlight.js +1 -1
- package/dist/internal/labels.d.ts +5 -0
- package/dist/internal/labels.js +1 -1
- package/dist/internal/layout-box.d.ts +35 -0
- package/dist/internal/layout-box.js +1 -0
- package/dist/internal/lazy.d.ts +37 -0
- package/dist/internal/lazy.js +1 -0
- package/dist/internal/media.d.ts +6 -0
- package/dist/internal/media.js +1 -1
- package/dist/internal/page-layout.d.ts +24 -13
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.d.ts +1 -1
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +24 -0
- package/dist/internal/progress.js +1 -1
- package/dist/internal/search.d.ts +12 -0
- package/dist/internal/search.js +1 -1
- package/dist/internal/sizer.d.ts +15 -8
- package/dist/internal/sizer.js +1 -1
- package/dist/internal/styles.d.ts +22 -6
- package/dist/internal/styles.js +1 -1
- package/dist/internal/wheel.d.ts +13 -1
- package/dist/internal/wheel.js +1 -1
- package/dist/internal/window.js +1 -1
- package/dist/locales/de.js +1 -1
- package/dist/locales/es.js +1 -1
- package/dist/locales/fr.js +1 -1
- package/dist/locales/ja.js +1 -1
- package/dist/locales/ko.js +1 -1
- package/dist/locales/zh-Hans.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +758 -40
- package/dist/tokens.css +758 -40
- package/dist/types.d.ts +14 -2
- package/package.json +19 -18
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useRender } from '@base-ui/react/use-render';
|
|
3
|
-
import type { PlassColor } from '../../types.js';
|
|
3
|
+
import type { PlassColor, PlassHeadingLevel } from '../../types.js';
|
|
4
4
|
/**
|
|
5
5
|
* What a piece of text *is*, which decides both its type scale and the element
|
|
6
6
|
* it renders as.
|
|
@@ -15,7 +15,8 @@ export type PlTypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold';
|
|
|
15
15
|
export interface PlTypographyProps extends Omit<React.ComponentPropsWithoutRef<'p'>, 'color' | 'children'> {
|
|
16
16
|
/**
|
|
17
17
|
* The type scale, and the element that carries it. `h1`–`h6` render the
|
|
18
|
-
* matching heading, `lead`/`body` a `<p>`, `caption`/`overline` a `<span
|
|
18
|
+
* matching heading, `lead`/`body` a `<p>`, `caption`/`overline` a `<span>`,
|
|
19
|
+
* unless `headingLevel` or `render` names another element.
|
|
19
20
|
* @default 'body'
|
|
20
21
|
*/
|
|
21
22
|
level?: PlTypographyLevel;
|
|
@@ -40,9 +41,20 @@ export interface PlTypographyProps extends Omit<React.ComponentPropsWithoutRef<'
|
|
|
40
41
|
*/
|
|
41
42
|
gutter?: boolean;
|
|
42
43
|
/**
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
44
|
+
* The level of the heading the text is, `1` to `6`, without changing the type
|
|
45
|
+
* scale `level` picks.
|
|
46
|
+
*
|
|
47
|
+
* A heading has to sit one level under the one above it, or the page's
|
|
48
|
+
* outline skips a step, and the size that suits a heading is not always its
|
|
49
|
+
* place in the outline. An `h3`-sized title directly under the page's `<h1>`
|
|
50
|
+
* wants `2`. Any level takes one: `level="body"` with `headingLevel={2}` is an
|
|
51
|
+
* `<h2>` at body size. `render` wins when both are given.
|
|
52
|
+
*/
|
|
53
|
+
headingLevel?: PlassHeadingLevel;
|
|
54
|
+
/**
|
|
55
|
+
* Renders a different element without changing the type scale — an `h3`-sized
|
|
56
|
+
* line that is semantically a `<p>`. Base UI's own escape hatch, and it wins
|
|
57
|
+
* over `headingLevel`, which is the way to change only a heading's level.
|
|
46
58
|
*/
|
|
47
59
|
render?: useRender.RenderProp;
|
|
48
60
|
children?: React.ReactNode;
|
|
@@ -56,8 +68,9 @@ export interface PlTypographyProps extends Omit<React.ComponentPropsWithoutRef<'
|
|
|
56
68
|
* its own, so a page can use it without wrapping its prose in a card.
|
|
57
69
|
*
|
|
58
70
|
* `level` sets the scale *and* the element, which is the common case. When they
|
|
59
|
-
* have to differ
|
|
60
|
-
*
|
|
71
|
+
* have to differ, `headingLevel` moves a heading to another level of the
|
|
72
|
+
* outline, and `render` breaks the tie for anything else — a subheading that
|
|
73
|
+
* should not enter the document outline, a `<p>` that has to look like an `h3`.
|
|
61
74
|
*
|
|
62
75
|
* There is no `variant` and no `elevation`, and there is no `size` either.
|
|
63
76
|
* `level` is the size: a `size` prop alongside it would let a caller ask for an
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},n=new Set(["caption","overline"]),o={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},a={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},
|
|
1
|
+
"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},n=new Set(["caption","overline"]),o={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},a={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"};function clampClasses(e){return 1===e?"block truncate":"line-clamp-(--p-lines)"}export const PlTypography=/* @__PURE__ */e.forwardRef(function PlTypography({level:s="body",color:h,weight:c,align:d,lines:p,gutter:b=!1,headingLevel:u,render:f,className:x,style:g,children:y,...v},k){const j=p&&p>=1?Math.floor(p):void 0,w="number"==typeof u&&Number.isInteger(u)&&u>=1&&u<=6?u:void 0,N=w?`h${w}`:l[s],C=["m-0",r[s],a[c??m[s]],d?i[d]:"",j?clampClasses(j):"",b?o[s]:"",h?"text-(--p-accent)":n.has(s)?"text-(--plass-muted-fg)":"text-(--plass-fg)",x??""].filter(Boolean).join(" ");return t({render:f??e.createElement(N),ref:k,props:{className:C,style:h||j&&j>1?{...h?{"--p-accent":`var(--plass-${h}-accent)`}:null,...j&&j>1?{"--p-lines":j}:null,...g}:g,children:y,...v}})});
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useRender } from '@base-ui/react/use-render';
|
|
3
|
+
import type { PlassHeadingLevel } from '../../types.js';
|
|
3
4
|
export interface PlVisuallyHiddenProps extends React.ComponentPropsWithoutRef<'span'> {
|
|
4
5
|
/**
|
|
5
6
|
* Brings the content back into the page while anything inside it has the
|
|
@@ -20,8 +21,16 @@ export interface PlVisuallyHiddenProps extends React.ComponentPropsWithoutRef<'s
|
|
|
20
21
|
*/
|
|
21
22
|
focusable?: boolean;
|
|
22
23
|
/**
|
|
23
|
-
* Renders
|
|
24
|
-
*
|
|
24
|
+
* Renders a heading at this level, `1` to `6`, in place of the `<span>`: a
|
|
25
|
+
* heading that structures the page for a screen reader without appearing in
|
|
26
|
+
* the design. It is clipped like any other content, and `focusable` still
|
|
27
|
+
* applies. `render` wins when both are given.
|
|
28
|
+
*/
|
|
29
|
+
headingLevel?: PlassHeadingLevel;
|
|
30
|
+
/**
|
|
31
|
+
* Renders something other than a `<span>`, such as the `<div>` a live region
|
|
32
|
+
* wants. Base UI's own escape hatch, and it wins over `headingLevel`, which is
|
|
33
|
+
* the way to render a heading.
|
|
25
34
|
*/
|
|
26
35
|
render?: useRender.RenderProp;
|
|
27
36
|
children?: React.ReactNode;
|
|
@@ -43,4 +52,4 @@ export interface PlVisuallyHiddenProps extends React.ComponentPropsWithoutRef<'s
|
|
|
43
52
|
* inside a dozen components; this is the same rule, spelled once, for the
|
|
44
53
|
* caller's own markup.
|
|
45
54
|
*/
|
|
46
|
-
export declare const PlVisuallyHidden: React.ForwardRefExoticComponent<PlVisuallyHiddenProps & React.RefAttributes<
|
|
55
|
+
export declare const PlVisuallyHidden: React.ForwardRefExoticComponent<PlVisuallyHiddenProps & React.RefAttributes<HTMLElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import
|
|
1
|
+
"use client";import*as e from"react";import{useRender as i}from"@base-ui/react/use-render";import{headingLevelOf as n}from"../../internal/heading.js";import{cx as r,srOnlyClasses as s}from"../../internal/styles.js";const t=/* @__PURE__ */["focus-within:static focus-within:size-auto","focus-within:overflow-visible focus-within:whitespace-normal","focus-within:[clip-path:none]"].join(" ");export const PlVisuallyHidden=/* @__PURE__ */e.forwardRef(function PlVisuallyHidden({focusable:o=!1,headingLevel:a,render:c,className:l,children:f,...u},d){const h=n(a),m=h?`h${h}`:"span";return i({render:c??e.createElement(m),ref:d,props:{className:r(s,o?t:"",l),children:f,...u}})});
|
|
@@ -58,6 +58,9 @@ export interface PlWindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'
|
|
|
58
58
|
* Anything above `0` also turns the acrylic on, so the page underneath is
|
|
59
59
|
* blurred rather than merely visible. `1` is a window that is nothing but its
|
|
60
60
|
* edge and its chrome.
|
|
61
|
+
*
|
|
62
|
+
* A reader who has asked their system for less transparency gets an opaque
|
|
63
|
+
* window with no blur, whatever this says.
|
|
61
64
|
* @default 0
|
|
62
65
|
*/
|
|
63
66
|
transparency?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r}from"../../internal/drag.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a,glassClasses as l,hasContent as c,iconClasses as d}from"../../internal/styles.js";import{PlWindowControls as u,orderControls as m,windowChrome as h,windowMetrics as f,windowSlots as p}from"../../internal/window.js";import{useDefaults as g}from"../../internal/defaults.js";import{inertProps as w}from"../../internal/inert.js";import{focusablesIn as b}from"../../internal/focusable.js";function useLatched(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const v={ArrowRight:[1,0],ArrowLeft:[-1,0],ArrowDown:[0,1],ArrowUp:[0,-1]};function stepWithin({step:e,start:t,end:n,limit:i}){return e>0?Math.min(e,Math.max(0,i-n)):-Math.min(-e,Math.max(0,t))}const x=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}];export const PlWindowPane=/* @__PURE__ */i.forwardRef(function PlWindowPane(y,z){const{os:N="macos",title:M,icon:E,actions:L,controls:C=!0,size:S,color:k,accent:R=!1,transparency:D=0,active:I,elevation:T=2,position:W="static",draggable:j=!1,resizable:P=!1,width:A,height:B,minWidth:O=180,minHeight:$,offset:K,defaultOffset:_,onOffsetChange:F,onResize:G,open:H,defaultOpen:U=!0,onOpenChange:X,minimized:Y,defaultMinimized:q=!1,onMinimizedChange:J,maximized:Q,defaultMaximized:V=!1,onMaximizedChange:Z,scroll:ee=!0,minimizeLabel:te,maximizeLabel:ne,restoreLabel:ie,closeLabel:oe,resizeLabel:re,moveLabel:se,render:ae,className:le,style:ce,children:de,...ue}=y,me=g(),he=S??me.size??"md",fe=k??me.color??"primary",pe=s(),ge=h(N),we=f(N,he),be=i.useId(),[ve,xe]=useLatched(H,U,X),[ye,ze]=useLatched(Y,q,J),[Ne,Me]=useLatched(Q,V,Z),[Ee,Le]=useLatched(K,_??{x:0,y:0},F),[Ce,Se]=i.useState(null),[ke,Re]=i.useState(!0),De=I??ke,[Ie,Te]=i.useState(null),[We,je]=i.useState(!1),[Pe,Ae]=i.useState(!1),[Be,Oe]=i.useState(ve);Be!==ve&&(Oe(ve),Ae(!ve)),i.useEffect(()=>{if(!Pe)return;const e=window.setTimeout(()=>Ae(!1),260);return()=>window.clearTimeout(e)},[Pe]);const $e=i.useRef(null),Ke=i.useCallback(e=>{$e.current=e,"function"==typeof z?z(e):z&&(z.current=e)},[z]),_e=i.useRef(null),Fe=i.useRef(null),Ge=ve||Pe;i.useEffect(()=>{const e=$e.current;if(!Ge||!e)return;const arrive=t=>{const n=t.relatedTarget;n instanceof Node&&e.contains(n)||(Fe.current=n instanceof HTMLElement?n:null)};return e.addEventListener("focusin",arrive),()=>e.removeEventListener("focusin",arrive)},[Ge]),i.useLayoutEffect(()=>{const e=$e.current,t=document.activeElement;if(ve||!e||!(t instanceof HTMLElement)||!e.contains(t))return;const n=Fe.current;if(n?.isConnected&&!e.contains(n)&&!n.closest("[inert]")&&(n.focus({preventScroll:!0}),document.activeElement===n))return;const i=b(document).filter(t=>!e.contains(t)),o=i.find(t=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING)??i.at(-1);o?o.focus({preventScroll:!0}):t.blur()},[ve]),i.useEffect(()=>{if(void 0!==I)return;const e=$e.current;if(!e)return;const notice=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void Re(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".plass-window")&&Re(!1)};return document.addEventListener("pointerdown",notice,!0),document.addEventListener("focusin",notice,!0),()=>{document.removeEventListener("pointerdown",notice,!0),document.removeEventListener("focusin",notice,!0)}},[I]);const He=i.useRef(null);function beginGesture(e,t){if(0!==e.button)return;He.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY;je(!0);const finish=()=>{He.current=null,je(!1)},s=r({target:n,pointerId:e.pointerId,onMove:e=>t(e.clientX-i,e.clientY-o),onEnd:finish});He.current=()=>{s(),finish()}}i.useEffect(()=>()=>He.current?.(),[]);const Ue=we.bar+2*we.frame,Xe={width:Math.max(0,O),height:Math.max(Ue,$??Ue)};function resizeTo(e){Se(e),G?.(e)}const Ye=m(N,!0===C?["minimize","maximize","close"]:!1===C?[]:C),qe=Ye.includes("maximize");i.useEffect(()=>{if(ye||null===Ie)return;const e=window.setTimeout(()=>Te(null),400);return()=>window.clearTimeout(e)},[ye,Ie]);const Je={minimize:te??pe.minimize,maximize:ne??pe.maximize,restore:ie??pe.restore,close:oe??pe.close},Qe=e(u,{os:N,metrics:we,controls:Ye,maximized:Ne,active:De,labels:Je,onCommand:function command(e){"close"===e?xe(!1):"minimize"===e?function rollUp(e){const t=$e.current;if(e&&void 0===(Ce?.height??B)&&!Ne&&t)return Te(t.getBoundingClientRect().height),void requestAnimationFrame(()=>ze(!0));ze(e)}(!ye):Me(!Ne)}}),Ve=c(M)?e("span",{id:be,className:"min-w-0 truncate",children:M}):null,Ze=c(E)?e("span",{className:"flex shrink-0 items-center",children:E}):null,et=j&&!Ne,tt=Math.max(0,we.radius-we.frame),nt=ye?Math.max(0,we.radiusBottom-we.frame):0,it=et?e("span",{role:"button",tabIndex:0,"aria-label":se??pe.moveWindow,className:"pointer-events-none absolute inset-0 focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]",style:{borderRadius:`${tt}px ${tt}px ${nt}px ${nt}px`},onKeyDown:function step(e){const t=v[e.key],n=$e.current,i=_e.current;if(!t||!n||!i||e.altKey||e.ctrlKey||e.metaKey)return;e.preventDefault();const o=e.shiftKey?64:16,r=n.getBoundingClientRect(),s=i.getBoundingClientRect().bottom,a=document.documentElement,l=getComputedStyle(n),lag=(e,t)=>{const n=parseFloat(e);return Number.isNaN(n)?0:t-n},c=lag(l.left,Ee.x),d=lag(l.top,Ee.y),u=stepWithin({step:t[0]*o,start:r.left+c,end:r.right+c,limit:a.clientWidth}),m=stepWithin({step:t[1]*o,start:r.top+d,end:s+d,limit:a.clientHeight});0===u&&0===m||Le({x:Ee.x+u,y:Ee.y+m})}}):null,ot=t("div",{ref:_e,className:a("relative flex shrink-0 items-center select-none",d,et?"cursor-grab touch-none active:cursor-grabbing":""),style:{height:we.bar,textShadow:"var(--p-window-bar-shadow)",fontWeight:we.weight,paddingInlineStart:we.padX,paddingInlineEnd:we.padEnd,gap:Math.round(.7*we.title),fontSize:we.title,backgroundColor:"var(--p-window-bar)",backgroundImage:"var(--p-window-bar-image)",color:"var(--p-window-bar-fg)",borderBlockEnd:ge.rule?"1px solid var(--p-window-line)":void 0},onPointerDown:function beginDrag(e){if(!j||Ne)return;const t={...Ee};beginGesture(e,(e,n)=>Le({x:t.x+e,y:t.y+n}))},onDoubleClick:qe?()=>Me(!Ne):void 0,children:[it,"start"===ge.controlsSide?Qe:null,"center"===ge.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:we.controlsWidth(Ye.length)+2*we.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*we.title)},children:[Ze,Ve]})}):t(n,{children:[Ze,Ve]}),e("span",{className:"flex-1"}),c(L)?e("span",{className:"flex shrink-0 cursor-default items-center",style:{gap:Math.round(.5*we.title)},onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:L}):null,"end"===ge.controlsSide?Qe:null]}),rt=Ne?{left:0,top:0,width:"100%",height:ye?Ue:"100%"}:{left:Ee.x,top:Ee.y,width:Ce?.width??A,height:ye?Ue:Ce?.height??B??Ie??void 0},st=o({render:ae,ref:Ke,props:{role:"group","aria-labelledby":Ve?be:void 0,className:a("plass-window relative flex min-w-0 flex-col overflow-hidden",D>0?l:"",ge.glass&&0===D?"[backdrop-filter:var(--plass-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--plass-duration-slow)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",le),"data-gesture":We?"":void 0,...w(!ve),style:{opacity:ve?void 0:0,...p({os:N,color:fe,accent:R,transparency:D,active:De,elevation:T}),position:"static"===W?"relative":W,...rt,borderRadius:Ne?0:`${we.radius}px ${we.radius}px ${we.radiusBottom}px ${we.radiusBottom}px`,borderStyle:"solid",borderWidth:we.frame,borderColor:"var(--p-window-line)",backgroundColor:"var(--p-window-band)",boxShadow:"var(--p-window-shadow), var(--plass-gloss-glass)",...ce},children:t(n,{children:[ot,e("div",{className:a("min-h-0 flex-1",ee?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--p-window-body)",marginInline:we.band.side,marginBottom:we.band.bottom,boxShadow:we.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},...w(ye),children:de}),!P||Ne||ye?null:x.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?re??pe.resizeWindow:void 0,"aria-hidden":n?void 0:"true",className:a("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function beginResize(e,t){const n=$e.current;if(!n||Ne)return;const i=n.getBoundingClientRect(),o={width:i.width,height:i.height,x:Ee.x,y:Ee.y},r=e.includes("e"),s=e.includes("w"),a=e.includes("n"),l=e.includes("s");beginGesture(t,(e,t)=>{let{width:n,height:i}=o,{x:c,y:d}=o;r&&(n=Math.max(Xe.width,o.width+e)),l&&(i=Math.max(Xe.height,o.height+t)),s&&(n=Math.max(Xe.width,o.width-e),c=o.x+(o.width-n)),a&&(i=Math.max(Xe.height,o.height-t),d=o.y+(o.height-i)),resizeTo({width:n,height:i}),(s||a)&&Le({x:c,y:d})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function nudge(e,t){const n=$e.current;if(!n)return;const i=n.getBoundingClientRect(),o=Math.max(Xe.width,i.width+e),r=Math.max(Xe.height,i.height+t);o===i.width&&r===i.height||resizeTo({width:o,height:r})}(t[0],t[1]))}:void 0},t.edge)})]}),...ue}});return ve||Pe?st:null});
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as r}from"@base-ui/react/use-render";import{beginPointerDrag as o}from"../../internal/drag.js";import{layoutBox as s}from"../../internal/layout-box.js";import{useLabels as a}from"../../internal/labels.js";import{cx as l,glassClasses as c,hasContent as d,iconClasses as u}from"../../internal/styles.js";import{PlWindowControls as m,orderControls as f,windowChrome as p,windowMetrics as h,windowSlots as w}from"../../internal/window.js";import{useDefaults as g}from"../../internal/defaults.js";import{inertProps as b}from"../../internal/inert.js";import{focusablesIn as v}from"../../internal/focusable.js";function useLatched(e,t,n){const[r,o]=i.useState(t),s=void 0!==e;return[s?e:r,i.useCallback(e=>{s||o(e),n?.(e)},[s,n])]}const x={ArrowRight:[1,0],ArrowLeft:[-1,0],ArrowDown:[0,1],ArrowUp:[0,-1]};function stepWithin({step:e,start:t,end:n,limit:i}){return e>0?Math.min(e,Math.max(0,i-n)):-Math.min(-e,Math.max(0,t))}const y=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}];export const PlWindowPane=/* @__PURE__ */i.forwardRef(function PlWindowPane(z,N){const{os:M="macos",title:E,icon:L,actions:S,controls:k=!0,size:C,color:P,accent:D=!1,transparency:I=0,active:R,elevation:T=2,position:W="static",draggable:j=!1,resizable:A=!1,width:O,height:$,minWidth:B=180,minHeight:K,offset:_,defaultOffset:F,onOffsetChange:G,onResize:H,open:U,defaultOpen:X=!0,onOpenChange:Y,minimized:q,defaultMinimized:J=!1,onMinimizedChange:Q,maximized:V,defaultMaximized:Z=!1,onMaximizedChange:ee,scroll:te=!0,minimizeLabel:ne,maximizeLabel:ie,restoreLabel:re,closeLabel:oe,resizeLabel:se,moveLabel:ae,render:le,className:ce,style:de,children:ue,...me}=z,fe=g(),pe=C??fe.size??"md",he=P??fe.color??"primary",we=a(),ge=p(M),be=h(M,pe),ve=i.useId(),[xe,ye]=useLatched(U,X,Y),[ze,Ne]=useLatched(q,J,Q),[Me,Ee]=useLatched(V,Z,ee),[Le,Se]=useLatched(_,F??{x:0,y:0},G),[ke,Ce]=i.useState(null),[Pe,De]=i.useState(!0),Ie=R??Pe,[Re,Te]=i.useState(null),[We,je]=i.useState(!1),[Ae,Oe]=i.useState(!1),[$e,Be]=i.useState(xe);$e!==xe&&(Be(xe),Oe(!xe)),i.useEffect(()=>{if(!Ae)return;const e=window.setTimeout(()=>Oe(!1),260);return()=>window.clearTimeout(e)},[Ae]);const Ke=i.useRef(null),_e=i.useCallback(e=>{Ke.current=e,"function"==typeof N?N(e):N&&(N.current=e)},[N]),Fe=i.useRef(null),Ge=i.useRef(null),He=xe||Ae;i.useEffect(()=>{const e=Ke.current;if(!He||!e)return;const arrive=t=>{const n=t.relatedTarget;n instanceof Node&&e.contains(n)||(Ge.current=n instanceof HTMLElement?n:null)};return e.addEventListener("focusin",arrive),()=>e.removeEventListener("focusin",arrive)},[He]),i.useLayoutEffect(()=>{const e=Ke.current,t=document.activeElement;if(xe||!e||!(t instanceof HTMLElement)||!e.contains(t))return;const n=Ge.current;if(n?.isConnected&&!e.contains(n)&&!n.closest("[inert]")&&(n.focus({preventScroll:!0}),document.activeElement===n))return;const i=v(document).filter(t=>!e.contains(t)),r=i.find(t=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING)??i.at(-1);r?r.focus({preventScroll:!0}):t.blur()},[xe]),i.useEffect(()=>{if(void 0!==R)return;const e=Ke.current;if(!e)return;const notice=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void De(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".plass-window")&&De(!1)};return document.addEventListener("pointerdown",notice,!0),document.addEventListener("focusin",notice,!0),()=>{document.removeEventListener("pointerdown",notice,!0),document.removeEventListener("focusin",notice,!0)}},[R]);const Ue=i.useRef(null);function beginGesture(e,t){const n=Ke.current;if(0!==e.button||!n)return;Ue.current?.();const i=e.currentTarget,r=e.clientX,a=e.clientY,l=s(n,!0).perPixel,c=s(n,!1).perPixel;je(!0);const finish=()=>{Ue.current=null,je(!1)},d=o({target:i,pointerId:e.pointerId,onMove:e=>t((e.clientX-r)*l,(e.clientY-a)*c),onEnd:finish});Ue.current=()=>{d(),finish()}}i.useEffect(()=>()=>Ue.current?.(),[]);const Xe=be.bar+2*be.frame,Ye={width:Math.max(0,B),height:Math.max(Xe,K??Xe)};function resizeTo(e){Ce(e),H?.(e)}const qe=f(M,!0===k?["minimize","maximize","close"]:!1===k?[]:k),Je=qe.includes("maximize");i.useEffect(()=>{if(ze||null===Re)return;const e=window.setTimeout(()=>Te(null),400);return()=>window.clearTimeout(e)},[ze,Re]);const Qe={minimize:ne??we.minimize,maximize:ie??we.maximize,restore:re??we.restore,close:oe??we.close},Ve=e(m,{os:M,metrics:be,controls:qe,maximized:Me,active:Ie,labels:Qe,onCommand:function command(e){"close"===e?ye(!1):"minimize"===e?function rollUp(e){const t=Ke.current;if(e&&void 0===(ke?.height??$)&&!Me&&t)return Te(s(t,!1).size),void requestAnimationFrame(()=>Ne(!0));Ne(e)}(!ze):Ee(!Me)}}),Ze=d(E)?e("span",{id:ve,className:"min-w-0 truncate",children:E}):null,et=d(L)?e("span",{className:"flex shrink-0 items-center",children:L}):null,tt=j&&!Me,nt=Math.max(0,be.radius-be.frame),it=ze?Math.max(0,be.radiusBottom-be.frame):0,rt=tt?e("span",{role:"button",tabIndex:0,"aria-label":ae??we.moveWindow,className:"pointer-events-none absolute inset-0 focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]",style:{borderRadius:`${nt}px ${nt}px ${it}px ${it}px`},onKeyDown:function step(e){const t=x[e.key],n=Ke.current,i=Fe.current;if(!t||!n||!i||e.altKey||e.ctrlKey||e.metaKey)return;e.preventDefault();const r=e.shiftKey?64:16,o=n.getBoundingClientRect(),a=i.getBoundingClientRect().bottom,l=document.documentElement,c=getComputedStyle(n),d=s(n,!0).perPixel,u=s(n,!1).perPixel,lag=(e,t)=>{const n=parseFloat(e);return Number.isNaN(n)?0:t-n},m=lag(c.left,Le.x),f=lag(c.top,Le.y),p=stepWithin({step:t[0]*r,start:o.left*d+m,end:o.right*d+m,limit:l.clientWidth*d}),h=stepWithin({step:t[1]*r,start:o.top*u+f,end:a*u+f,limit:l.clientHeight*u});0===p&&0===h||Se({x:Le.x+p,y:Le.y+h})}}):null,ot=t("div",{ref:Fe,className:l("relative flex shrink-0 items-center select-none",u,tt?"cursor-grab touch-none active:cursor-grabbing":""),style:{height:be.bar,textShadow:"var(--p-window-bar-shadow)",fontWeight:be.weight,paddingInlineStart:be.padX,paddingInlineEnd:be.padEnd,gap:Math.round(.7*be.title),fontSize:be.title,backgroundColor:"var(--p-window-bar)",backgroundImage:"var(--p-window-bar-image)",color:"var(--p-window-bar-fg)",borderBlockEnd:ge.rule?"1px solid var(--p-window-line)":void 0},onPointerDown:function beginDrag(e){if(!j||Me)return;const t={...Le};beginGesture(e,(e,n)=>Se({x:t.x+e,y:t.y+n}))},onDoubleClick:Je?()=>Ee(!Me):void 0,children:[rt,"start"===ge.controlsSide?Ve:null,"center"===ge.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:be.controlsWidth(qe.length)+2*be.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*be.title)},children:[et,Ze]})}):t(n,{children:[et,Ze]}),e("span",{className:"flex-1"}),d(S)?e("span",{className:"flex shrink-0 cursor-default items-center",style:{gap:Math.round(.5*be.title)},onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:S}):null,"end"===ge.controlsSide?Ve:null]}),st=Me?{left:0,top:0,width:"100%",height:ze?Xe:"100%"}:{left:Le.x,top:Le.y,width:ke?.width??O,height:ze?Xe:ke?.height??$??Re??void 0},at=r({render:le,ref:_e,props:{role:"group","aria-labelledby":Ze?ve:void 0,className:l("plass-window relative flex min-w-0 flex-col overflow-hidden",I>0?`${c} [@media(prefers-reduced-transparency:reduce)]:[--p-window-keep:100%]`:"",ge.glass&&0===I?"[backdrop-filter:var(--plass-blur)]":"",ge.glass?"[@media(prefers-reduced-transparency:reduce)]:[background-image:linear-gradient(var(--p-window-band),var(--p-window-band)),linear-gradient(var(--plass-surface),var(--plass-surface))]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--plass-duration-slow)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",ce),"data-gesture":We?"":void 0,...b(!xe),style:{opacity:xe?void 0:0,...w({os:M,color:he,accent:D,transparency:I,active:Ie,elevation:T}),position:"static"===W?"relative":W,...st,borderRadius:Me?0:`${be.radius}px ${be.radius}px ${be.radiusBottom}px ${be.radiusBottom}px`,borderStyle:"solid",borderWidth:be.frame,borderColor:"var(--p-window-line)",backgroundColor:"var(--p-window-band)",boxShadow:"var(--p-window-shadow), var(--plass-gloss-glass)",...de},children:t(n,{children:[ot,e("div",{className:l("min-h-0 flex-1",te?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--p-window-body)",marginInline:be.band.side,marginBottom:be.band.bottom,boxShadow:be.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},...b(ze),children:ue}),!A||Me||ze?null:y.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?se??we.resizeWindow:void 0,"aria-hidden":n?void 0:"true",className:l("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function beginResize(e,t){const n=Ke.current;if(!n||Me)return;const i={width:s(n,!0).size,height:s(n,!1).size,x:Le.x,y:Le.y},r=e.includes("e"),o=e.includes("w"),a=e.includes("n"),l=e.includes("s");beginGesture(t,(e,t)=>{let{width:n,height:s}=i,{x:c,y:d}=i;r&&(n=Math.max(Ye.width,i.width+e)),l&&(s=Math.max(Ye.height,i.height+t)),o&&(n=Math.max(Ye.width,i.width-e),c=i.x+(i.width-n)),a&&(s=Math.max(Ye.height,i.height-t),d=i.y+(i.height-s)),resizeTo({width:n,height:s}),(o||a)&&Se({x:c,y:d})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function nudge(e,t){const n=Ke.current;if(!n)return;const i=s(n,!0).size,r=s(n,!1).size,o=Math.max(Ye.width,i+e),a=Math.max(Ye.height,r+t);o===i&&a===r||resizeTo({width:o,height:a})}(t[0],t[1]))}:void 0},t.edge)})]}),...me}});return xe||Ae?at:null});
|
package/dist/css/accordion.css
CHANGED
package/dist/css/alert.css
CHANGED
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
/* Scan manifest for <alert>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/alert';
|
|
3
|
+
@source '../internal/defaults.js';
|
|
4
|
+
@source '../internal/icons.js';
|
|
5
|
+
@source '../internal/labels.js';
|
|
6
|
+
@source '../internal/loading.js';
|
|
7
|
+
@source '../internal/styles.js';
|
package/dist/css/anchor.css
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
1
|
/* Scan manifest for <anchor>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/anchor';
|
|
3
|
+
@source '../internal/defaults.js';
|
|
4
|
+
@source '../internal/labels.js';
|
|
5
|
+
@source '../internal/layout-box.js';
|
|
6
|
+
@source '../internal/loading.js';
|
|
7
|
+
@source '../internal/scroll-target.js';
|
|
8
|
+
@source '../internal/styles.js';
|
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
/* Scan manifest for <animate-scramble>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/animate-scramble';
|
|
3
|
+
@source '../internal/animate.js';
|
|
4
|
+
@source '../internal/media.js';
|
|
5
|
+
@source '../internal/scramble.js';
|
|
6
|
+
@source '../internal/styles.js';
|
|
7
|
+
@source '../internal/text.js';
|
package/dist/css/app-logo.css
CHANGED
package/dist/css/area-chart.css
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
1
|
/* Scan manifest for <area-chart>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/area-chart';
|
|
3
3
|
@source '../components/box';
|
|
4
|
+
@source '../hooks/usePlElementSize.js';
|
|
5
|
+
@source '../internal/chart-frame.js';
|
|
6
|
+
@source '../internal/chart-line.js';
|
|
7
|
+
@source '../internal/chart.js';
|
|
8
|
+
@source '../internal/defaults.js';
|
|
9
|
+
@source '../internal/format.js';
|
|
10
|
+
@source '../internal/labels.js';
|
|
11
|
+
@source '../internal/layout-box.js';
|
|
12
|
+
@source '../internal/loading.js';
|
|
13
|
+
@source '../internal/media.js';
|
|
14
|
+
@source '../internal/styles.js';
|
|
15
|
+
@source '../internal/text.js';
|
package/dist/css/avatar.css
CHANGED
package/dist/css/back-top.css
CHANGED
|
@@ -2,3 +2,14 @@
|
|
|
2
2
|
@source '../components/back-top';
|
|
3
3
|
@source '../components/button';
|
|
4
4
|
@source '../components/icon-button';
|
|
5
|
+
@source '../internal/button-group.js';
|
|
6
|
+
@source '../internal/defaults.js';
|
|
7
|
+
@source '../internal/focusable.js';
|
|
8
|
+
@source '../internal/form.js';
|
|
9
|
+
@source '../internal/glow.js';
|
|
10
|
+
@source '../internal/icons.js';
|
|
11
|
+
@source '../internal/labels.js';
|
|
12
|
+
@source '../internal/loading.js';
|
|
13
|
+
@source '../internal/media.js';
|
|
14
|
+
@source '../internal/scroll-target.js';
|
|
15
|
+
@source '../internal/styles.js';
|
package/dist/css/badge.css
CHANGED
package/dist/css/bar-chart.css
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
1
|
/* Scan manifest for <bar-chart>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/bar-chart';
|
|
3
3
|
@source '../components/box';
|
|
4
|
+
@source '../hooks/usePlElementSize.js';
|
|
5
|
+
@source '../internal/chart-frame.js';
|
|
6
|
+
@source '../internal/chart.js';
|
|
7
|
+
@source '../internal/defaults.js';
|
|
8
|
+
@source '../internal/format.js';
|
|
9
|
+
@source '../internal/labels.js';
|
|
10
|
+
@source '../internal/layout-box.js';
|
|
11
|
+
@source '../internal/loading.js';
|
|
12
|
+
@source '../internal/styles.js';
|
|
13
|
+
@source '../internal/text.js';
|
package/dist/css/base.css
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* The tokens
|
|
2
|
-
*
|
|
1
|
+
/* The tokens. Import this once, then one `plass-ui/css/<component>.css` per
|
|
2
|
+
* component, which scans everything that component reaches. */
|
|
3
3
|
@import '../tokens.css';
|
|
4
|
-
@source '../internal';
|
package/dist/css/blockquote.css
CHANGED
|
@@ -1,2 +1,6 @@
|
|
|
1
1
|
/* Scan manifest for <bottom-navigation>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/bottom-navigation';
|
|
3
|
+
@source '../internal/bottom-bar.js';
|
|
4
|
+
@source '../internal/defaults.js';
|
|
5
|
+
@source '../internal/layout-box.js';
|
|
6
|
+
@source '../internal/styles.js';
|
package/dist/css/box.css
CHANGED
package/dist/css/breadcrumb.css
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
1
|
/* Scan manifest for <breadcrumb>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/breadcrumb';
|
|
3
|
+
@source '../internal/defaults.js';
|
|
4
|
+
@source '../internal/icons.js';
|
|
5
|
+
@source '../internal/labels.js';
|
|
6
|
+
@source '../internal/loading.js';
|
|
7
|
+
@source '../internal/styles.js';
|
|
8
|
+
@source '../internal/text.js';
|
package/dist/css/button.css
CHANGED
|
@@ -1,2 +1,9 @@
|
|
|
1
1
|
/* Scan manifest for <button>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/button';
|
|
3
|
+
@source '../internal/button-group.js';
|
|
4
|
+
@source '../internal/defaults.js';
|
|
5
|
+
@source '../internal/form.js';
|
|
6
|
+
@source '../internal/glow.js';
|
|
7
|
+
@source '../internal/icons.js';
|
|
8
|
+
@source '../internal/loading.js';
|
|
9
|
+
@source '../internal/styles.js';
|
package/dist/css/calendar.css
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
1
|
/* Scan manifest for <calendar>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/calendar';
|
|
3
3
|
@source '../components/button';
|
|
4
|
+
@source '../internal/button-group.js';
|
|
5
|
+
@source '../internal/calendar.js';
|
|
6
|
+
@source '../internal/date.js';
|
|
7
|
+
@source '../internal/defaults.js';
|
|
8
|
+
@source '../internal/form.js';
|
|
9
|
+
@source '../internal/format.js';
|
|
10
|
+
@source '../internal/glow.js';
|
|
11
|
+
@source '../internal/icons.js';
|
|
12
|
+
@source '../internal/inert.js';
|
|
13
|
+
@source '../internal/labels.js';
|
|
14
|
+
@source '../internal/layout-box.js';
|
|
15
|
+
@source '../internal/loading.js';
|
|
16
|
+
@source '../internal/notch.js';
|
|
17
|
+
@source '../internal/picker.js';
|
|
18
|
+
@source '../internal/sizer.js';
|
|
19
|
+
@source '../internal/styles.js';
|
|
20
|
+
@source '../internal/text.js';
|
package/dist/css/card.css
CHANGED
package/dist/css/carousel.css
CHANGED
|
@@ -2,3 +2,13 @@
|
|
|
2
2
|
@source '../components/carousel';
|
|
3
3
|
@source '../components/button';
|
|
4
4
|
@source '../components/icon-button';
|
|
5
|
+
@source '../internal/button-group.js';
|
|
6
|
+
@source '../internal/defaults.js';
|
|
7
|
+
@source '../internal/form.js';
|
|
8
|
+
@source '../internal/glow.js';
|
|
9
|
+
@source '../internal/icons.js';
|
|
10
|
+
@source '../internal/labels.js';
|
|
11
|
+
@source '../internal/layout-box.js';
|
|
12
|
+
@source '../internal/loading.js';
|
|
13
|
+
@source '../internal/media.js';
|
|
14
|
+
@source '../internal/styles.js';
|
package/dist/css/chat-bubble.css
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
1
|
/* Scan manifest for <chat-bubble>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/chat-bubble';
|
|
3
|
+
@source '../internal/defaults.js';
|
|
4
|
+
@source '../internal/icons.js';
|
|
5
|
+
@source '../internal/labels.js';
|
|
6
|
+
@source '../internal/link.js';
|
|
7
|
+
@source '../internal/loading.js';
|
|
8
|
+
@source '../internal/styles.js';
|
package/dist/css/checkbox.css
CHANGED
package/dist/css/chip.css
CHANGED
|
@@ -1,2 +1,10 @@
|
|
|
1
1
|
/* Scan manifest for <chip>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/chip';
|
|
3
|
+
@source '../internal/defaults.js';
|
|
4
|
+
@source '../internal/form.js';
|
|
5
|
+
@source '../internal/glow.js';
|
|
6
|
+
@source '../internal/icons.js';
|
|
7
|
+
@source '../internal/labels.js';
|
|
8
|
+
@source '../internal/loading.js';
|
|
9
|
+
@source '../internal/styles.js';
|
|
10
|
+
@source '../internal/text.js';
|
package/dist/css/code-block.css
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
1
|
/* Scan manifest for <code-block>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/code-block';
|
|
3
|
+
@source '../internal/defaults.js';
|
|
4
|
+
@source '../internal/highlight.js';
|
|
5
|
+
@source '../internal/icons.js';
|
|
6
|
+
@source '../internal/labels.js';
|
|
7
|
+
@source '../internal/loading.js';
|
|
8
|
+
@source '../internal/styles.js';
|
package/dist/css/collapsible.css
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
1
|
/* Scan manifest for <color-picker>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/color-picker';
|
|
3
3
|
@source '../components/button';
|
|
4
|
+
@source '../internal/button-group.js';
|
|
5
|
+
@source '../internal/calendar.js';
|
|
6
|
+
@source '../internal/color.js';
|
|
7
|
+
@source '../internal/date.js';
|
|
8
|
+
@source '../internal/defaults.js';
|
|
9
|
+
@source '../internal/form.js';
|
|
10
|
+
@source '../internal/format.js';
|
|
11
|
+
@source '../internal/glow.js';
|
|
12
|
+
@source '../internal/icons.js';
|
|
13
|
+
@source '../internal/labels.js';
|
|
14
|
+
@source '../internal/layout-box.js';
|
|
15
|
+
@source '../internal/loading.js';
|
|
16
|
+
@source '../internal/notch.js';
|
|
17
|
+
@source '../internal/picker.js';
|
|
18
|
+
@source '../internal/sizer.js';
|
|
19
|
+
@source '../internal/styles.js';
|
|
20
|
+
@source '../internal/text.js';
|
package/dist/css/combobox.css
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
1
|
/* Scan manifest for <combobox>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/combobox';
|
|
3
3
|
@source '../components/chip';
|
|
4
|
+
@source '../internal/defaults.js';
|
|
5
|
+
@source '../internal/form.js';
|
|
6
|
+
@source '../internal/glow.js';
|
|
7
|
+
@source '../internal/icons.js';
|
|
8
|
+
@source '../internal/keys.js';
|
|
9
|
+
@source '../internal/labels.js';
|
|
10
|
+
@source '../internal/loading.js';
|
|
11
|
+
@source '../internal/notch.js';
|
|
12
|
+
@source '../internal/styles.js';
|
|
13
|
+
@source '../internal/text.js';
|
|
@@ -1,3 +1,10 @@
|
|
|
1
1
|
/* Scan manifest for <command-palette>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/command-palette';
|
|
3
3
|
@source '../components/hot-keys';
|
|
4
|
+
@source '../hooks/usePlHotKeys.js';
|
|
5
|
+
@source '../internal/defaults.js';
|
|
6
|
+
@source '../internal/keys.js';
|
|
7
|
+
@source '../internal/labels.js';
|
|
8
|
+
@source '../internal/loading.js';
|
|
9
|
+
@source '../internal/search.js';
|
|
10
|
+
@source '../internal/styles.js';
|