@wallarm-org/design-system 0.29.1-rc-feature-AS-882.3 → 0.29.1

package/dist/components/Calendar/CalendarContent.js

@@ -6,7 +6,7 @@ const CalendarContent = /*#__PURE__*/ forwardRef(({ children, className }, ref)=
         children: /*#__PURE__*/ jsx(DatePicker.Positioner, {
             children: /*#__PURE__*/ jsx(DatePicker.Content, {
                 ref: ref,
-                className: cn('flex bg-bg-surface-1 rounded-12 shadow-lg', 'border border-border-primary-light', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className),
+                className: cn('flex bg-bg-surface-2 rounded-12 shadow-md', 'border border-border-primary-light', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className),
                 children: children
             })
         })

package/dist/components/Calendar/CalendarGrid.js

@@ -16,7 +16,7 @@ const CalendarGrid = ({ showArrows = true, showJumpToToday = false, monthOffset
             const targetMonth = visibleRange.start.month;
             return /*#__PURE__*/ jsxs(DatePicker.View, {
                 view: "day",
-                className: "flex flex-col gap-8",
+                className: "flex flex-col",
                 children: [
                     /*#__PURE__*/ jsx(CalendarHeader, {
                         showArrows: showArrows,
@@ -59,7 +59,7 @@ const CalendarGrid = ({ showArrows = true, showJumpToToday = false, monthOffset
                                                     children: /*#__PURE__*/ jsx("div", {
                                                         className: cn('flex items-center justify-center relative', 'w-40 h-40 p-2'),
                                                         children: /*#__PURE__*/ jsx("span", {
-                                                            className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'text-text-secondary', (cellState.inRange || cellState.inHoveredRange) && 'bg-states-primary-pressed', cellState.selected && 'bg-bg-fill-brand text-text-primary-alt'),
+                                                            className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'text-text-secondary', (cellState.inRange || cellState.inHoveredRange) && 'bg-states-primary-pressed', cellState.selected && 'bg-bg-fill-brand text-text-primary-alt font-medium'),
                                                             children: day.day
                                                         })
                                                     })
@@ -77,11 +77,11 @@ const CalendarGrid = ({ showArrows = true, showJumpToToday = false, monthOffset
                                                         className: cn('flex items-center justify-center relative', 'w-40 h-40 p-2'),
                                                         children: [
                                                             /*#__PURE__*/ jsx("span", {
-                                                                className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'text-text-primary', (cellState.inRange || cellState.inHoveredRange) && 'bg-states-primary-pressed', cellState.selected && 'bg-bg-fill-brand text-text-primary-alt'),
+                                                                className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'text-text-primary', (cellState.inRange || cellState.inHoveredRange) && 'bg-states-primary-pressed', cellState.selected && 'bg-bg-fill-brand text-text-primary-alt font-medium'),
                                                                 children: day.day
                                                             }),
                                                             isToday && /*#__PURE__*/ jsx("span", {
-                                                                className: cn('absolute bottom-4 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full', 'bg-bg-fill-brand', cellState.selected && 'bg-text-primary-alt')
+                                                                className: cn('absolute bottom-7 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full', 'bg-bg-fill-brand', cellState.selected && 'bg-text-primary-alt')
                                                             })
                                                         ]
                                                     })
@@ -94,11 +94,11 @@ const CalendarGrid = ({ showArrows = true, showJumpToToday = false, monthOffset
                                                     className: cn('flex items-center justify-center relative', 'w-40 h-40 p-2', 'cursor-pointer select-none', 'outline-none'),
                                                     children: [
                                                         /*#__PURE__*/ jsx("span", {
-                                                            className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'transition-colors', '[[data-selected]_&]:bg-bg-fill-brand [[data-selected]_&]:text-text-primary-alt', '[[data-in-range]_&]:bg-states-primary-pressed', '[[data-outside-range]_&]:text-text-secondary', '[[data-disabled]_&]:cursor-not-allowed [[data-disabled]_&]:line-through [[data-disabled]_&]:text-text-secondary', 'not-[[data-selected]_&]:not-[[data-disabled]_&]:hover:bg-states-primary-hover', 'not-[[data-selected]_&]:not-[[data-disabled]_&]:active:bg-states-primary-pressed', '[:focus-visible_&]:ring-3 [:focus-visible_&]:ring-focus-primary', '[[data-selected]:focus-visible_&]:ring-focus-brand'),
+                                                            className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'transition-colors', '[[data-selected]_&]:bg-bg-fill-brand [[data-selected]_&]:text-text-primary-alt [[data-selected]_&]:font-medium', '[[data-in-range]_&]:bg-states-primary-pressed', '[[data-outside-range]_&]:text-text-secondary', '[[data-disabled]_&]:cursor-not-allowed [[data-disabled]_&]:line-through [[data-disabled]_&]:text-text-secondary', 'not-[[data-selected]_&]:not-[[data-disabled]_&]:hover:bg-states-primary-hover', 'not-[[data-selected]_&]:not-[[data-disabled]_&]:active:bg-states-primary-pressed', '[:focus-visible_&]:ring-3 [:focus-visible_&]:ring-focus-primary', '[[data-selected]:focus-visible_&]:ring-focus-brand'),
                                                             children: day.day
                                                         }),
                                                         isToday && /*#__PURE__*/ jsx("span", {
-                                                            className: cn('absolute bottom-4 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full', 'bg-bg-fill-brand', '[[data-selected]_&]:bg-text-primary-alt')
+                                                            className: cn('absolute bottom-7 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full', 'bg-bg-fill-brand', '[[data-selected]_&]:bg-text-primary-alt')
                                                         })
                                                     ]
                                                 })

package/dist/components/Calendar/CalendarGrids.js

@@ -7,7 +7,7 @@ const CalendarGrids = /*#__PURE__*/ forwardRef(({ className }, ref)=>{
     const { isRange } = useCalendarContext();
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
-        className: cn('flex px-12 pb-12 pt-12', isRange && 'gap-12', className),
+        className: cn('flex px-12 pb-8 first:pt-12', isRange && 'gap-12', className),
         children: [
             /*#__PURE__*/ jsx(CalendarGrid, {
                 showArrows: !isRange,

package/dist/components/Calendar/CalendarHeader.js

@@ -63,7 +63,7 @@ const CalendarHeader = ({ showArrows = true, showJumpToToday = false, visibleRan
                                                             api.setFocusedValue(todayDate);
                                                         },
                                                         children: /*#__PURE__*/ jsx(JumpToTodayIcon, {
-                                                            size: "sm"
+                                                            size: "md"
                                                         })
                                                     })
                                                 }),
@@ -94,7 +94,7 @@ const CalendarHeader = ({ showArrows = true, showJumpToToday = false, visibleRan
                                                             size: "small",
                                                             "aria-label": "Previous month",
                                                             children: /*#__PURE__*/ jsx(ArrowLeft, {
-                                                                size: "sm"
+                                                                size: "md"
                                                             })
                                                         })
                                                     })
@@ -116,7 +116,7 @@ const CalendarHeader = ({ showArrows = true, showJumpToToday = false, visibleRan
                                                             size: "small",
                                                             "aria-label": "Next month",
                                                             children: /*#__PURE__*/ jsx(ArrowRight, {
-                                                                size: "sm"
+                                                                size: "md"
                                                             })
                                                         })
                                                     })

package/dist/components/Calendar/CalendarInputHeader.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { DatePicker } from "@ark-ui/react";
-import { ArrowRight } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { DateInput } from "../DateInput/index.js";
 import { useCalendarContext } from "./CalendarContext.js";
@@ -82,12 +81,10 @@ const RangeDateInputInner = ({ api, readonly })=>{
                 readOnly: readonly,
                 granularity: "day"
             }),
-            /*#__PURE__*/ jsx("div", {
-                className: "flex items-center justify-center shrink-0 basis-20",
+            /*#__PURE__*/ jsx("span", {
+                className: "flex items-center justify-center shrink-0 basis-20 font-sans text-sm leading-sm text-text-secondary",
                 "aria-hidden": "true",
-                children: /*#__PURE__*/ jsx(ArrowRight, {
-                    size: "md"
-                })
+                children: "→"
             }),
             /*#__PURE__*/ jsx(DateInput, {
                 value: endValue,

package/dist/components/Calendar/CalendarKeyboardHints.js

@@ -9,21 +9,26 @@ const CalendarKeyboardHints = /*#__PURE__*/ forwardRef(({ className }, ref)=>/*#
             /*#__PURE__*/ jsxs("div", {
                 className: "flex items-center gap-4",
                 children: [
-                    /*#__PURE__*/ jsx(Kbd, {
-                        size: "small",
-                        children: "←"
-                    }),
-                    /*#__PURE__*/ jsx(Kbd, {
-                        size: "small",
-                        children: "↑"
-                    }),
-                    /*#__PURE__*/ jsx(Kbd, {
-                        size: "small",
-                        children: "↓"
-                    }),
-                    /*#__PURE__*/ jsx(Kbd, {
-                        size: "small",
-                        children: "→"
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Kbd, {
+                                size: "small",
+                                children: "←"
+                            }),
+                            /*#__PURE__*/ jsx(Kbd, {
+                                size: "small",
+                                children: "↑"
+                            }),
+                            /*#__PURE__*/ jsx(Kbd, {
+                                size: "small",
+                                children: "↓"
+                            }),
+                            /*#__PURE__*/ jsx(Kbd, {
+                                size: "small",
+                                children: "→"
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsx("span", {
                         className: "font-sans font-medium text-xs text-text-secondary",
@@ -49,7 +54,7 @@ const CalendarKeyboardHints = /*#__PURE__*/ forwardRef(({ className }, ref)=>/*#
                 children: [
                     /*#__PURE__*/ jsx(Kbd, {
                         size: "small",
-                        children: "Esc"
+                        children: "ESC"
                     }),
                     /*#__PURE__*/ jsx("span", {
                         className: "font-sans font-medium text-xs text-text-secondary",

package/dist/components/DateInput/internal/DateInputInternal.js

@@ -71,9 +71,10 @@ const DateInputInternal = ({ state, icon: IconComponent, error, disabled, readOn
                         ...props,
                         ref: ref,
                         "data-slot": "input",
-                        className: cn('h-full', showPlaceholder && 'opacity-0'),
+                        className: cn('h-full', showPlaceholder && 'opacity-0', readOnly && 'cursor-not-allowed'),
                         "aria-invalid": error || void 0,
                         "aria-disabled": disabled || void 0,
+                        "data-readonly": readOnly || void 0,
                         state: state,
                         disabled: disabled,
                         readOnly: readOnly,

package/dist/components/DateRangeInput/DateRangeSegmentGroup.js

@@ -73,9 +73,10 @@ const DateRangeSegmentGroup = ({ type, onHasPartialValueChange, ref, ...props })
                 ...fieldProps,
                 ref: composeRefs(internalRef, ref),
                 "data-slot": "input",
-                className: cn('h-full'),
+                className: cn('h-full', readOnly && 'cursor-not-allowed'),
                 "aria-disabled": disabled || void 0,
                 "aria-invalid": error || void 0,
+                "data-readonly": readOnly || void 0,
                 "data-field-type": type,
                 state: fieldState,
                 disabled: disabled,

package/dist/components/FilterInput/FilterInputContext/types.d.ts

@@ -39,8 +39,4 @@ export interface FilterInputContextValue {
     closeAutocompleteMenu: () => void;
     /** Register/unregister a chip DOM element for selection tracking */
     registerChipRef: (id: string, el: HTMLElement | null) => void;
-    /** Direct ref to the attribute segment <input> — attached by Segment when editing. */
-    segmentAttributeInputRef: RefObject<HTMLInputElement | null>;
-    /** Direct ref to the value segment <input> — attached by Segment when editing. */
-    segmentValueInputRef: RefObject<HTMLInputElement | null>;
 }

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.d.ts

@@ -25,8 +25,6 @@ interface AutocompleteForContext {
     handleCustomAttributeCommit: (customText: string) => void;
     menuRef: RefObject<HTMLDivElement | null>;
     closeAutocompleteMenu: () => void;
-    segmentAttributeInputRef: RefObject<HTMLInputElement | null>;
-    segmentValueInputRef: RefObject<HTMLInputElement | null>;
 }
 interface UseFilterInputContextValueOptions {
     chips: FilterInputChipData[];

package/dist/components/FilterInput/FilterInputContext/useFilterInputContextValue.js

@@ -28,9 +28,7 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
             onCustomAttributeCommit: autocomplete.handleCustomAttributeCommit,
             menuRef: autocomplete.menuRef,
             closeAutocompleteMenu: autocomplete.closeAutocompleteMenu,
-            registerChipRef,
-            segmentAttributeInputRef: autocomplete.segmentAttributeInputRef,
-            segmentValueInputRef: autocomplete.segmentValueInputRef
+            registerChipRef
         }), [
         chips,
         autocomplete.buildingChipData,
@@ -55,8 +53,6 @@ const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inpu
         autocomplete.handleCustomAttributeCommit,
         autocomplete.menuRef,
         autocomplete.closeAutocompleteMenu,
-        autocomplete.segmentAttributeInputRef,
-        autocomplete.segmentValueInputRef,
         registerChipRef,
         buildingChipRef,
         inputRef,

package/dist/components/FilterInput/FilterInputField/FilterInputChip/Segment.d.ts

@@ -1,10 +1,5 @@
 import type { FC, FocusEvent, HTMLAttributes, KeyboardEvent } from 'react';
-declare const SEGMENT_VARIANT: {
-    readonly attribute: "attribute";
-    readonly operator: "operator";
-    readonly value: "value";
-};
-type SegmentVariant = (typeof SEGMENT_VARIANT)[keyof typeof SEGMENT_VARIANT];
+type SegmentVariant = 'attribute' | 'operator' | 'value';
 export type SegmentProps = HTMLAttributes<HTMLDivElement> & {
     variant: SegmentVariant;
     children: string;

package/dist/components/FilterInput/FilterInputField/FilterInputChip/Segment.js

@@ -1,22 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
-import { FilterInputContext } from "../../FilterInputContext/FilterInputContext.js";
 import { segmentContainer, segmentTextVariants } from "./classes.js";
 import { CHAR_WIDTH_PX } from "./constants.js";
 import { MultiValueSegment } from "./MultiValueSegment.js";
 import { useSizerWidth } from "./model/useSizerWidth.js";
-const SEGMENT_VARIANT = {
-    attribute: 'attribute',
-    operator: 'operator',
-    value: 'value'
-};
 const Segment = ({ variant, children, className, error, editing, editText, onEditChange, onEditKeyDown, onEditBlur, valueParts, valueSeparator = ', ', errorValueIndices, ...props })=>{
     const textRef = useRef(null);
     const inputRef = useRef(null);
     const sizerRef = useRef(null);
-    const filterInputContext = useContext(FilterInputContext);
-    const segmentInputRef = variant === SEGMENT_VARIANT.attribute ? filterInputContext?.segmentAttributeInputRef : variant === SEGMENT_VARIANT.value ? filterInputContext?.segmentValueInputRef : null;
     const lastTextWidthRef = useRef(0);
     useEffect(()=>{
         if (editing) return;
@@ -28,16 +20,17 @@ const Segment = ({ variant, children, className, error, editing, editText, onEdi
     ]);
     useEffect(()=>{
         if (!editing) return;
-        let innerFrame = 0;
-        const outerFrame = requestAnimationFrame(()=>{
-            innerFrame = requestAnimationFrame(()=>{
+        let outer = 0;
+        let inner = 0;
+        outer = requestAnimationFrame(()=>{
+            inner = requestAnimationFrame(()=>{
                 inputRef.current?.focus();
                 inputRef.current?.select();
             });
         });
         return ()=>{
-            cancelAnimationFrame(outerFrame);
-            cancelAnimationFrame(innerFrame);
+            cancelAnimationFrame(outer);
+            cancelAnimationFrame(inner);
         };
     }, [
         editing
@@ -46,14 +39,8 @@ const Segment = ({ variant, children, className, error, editing, editText, onEdi
         sizerRef,
         text: editText ?? ''
     });
-    const setInputRef = useCallback((node)=>{
-        inputRef.current = node;
-        if (segmentInputRef) segmentInputRef.current = node;
-    }, [
-        segmentInputRef
-    ]);
     const isInteractive = !!props.onClick;
-    const hasMultiValueErrors = variant === SEGMENT_VARIANT.value && !!valueParts && !!errorValueIndices && errorValueIndices.length > 0 && !editing;
+    const hasMultiValueErrors = 'value' === variant && !!valueParts && !!errorValueIndices && errorValueIndices.length > 0 && !editing;
     if (hasMultiValueErrors) return /*#__PURE__*/ jsx(MultiValueSegment, {
         valueParts: valueParts,
         valueSeparator: valueSeparator,
@@ -72,7 +59,7 @@ const Segment = ({ variant, children, className, error, editing, editText, onEdi
         children: editing ? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx("input", {
-                    ref: setInputRef,
+                    ref: inputRef,
                     size: 1,
                     value: editText ?? '',
                     onChange: (e)=>onEditChange?.(e.target.value),

package/dist/components/FilterInput/FilterInputField/FilterInputConnectorChip/FilterInputConnectorChip.js

@@ -56,7 +56,6 @@ const FilterInputConnectorChip = ({ chipId, variant, onChange, className })=>{
             }),
             /*#__PURE__*/ jsxs(DropdownMenuContent, {
                 className: "w-auto min-w-64",
-                "data-filter-input-menu": "true",
                 children: [
                     /*#__PURE__*/ jsxs(DropdownMenuItem, {
                         value: "and",

package/dist/components/FilterInput/FilterInputMenu/FilterInputDateValueMenu/FilterInputDateValueMenu.js

@@ -51,7 +51,6 @@ const FilterInputDateValueMenu = ({ open, onSelect, onRangeSelect, onOpenChange,
         children: /*#__PURE__*/ jsx(DropdownMenuContent, {
             ref: menuRef,
             className: cn('w-fit', className),
-            "data-filter-input-menu": "true",
             onKeyDown: (e)=>{
                 if ('Escape' === e.key) {
                     e.preventDefault();

package/dist/components/FilterInput/FilterInputMenu/FilterInputFieldMenu/FieldMenuSections.d.ts

@@ -4,19 +4,16 @@ interface RecentSectionProps {
     conditions: Condition[];
     fields: FieldMetadata[];
     onSelect: (field: FieldMetadata) => void;
-    registerItem: (id: string) => (el: HTMLElement | null) => void;
 }
 export declare const RecentSection: FC<RecentSectionProps>;
 interface SuggestionsSectionProps {
     fields: FieldMetadata[];
     onSelect: (field: FieldMetadata) => void;
-    registerItem: (id: string) => (el: HTMLElement | null) => void;
 }
 export declare const SuggestionsSection: FC<SuggestionsSectionProps>;
 interface OperatorsSectionProps {
     onSelectAnd?: () => void;
     onSelectOr?: () => void;
-    registerItem: (id: string) => (el: HTMLElement | null) => void;
 }
 export declare const OperatorsSection: FC<OperatorsSectionProps>;
 export {};

package/dist/components/FilterInput/FilterInputMenu/FilterInputFieldMenu/FieldMenuSections.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CirclePlus } from "../../../../icons/CirclePlus.js";
 import { CircleSlash } from "../../../../icons/CircleSlash.js";
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator } from "../../../DropdownMenu/index.js";
-const RecentSection = ({ conditions, fields, onSelect, registerItem })=>/*#__PURE__*/ jsxs(Fragment, {
+const RecentSection = ({ conditions, fields, onSelect })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(DropdownMenuLabel, {
                 children: "Recent"
@@ -15,7 +15,6 @@ const RecentSection = ({ conditions, fields, onSelect, registerItem })=>/*#__PUR
                     const value = String(condition.value);
                     return /*#__PURE__*/ jsx(DropdownMenuItem, {
                         value: `recent-${index}`,
-                        ref: registerItem(`recent-${index}`),
                         onSelect: ()=>{
                             if (fieldMeta) onSelect(fieldMeta);
                         },
@@ -43,7 +42,7 @@ const RecentSection = ({ conditions, fields, onSelect, registerItem })=>/*#__PUR
         ]
     });
 RecentSection.displayName = 'RecentSection';
-const SuggestionsSection = ({ fields, onSelect, registerItem })=>/*#__PURE__*/ jsxs(Fragment, {
+const SuggestionsSection = ({ fields, onSelect })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(DropdownMenuLabel, {
                 children: "Suggestions"
@@ -51,7 +50,6 @@ const SuggestionsSection = ({ fields, onSelect, registerItem })=>/*#__PURE__*/ j
             /*#__PURE__*/ jsx(DropdownMenuGroup, {
                 children: fields.map((field, index)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
                         value: `suggested-${index}`,
-                        ref: registerItem(`suggested-${index}`),
                         onSelect: ()=>onSelect(field),
                         children: /*#__PURE__*/ jsxs("span", {
                             className: "flex gap-2 items-center text-sm",
@@ -76,12 +74,11 @@ const SuggestionsSection = ({ fields, onSelect, registerItem })=>/*#__PURE__*/ j
         ]
     });
 SuggestionsSection.displayName = 'SuggestionsSection';
-const OperatorsSection = ({ onSelectAnd, onSelectOr, registerItem })=>/*#__PURE__*/ jsxs(Fragment, {
+const OperatorsSection = ({ onSelectAnd, onSelectOr })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
             onSelectAnd && /*#__PURE__*/ jsxs(DropdownMenuItem, {
                 value: "and",
-                ref: registerItem('and'),
                 onSelect: ()=>onSelectAnd(),
                 children: [
                     /*#__PURE__*/ jsx(DropdownMenuItemIcon, {
@@ -94,7 +91,6 @@ const OperatorsSection = ({ onSelectAnd, onSelectOr, registerItem })=>/*#__PURE_
             }),
             onSelectOr && /*#__PURE__*/ jsxs(DropdownMenuItem, {
                 value: "or",
-                ref: registerItem('or'),
                 onSelect: ()=>onSelectOr(),
                 children: [
                     /*#__PURE__*/ jsx(DropdownMenuItemIcon, {

package/dist/components/FilterInput/FilterInputMenu/FilterInputFieldMenu/FilterInputFieldMenu.js

@@ -87,7 +87,7 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
         } else if ('and' === data.type) onSelectAnd?.();
         else if ('or' === data.type) onSelectOr?.();
     };
-    const { highlightedValue, onHighlightChange, registerItem } = useKeyboardNav({
+    const { highlightedValue, onHighlightChange } = useKeyboardNav({
         items: flatItems,
         open,
         onSelect: handleItemSelect,
@@ -109,23 +109,19 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
             ref: menuRef,
             className: cn('w-[300px] max-h-[430px]', className),
             "data-slot": "filter-input-field-menu",
-            "data-filter-input-menu": "true",
             children: [
                 !filterText && showRecent && /*#__PURE__*/ jsx(RecentSection, {
                     conditions: limitedRecentConditions,
                     fields: fields,
-                    onSelect: onSelect,
-                    registerItem: registerItem
+                    onSelect: onSelect
                 }),
                 !filterText && showSuggestions && !showRecent && /*#__PURE__*/ jsx(SuggestionsSection, {
                     fields: suggestedFields,
-                    onSelect: onSelect,
-                    registerItem: registerItem
+                    onSelect: onSelect
                 }),
                 filteredFields.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
                     children: filteredFields.map((field)=>/*#__PURE__*/ jsx(DropdownMenuItem, {
                             value: `field-${field.name}`,
-                            ref: registerItem(`field-${field.name}`),
                             onSelect: ()=>onSelect(field),
                             children: /*#__PURE__*/ jsx(DropdownMenuItemText, {
                                 children: field.label
@@ -134,8 +130,7 @@ const FilterInputFieldMenu = ({ fields, filterText = '', onSelect, open = false,
                 }) : /*#__PURE__*/ jsx(MenuEmptyState, {}),
                 !filterText && (onSelectAnd || onSelectOr) && /*#__PURE__*/ jsx(OperatorsSection, {
                     onSelectAnd: onSelectAnd,
-                    onSelectOr: onSelectOr,
-                    registerItem: registerItem
+                    onSelectOr: onSelectOr
                 }),
                 /*#__PURE__*/ jsxs(DropdownMenuFooter, {
                     children: [

package/dist/components/FilterInput/FilterInputMenu/FilterInputOperatorMenu.js

@@ -36,7 +36,7 @@ const FilterInputOperatorMenu = ({ fieldType, operators, onSelect, open = false,
         filteredGroups,
         fieldType
     ]);
-    const { highlightedValue, onHighlightChange, registerItem } = useKeyboardNav({
+    const { highlightedValue, onHighlightChange } = useKeyboardNav({
         items: flatItems,
         open,
         onSelect: (item)=>onSelect(item.value),
@@ -56,14 +56,12 @@ const FilterInputOperatorMenu = ({ fieldType, operators, onSelect, open = false,
         children: /*#__PURE__*/ jsxs(DropdownMenuContent, {
             ref: menuRef,
             className: cn('w-256 max-h-[430px]', className),
-            "data-filter-input-menu": "true",
             children: [
                 filteredGroups.length > 0 ? filteredGroups.map((group, groupIdx)=>/*#__PURE__*/ jsxs(Fragment, {
                         children: [
                             /*#__PURE__*/ jsx(DropdownMenuGroup, {
                                 children: group.map((operator)=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
                                         value: operator,
-                                        ref: registerItem(operator),
                                         onSelect: ()=>onSelect(operator),
                                         children: [
                                             /*#__PURE__*/ jsx(DropdownMenuItemText, {

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/FilterInputValueMenu.js

@@ -16,7 +16,7 @@ const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpen
         values,
         filterText
     ]);
-    const { selectedValues, checkedValues, highlightedValue, onHighlightChange, pendingIds, registerItem, handleItemSelect } = useValueMenuState({
+    const { selectedValues, checkedValues, highlightedValue, onHighlightChange, pendingIds, handleItemSelect } = useValueMenuState({
         values: filteredValues,
         open,
         multiSelect,
@@ -54,7 +54,6 @@ const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpen
             ref: menuRef,
             className: cn(widthClass, 'max-h-[430px]', className),
             style: widthStyle,
-            "data-filter-input-menu": "true",
             children: [
                 displayValues.length > 0 ? /*#__PURE__*/ jsx(DropdownMenuGroup, {
                     children: displayValues.map((option)=>/*#__PURE__*/ jsx(ValueMenuItem, {
@@ -62,7 +61,6 @@ const FilterInputValueMenu = ({ values, onSelect, onCommit, open = false, onOpen
                             isChecked: selectedValues.includes(option.value),
                             isPending: pendingIds.has(String(option.value)),
                             multiSelect: multiSelect,
-                            registerItem: registerItem,
                             onSelect: ()=>handleItemSelect({
                                     id: String(option.value),
                                     label: option.label,

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/ValueMenuItem.d.ts

@@ -6,7 +6,6 @@ interface ValueMenuItemProps {
     isPending: boolean;
     multiSelect: boolean;
     onSelect: () => void;
-    registerItem?: (id: string) => (el: HTMLElement | null) => void;
 }
 export declare const ValueMenuItem: FC<ValueMenuItemProps>;
 export {};

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/ValueMenuItem.js

@@ -4,9 +4,8 @@ import { Badge } from "../../../Badge/index.js";
 import { Checkmark } from "../../../Checkmark/index.js";
 import { DropdownMenuItem } from "../../../DropdownMenu/index.js";
 import { Text } from "../../../Text/index.js";
-const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect, registerItem })=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
+const ValueMenuItem = ({ option, isChecked, isPending, multiSelect, onSelect })=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
         value: String(option.value),
-        ref: registerItem?.(String(option.value)),
         onSelect: onSelect,
         className: isPending ? 'bg-states-primary-hover' : void 0,
         children: [

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/useValueMenuState.d.ts

@@ -31,7 +31,6 @@ export declare const useValueMenuState: ({ values, open, multiSelect, initialVal
         highlightedValue: string | null;
     }) => void;
     pendingIds: Set<string>;
-    registerItem: (id: string) => (el: HTMLElement | null) => void;
     commitChecked: () => boolean;
     handleItemSelect: (item: FilterInputDropdownItem) => void;
 };

package/dist/components/FilterInput/FilterInputMenu/FilterInputValueMenu/useValueMenuState.js

@@ -68,7 +68,7 @@ const useValueMenuState = ({ values, open, multiSelect, initialValues, highlight
         if (multiSelect) commitChecked();
         onOpenChange?.(false);
     };
-    const { highlightedValue, onHighlightChange, pendingIds, registerItem } = useKeyboardNav({
+    const { highlightedValue, onHighlightChange, pendingIds } = useKeyboardNav({
         items: flatItems,
         open,
         onSelect: handleItemSelect,
@@ -94,7 +94,6 @@ const useValueMenuState = ({ values, open, multiSelect, initialValues, highlight
         highlightedValue,
         onHighlightChange,
         pendingIds,
-        registerItem,
         commitChecked,
         handleItemSelect
     };

package/dist/components/FilterInput/FilterInputMenu/hooks/useKeyboardNav.d.ts

@@ -32,6 +32,5 @@ export declare const useKeyboardNav: ({ items, open, onSelect, onClose, onArrowR
         highlightedValue: string | null;
     }) => void;
     pendingIds: Set<string>;
-    registerItem: (id: string) => (el: HTMLElement | null) => void;
 };
 export {};

package/dist/components/FilterInput/FilterInputMenu/hooks/useKeyboardNav.js

@@ -2,11 +2,6 @@ import { useCallback, useEffect, useRef, useState } from "react";
 const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendingCommit, arrowRightSelectsActive = false, inputRef, menuRef })=>{
     const [activeIndex, setActiveIndex] = useState(-1);
     const [pendingIds, setPendingIds] = useState(new Set());
-    const itemRegistryRef = useRef(new Map());
-    const registerItem = useCallback((id)=>(el)=>{
-            if (el) itemRegistryRef.current.set(id, el);
-            else itemRegistryRef.current.delete(id);
-        }, []);
     const activeIndexRef = useRef(-1);
     const pendingIdsRef = useRef(pendingIds);
     pendingIdsRef.current = pendingIds;
@@ -67,7 +62,9 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
         setActiveIndex(next);
         const itemId = list[next]?.id;
         if (itemId) requestAnimationFrame(()=>{
-            itemRegistryRef.current.get(itemId)?.scrollIntoView({
+            const container = stateRef.current.menuRef?.current;
+            const el = container?.querySelector(`[role="menuitem"][data-value="${CSS.escape(itemId)}"]`);
+            el?.scrollIntoView({
                 block: 'nearest'
             });
         });
@@ -220,7 +217,9 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
             setActiveIndex(idx);
             activeIndexRef.current = idx;
         }
-        itemRegistryRef.current.get(details.highlightedValue)?.scrollIntoView({
+        const container = stateRef.current.menuRef?.current;
+        const el = container?.querySelector(`[role="menuitem"][data-value="${CSS.escape(details.highlightedValue)}"]`);
+        el?.scrollIntoView({
             block: 'nearest'
         });
     }, []);
@@ -230,8 +229,7 @@ const useKeyboardNav = ({ items, open, onSelect, onClose, onArrowRight, onPendin
         setActiveIndex,
         highlightedValue,
         onHighlightChange,
-        pendingIds,
-        registerItem
+        pendingIds
     };
 };
 export { useKeyboardNav };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.d.ts

@@ -71,7 +71,5 @@ export declare const useFilterInputAutocomplete: ({ fields, conditions, chips, u
     closeAutocompleteMenu: () => void;
     blurCommitRef: RefObject<(() => boolean) | null>;
     setInputText: import("react").Dispatch<import("react").SetStateAction<string>>;
-    segmentAttributeInputRef: RefObject<HTMLInputElement | null>;
-    segmentValueInputRef: RefObject<HTMLInputElement | null>;
 };
 export {};

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.js

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { useDateRange } from "../../FilterInputMenu/FilterInputDateValueMenu/hooks.js";
-import { applyAcceptChar, chipIdToConditionIndex, isMenuRelated } from "../../lib/index.js";
+import { applyAcceptChar, chipIdToConditionIndex } from "../../lib/index.js";
 import { deriveAutocompleteValues } from "./deriveAutocompleteValues.js";
 import { useChipEditing } from "./useChipEditing.js";
 import { useFocusManagement } from "./useFocusManagement.js";
@@ -25,8 +25,6 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
     const conditionsLengthRef = useRef(conditions.length);
     conditionsLengthRef.current = conditions.length;
     const blurCommitRef = useRef(null);
-    const segmentAttributeInputRef = useRef(null);
-    const segmentValueInputRef = useRef(null);
     const { menuPositioning, setMenuOffset, resetMenuOffset } = useMenuPositioning({
         containerRef,
         buildingChipRef,
@@ -63,14 +61,11 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
             flushSync(doReset);
             setMenuState('field');
         } else doReset();
-        const active = document.activeElement;
-        const stayedInside = active === document.body || containerRef.current?.contains(active) || isMenuRelated(active);
-        if (stayedInside) inputRef.current?.focus();
+        inputRef.current?.focus();
     }, [
         editing,
         dateRange,
         inputRef,
-        containerRef,
         resetMenuOffset
     ]);
     const selectedFieldRef = useRef(selectedField);
@@ -123,9 +118,6 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         const text = inputTextRef.current.trim();
         if (!field) return false;
         if (editing.editingChipId) return false;
-        selectedFieldRef.current = null;
-        selectedOperatorRef.current = null;
-        inputTextRef.current = '';
         if (operator && text) {
             handleCustomValueCommit(text);
             return true;
@@ -148,8 +140,6 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         containerRef,
         inputRef,
         editingSegment: editing.editingSegment,
-        segmentAttributeInputRef,
-        segmentValueInputRef,
         blurCommitRef,
         commitBuildingOnBlur,
         setIsFocused,
@@ -249,9 +239,7 @@ const useFilterInputAutocomplete = ({ fields, conditions, chips, upsertCondition
         menuRef,
         closeAutocompleteMenu,
         blurCommitRef,
-        setInputText,
-        segmentAttributeInputRef,
-        segmentValueInputRef
+        setInputText
     };
 };
 export { useFilterInputAutocomplete };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFocusManagement.d.ts

@@ -1,5 +1,4 @@
 import type { FocusEvent, RefObject } from 'react';
-import type { ChipSegment } from '../../FilterInputField/FilterInputChip';
 import type { MenuState } from '../../types';
 interface UseFocusManagementDeps {
     menuState: MenuState;
@@ -8,11 +7,7 @@ interface UseFocusManagementDeps {
     inputText: string;
     containerRef: RefObject<HTMLElement | null>;
     inputRef: RefObject<HTMLInputElement | null>;
-    editingSegment: ChipSegment | null;
-    /** Direct ref to the attribute segment <input> when editing — avoids querySelector. */
-    segmentAttributeInputRef: RefObject<HTMLInputElement | null>;
-    /** Direct ref to the value segment <input> when editing — avoids querySelector. */
-    segmentValueInputRef: RefObject<HTMLInputElement | null>;
+    editingSegment: string | null;
     /** Ref set by FilterInputValueMenu — calls commitChecked() for multi-select before blur reset. Returns true if committed. */
     blurCommitRef: RefObject<(() => boolean) | null>;
     /** Tries to commit a building chip's freeform value on blur. Returns true if committed. */
@@ -22,7 +17,7 @@ interface UseFocusManagementDeps {
     resetMenuOffset: () => void;
     resetState: (continueBuilding?: boolean) => void;
 }
-export declare const useFocusManagement: ({ menuState, isFocused, conditionsLength, inputText, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, setIsFocused, setMenuState, resetMenuOffset, resetState, }: UseFocusManagementDeps) => {
+export declare const useFocusManagement: ({ menuState, isFocused, conditionsLength, inputText, containerRef, inputRef, editingSegment, blurCommitRef, commitBuildingOnBlur, setIsFocused, setMenuState, resetMenuOffset, resetState, }: UseFocusManagementDeps) => {
     handleFocus: (e: FocusEvent) => void;
     handleBlur: (e: FocusEvent) => void;
 };

package/dist/components/FilterInput/hooks/useFilterInputAutocomplete/useFocusManagement.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 import { isMenuRelated } from "../../lib/index.js";
-const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText, containerRef, inputRef, editingSegment, segmentAttributeInputRef, segmentValueInputRef, blurCommitRef, commitBuildingOnBlur, setIsFocused, setMenuState, resetMenuOffset, resetState })=>{
+const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText, containerRef, inputRef, editingSegment, blurCommitRef, commitBuildingOnBlur, setIsFocused, setMenuState, resetMenuOffset, resetState })=>{
     const handleFocus = useCallback((e)=>{
         if (e.target?.closest?.('[data-slot="filter-input-connector-chip"]')) return;
         setIsFocused(true);
@@ -14,15 +14,12 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         setIsFocused(false);
         const committed = blurCommitRef.current?.() || commitBuildingOnBlur();
         if (!committed) resetState();
-        related?.focus();
-        if (document.activeElement === inputRef.current) inputRef.current?.blur();
     }, [
         containerRef,
         blurCommitRef,
         commitBuildingOnBlur,
         resetState,
-        setIsFocused,
-        inputRef
+        setIsFocused
     ]);
     const prevFocusedRef = useRef(false);
     useEffect(()=>{
@@ -40,17 +37,12 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
     ]);
     useEffect(()=>{
         if ('closed' === menuState) return;
-        if (!isFocused) return;
         let outerRaf = 0;
         let innerRaf = 0;
         outerRaf = requestAnimationFrame(()=>{
             innerRaf = requestAnimationFrame(()=>{
-                const container = containerRef.current;
-                if (!container) return;
-                const active = document.activeElement;
-                if (active && !container.contains(active) && !isMenuRelated(active)) return;
                 if (editingSegment) {
-                    const segmentInput = 'attribute' === editingSegment ? segmentAttributeInputRef.current : 'value' === editingSegment ? segmentValueInputRef.current : null;
+                    const segmentInput = containerRef.current?.querySelector(`[data-slot="segment-${editingSegment}"] input`);
                     if (segmentInput && document.activeElement !== segmentInput) {
                         segmentInput.focus();
                         segmentInput.select();
@@ -64,12 +56,9 @@ const useFocusManagement = ({ menuState, isFocused, conditionsLength, inputText,
         };
     }, [
         menuState,
-        isFocused,
         inputRef,
         editingSegment,
-        containerRef,
-        segmentAttributeInputRef,
-        segmentValueInputRef
+        containerRef
     ]);
     return {
         handleFocus,

package/dist/components/FilterInput/lib/dom.d.ts

@@ -1,12 +1,4 @@
-/**
- * Check if an element belongs to a FilterInput-owned menu/portal overlay.
- *
- * Menus are marked with `data-filter-input-menu` on their `DropdownMenuContent`
- * root. Generic Ark UI selectors (`[role="menu"]`, `[data-part="content"]`,
- * `[data-scope="date-picker"]`) intentionally DO NOT match — otherwise blur
- * handlers mistake unrelated page popups (tenant switcher, other dropdowns)
- * for FilterInput's own menu and refuse to close. See AS-882.
- */
+/** Check if an element belongs to a menu/portal overlay (dropdown, date-picker, etc.) */
 export declare const isMenuRelated: (el: HTMLElement | null) => boolean;
 /**
  * Build a DOMRect-compatible object anchored vertically to the container

package/dist/components/FilterInput/lib/dom.js

@@ -1,4 +1,4 @@
-const isMenuRelated = (el)=>!!el?.closest('[data-filter-input-menu]');
+const isMenuRelated = (el)=>!!(el?.closest('[role="menu"]') || el?.closest('[data-scope="menu"]') || el?.closest('[data-scope="date-picker"]') || el?.closest('[data-part="content"]'));
 const buildContainerAnchoredRect = (containerRect, anchorLeft, anchorRight = containerRect.right)=>({
         x: anchorLeft,
         y: containerRect.top,

package/dist/components/InputGroup/InputGroup.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
-const inputGroupVariants = cva(cn('group/input-group', 'w-full flex items-center border rounded-8 bg-component-input-bg relative', 'has-[>textarea]:h-auto', '**:data-[slot=input]:flex-1', '**:data-[slot=input]:rounded-none', '**:data-[slot=input]:border-0', '**:data-[slot=input]:bg-transparent', '**:data-[slot=input]:shadow-none', '**:data-[slot=input]:focus-visible:ring-0', '**:data-[slot=input]:focus-within:ring-0', 'border border-border-primary outline-none shadow-xs transition-[color,border,box-shadow]', 'has-[[data-slot=input]:not(:disabled):not([aria-disabled=true]):not(:focus-visible)]:hover:border-component-border-input-hover', 'focus-visible:ring-focus-primary', 'has-[[data-slot=input]:focus-visible]:ring-3', 'has-[[data-slot=input]:focus-visible]:ring-focus-primary', 'has-[[data-slot=input]:focus-visible]:border-border-strong-primary', 'focus-within:ring-focus-primary', 'has-[[data-slot=input]:focus-within]:ring-3', 'has-[[data-slot=input]:focus-within]:ring-focus-primary', 'has-[[data-slot=input]:focus-within]:border-border-strong-primary', 'has-[[data-slot][aria-invalid=true]]:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]]:ring-focus-destructive', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true])]:hover:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true])]:hover:ring-3', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true])]:hover:ring-focus-destructive-hover', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true])]:*:data-[slot=input]:hover:ring-0', 'has-[[data-slot=input]:disabled]:opacity-50', 'has-[[data-slot=input][aria-disabled=true]]:opacity-50', 'has-[[data-slot=input]:disabled]:cursor-not-allowed', 'has-[[data-slot=input][aria-disabled=true]]:cursor-not-allowed'), {
+const inputGroupVariants = cva(cn('group/input-group', 'w-full flex items-center border rounded-8 bg-component-input-bg relative', 'has-[>textarea]:h-auto', '**:data-[slot=input]:flex-1', '**:data-[slot=input]:rounded-none', '**:data-[slot=input]:border-0', '**:data-[slot=input]:bg-transparent', '**:data-[slot=input]:shadow-none', '**:data-[slot=input]:focus-visible:ring-0', '**:data-[slot=input]:focus-within:ring-0', 'border border-border-primary outline-none shadow-xs transition-[color,border,box-shadow]', 'has-[[data-slot=input]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true]):not(:focus-visible)]:hover:border-component-border-input-hover', 'focus-visible:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-visible]:ring-3', 'has-[[data-slot=input]:not([data-readonly=true]):focus-visible]:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-visible]:border-border-strong-primary', 'focus-within:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-within]:ring-3', 'has-[[data-slot=input]:not([data-readonly=true]):focus-within]:ring-focus-primary', 'has-[[data-slot=input]:not([data-readonly=true]):focus-within]:border-border-strong-primary', 'has-[[data-slot][aria-invalid=true]]:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]]:ring-focus-destructive', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:hover:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:hover:ring-3', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:hover:ring-focus-destructive-hover', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true]):not([data-readonly=true])]:*:data-[slot=input]:hover:ring-0', 'has-[[data-slot=input]:disabled]:opacity-50', 'has-[[data-slot=input][aria-disabled=true]]:opacity-50', 'has-[[data-slot=input]:disabled]:cursor-not-allowed', 'has-[[data-slot=input][aria-disabled=true]]:cursor-not-allowed'), {
     variants: {
         size: {
             default: 'h-36',

package/dist/components/TemporalCore/TemporalClear.js

@@ -1,13 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { X } from "../../icons/index.js";
-import { Button } from "../Button/index.js";
-const TemporalClear = ({ onClick, disabled = false })=>/*#__PURE__*/ jsx(Button, {
-        variant: "ghost",
-        color: "neutral",
-        size: "small",
+import { cn } from "../../utils/cn.js";
+const TemporalClear = ({ onClick, disabled = false })=>/*#__PURE__*/ jsx("button", {
+        type: "button",
         onClick: onClick,
         disabled: disabled,
-        className: "-mr-4",
-        children: /*#__PURE__*/ jsx(X, {})
+        "aria-label": "Clear",
+        className: cn('inline-flex items-center justify-center', 'icon-md text-icon-primary', 'bg-transparent p-0 border-0', 'cursor-pointer', 'disabled:opacity-50 disabled:cursor-not-allowed', 'outline-none focus-visible:ring-3 focus-visible:ring-focus-primary rounded-4'),
+        children: /*#__PURE__*/ jsx(X, {
+            size: "md"
+        })
     });
 export { TemporalClear };

package/dist/components/TemporalCore/TemporalSegment.js

@@ -20,7 +20,7 @@ const segmentVariants = cva(cn('relative outline-none text-left', 'font-sans tex
             false: 'hover:bg-states-primary-default-alt cursor-text'
         },
         type: {
-            literal: cn('text-text-primary select-none hover:bg-transparent focus:bg-transparent rounded-2', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-primary'),
+            literal: 'text-text-primary select-none hover:bg-transparent focus:bg-transparent rounded-2',
             editable: 'px-1 focus:bg-bg-fill-brand focus:text-text-primary-alt'
         }
     },
@@ -35,22 +35,28 @@ const TemporalSegment = ({ segment, state, disabled = false, readOnly = false, d
     const { segmentProps } = useDateSegment(segment, state, ref);
     const isLiteral = 'literal' === segment.type;
     const isEditable = segment.isEditable && !readOnly;
-    if (isLiteral) return /*#__PURE__*/ jsx("span", {
-        className: cn(segmentVariants({
-            type: 'literal',
-            disabled
-        })),
-        "aria-hidden": "true",
-        children: displayOverride ?? segment.text
-    });
-    const displayText = displayOverride ?? resolveSegmentText(segment);
+    const displayText = displayOverride ?? (isLiteral ? segment.text : resolveSegmentText(segment));
+    if (isLiteral || !isEditable) {
+        const isReadOnlySegment = !isLiteral && !isEditable && !disabled;
+        return /*#__PURE__*/ jsx("span", {
+            className: cn(segmentVariants({
+                type: 'literal',
+                isPlaceholder: !isLiteral && segment.isPlaceholder,
+                disabled
+            }), isReadOnlySegment && 'cursor-not-allowed'),
+            "data-segment": isLiteral ? void 0 : segment.type,
+            "data-placeholder": !isLiteral && segment.isPlaceholder ? true : void 0,
+            "aria-hidden": "true",
+            children: displayText
+        });
+    }
     return /*#__PURE__*/ jsx("span", {
         ...segmentProps,
         ref: ref,
         className: cn(segmentVariants({
-            type: isEditable ? 'editable' : 'literal',
+            type: 'editable',
             isPlaceholder: segment.isPlaceholder,
-            disabled: disabled || !isEditable
+            disabled
         })),
         "data-segment": segment.type,
         "data-placeholder": segment.isPlaceholder || void 0,

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "0.29.0",
-  "generatedAt": "2026-04-24T20:00:06.055Z",
+  "generatedAt": "2026-04-27T08:12:28.959Z",
   "components": [
     {
       "name": "Alert",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.29.1-rc-feature-AS-882.3",
+  "version": "0.29.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",