@mindlogic-ai/logician-ui 5.0.0-alpha.14 → 5.0.0-alpha.16

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.14",
+  "version": "5.0.0-alpha.16",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/Avatar/Avatar.recipe.test.tsx

@@ -133,6 +133,11 @@ describe('Avatar.Group max', () => {
     expect(roots).toHaveLength(4);
     const counter = roots[3];
     expect(counter.textContent).toBe('+2');
+    // Phrasing content, so `<Avatar.Group as="span">` can sit in a button.
+    expect(counter.tagName).toBe('SPAN');
+    expect(counter.querySelector('[data-part="fallback"]')?.tagName).toBe(
+      'SPAN'
+    );
     expect(declarations(counter)).toContain(
       '--chakra-colors-color-palette-surface:var(--chakra-colors-category-neutral-surface)'
     );

package/src/components/Avatar/Avatar.tsx

@@ -158,8 +158,14 @@ const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
       <ChakraAvatarGroupTyped ref={ref} {...rest}>
         {visible}
         {overflow > 0 && (
-          <AvatarRoot colorPalette="category.neutral" variant="subtle">
-            <AvatarFallback>+{overflow}</AvatarFallback>
+          // Spans so a group inside a button (a popover trigger) stays phrasing
+          // content; the recipe sets the display, so nothing else changes.
+          <AvatarRoot
+            as="span"
+            colorPalette="category.neutral"
+            variant="subtle"
+          >
+            <AvatarFallback as="span">+{overflow}</AvatarFallback>
           </AvatarRoot>
         )}
       </ChakraAvatarGroupTyped>

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="목록 배경" />,

package/src/components/Select/Select.styles.ts

@@ -37,9 +37,27 @@ const fieldBase = {
   },
 };
 
+/**
+ * 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: string) => ({
+  '[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. */
 export const triggerStyles = {
   ...fieldBase,
+  ...clearTriggerRoom('--select-trigger-padding-x'),
   cursor: 'pointer',
   _open: {
     borderColor: 'primary.main',
@@ -80,6 +98,7 @@ export const ghostTriggerStyles = {
 /** Combobox text input — the typeable control. */
 export const inputStyles = {
   ...fieldBase,
+  ...clearTriggerRoom('--combobox-input-padding-x'),
 };
 
 /** Dropdown panel for both Select and Combobox. */
@@ -120,3 +139,65 @@ export const itemStyles = {
 export 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: string) => ({
+  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})`,
+    },
+  },
+});
+
+export const selectClearTriggerStyles = clearTriggerStyles(
+  '--select-trigger-height'
+);
+
+export const comboboxClearTriggerStyles = clearTriggerStyles(
+  '--combobox-input-height'
+);

package/src/components/Select/Select.tsx

@@ -1,13 +1,16 @@
 import { forwardRef } from 'react';
 import { Select as ChakraSelect } from '@chakra-ui/react';
 
+import { useTranslate } from '@/hooks/useTranslate';
 import { mergeCss } from '@/utils/mergeCss';
 
+import { CloseIcon } from '../Icon';
 import {
   contentStyles,
   ghostTriggerStyles,
   indicatorStyles,
   itemStyles,
+  selectClearTriggerStyles,
   triggerStyles,
 } from './Select.styles';
 import type { SelectVariant } from './Select.types';
@@ -67,10 +70,33 @@ const Indicator = forwardRef<HTMLDivElement, ChakraSelect.IndicatorProps>(
   }
 );
 
+/**
+ * The × that empties the selection. Draws `CloseIcon` when no children are
+ * passed, and names itself in the provider's language: Chakra's own name is
+ * the English "Clear value" in every locale. Pass `aria-label` to say what is
+ * being cleared ("조직 선택 지우기").
+ */
+const ClearTrigger = forwardRef<
+  HTMLButtonElement,
+  ChakraSelect.ClearTriggerProps
+>(function SelectClearTrigger({ css, children, ...props }, ref) {
+  const translate = useTranslate();
+  return (
+    <ChakraSelect.ClearTrigger
+      ref={ref}
+      aria-label={translate('clear_selection') as string}
+      {...props}
+      css={mergeCss(selectClearTriggerStyles, css)}
+    >
+      {children ?? <CloseIcon aria-hidden />}
+    </ChakraSelect.ClearTrigger>
+  );
+});
+
 /**
  * Compound Select primitives — Chakra's `Select` namespace with the Logician
  * design-system styling baked into the visual parts (`Trigger`, `Content`,
- * `Item`, `Indicator`). Use these directly for full compositional control
+ * `Item`, `Indicator`, `ClearTrigger`). Use these directly for full compositional control
  * (multi-select, grouped options, custom layouts); use `SelectField` for the
  * common single-select case.
  */
@@ -84,7 +110,7 @@ export const Select = {
   ValueText: ChakraSelect.ValueText,
   IndicatorGroup: ChakraSelect.IndicatorGroup,
   Indicator,
-  ClearTrigger: ChakraSelect.ClearTrigger,
+  ClearTrigger,
   HiddenSelect: ChakraSelect.HiddenSelect,
   Positioner: ChakraSelect.Positioner,
   Content,