@kazee-ds/vue 0.11.0 → 0.12.0

package/README.md

@@ -1,8 +1,8 @@
 # @kazee-ds/vue
 
-Prepared **0.11.0** adds the `enclosed` Tabs variant (folder tabs) and keeps a nested Tabs independent of its ancestor's variant. Use React **0.11.0** or Vue **0.11.0** with styles **0.12.0**. These versions are unpublished; see [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
+Prepared **0.12.0** adds `popoverAlign`/`popoverProps`/`popoverWidth` to position and size Select/Combobox/DateRangePicker/temporal picker popovers, and fixes several RTL popover-alignment bugs. Use React **0.12.0** or Vue **0.12.0** with styles **0.13.0**. These versions are unpublished; see [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
 
-The prepared styles **0.12.0** bundle tokens **0.8.0**, which add the `cool-gray-300` palette color (`#B0B3C4`), and style the `enclosed` Tabs variant. Tabs root modifiers are scoped with CSS `@scope`, so nested Tabs keep their own variant (Chrome/Edge 118, Safari 17.4, Firefox 146). Published styles **0.11.0** / tokens **0.7.0** added the AA `--ds-color-text-secondary` text role, which remains unchanged.
+The prepared styles **0.13.0** fix the Tabs `pill`/`secondary` active-indicator color, center `enclosed` Tabs actions/extras on the tab labels, and keep a selected chip `ToggleButton` readable on hover/press; it bundles tokens **0.8.0** unchanged. Published styles **0.11.0** / tokens **0.7.0** added the AA `--ds-color-text-secondary` text role, which remains unchanged.
 Accessible Kazee Vue components, including Toast, built on Reka UI and native controls. Requires Vue 3.4+ and ESM.
 
 Version **0.10.0** adds Combobox sizing, focus/search and nonempty-selection policies, full-control popovers, and compact and compound Dialog header/footer dividers and builds on controlled selectable Card actions, Avatar/AvatarGroup, expanded Badge, sized/icon Switch, interactive/compact Card, dense controls, input clearing and composable date/time families with native Vue models and slots. Existing compact APIs remain supported. Verify registry availability before installing; use matching local packed artifacts for checkout testing. See [component expansion](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/component-expansion.md) and [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
@@ -15,7 +15,7 @@ Version 0.5.3 ignores Toast shortcut events with missing or non-string keys. Nor
 After the prepared versions are published and verified, public npm installation requires no read token or login. Until then use matching local packed artifacts. Preserve the application's package manager and lockfile.
 
 ```sh
-npm install --save-exact @kazee-ds/vue@0.11.0 @kazee-ds/styles@0.12.0
+npm install --save-exact @kazee-ds/vue@0.12.0 @kazee-ds/styles@0.13.0
 ```
 
 ## Use

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Fragment, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useSlots, watch, watchEffect, withCtx, withKeys, withModifiers } from "vue";
+import { Fragment, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, h, inject, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useSlots, watch, watchEffect, withCtx, withKeys, withModifiers } from "vue";
 import * as Reka from "reka-ui";
 import { CheckboxIndicator, CheckboxRoot as CheckboxRoot$1, ComboboxAnchor, ComboboxCancel, ComboboxContent, ComboboxInput, ComboboxItem as ComboboxItem$1, ComboboxPortal as ComboboxPortal$1, ComboboxRoot, ComboboxTrigger as ComboboxTrigger$1, ComboboxViewport, DateFieldInput, DateFieldRoot, DialogClose, DialogContent as DialogContent$1, DialogDescription as DialogDescription$1, DialogOverlay, DialogPortal as DialogPortal$1, DialogRoot as DialogRoot$1, DialogTitle as DialogTitle$1, DialogTrigger as DialogTrigger$1, DropdownMenuCheckboxItem as DropdownMenuCheckboxItem$1, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuGroup, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuLabel, DropdownMenuPortal as DropdownMenuPortal$1, DropdownMenuRadioGroup as DropdownMenuRadioGroup$1, DropdownMenuRadioItem as DropdownMenuRadioItem$1, DropdownMenuRoot as DropdownMenuRoot$1, DropdownMenuSeparator as DropdownMenuSeparator$1, DropdownMenuSub as DropdownMenuSub$1, DropdownMenuSubContent as DropdownMenuSubContent$1, DropdownMenuSubTrigger as DropdownMenuSubTrigger$1, DropdownMenuTrigger as DropdownMenuTrigger$1, Label, ListboxContent as ListboxContent$1, ListboxGroup, ListboxItem as ListboxItem$1, ListboxItemIndicator as ListboxItemIndicator$1, ListboxRoot as ListboxRoot$1, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput as NumberFieldInput$1, NumberFieldRoot as NumberFieldRoot$1, PopoverClose, PopoverContent as PopoverContent$1, PopoverPortal as PopoverPortal$1, PopoverRoot as PopoverRoot$1, PopoverTrigger as PopoverTrigger$1, Primitive, RadioGroupItem as RadioGroupItem$1, RadioGroupRoot as RadioGroupRoot$1, RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot, SelectContent, SelectGroup, SelectItem as SelectItem$1, SelectItemIndicator as SelectItemIndicator$1, SelectItemText as SelectItemText$1, SelectPortal, SelectRoot, SelectTrigger, SelectValue, SelectViewport, SwitchRoot, TabsContent, TabsList as TabsList$1, TabsRoot, TabsTrigger, TimeFieldInput, TimeFieldRoot, ToastAction, ToastClose, ToastDescription as ToastDescription$1, ToastProvider, ToastRoot as ToastRoot$1, ToastTitle as ToastTitle$1, ToastViewport as ToastViewport$1, Toggle, ToggleGroupItem as ToggleGroupItem$1, ToggleGroupRoot as ToggleGroupRoot$1, TooltipContent as TooltipContent$1, TooltipPortal as TooltipPortal$1, TooltipProvider as TooltipProvider$1, TooltipRoot as TooltipRoot$1, TooltipTrigger as TooltipTrigger$1, injectComboboxRootContext, injectSelectRootContext, useForwardExpose, useForwardProps, useId as useId$1 } from "reka-ui";
 import { CalendarDate, endOfMonth, getLocalTimeZone, now, parseAbsolute, parseDate, parseDateTime, parseTime, parseZonedDateTime, startOfMonth, startOfWeek, toCalendarDateTime, toZoned, today } from "@internationalized/date";
@@ -2609,6 +2609,21 @@ function filterOptions(options, query) {
 	return options.filter((o) => fold(`${o.label} ${o.description ?? ""}`).includes(search));
 }
 //#endregion
+//#region src/popover-position.ts
+/** Merge defaults, the alignment shortcut and the passthrough, ignoring undefined passthrough keys. */
+function popoverPosition({ popoverAlign, popoverProps }, defaults = {}) {
+	const result = {
+		side: "bottom",
+		...defaults,
+		align: popoverAlign ?? defaults.align ?? "start"
+	};
+	for (const [key, value] of Object.entries(popoverProps ?? {})) if (value !== void 0) result[key] = value;
+	return result;
+}
+function popoverWidthClass(width) {
+	return `select__popover--${width}-width`;
+}
+//#endregion
 //#region src/Select.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$39 = ["data-multiple", "dir"];
 var _hoisted_2$27 = ["for"];
@@ -2634,6 +2649,9 @@ var Select_default = /* @__PURE__ */ defineComponent({
 		label: {},
 		options: {},
 		maxHeight: { default: void 0 },
+		popoverAlign: { default: void 0 },
+		popoverWidth: { default: "content" },
+		popoverProps: { default: void 0 },
 		size: { default: "md" },
 		variant: { default: "primary" },
 		hideLabel: { type: Boolean },
@@ -2781,16 +2799,16 @@ var Select_default = /* @__PURE__ */ defineComponent({
 						disabled: __props.disabled || ids.value.length === 0,
 						onClick: clear
 					}, [createVNode(CloseIcon_default, { class: normalizeClass(unref(partClasses)("selection__close-icon", _ctx.$props.classNames?.closeIcon)) }, null, 8, ["class"])], 10, _hoisted_4$15)) : createCommentVNode("", true)], 10, _hoisted_3$21), createVNode(unref(SelectPortal), null, {
-						default: withCtx(() => [createVNode(SelectionPopoverContent_default, {
-							style: normalizeStyle({ "--selection-max-height": __props.maxHeight && Number.isFinite(__props.maxHeight) && __props.maxHeight > 0 ? `${__props.maxHeight}px` : void 0 }),
-							class: normalizeClass(unref(partClasses)("select__popover", _ctx.$props.classNames?.popover)),
-							position: "popper",
-							"side-offset": 4,
+						default: withCtx(() => [createVNode(SelectionPopoverContent_default, mergeProps({
+							style: { "--selection-max-height": __props.maxHeight && Number.isFinite(__props.maxHeight) && __props.maxHeight > 0 ? `${__props.maxHeight}px` : void 0 },
+							class: unref(partClasses)(["select__popover", unref(popoverWidthClass)(__props.popoverWidth)], _ctx.$props.classNames?.popover),
+							position: "popper"
+						}, unref(popoverPosition)(_ctx.$props, { sideOffset: 4 }), {
 							onEscapeKeyDown: _cache[0] || (_cache[0] = (event) => {
 								if (!event.isComposing) event.stopPropagation();
 							}),
 							onCloseAutoFocus: afterClose
-						}, {
+						}), {
 							default: withCtx(() => [createVNode(unref(SelectViewport), { class: normalizeClass(unref(partClasses)("select__list", _ctx.$props.classNames?.list)) }, {
 								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
 									return openBlock(), createBlock(unref(SelectItem$1), {
@@ -2818,7 +2836,7 @@ var Select_default = /* @__PURE__ */ defineComponent({
 								_: 3
 							}, 8, ["class"])]),
 							_: 3
-						}, 8, ["style", "class"])]),
+						}, 16, ["style", "class"])]),
 						_: 3
 					})]),
 					_: 3
@@ -6991,6 +7009,9 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 			default: true
 		},
 		maxHeight: { default: void 0 },
+		popoverAlign: { default: void 0 },
+		popoverWidth: { default: "trigger" },
+		popoverProps: { default: void 0 },
 		menuTrigger: { default: "input" },
 		selectOnFocus: { type: Boolean },
 		disallowEmptySelection: { type: Boolean },
@@ -7209,15 +7230,14 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 						"data-invalid",
 						"data-disabled"
 					]), createVNode(unref(ComboboxPortal$1), null, {
-						default: withCtx(() => [createVNode(unref(ComboboxContent), {
-							class: normalizeClass(unref(partClasses)("select__popover combobox__popover", _ctx.$props.classNames?.popover)),
-							style: normalizeStyle(popoverStyle.value),
+						default: withCtx(() => [createVNode(unref(ComboboxContent), mergeProps({
+							class: unref(partClasses)(["select__popover combobox__popover", unref(popoverWidthClass)(__props.popoverWidth)], _ctx.$props.classNames?.popover),
+							style: popoverStyle.value,
 							position: "popper",
-							"side-offset": 4,
-							onEscapeKeyDown: _cache[5] || (_cache[5] = (event) => {
-								if (!event.isComposing) event.stopPropagation();
-							})
-						}, {
+							dir: __props.dir
+						}, unref(popoverPosition)(_ctx.$props, { sideOffset: 4 }), { onEscapeKeyDown: _cache[5] || (_cache[5] = (event) => {
+							if (!event.isComposing) event.stopPropagation();
+						}) }), {
 							default: withCtx(() => [createVNode(unref(ComboboxViewport), { class: normalizeClass(unref(partClasses)("select__list", _ctx.$props.classNames?.list)) }, {
 								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filtered.value, (option) => {
 									return openBlock(), createBlock(unref(ComboboxItem$1), {
@@ -7246,7 +7266,11 @@ var Combobox_default = /* @__PURE__ */ defineComponent({
 								_: 3
 							}, 8, ["class"])]),
 							_: 3
-						}, 8, ["class", "style"])]),
+						}, 16, [
+							"class",
+							"style",
+							"dir"
+						])]),
 						_: 3
 					})]),
 					_: 3
@@ -8100,7 +8124,9 @@ var DateRangePicker_default = /* @__PURE__ */ defineComponent({
 		isDateUnavailable: {
 			type: Function,
 			default: void 0
-		}
+		},
+		popoverAlign: {},
+		popoverProps: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -8286,13 +8312,13 @@ var DateRangePicker_default = /* @__PURE__ */ defineComponent({
 						default: withCtx(() => [isDialog.value ? (openBlock(), createBlock(unref(DialogOverlay), {
 							key: 0,
 							class: "temporal-picker__overlay"
-						})) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent(overlay.value.Content), {
+						})) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent(overlay.value.Content), mergeProps({
 							"as-child": "",
-							side: "bottom",
-							align: "start",
-							"side-offset": 8,
-							"collision-padding": 16
-						}, {
+							dir: __props.dir
+						}, unref(popoverPosition)(_ctx.$props, {
+							sideOffset: 8,
+							collisionPadding: 16
+						})), {
 							default: withCtx(() => [createElementVNode("div", {
 								class: normalizeClass(unref(partClasses)([
 									"date-range__panel",
@@ -8329,7 +8355,7 @@ var DateRangePicker_default = /* @__PURE__ */ defineComponent({
 								"required"
 							])], 10, _hoisted_6$4)]),
 							_: 1
-						}))]),
+						}, 16, ["dir"]))]),
 						_: 1
 					}))]),
 					_: 1
@@ -8634,7 +8660,9 @@ var TemporalField_default = /* @__PURE__ */ defineComponent({
 		secondStep: {},
 		granularity: { default: "minute" },
 		timeZone: { default: "UTC" },
-		disambiguation: {}
+		disambiguation: {},
+		popoverAlign: {},
+		popoverProps: {}
 	},
 	emits: [
 		"update:modelValue",
@@ -9092,6 +9120,8 @@ var TimeControls_default = /* @__PURE__ */ defineComponent({
 		granularity: { default: "minute" },
 		timeZone: {},
 		disambiguation: {},
+		popoverAlign: {},
+		popoverProps: {},
 		presentation: { default: "list" }
 	},
 	emits: ["update:modelValue", "change"],
@@ -9446,24 +9476,51 @@ var TemporalPickerContent = /* @__PURE__ */ defineComponent({
 		return () => h("div", attrs, slots.default?.() ?? h(TemporalPanel_default));
 	}
 });
+var positionKeys = [
+	"side",
+	"align",
+	"sideOffset",
+	"alignOffset",
+	"avoidCollisions",
+	"collisionPadding"
+];
+/** Position attributes set on this part win over the picker's `popoverAlign` / `popoverProps`. */
 var TemporalPickerPopover = /* @__PURE__ */ defineComponent({
 	name: "TemporalPickerPopover",
 	setup(_, { attrs, slots }) {
 		const c = useTemporal();
-		return () => h(c.isDialog.value ? Reka.DialogPortal : Reka.PopoverPortal, {}, () => [c.isDialog.value ? h(Reka.DialogOverlay, { class: "temporal-picker__overlay" }) : null, h(c.isDialog.value ? Reka.DialogContent : Reka.PopoverContent, {
-			...attrs,
-			side: "bottom",
-			align: "start",
-			sideOffset: 8,
-			collisionPadding: 16,
-			class: [
-				"date-range__panel",
-				"temporal-picker__panel",
-				c.isDialog.value ? "temporal-picker__modal" : null,
-				attrs.class
-			],
-			"aria-labelledby": `${c.id}-label`
-		}, () => [c.isDialog.value ? h(Reka.DialogTitle, { class: "temporal__sr-only" }, () => c.options.label) : null, slots.default?.() ?? h(TemporalPanel_default)])]);
+		return () => {
+			const own = {};
+			const rest = {};
+			for (const [key, value] of Object.entries(attrs)) {
+				const name = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+				if (positionKeys.includes(name)) own[name] = value;
+				else rest[key] = value;
+			}
+			const position = c.isDialog.value ? {} : popoverPosition({
+				popoverAlign: c.options.popoverAlign,
+				popoverProps: {
+					...c.options.popoverProps,
+					...own
+				}
+			}, {
+				sideOffset: 8,
+				collisionPadding: 16
+			});
+			const direction = c.isDialog.value || !c.options.dir ? {} : { dir: c.options.dir };
+			return h(c.isDialog.value ? Reka.DialogPortal : Reka.PopoverPortal, {}, () => [c.isDialog.value ? h(Reka.DialogOverlay, { class: "temporal-picker__overlay" }) : null, h(c.isDialog.value ? Reka.DialogContent : Reka.PopoverContent, {
+				...rest,
+				...position,
+				...direction,
+				class: [
+					"date-range__panel",
+					"temporal-picker__panel",
+					c.isDialog.value ? "temporal-picker__modal" : null,
+					attrs.class
+				],
+				"aria-labelledby": `${c.id}-label`
+			}, () => [c.isDialog.value ? h(Reka.DialogTitle, { class: "temporal__sr-only" }, () => c.options.label) : null, slots.default?.() ?? h(TemporalPanel_default)])]);
+		};
 	}
 });
 function action(kind) {
@@ -9530,7 +9587,10 @@ var TemporalPicker_default = /* @__PURE__ */ defineComponent({
 		name: {},
 		description: {},
 		errorMessage: {},
-		open: { type: Boolean },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
 		defaultOpen: {
 			type: Boolean,
 			default: false
@@ -9563,6 +9623,8 @@ var TemporalPicker_default = /* @__PURE__ */ defineComponent({
 		granularity: {},
 		timeZone: { default: "UTC" },
 		disambiguation: {},
+		popoverAlign: {},
+		popoverProps: {},
 		kind: { default: "date" },
 		range: {
 			type: Boolean,
@@ -9838,6 +9900,8 @@ var TemporalRangeField_default = /* @__PURE__ */ defineComponent({
 		granularity: {},
 		timeZone: {},
 		disambiguation: {},
+		popoverAlign: {},
+		popoverProps: {},
 		kind: { default: "date" },
 		modelValue: { default: void 0 },
 		defaultValue: { default: null }