@mindlogic-ai/logician-ui 5.0.0-alpha.15 → 5.0.0-alpha.17

package/dist/components/Select/Select.styles.js

@@ -37,9 +37,26 @@ const fieldBase = {
         fontWeight: 'semibold',
     },
 };
+/**
+ * Room for the × and its divider at the end of the value, while the × shows.
+ *
+ * The indicator group overlays the value. Chakra keeps the value off the
+ * chevron with `maxW: 80%` on a Select (too little in a narrow filter) and a
+ * 1.5× height padding on a Combobox, and neither counts the × with its
+ * divider. This reserves the whole group instead: padding on both sides, the
+ * × (`8`) with its `me` (`1`), the group `gap` (`1`) and the chevron (`1em`),
+ * so a long value ends in an ellipsis before the ×.
+ */
+const clearTriggerRoom = (paddingVar) => ({
+    '[data-part=control]:has([data-part=clear-trigger]:not([hidden])) > &': {
+        pe: `calc(var(${paddingVar}) * 2 + 3.5em)`,
+        '& [data-part=value-text]': { maxW: 'none' },
+    },
+});
 /** Select trigger — the clickable control. */
 const triggerStyles = {
     ...fieldBase,
+    ...clearTriggerRoom('--select-trigger-padding-x'),
     cursor: 'pointer',
     _open: {
         borderColor: 'primary.main',
@@ -78,6 +95,7 @@ const ghostTriggerStyles = {
 /** Combobox text input — the typeable control. */
 const inputStyles = {
     ...fieldBase,
+    ...clearTriggerRoom('--combobox-input-padding-x'),
 };
 /** Dropdown panel for both Select and Combobox. */
 const contentStyles = {
@@ -114,12 +132,69 @@ const itemStyles = {
 const indicatorStyles = {
     color: 'fg.muted',
 };
+/**
+ * Clear (×) button for both Select and Combobox.
+ *
+ * Chakra's recipe gives this part a colour and no size, and its default icon
+ * is `1em`, so a bare `ClearTrigger` drew a 21px × next to a 14px chevron. The
+ * × is the secondary action, so it is smaller (`3.5`, 12px at 14px text) and
+ * lighter (`fg.icon`) than the chevron, on an `8` box. `& svg` rather than
+ * `_icon` so the size also wins over an icon passed with its own `boxSize`.
+ *
+ * On a touch screen the hit area widens to 44px, toward the value only: the
+ * chevron sits to the right and has to keep opening the list. The height stays
+ * the control's own height (`heightVar`), so the area never reaches the field
+ * above or below. Every control height is over the 24px KWCAG minimum.
+ */
+const clearTriggerStyles = (heightVar) => ({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSize: '8',
+    me: '1',
+    color: 'fg.icon',
+    cursor: 'pointer',
+    _hover: { color: 'fg.default' },
+    // The divider marks where opening starts: it sits in the `me` gap, takes no
+    // clicks, and everything right of it belongs to the chevron.
+    _after: {
+        content: '""',
+        position: 'absolute',
+        insetEnd: '-1',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        h: '4',
+        borderEndWidth: '1px',
+        borderColor: 'border.subtle',
+        pointerEvents: 'none',
+    },
+    // zag hides the × with the `hidden` attribute while nothing is selected,
+    // and the `display` above would otherwise override it.
+    _hidden: { display: 'none' },
+    '& svg': { width: '3.5', height: '3.5' },
+    '@media (pointer: coarse)': {
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            insetEnd: 0,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: '44px',
+            height: `var(${heightVar})`,
+        },
+    },
+});
+const selectClearTriggerStyles = clearTriggerStyles('--select-trigger-height');
+const comboboxClearTriggerStyles = clearTriggerStyles('--combobox-input-height');
 
+exports.comboboxClearTriggerStyles = comboboxClearTriggerStyles;
 exports.contentStyles = contentStyles;
 exports.ghostContentStyles = ghostContentStyles;
 exports.ghostTriggerStyles = ghostTriggerStyles;
 exports.indicatorStyles = indicatorStyles;
 exports.inputStyles = inputStyles;
 exports.itemStyles = itemStyles;
+exports.selectClearTriggerStyles = selectClearTriggerStyles;
 exports.triggerStyles = triggerStyles;
 //# sourceMappingURL=Select.styles.js.map

package/dist/components/Select/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":["../../../src/components/Select/Select.styles.ts"],"sourcesContent":[null],"names":["disabledControl","disabledText"],"mappings":";;;;;AAAA;;;;;;;;AAQG;AAIH,MAAM,SAAS,GAAG;AAChB,IAAA,eAAe,EAAE,mCAAmC;AACpD,IAAA,eAAe,EAAE,mCAAmC;CACrD;AAED,MAAM,SAAS,GAAG;AAChB,IAAA,GAAG,SAAS;AACZ,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;AAClC,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACvC,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACxC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,GAAGA,+BAAe;AAClB,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;CACF;AAED;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,GAAG,SAAS;AACZ,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;;AAGH;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAG;AAChC,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,WAAW,EAAE,aAAa;;;;;AAK1B,IAAA,EAAE,EAAE,kDAAkD;IACtD,0BAA0B,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;AAClE,IAAA,MAAM,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE;AACzC,IAAA,SAAS,EAAE;AACT,QAAA,GAAGC,4BAAY;;;;;AAKf,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;;AAGH;AACO,MAAM,WAAW,GAAG;AACzB,IAAA,GAAG,SAAS;;AAGd;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,SAAS,EAAE,sCAAsC;AACjD,IAAA,OAAO,EAAE,KAAK;;AAGhB;;;;AAIG;AACI,MAAM,kBAAkB,GAAG;AAChC,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,IAAI,EAAE,wBAAwB;;AAGhC;AACO,MAAM,UAAU,GAAG;AACxB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,YAAY,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;IACD,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE;;AAG1D;AACO,MAAM,eAAe,GAAG;AAC7B,IAAA,KAAK,EAAE,UAAU;;;;;;;;;;;"}
+{"version":3,"file":"Select.styles.js","sources":["../../../src/components/Select/Select.styles.ts"],"sourcesContent":[null],"names":["disabledControl","disabledText"],"mappings":"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"}

package/dist/components/Select/Select.styles.mjs

@@ -35,9 +35,26 @@ const fieldBase = {
         fontWeight: 'semibold',
     },
 };
+/**
+ * Room for the × and its divider at the end of the value, while the × shows.
+ *
+ * The indicator group overlays the value. Chakra keeps the value off the
+ * chevron with `maxW: 80%` on a Select (too little in a narrow filter) and a
+ * 1.5× height padding on a Combobox, and neither counts the × with its
+ * divider. This reserves the whole group instead: padding on both sides, the
+ * × (`8`) with its `me` (`1`), the group `gap` (`1`) and the chevron (`1em`),
+ * so a long value ends in an ellipsis before the ×.
+ */
+const clearTriggerRoom = (paddingVar) => ({
+    '[data-part=control]:has([data-part=clear-trigger]:not([hidden])) > &': {
+        pe: `calc(var(${paddingVar}) * 2 + 3.5em)`,
+        '& [data-part=value-text]': { maxW: 'none' },
+    },
+});
 /** Select trigger — the clickable control. */
 const triggerStyles = {
     ...fieldBase,
+    ...clearTriggerRoom('--select-trigger-padding-x'),
     cursor: 'pointer',
     _open: {
         borderColor: 'primary.main',
@@ -76,6 +93,7 @@ const ghostTriggerStyles = {
 /** Combobox text input — the typeable control. */
 const inputStyles = {
     ...fieldBase,
+    ...clearTriggerRoom('--combobox-input-padding-x'),
 };
 /** Dropdown panel for both Select and Combobox. */
 const contentStyles = {
@@ -112,6 +130,61 @@ const itemStyles = {
 const indicatorStyles = {
     color: 'fg.muted',
 };
+/**
+ * Clear (×) button for both Select and Combobox.
+ *
+ * Chakra's recipe gives this part a colour and no size, and its default icon
+ * is `1em`, so a bare `ClearTrigger` drew a 21px × next to a 14px chevron. The
+ * × is the secondary action, so it is smaller (`3.5`, 12px at 14px text) and
+ * lighter (`fg.icon`) than the chevron, on an `8` box. `& svg` rather than
+ * `_icon` so the size also wins over an icon passed with its own `boxSize`.
+ *
+ * On a touch screen the hit area widens to 44px, toward the value only: the
+ * chevron sits to the right and has to keep opening the list. The height stays
+ * the control's own height (`heightVar`), so the area never reaches the field
+ * above or below. Every control height is over the 24px KWCAG minimum.
+ */
+const clearTriggerStyles = (heightVar) => ({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSize: '8',
+    me: '1',
+    color: 'fg.icon',
+    cursor: 'pointer',
+    _hover: { color: 'fg.default' },
+    // The divider marks where opening starts: it sits in the `me` gap, takes no
+    // clicks, and everything right of it belongs to the chevron.
+    _after: {
+        content: '""',
+        position: 'absolute',
+        insetEnd: '-1',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        h: '4',
+        borderEndWidth: '1px',
+        borderColor: 'border.subtle',
+        pointerEvents: 'none',
+    },
+    // zag hides the × with the `hidden` attribute while nothing is selected,
+    // and the `display` above would otherwise override it.
+    _hidden: { display: 'none' },
+    '& svg': { width: '3.5', height: '3.5' },
+    '@media (pointer: coarse)': {
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            insetEnd: 0,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: '44px',
+            height: `var(${heightVar})`,
+        },
+    },
+});
+const selectClearTriggerStyles = clearTriggerStyles('--select-trigger-height');
+const comboboxClearTriggerStyles = clearTriggerStyles('--combobox-input-height');
 
-export { contentStyles, ghostContentStyles, ghostTriggerStyles, indicatorStyles, inputStyles, itemStyles, triggerStyles };
+export { comboboxClearTriggerStyles, contentStyles, ghostContentStyles, ghostTriggerStyles, indicatorStyles, inputStyles, itemStyles, selectClearTriggerStyles, triggerStyles };
 //# sourceMappingURL=Select.styles.mjs.map

package/dist/components/Select/Select.styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.mjs","sources":["../../../src/components/Select/Select.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAAA;;;;;;;;AAQG;AAIH,MAAM,SAAS,GAAG;AAChB,IAAA,eAAe,EAAE,mCAAmC;AACpD,IAAA,eAAe,EAAE,mCAAmC;CACrD;AAED,MAAM,SAAS,GAAG;AAChB,IAAA,GAAG,SAAS;AACZ,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;AAClC,IAAA,MAAM,EAAE;AACN,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACvC,QAAA,MAAM,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;AACxC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,GAAG,eAAe;AAClB,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;CACF;AAED;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,GAAG,SAAS;AACZ,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE;AACL,QAAA,WAAW,EAAE,cAAc;AAC3B,QAAA,SAAS,EAAE,6CAA6C;AACzD,KAAA;;AAGH;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAG;AAChC,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,WAAW,EAAE,aAAa;;;;;AAK1B,IAAA,EAAE,EAAE,kDAAkD;IACtD,0BAA0B,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;AAClE,IAAA,MAAM,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE;AACzC,IAAA,SAAS,EAAE;AACT,QAAA,GAAG,YAAY;;;;;AAKf,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,MAAM,EAAE,aAAa;AACrB,QAAA,UAAU,EAAE,UAAU;AACvB,KAAA;;AAGH;AACO,MAAM,WAAW,GAAG;AACzB,IAAA,GAAG,SAAS;;AAGd;AACO,MAAM,aAAa,GAAG;AAC3B,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,WAAW,EAAE,gBAAgB;AAC7B,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,SAAS,EAAE,sCAAsC;AACjD,IAAA,OAAO,EAAE,KAAK;;AAGhB;;;;AAIG;AACI,MAAM,kBAAkB,GAAG;AAChC,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,IAAI,EAAE,wBAAwB;;AAGhC;AACO,MAAM,UAAU,GAAG;AACxB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,YAAY,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,EAAE,EAAE,kBAAkB;AACtB,QAAA,KAAK,EAAE,YAAY;AACnB,QAAA,UAAU,EAAE,MAAM;AACnB,KAAA;IACD,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE;;AAG1D;AACO,MAAM,eAAe,GAAG;AAC7B,IAAA,KAAK,EAAE,UAAU;;;;;"}
+{"version":3,"file":"Select.styles.mjs","sources":["../../../src/components/Select/Select.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/translations/Defaults.translations.json.js

@@ -241,6 +241,13 @@ var close = {
 	ja: "閉じる",
 	es: "Cerrar"
 };
+var clear_selection = {
+	ko: "선택 지우기",
+	en: "Clear selection",
+	zh: "清除选择",
+	ja: "選択をクリア",
+	es: "Borrar selección"
+};
 var defaultTranslations = {
 	get_started: get_started,
 	next: next,
@@ -282,11 +289,13 @@ var defaultTranslations = {
 	downloading: downloading,
 	processing: processing,
 	deleting: deleting,
-	close: close
+	close: close,
+	clear_selection: clear_selection
 };
 
 exports.anonymous = anonymous;
 exports.clear = clear;
+exports.clear_selection = clear_selection;
 exports.close = close;
 exports.component = component;
 exports.copied = copied;

package/dist/translations/Defaults.translations.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"Defaults.translations.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Defaults.translations.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/translations/Defaults.translations.json.mjs

@@ -237,6 +237,13 @@ var close = {
 	ja: "閉じる",
 	es: "Cerrar"
 };
+var clear_selection = {
+	ko: "선택 지우기",
+	en: "Clear selection",
+	zh: "清除选择",
+	ja: "選択をクリア",
+	es: "Borrar selección"
+};
 var defaultTranslations = {
 	get_started: get_started,
 	next: next,
@@ -278,8 +285,9 @@ var defaultTranslations = {
 	downloading: downloading,
 	processing: processing,
 	deleting: deleting,
-	close: close
+	close: close,
+	clear_selection: clear_selection
 };
 
-export { anonymous, clear, close, component, copied, copy, copy_error_details, defaultTranslations as default, deleting, download, downloading, error_boundary_default_message, error_boundary_subtitle, error_boundary_title, error_details_copied, error_id, get_started, go_next_page_button, month_range_placeholder, next, page, pagination_items_per_page, pagination_range_text, previous, processing, refresh_page, see_less, see_more, support_help_text, support_information, time, try_again, unknown, upload_your_file, user_id };
+export { anonymous, clear, clear_selection, close, component, copied, copy, copy_error_details, defaultTranslations as default, deleting, download, downloading, error_boundary_default_message, error_boundary_subtitle, error_boundary_title, error_details_copied, error_id, get_started, go_next_page_button, month_range_placeholder, next, page, pagination_items_per_page, pagination_range_text, previous, processing, refresh_page, see_less, see_more, support_help_text, support_information, time, try_again, unknown, upload_your_file, user_id };
 //# sourceMappingURL=Defaults.translations.json.mjs.map

package/dist/translations/Defaults.translations.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Defaults.translations.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Defaults.translations.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "5.0.0-alpha.15",
+  "version": "5.0.0-alpha.17",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/NavList/NavList.stories.tsx

@@ -489,6 +489,38 @@ export const TooltipsAndNewWindow: Story = {
   ),
 };
 
+/**
+ * `tooltipPlacement="end"`: the description opens beside the row instead of
+ * above it. On a row with a `trailingAction` it is placed from the whole row,
+ * past the action, not from the link, which stops before the action.
+ */
+export const EndTooltipWithAction: Story = {
+  render: (args) => (
+    <Rail w="220px">
+      <NavList {...args} aria-label="에이전트">
+        {[
+          ['회의록', '회의를 녹음하고 요약을 받아요'],
+          ['이미지 생성', 'AI로 생성한 이미지를 관리하세요'],
+        ].map(([title, description]) => (
+          <NavList.Item
+            key={title}
+            href="#"
+            tooltip={description}
+            tooltipPlacement="end"
+            trailingAction={
+              <IconButton aria-label={`${title} 더 보기`} size="xs">
+                <DotsHorizontalIcon />
+              </IconButton>
+            }
+          >
+            {title}
+          </NavList.Item>
+        ))}
+      </NavList>
+    </Rail>
+  ),
+};
+
 /**
  * Session rows: `trailingActionVisibility="hover"` keeps the more-menu out of
  * the way until the row is hovered or focused, or its menu is open. It stays

package/src/components/NavList/NavList.test.tsx

@@ -568,6 +568,30 @@ describe('NavList', () => {
       }
     );
 
+    it('an end tooltip on a row with a trailing action measures from the whole <li>', async () => {
+      const liRect = vi.spyOn(HTMLLIElement.prototype, 'getBoundingClientRect');
+      renderUi(
+        <NavList aria-label="메뉴">
+          <NavList.Item
+            onClick={() => {}}
+            tooltip="회의를 녹음하고 요약을 받아요"
+            tooltipPlacement="end"
+            trailingAction={<button type="button">고정</button>}
+          >
+            회의록
+          </NavList.Item>
+        </NavList>
+      );
+      await hover(screen.getByRole('button', { name: '회의록' }));
+      await waitFor(() =>
+        expect(
+          document.querySelector('[data-part="content"][data-state="open"]')
+        ).not.toBeNull()
+      );
+      expect(liRect).toHaveBeenCalled();
+      liRect.mockRestore();
+    });
+
     it('a disabled row still carries its tooltip as a description, closed', () => {
       renderUi(
         <NavList aria-label="메뉴">

package/src/components/NavList/NavListItem.tsx

@@ -398,18 +398,31 @@ export const NavListItem = forwardRef<HTMLElement, NavListItemProps>(
       typeof label === 'string' || typeof label === 'number'
         ? String(label)
         : undefined;
+    // Beside the icon, towards the content: the rail is on the right of
+    // a right-to-left page. Popper placements are physical.
+    const placement =
+      isCollapsed || tooltipPlacement === 'end'
+        ? tooltipDir === 'rtl'
+          ? 'left'
+          : 'right'
+        : 'top';
+    // An expanded row's end tooltip measures from the whole `<li>`, not the
+    // row link: with a trailing action the link stops short of the row's
+    // end, and the tooltip would sit over the action.
+    const anchorsToItem = !isCollapsed && tooltipPlacement === 'end';
     const withTooltip = (
       <Tooltip
         content={tooltipContent}
-        // Beside the icon, towards the content: the rail is on the right of
-        // a right-to-left page. Popper placements are physical.
-        placement={
-          isCollapsed || tooltipPlacement === 'end'
-            ? tooltipDir === 'rtl'
-              ? 'left'
-              : 'right'
-            : 'top'
-        }
+        placement={placement}
+        {...(anchorsToItem && {
+          positioning: {
+            placement,
+            getAnchorRect: (el) =>
+              el instanceof HTMLElement
+                ? (el.closest('li')?.getBoundingClientRect() ?? null)
+                : null,
+          },
+        })}
         onOpenChange={({ open }) => setIsTooltipOpen(open)}
         // Zag only checks that this is set — it takes the content's id and
         // role away, so the trigger is never described by the tooltip. Not

package/src/components/Select/Combobox.tsx

@@ -1,10 +1,17 @@
 import { forwardRef } from 'react';
 import { Combobox as ChakraCombobox } from '@chakra-ui/react';
 
+import { useTranslate } from '@/hooks/useTranslate';
 import { noZoomOnFocus } from '@/theme/formControls';
 import { mergeCss } from '@/utils/mergeCss';
 
-import { contentStyles, inputStyles, itemStyles } from './Select.styles';
+import { CloseIcon } from '../Icon';
+import {
+  comboboxClearTriggerStyles,
+  contentStyles,
+  inputStyles,
+  itemStyles,
+} from './Select.styles';
 
 const Input = forwardRef<HTMLInputElement, ChakraCombobox.InputProps>(
   function ComboboxInput({ css, ...props }, ref) {
@@ -47,10 +54,28 @@ const Item = forwardRef<HTMLDivElement, ChakraCombobox.ItemProps>(
   }
 );
 
+/** Same × as `Select.ClearTrigger`; see there. */
+const ClearTrigger = forwardRef<
+  HTMLButtonElement,
+  ChakraCombobox.ClearTriggerProps
+>(function ComboboxClearTrigger({ css, children, ...props }, ref) {
+  const translate = useTranslate();
+  return (
+    <ChakraCombobox.ClearTrigger
+      ref={ref}
+      aria-label={translate('clear_selection') as string}
+      {...props}
+      css={mergeCss(comboboxClearTriggerStyles, css)}
+    >
+      {children ?? <CloseIcon aria-hidden />}
+    </ChakraCombobox.ClearTrigger>
+  );
+});
+
 /**
  * Compound Combobox primitives — Chakra's `Combobox` namespace with the
  * Logician design-system styling baked into the visual parts (`Input`,
- * `Content`, `Item`). Use these directly for full compositional control;
+ * `Content`, `Item`, `ClearTrigger`). Use these directly for full compositional control;
  * use `ComboboxField` for the common single-select case.
  */
 export const Combobox = {
@@ -62,7 +87,7 @@ export const Combobox = {
   Input,
   Trigger: ChakraCombobox.Trigger,
   IndicatorGroup: ChakraCombobox.IndicatorGroup,
-  ClearTrigger: ChakraCombobox.ClearTrigger,
+  ClearTrigger,
   Positioner: ChakraCombobox.Positioner,
   Content,
   Empty: ChakraCombobox.Empty,

package/src/components/Select/Select.clearTrigger.test.tsx

@@ -0,0 +1,76 @@
+import { ChakraProvider, createListCollection } from '@chakra-ui/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { system } from '../../theme';
+import { Select } from './Select';
+
+const collection = createListCollection({
+  items: [
+    { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' },
+  ],
+});
+
+const renderClearable = (
+  clearTrigger: React.ReactNode,
+  onValueChange = vi.fn(),
+  defaultValue = ['react']
+) =>
+  render(
+    <ChakraProvider value={system}>
+      <Select.Root
+        collection={collection}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+      >
+        <Select.HiddenSelect />
+        <Select.Control>
+          <Select.Trigger>
+            <Select.ValueText />
+          </Select.Trigger>
+          <Select.IndicatorGroup>
+            {clearTrigger}
+            <Select.Indicator />
+          </Select.IndicatorGroup>
+        </Select.Control>
+      </Select.Root>
+    </ChakraProvider>
+  );
+
+describe('Select.ClearTrigger', () => {
+  it('names itself in the library language instead of "Clear value"', () => {
+    renderClearable(<Select.ClearTrigger />);
+
+    const button = screen.getByRole('button', { name: '선택 지우기' });
+    expect(button.querySelector('svg')).not.toBeNull();
+    expect(screen.queryByRole('button', { name: 'Clear value' })).toBeNull();
+  });
+
+  it("keeps the caller's aria-label and still clears the value", async () => {
+    const onValueChange = vi.fn();
+    renderClearable(
+      <Select.ClearTrigger aria-label="조직 선택 지우기" />,
+      onValueChange
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '조직 선택 지우기' }));
+
+    await waitFor(() =>
+      expect(onValueChange).toHaveBeenCalledWith(
+        expect.objectContaining({ value: [] })
+      )
+    );
+  });
+
+  it('stays hidden while nothing is selected', () => {
+    renderClearable(<Select.ClearTrigger />, vi.fn(), []);
+
+    const button = document.querySelector<HTMLElement>(
+      '[data-part="clear-trigger"]'
+    );
+    expect(button).not.toBeNull();
+    expect(button).toHaveAttribute('hidden');
+    expect(getComputedStyle(button!).display).toBe('none');
+  });
+});

package/src/components/Select/Select.stories.tsx

@@ -22,6 +22,7 @@ import {
   contentStyles,
   indicatorStyles,
   itemStyles,
+  selectClearTriggerStyles,
   triggerStyles,
 } from './Select.styles';
 import { SelectField } from './SelectField';
@@ -198,6 +199,76 @@ export const MultiSelect = () => (
   </Box>
 );
 
+/**
+ * An optional field the member can empty again. `ClearTrigger` goes before
+ * the chevron and shows only while something is selected. It draws its own
+ * icon and is named 「선택 지우기」 in the provider's language; pass
+ * `aria-label` to say what is cleared. A divider separates it from the
+ * chevron, and a long value ends in an ellipsis before it. On a touch screen
+ * its hit area widens to 44px toward the value, at the field's own height.
+ */
+const longValueCollection = createListCollection({
+  items: [
+    {
+      label: 'Engineering / Platform / Developer Experience',
+      value: 'dx',
+    },
+    { label: 'Design', value: 'design' },
+  ],
+});
+
+export const Clearable = () => (
+  <Stack maxW="320px" gap={4}>
+    <Box maxW="180px">
+      <Select.Root collection={longValueCollection} defaultValue={['dx']}>
+        <Select.HiddenSelect />
+        <Select.Label>Team (180px)</Select.Label>
+        <Select.Control>
+          <Select.Trigger>
+            <Select.ValueText placeholder="Select a team" />
+          </Select.Trigger>
+          <Select.IndicatorGroup>
+            <Select.ClearTrigger />
+            <Select.Indicator />
+          </Select.IndicatorGroup>
+        </Select.Control>
+      </Select.Root>
+    </Box>
+    {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
+      <Select.Root
+        key={size}
+        size={size}
+        collection={frameworkCollection}
+        defaultValue={['react']}
+      >
+        <Select.HiddenSelect />
+        <Select.Label>{`Framework (${size})`}</Select.Label>
+        <Select.Control>
+          <Select.Trigger>
+            <Select.ValueText placeholder="Select a framework" />
+          </Select.Trigger>
+          <Select.IndicatorGroup>
+            <Select.ClearTrigger />
+            <Select.Indicator />
+          </Select.IndicatorGroup>
+        </Select.Control>
+        <Portal>
+          <Select.Positioner>
+            <Select.Content>
+              {frameworkCollection.items.map((item) => (
+                <Select.Item item={item} key={item.value}>
+                  <Select.ItemText>{item.label}</Select.ItemText>
+                  <Select.ItemIndicator />
+                </Select.Item>
+              ))}
+            </Select.Content>
+          </Select.Positioner>
+        </Portal>
+      </Select.Root>
+    ))}
+  </Stack>
+);
+
 /* -------------------------------------------------------------------------
  * Custom children
  *
@@ -950,6 +1021,16 @@ export const UsageTokens: UsageStory = {
           token: indicatorStyles.color,
           use: <T en="Chevron" ko="펼침 화살표" />,
         },
+        {
+          token: selectClearTriggerStyles.color,
+          use: <T en="Clear (×) button" ko="선택 지우기(×) 버튼" />,
+        },
+        {
+          token: selectClearTriggerStyles._hover.color,
+          use: (
+            <T en="Clear button on hover" ko="마우스를 올렸을 때 지우기 버튼" />
+          ),
+        },
         {
           token: contentStyles.bg,
           use: <T en="List background" ko="목록 배경" />,