@povio/ui 5.0.0-rc.13 → 5.0.0-rc.15

package/dist/index.js

@@ -1,19 +1,19 @@
-import { t as logger } from "./logger-CqZjM-sn.js";
+import { t as logger } from "./logger-CW24po62.js";
 import { t as DropdownMenu } from "./DropdownMenu-5jmtgLXd.js";
 import { n as MenuPopover, r as MenuItem } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { a as isEqual, i as useDeepCompareMemo, n as useDeepCompareEffect, o as ObjectUtils, r as useDeepCompareLayoutEffect, t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.js";
+import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-CgG02oHQ.js";
 import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-FwKjPVbV.js";
 import { n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as X } from "./x-B6vfz8Ps.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
 import { n as iconSlotDefinition, t as IconSlot } from "./IconSlot-DSK7qNxc.js";
 import { t as Breadcrumbs } from "./Breadcrumbs-FF8hMfXd.js";
-import { a as getKeyInteractionAction, i as createKeyInteractionsHandler, o as useKeyInteractions, s as useDebounceCallback } from "./staticSelect.utils-BfTCi26B.js";
+import { a as getKeyInteractionAction, i as createKeyInteractionsHandler, o as useKeyInteractions, s as useDebounceCallback } from "./staticSelect.utils-BgdYv2vP.js";
 import { t as Accordion } from "./Accordion-BzwO4_ml.js";
 import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition } from "./RadioGroup-efBKgTYA.js";
 import { n as switchDefinition } from "./Switch-CqnGEdeD.js";
-import { n as textAreaWrapperDefinition } from "./TextArea-uPffb457.js";
+import { n as textAreaWrapperDefinition } from "./TextArea-DuvFUjts.js";
 import { t as Tooltip } from "./Tooltip-CpG1nz7Y.js";
 import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "./breadcrumbs.cva-7zzdDhVR.js";
 import { i as menuPopoverWrapperDefinition, n as menuItemDefinition, r as menuPopoverDefinition, t as dropdownMenuDefinition } from "./dropdownMenu.cva-DvEmX0bs.js";
@@ -44,8 +44,8 @@ import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
 import { Autocomplete } from "./rhf/autocomplete.js";
 import { Checkbox } from "./rhf/checkbox.js";
 import { CheckboxGroup } from "./rhf/checkbox-group.js";
-import { n as useScrollableListBox } from "./Calendar-DRHruqr_.js";
-import { r as useLongPressRepeat } from "./datePickerValue.utils-QWR2q5Vv.js";
+import { n as useScrollableListBox } from "./Calendar-1p3VjSED.js";
+import { r as useLongPressRepeat } from "./datePickerValue.utils-BDB6KM8q.js";
 import { t as IntlUtils } from "./intl.utils-zwAFoZ0U.js";
 import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
 import { t as DateUtils } from "./date.utils-B8_QF9y6.js";
@@ -95,7 +95,7 @@ import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-qgpzMF
 import { useToast } from "./components/use-toast.js";
 import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
-import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-CNJ_ZvIN.js";
+import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-BnbKElno.js";
 import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";

package/dist/{logger-CqZjM-sn.js → logger-CW24po62.js}

@@ -6,6 +6,15 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
 var __copyProps = (to, from, except, desc) => {
 	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
 		key = keys[i];
@@ -330,4 +339,4 @@ const logger = {
 	trace: (...args) => import_loglevel.default.trace(...args)
 };
 //#endregion
-export { logger as t };
+export { __exportAll as n, logger as t };

package/dist/rhf/date-picker.js

@@ -1,5 +1,5 @@
 import { n as runtime, r as useFireBlurOnChange, t as renderRHFField } from "../fieldAdapter-DjYls12j.js";
-import { t as DatePicker$1 } from "../DatePicker-xDEqzNJv.js";
+import { t as DatePicker$1 } from "../DatePicker-CAzuZRmd.js";
 import { t as toCalendarDate } from "../date.transforms-DLg-eFcE.js";
 //#region src/entries/rhf/date-picker.ts
 const DatePicker = (props) => {

package/dist/rhf/date-range-picker.js

@@ -1,5 +1,5 @@
 import { n as runtime, r as useFireBlurOnChange, t as renderRHFField } from "../fieldAdapter-DjYls12j.js";
-import { t as DateRangePicker$1 } from "../DateRangePicker-DxuVhRaf.js";
+import { t as DateRangePicker$1 } from "../DateRangePicker-X3mBhfmL.js";
 import { n as toCalendarDateRange } from "../date.transforms-DLg-eFcE.js";
 //#region src/entries/rhf/date-range-picker.ts
 const DateRangePicker = (props) => {

package/dist/rhf/date-time-picker.js

@@ -1,6 +1,6 @@
 import { n as runtime, r as useFireBlurOnChange, t as renderRHFField } from "../fieldAdapter-DjYls12j.js";
 import { r as toCalendarDateTime } from "../date.transforms-DLg-eFcE.js";
-import { t as DateTimePicker$1 } from "../DateTimePicker-4N1Pka07.js";
+import { t as DateTimePicker$1 } from "../DateTimePicker-EtmGtoRe.js";
 //#region src/entries/rhf/date-time-picker.ts
 const DateTimePicker = (props) => {
 	return renderRHFField(runtime(DateTimePicker$1), useFireBlurOnChange(props, "dateInput"), "value", toCalendarDateTime);

package/dist/rhf/number-range-input.js

@@ -1,5 +1,5 @@
 import { n as runtime, t as renderRHFField } from "../fieldAdapter-DjYls12j.js";
-import { t as NumberRangeInput$1 } from "../NumberRangeInput-Bzfe-RlV.js";
+import { t as NumberRangeInput$1 } from "../NumberRangeInput-TkPXiWV3.js";
 //#region src/entries/rhf/number-range-input.ts
 const NumberRangeInput = (props) => renderRHFField(runtime(NumberRangeInput$1), props);
 //#endregion

package/dist/rhf/rich-text-editor.js

@@ -1,4 +1,4 @@
-import { t as RichTextEditor$1 } from "../RichTextEditor-Bd7F5D8f.js";
+import { t as RichTextEditor$1 } from "../RichTextEditor-DiaPcBUM.js";
 import { n as runtime, t as renderRHFField } from "../fieldAdapter-DjYls12j.js";
 //#region src/entries/rhf/rich-text-editor.ts
 const RichTextEditor = (props) => renderRHFField(runtime(RichTextEditor$1), props);

package/dist/rhf/select.js

@@ -1,5 +1,5 @@
 import { n as runtime, r as useFireBlurOnChange, t as renderRHFField } from "../fieldAdapter-DjYls12j.js";
-import { t as Select$1 } from "../Select-CgIhoWgk.js";
+import { t as Select$1 } from "../Select-tNlFSbAC.js";
 //#region src/entries/rhf/select.ts
 const Select = (props) => {
 	return renderRHFField(runtime(Select$1), useFireBlurOnChange(props, "select"));

package/dist/rhf/text-area.js

@@ -1,4 +1,4 @@
-import { t as TextArea$1 } from "../TextArea-uPffb457.js";
+import { t as TextArea$1 } from "../TextArea-DuvFUjts.js";
 import { n as runtime, t as renderRHFField } from "../fieldAdapter-DjYls12j.js";
 //#region src/entries/rhf/text-area.ts
 const TextArea = (props) => renderRHFField(runtime(TextArea$1), props);

package/dist/rhf/time-picker.js

@@ -1,5 +1,5 @@
 import { n as runtime, r as useFireBlurOnChange, t as renderRHFField } from "../fieldAdapter-DjYls12j.js";
-import { t as TimePicker$1 } from "../TimePicker-DN-i98z5.js";
+import { t as TimePicker$1 } from "../TimePicker-CBkiE-Yq.js";
 import { i as toTime } from "../date.transforms-DLg-eFcE.js";
 //#region src/entries/rhf/time-picker.ts
 const TimePicker = (props) => {

package/dist/rhf.js

@@ -1,19 +1,19 @@
-import { t as logger } from "./logger-CqZjM-sn.js";
+import { t as logger } from "./logger-CW24po62.js";
 import { t as DropdownMenu } from "./DropdownMenu-5jmtgLXd.js";
 import { n as MenuPopover, r as MenuItem } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { a as isEqual, i as useDeepCompareMemo, n as useDeepCompareEffect, o as ObjectUtils, r as useDeepCompareLayoutEffect, t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.js";
+import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-CgG02oHQ.js";
 import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-FwKjPVbV.js";
 import { n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as X } from "./x-B6vfz8Ps.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
 import { n as iconSlotDefinition, t as IconSlot } from "./IconSlot-DSK7qNxc.js";
 import { t as Breadcrumbs } from "./Breadcrumbs-FF8hMfXd.js";
-import { a as getKeyInteractionAction, i as createKeyInteractionsHandler, o as useKeyInteractions, s as useDebounceCallback } from "./staticSelect.utils-BfTCi26B.js";
+import { a as getKeyInteractionAction, i as createKeyInteractionsHandler, o as useKeyInteractions, s as useDebounceCallback } from "./staticSelect.utils-BgdYv2vP.js";
 import { t as Accordion } from "./Accordion-BzwO4_ml.js";
 import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition } from "./RadioGroup-efBKgTYA.js";
 import { n as switchDefinition } from "./Switch-CqnGEdeD.js";
-import { n as textAreaWrapperDefinition } from "./TextArea-uPffb457.js";
+import { n as textAreaWrapperDefinition } from "./TextArea-DuvFUjts.js";
 import { t as Tooltip } from "./Tooltip-CpG1nz7Y.js";
 import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "./breadcrumbs.cva-7zzdDhVR.js";
 import { i as menuPopoverWrapperDefinition, n as menuItemDefinition, r as menuPopoverDefinition, t as dropdownMenuDefinition } from "./dropdownMenu.cva-DvEmX0bs.js";
@@ -44,8 +44,8 @@ import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
 import { Autocomplete } from "./rhf/autocomplete.js";
 import { Checkbox } from "./rhf/checkbox.js";
 import { CheckboxGroup } from "./rhf/checkbox-group.js";
-import { n as useScrollableListBox } from "./Calendar-DRHruqr_.js";
-import { r as useLongPressRepeat } from "./datePickerValue.utils-QWR2q5Vv.js";
+import { n as useScrollableListBox } from "./Calendar-1p3VjSED.js";
+import { r as useLongPressRepeat } from "./datePickerValue.utils-BDB6KM8q.js";
 import { t as IntlUtils } from "./intl.utils-zwAFoZ0U.js";
 import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
 import { t as DateUtils } from "./date.utils-B8_QF9y6.js";
@@ -95,7 +95,7 @@ import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-qgpzMF
 import { useToast } from "./components/use-toast.js";
 import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
-import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-CNJ_ZvIN.js";
+import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-BnbKElno.js";
 import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";

package/dist/rich-text-editor.js

@@ -1,2 +1,2 @@
-import { t as RichTextEditor } from "./RichTextEditor-Bd7F5D8f.js";
+import { t as RichTextEditor } from "./RichTextEditor-DiaPcBUM.js";
 export { RichTextEditor };

package/dist/{staticDateTimeSegments-BWea3HAt.js → staticDateTimeSegments-Bs1_N5MR.js}

@@ -9,7 +9,7 @@ import { TextButton } from "./components/text-button.js";
 import { t as $a8ea2faf2ebe4d2f$re_export$isFirefox } from "./import-BE0r63d8.js";
 import "./i18n-CX2EjhJI.js";
 import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
-import { t as getStaticInputFocusTarget } from "./useStaticInputHandoff-B7DEm75m.js";
+import { t as getStaticInputFocusTarget } from "./useStaticInputHandoff-DKsxpVck.js";
 import { t as $3e6197669829fe11$export$40bfa8c7b0832715 } from "./useControlledState-CzXkZCX8.js";
 import { i as $fd2148440a13ec26$export$fc1a364ae1f3ff10, n as $fd2148440a13ec26$export$75ee7c75d68f5b0e, r as $fd2148440a13ec26$export$aca958c65c314e6c, t as $1dfb119a85e764e5$export$cc77c4ff7e8673c5 } from "./NumberFormatter-CLDS_LRZ.js";
 import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";

package/dist/{staticSelect.utils-BfTCi26B.js → staticSelect.utils-BgdYv2vP.js}

@@ -25,7 +25,7 @@ import { r as FormFieldLabel, t as FormField } from "./FormField-9h3JAhaY.js";
 import { t as Tag } from "./Tag-DPg5sL1Z.js";
 import "./i18n-CX2EjhJI.js";
 import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-CbMTwuQU.js";
-import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-CDHFaUKZ.js";
+import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-CSXs5-E3.js";
 import { t as useIntersectionObserver } from "./useIntersectionObserver-DYfHnGGU.js";
 import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
 import { Input } from "./components/input.js";
@@ -956,7 +956,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 			!hideDropdownIcon && /* @__PURE__ */ jsx($7705c033048f6da7$export$353f5b6fc5456de1, {
 				excludeFromTabOrder: true,
 				"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
-				className: clsx("self-stretch pl-1.5 outline-none", inputSizeCva({ size })),
+				className: clsx("flex shrink-0 items-center justify-center self-stretch py-0! pl-1.5 outline-none disabled:text-inherit", inputSizeCva({ size })),
 				isDisabled,
 				onPress: () => {
 					if (!isSearchable) setIsOpen(!isOpen);
@@ -1573,7 +1573,7 @@ const SelectBase = (dProps) => {
 };
 //#endregion
 //#region src/components/inputs/Selection/shared/StaticSelectTrailingContent.tsx
-const StaticSelectTrailingContent = ({ trailingContent, hideDropdownIcon, size }) => {
+const StaticSelectTrailingContent = ({ trailingContent, hideDropdownIcon, size, isDisabled }) => {
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	if (!trailingContent && hideDropdownIcon) return null;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [trailingContent && /* @__PURE__ */ jsx("div", {
@@ -1582,7 +1582,8 @@ const StaticSelectTrailingContent = ({ trailingContent, hideDropdownIcon, size }
 	}), !hideDropdownIcon ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		tabIndex: -1,
-		className: clsx("self-stretch border-0! pl-1.5 outline-none", inputSizeCva({ size })),
+		className: clsx("flex shrink-0 items-center justify-center self-stretch border-0! py-0! pl-1.5 outline-none disabled:text-inherit", inputSizeCva({ size })),
+		disabled: isDisabled,
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ jsx(IconSlot, {
 			icon: ChevronDown,

package/dist/styles/app-canvas.css

@@ -319,7 +319,14 @@
   line-height: 1.2;
   white-space: nowrap;
 }
+.povio-canvas-node-header {
+  /* Labels stay within their artboard's width, like a design tool's frame titles; they may still rise above it. */
+  overflow-x: clip;
+  overflow-y: visible;
+}
 .povio-canvas-node-header > strong {
+  flex: 0 1 auto;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
@@ -328,8 +335,15 @@
   color: var(--canvas-accent);
 }
 .povio-canvas-node-header > span {
+  flex: 0 100 auto;
+  min-width: 0;
+  overflow: hidden;
   color: #9a96a3;
   margin-left: auto;
+  text-overflow: ellipsis;
+}
+.povio-canvas-node-header > button {
+  flex-shrink: 0;
 }
 .povio-app-canvas .povio-canvas-node-header > button {
   padding: 0 calc(2px / var(--canvas-zoom, 1));
@@ -569,12 +583,6 @@
   border-left: 1px solid var(--canvas-border);
   z-index: 4;
 }
-.povio-canvas-inspect-hint {
-  margin: 8px 12px;
-  color: #77717e;
-  font-size: 10px;
-  line-height: 16px;
-}
 .povio-canvas-inspection-overlay {
   position: absolute;
   inset: 48px 0 0;
@@ -743,23 +751,6 @@
     align-items: center;
   }
 }
-.povio-canvas-auto-spacing .studio-measure-label {
-  display: none;
-}
-.povio-canvas-spacing-value {
-  position: absolute;
-  transform: translate(-50%, -50%);
-  border-radius: 3px;
-  background: #24202de6;
-  color: white;
-  padding: 1px 4px;
-  white-space: nowrap;
-  font:
-    10px/1.3 "Inter Variable",
-    Inter,
-    sans-serif;
-  pointer-events: none;
-}
 
 .povio-canvas-camera .povio-canvas-theme-toggle {
   order: 0;
@@ -826,7 +817,10 @@
 .povio-canvas-content-switch .povio-canvas-page-count {
   font-weight: 500;
 }
-/* A Components artboard's own document: one gallery section on the page background. */
+/* A Components artboard's own document: one component on the page background, which fills the whole frame. */
+html:has(.povio-canvas-components-frame) {
+  background: rgb(var(--surface-default-background-base));
+}
 .povio-canvas-components-frame.studio-sample {
   padding: 32px;
   border-radius: 0;
@@ -1214,3 +1208,15 @@
 .povio-canvas-layer-highlight .studio-hover-outline {
   background: #7655d71a;
 }
+/* Components sections: a title on the canvas above each group of artboards, sized for the screen like frame labels. */
+.povio-canvas-section-title {
+  position: absolute;
+  margin: 0;
+  transform: translateY(-100%);
+  color: #242428;
+  font-size: calc(16px / var(--canvas-zoom, 1));
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+  pointer-events: none;
+}