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

package/dist/components/Select/Combobox.d.ts

@@ -2,7 +2,7 @@ import { Combobox as ChakraCombobox } from '@chakra-ui/react';
 /**
  * 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 declare const Combobox: {

package/dist/components/Select/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Combobox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAgD9D;;;;;GAKG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;CAmBpB,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Combobox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAyE9D;;;;;GAKG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;CAmBpB,CAAC"}

package/dist/components/Select/Combobox.js

@@ -4,8 +4,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@chakra-ui/react');
+var useTranslate = require('../../hooks/useTranslate.js');
 var formControls = require('../../theme/formControls.js');
 var mergeCss = require('../../utils/mergeCss.js');
+var index = require('../Icon/index.js');
 var Select_styles = require('./Select.styles.js');
 
 const Input = React.forwardRef(function ComboboxInput({ css, ...props }, ref) {
@@ -23,10 +25,15 @@ const Content = React.forwardRef(function ComboboxContent({ css, ...props }, ref
 const Item = React.forwardRef(function ComboboxItem({ css, ...props }, ref) {
     return (jsxRuntime.jsx(react.Combobox.Item, { ref: ref, ...props, css: mergeCss.mergeCss(Select_styles.itemStyles, css) }));
 });
+/** Same × as `Select.ClearTrigger`; see there. */
+const ClearTrigger = React.forwardRef(function ComboboxClearTrigger({ css, children, ...props }, ref) {
+    const translate = useTranslate.useTranslate();
+    return (jsxRuntime.jsx(react.Combobox.ClearTrigger, { ref: ref, "aria-label": translate('clear_selection'), ...props, css: mergeCss.mergeCss(Select_styles.comboboxClearTriggerStyles, css), children: children ?? jsxRuntime.jsx(index.CloseIcon, { "aria-hidden": true }) }));
+});
 /**
  * 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.
  */
 const Combobox = {
@@ -38,7 +45,7 @@ const Combobox = {
     Input,
     Trigger: react.Combobox.Trigger,
     IndicatorGroup: react.Combobox.IndicatorGroup,
-    ClearTrigger: react.Combobox.ClearTrigger,
+    ClearTrigger,
     Positioner: react.Combobox.Positioner,
     Content,
     Empty: react.Combobox.Empty,

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/Select/Combobox.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraCombobox","mergeCss","noZoomOnFocus","inputStyles","contentStyles","itemStyles"],"mappings":";;;;;;;;;;AAQA,MAAM,KAAK,GAAGA,gBAAU,CACtB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEC,cAAA,CAACC,cAAc,CAAC,KAAK,IACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK;;;QAGT,GAAG,EAAEC,iBAAQ,CAACC,0BAAa,EAAEC,yBAAW,EAAE,GAAG,CAAC,EAAA,CAC9C;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAGL,gBAAU,CACxB,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACEC,eAACC,cAAc,CAAC,OAAO,EAAA,EACrB,GAAG,EAAE,GAAG;;;AAGR,QAAA,cAAc,EAAC,mBAAmB,EAAA,GAC9B,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACG,2BAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAGN,gBAAU,CACrB,SAAS,YAAY,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC1C,QACEC,eAACC,cAAc,CAAC,IAAI,EAAA,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACI,wBAAU,EAAE,GAAG,CAAC,EAAA,CAC9B;AAEN,CAAC,CACF;AAED;;;;;AAKG;AACI,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAEL,cAAc,CAAC,IAAI;IACzB,aAAa,EAAEA,cAAc,CAAC,aAAa;IAC3C,OAAO,EAAEA,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAEA,cAAc,CAAC,KAAK;IAC3B,OAAO,EAAEA,cAAc,CAAC,OAAO;IAC/B,KAAK;IACL,OAAO,EAAEA,cAAc,CAAC,OAAO;IAC/B,cAAc,EAAEA,cAAc,CAAC,cAAc;IAC7C,YAAY,EAAEA,cAAc,CAAC,YAAY;IACzC,UAAU,EAAEA,cAAc,CAAC,UAAU;IACrC,OAAO;IACP,KAAK,EAAEA,cAAc,CAAC,KAAK;IAC3B,SAAS,EAAEA,cAAc,CAAC,SAAS;IACnC,cAAc,EAAEA,cAAc,CAAC,cAAc;IAC7C,IAAI;IACJ,QAAQ,EAAEA,cAAc,CAAC,QAAQ;IACjC,aAAa,EAAEA,cAAc,CAAC,aAAa;IAC3C,WAAW,EAAEA,cAAc,CAAC,WAAW;;;;;"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Select/Combobox.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraCombobox","mergeCss","noZoomOnFocus","inputStyles","contentStyles","itemStyles","useTranslate","comboboxClearTriggerStyles","CloseIcon"],"mappings":";;;;;;;;;;;;AAeA,MAAM,KAAK,GAAGA,gBAAU,CACtB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEC,cAAA,CAACC,cAAc,CAAC,KAAK,IACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK;;;QAGT,GAAG,EAAEC,iBAAQ,CAACC,0BAAa,EAAEC,yBAAW,EAAE,GAAG,CAAC,EAAA,CAC9C;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAGL,gBAAU,CACxB,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACEC,eAACC,cAAc,CAAC,OAAO,EAAA,EACrB,GAAG,EAAE,GAAG;;;AAGR,QAAA,cAAc,EAAC,mBAAmB,EAAA,GAC9B,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACG,2BAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAGN,gBAAU,CACrB,SAAS,YAAY,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC1C,QACEC,eAACC,cAAc,CAAC,IAAI,EAAA,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACI,wBAAU,EAAE,GAAG,CAAC,EAAA,CAC9B;AAEN,CAAC,CACF;AAED;AACA,MAAM,YAAY,GAAGP,gBAAU,CAG7B,SAAS,oBAAoB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;AAC9D,IAAA,MAAM,SAAS,GAAGQ,yBAAY,EAAE;AAChC,IAAA,QACEP,cAAA,CAACC,cAAc,CAAC,YAAY,EAAA,EAC1B,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,CAAC,iBAAiB,CAAW,EAAA,GAC9C,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACM,wCAA0B,EAAE,GAAG,CAAC,EAAA,QAAA,EAE7C,QAAQ,IAAIR,cAAA,CAACS,eAAS,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe,EAAA,CACV;AAElC,CAAC,CAAC;AAEF;;;;;AAKG;AACI,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAER,cAAc,CAAC,IAAI;IACzB,aAAa,EAAEA,cAAc,CAAC,aAAa;IAC3C,OAAO,EAAEA,cAAc,CAAC,OAAO;IAC/B,KAAK,EAAEA,cAAc,CAAC,KAAK;IAC3B,OAAO,EAAEA,cAAc,CAAC,OAAO;IAC/B,KAAK;IACL,OAAO,EAAEA,cAAc,CAAC,OAAO;IAC/B,cAAc,EAAEA,cAAc,CAAC,cAAc;IAC7C,YAAY;IACZ,UAAU,EAAEA,cAAc,CAAC,UAAU;IACrC,OAAO;IACP,KAAK,EAAEA,cAAc,CAAC,KAAK;IAC3B,SAAS,EAAEA,cAAc,CAAC,SAAS;IACnC,cAAc,EAAEA,cAAc,CAAC,cAAc;IAC7C,IAAI;IACJ,QAAQ,EAAEA,cAAc,CAAC,QAAQ;IACjC,aAAa,EAAEA,cAAc,CAAC,aAAa;IAC3C,WAAW,EAAEA,cAAc,CAAC,WAAW;;;;;"}

package/dist/components/Select/Combobox.mjs

@@ -2,9 +2,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Combobox as Combobox$1 } from '@chakra-ui/react';
+import { useTranslate } from '../../hooks/useTranslate.mjs';
 import { noZoomOnFocus } from '../../theme/formControls.mjs';
 import { mergeCss } from '../../utils/mergeCss.mjs';
-import { inputStyles, contentStyles, itemStyles } from './Select.styles.mjs';
+import { CloseIcon } from '../Icon/index.mjs';
+import { inputStyles, contentStyles, itemStyles, comboboxClearTriggerStyles } from './Select.styles.mjs';
 
 const Input = forwardRef(function ComboboxInput({ css, ...props }, ref) {
     return (jsx(Combobox$1.Input, { ref: ref, ...props, 
@@ -21,10 +23,15 @@ const Content = forwardRef(function ComboboxContent({ css, ...props }, ref) {
 const Item = forwardRef(function ComboboxItem({ css, ...props }, ref) {
     return (jsx(Combobox$1.Item, { ref: ref, ...props, css: mergeCss(itemStyles, css) }));
 });
+/** Same × as `Select.ClearTrigger`; see there. */
+const ClearTrigger = forwardRef(function ComboboxClearTrigger({ css, children, ...props }, ref) {
+    const translate = useTranslate();
+    return (jsx(Combobox$1.ClearTrigger, { ref: ref, "aria-label": translate('clear_selection'), ...props, css: mergeCss(comboboxClearTriggerStyles, css), children: children ?? jsx(CloseIcon, { "aria-hidden": true }) }));
+});
 /**
  * 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.
  */
 const Combobox = {
@@ -36,7 +43,7 @@ const Combobox = {
     Input,
     Trigger: Combobox$1.Trigger,
     IndicatorGroup: Combobox$1.IndicatorGroup,
-    ClearTrigger: Combobox$1.ClearTrigger,
+    ClearTrigger,
     Positioner: Combobox$1.Positioner,
     Content,
     Empty: Combobox$1.Empty,

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.mjs","sources":["../../../src/components/Select/Combobox.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCombobox"],"mappings":";;;;;;;;AAQA,MAAM,KAAK,GAAG,UAAU,CACtB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEA,GAAA,CAACC,UAAc,CAAC,KAAK,IACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK;;;QAGT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,WAAW,EAAE,GAAG,CAAC,EAAA,CAC9C;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACED,IAACC,UAAc,CAAC,OAAO,EAAA,EACrB,GAAG,EAAE,GAAG;;;AAGR,QAAA,cAAc,EAAC,mBAAmB,EAAA,GAC9B,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAG,UAAU,CACrB,SAAS,YAAY,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC1C,QACED,IAACC,UAAc,CAAC,IAAI,EAAA,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,EAAA,CAC9B;AAEN,CAAC,CACF;AAED;;;;;AAKG;AACI,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAEA,UAAc,CAAC,IAAI;IACzB,aAAa,EAAEA,UAAc,CAAC,aAAa;IAC3C,OAAO,EAAEA,UAAc,CAAC,OAAO;IAC/B,KAAK,EAAEA,UAAc,CAAC,KAAK;IAC3B,OAAO,EAAEA,UAAc,CAAC,OAAO;IAC/B,KAAK;IACL,OAAO,EAAEA,UAAc,CAAC,OAAO;IAC/B,cAAc,EAAEA,UAAc,CAAC,cAAc;IAC7C,YAAY,EAAEA,UAAc,CAAC,YAAY;IACzC,UAAU,EAAEA,UAAc,CAAC,UAAU;IACrC,OAAO;IACP,KAAK,EAAEA,UAAc,CAAC,KAAK;IAC3B,SAAS,EAAEA,UAAc,CAAC,SAAS;IACnC,cAAc,EAAEA,UAAc,CAAC,cAAc;IAC7C,IAAI;IACJ,QAAQ,EAAEA,UAAc,CAAC,QAAQ;IACjC,aAAa,EAAEA,UAAc,CAAC,aAAa;IAC3C,WAAW,EAAEA,UAAc,CAAC,WAAW;;;;;"}
+{"version":3,"file":"Combobox.mjs","sources":["../../../src/components/Select/Combobox.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCombobox"],"mappings":";;;;;;;;;;AAeA,MAAM,KAAK,GAAG,UAAU,CACtB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEA,GAAA,CAACC,UAAc,CAAC,KAAK,IACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK;;;QAGT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,WAAW,EAAE,GAAG,CAAC,EAAA,CAC9C;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACED,IAACC,UAAc,CAAC,OAAO,EAAA,EACrB,GAAG,EAAE,GAAG;;;AAGR,QAAA,cAAc,EAAC,mBAAmB,EAAA,GAC9B,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAG,UAAU,CACrB,SAAS,YAAY,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC1C,QACED,IAACC,UAAc,CAAC,IAAI,EAAA,EAClB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,EAAA,CAC9B;AAEN,CAAC,CACF;AAED;AACA,MAAM,YAAY,GAAG,UAAU,CAG7B,SAAS,oBAAoB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;AAC9D,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,QACED,GAAA,CAACC,UAAc,CAAC,YAAY,EAAA,EAC1B,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,CAAC,iBAAiB,CAAW,EAAA,GAC9C,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,0BAA0B,EAAE,GAAG,CAAC,EAAA,QAAA,EAE7C,QAAQ,IAAID,GAAA,CAAC,SAAS,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,CAAe,EAAA,CACV;AAElC,CAAC,CAAC;AAEF;;;;;AAKG;AACI,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAEC,UAAc,CAAC,IAAI;IACzB,aAAa,EAAEA,UAAc,CAAC,aAAa;IAC3C,OAAO,EAAEA,UAAc,CAAC,OAAO;IAC/B,KAAK,EAAEA,UAAc,CAAC,KAAK;IAC3B,OAAO,EAAEA,UAAc,CAAC,OAAO;IAC/B,KAAK;IACL,OAAO,EAAEA,UAAc,CAAC,OAAO;IAC/B,cAAc,EAAEA,UAAc,CAAC,cAAc;IAC7C,YAAY;IACZ,UAAU,EAAEA,UAAc,CAAC,UAAU;IACrC,OAAO;IACP,KAAK,EAAEA,UAAc,CAAC,KAAK;IAC3B,SAAS,EAAEA,UAAc,CAAC,SAAS;IACnC,cAAc,EAAEA,UAAc,CAAC,cAAc;IAC7C,IAAI;IACJ,QAAQ,EAAEA,UAAc,CAAC,QAAQ;IACjC,aAAa,EAAEA,UAAc,CAAC,aAAa;IAC3C,WAAW,EAAEA,UAAc,CAAC,WAAW;;;;;"}

package/dist/components/Select/Select.d.ts

@@ -6,7 +6,7 @@ export interface SelectTriggerProps extends ChakraSelect.TriggerProps {
 /**
  * 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.
  */

package/dist/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAW1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,YAAY;IACnE,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAqDD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAoBlB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAc1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,YAAY;IACnE,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AA4ED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;CAoBlB,CAAC"}

package/dist/components/Select/Select.js

@@ -4,7 +4,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@chakra-ui/react');
+var useTranslate = require('../../hooks/useTranslate.js');
 var mergeCss = require('../../utils/mergeCss.js');
+var index = require('../Icon/index.js');
 var Select_styles = require('./Select.styles.js');
 
 const Trigger = React.forwardRef(function SelectTrigger({ css, variant = 'outline', ...props }, ref) {
@@ -22,10 +24,20 @@ const Item = React.forwardRef(function SelectItem({ css, ...props }, ref) {
 const Indicator = React.forwardRef(function SelectIndicator({ css, ...props }, ref) {
     return (jsxRuntime.jsx(react.Select.Indicator, { ref: ref, ...props, css: mergeCss.mergeCss(Select_styles.indicatorStyles, css) }));
 });
+/**
+ * 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 = React.forwardRef(function SelectClearTrigger({ css, children, ...props }, ref) {
+    const translate = useTranslate.useTranslate();
+    return (jsxRuntime.jsx(react.Select.ClearTrigger, { ref: ref, "aria-label": translate('clear_selection'), ...props, css: mergeCss.mergeCss(Select_styles.selectClearTriggerStyles, css), children: children ?? jsxRuntime.jsx(index.CloseIcon, { "aria-hidden": true }) }));
+});
 /**
  * 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.
  */
@@ -39,7 +51,7 @@ const Select = {
     ValueText: react.Select.ValueText,
     IndicatorGroup: react.Select.IndicatorGroup,
     Indicator,
-    ClearTrigger: react.Select.ClearTrigger,
+    ClearTrigger,
     HiddenSelect: react.Select.HiddenSelect,
     Positioner: react.Select.Positioner,
     Content,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraSelect","mergeCss","triggerStyles","ghostTriggerStyles","contentStyles","itemStyles","indicatorStyles"],"mappings":";;;;;;;;;AAkBA,MAAM,OAAO,GAAGA,gBAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;AAChE,IAAA,QACEC,cAAA,CAACC,YAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CACXC,2BAAa,EACb,OAAO,KAAK,OAAO,IAAIC,gCAAkB,EACzC,GAAG,CACJ,EAAA,CACD;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAGL,gBAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACEC,eAACC,YAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG;;;AAGR,QAAA,cAAc,EAAC,mBAAmB,EAAA,GAC9B,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACG,2BAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAGN,gBAAU,CACrB,SAAS,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IACxC,QACEC,eAACC,YAAY,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAE,GAAG,EAAEC,iBAAQ,CAACI,wBAAU,EAAE,GAAG,CAAC,EAAA,CAAI;AAE9E,CAAC,CACF;AAED,MAAM,SAAS,GAAGP,gBAAU,CAC1B,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACEC,eAACC,YAAY,CAAC,SAAS,EAAA,EACrB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAEC,iBAAQ,CAACK,6BAAe,EAAE,GAAG,CAAC,EAAA,CACnC;AAEN,CAAC,CACF;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG;IACpB,IAAI,EAAEN,YAAY,CAAC,IAAI;IACvB,aAAa,EAAEA,YAAY,CAAC,aAAa;IACzC,OAAO,EAAEA,YAAY,CAAC,OAAO;IAC7B,KAAK,EAAEA,YAAY,CAAC,KAAK;IACzB,OAAO,EAAEA,YAAY,CAAC,OAAO;IAC7B,OAAO;IACP,SAAS,EAAEA,YAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,YAAY,CAAC,cAAc;IAC3C,SAAS;IACT,YAAY,EAAEA,YAAY,CAAC,YAAY;IACvC,YAAY,EAAEA,YAAY,CAAC,YAAY;IACvC,UAAU,EAAEA,YAAY,CAAC,UAAU;IACnC,OAAO;IACP,SAAS,EAAEA,YAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,YAAY,CAAC,cAAc;IAC3C,IAAI;IACJ,QAAQ,EAAEA,YAAY,CAAC,QAAQ;IAC/B,aAAa,EAAEA,YAAY,CAAC,aAAa;IACzC,WAAW,EAAEA,YAAY,CAAC,WAAW;;;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["forwardRef","_jsx","ChakraSelect","mergeCss","triggerStyles","ghostTriggerStyles","contentStyles","itemStyles","indicatorStyles","useTranslate","selectClearTriggerStyles","CloseIcon"],"mappings":"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"}

package/dist/components/Select/Select.mjs

@@ -2,8 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Select as Select$1 } from '@chakra-ui/react';
+import { useTranslate } from '../../hooks/useTranslate.mjs';
 import { mergeCss } from '../../utils/mergeCss.mjs';
-import { ghostTriggerStyles, triggerStyles, contentStyles, itemStyles, indicatorStyles } from './Select.styles.mjs';
+import { CloseIcon } from '../Icon/index.mjs';
+import { ghostTriggerStyles, triggerStyles, contentStyles, itemStyles, indicatorStyles, selectClearTriggerStyles } from './Select.styles.mjs';
 
 const Trigger = forwardRef(function SelectTrigger({ css, variant = 'outline', ...props }, ref) {
     return (jsx(Select$1.Trigger, { ref: ref, ...props, css: mergeCss(triggerStyles, variant === 'ghost' && ghostTriggerStyles, css) }));
@@ -20,10 +22,20 @@ const Item = forwardRef(function SelectItem({ css, ...props }, ref) {
 const Indicator = forwardRef(function SelectIndicator({ css, ...props }, ref) {
     return (jsx(Select$1.Indicator, { ref: ref, ...props, css: mergeCss(indicatorStyles, css) }));
 });
+/**
+ * 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(function SelectClearTrigger({ css, children, ...props }, ref) {
+    const translate = useTranslate();
+    return (jsx(Select$1.ClearTrigger, { ref: ref, "aria-label": translate('clear_selection'), ...props, css: mergeCss(selectClearTriggerStyles, css), children: children ?? jsx(CloseIcon, { "aria-hidden": true }) }));
+});
 /**
  * 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.
  */
@@ -37,7 +49,7 @@ const Select = {
     ValueText: Select$1.ValueText,
     IndicatorGroup: Select$1.IndicatorGroup,
     Indicator,
-    ClearTrigger: Select$1.ClearTrigger,
+    ClearTrigger,
     HiddenSelect: Select$1.HiddenSelect,
     Positioner: Select$1.Positioner,
     Content,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraSelect"],"mappings":";;;;;;;AAkBA,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;AAChE,IAAA,QACEA,GAAA,CAACC,QAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CACX,aAAa,EACb,OAAO,KAAK,OAAO,IAAI,kBAAkB,EACzC,GAAG,CACJ,EAAA,CACD;AAEN,CAAC,CACF;AAED,MAAM,OAAO,GAAG,UAAU,CACxB,SAAS,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC3C,QACED,IAACC,QAAY,CAAC,OAAO,EAAA,EACnB,GAAG,EAAE,GAAG;;;AAGR,QAAA,cAAc,EAAC,mBAAmB,EAAA,GAC9B,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,aAAa,EAAE,GAAG,CAAC,EAAA,CACjC;AAEN,CAAC,CACF;AAED,MAAM,IAAI,GAAG,UAAU,CACrB,SAAS,UAAU,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IACxC,QACED,IAACC,QAAY,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC,UAAU,EAAE,GAAG,CAAC,EAAA,CAAI;AAE9E,CAAC,CACF;AAED,MAAM,SAAS,GAAG,UAAU,CAC1B,SAAS,eAAe,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAA;IAC7C,QACED,IAACC,QAAY,CAAC,SAAS,EAAA,EACrB,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,GAAG,EAAE,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,EAAA,CACnC;AAEN,CAAC,CACF;AAED;;;;;;AAMG;AACI,MAAM,MAAM,GAAG;IACpB,IAAI,EAAEA,QAAY,CAAC,IAAI;IACvB,aAAa,EAAEA,QAAY,CAAC,aAAa;IACzC,OAAO,EAAEA,QAAY,CAAC,OAAO;IAC7B,KAAK,EAAEA,QAAY,CAAC,KAAK;IACzB,OAAO,EAAEA,QAAY,CAAC,OAAO;IAC7B,OAAO;IACP,SAAS,EAAEA,QAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,QAAY,CAAC,cAAc;IAC3C,SAAS;IACT,YAAY,EAAEA,QAAY,CAAC,YAAY;IACvC,YAAY,EAAEA,QAAY,CAAC,YAAY;IACvC,UAAU,EAAEA,QAAY,CAAC,UAAU;IACnC,OAAO;IACP,SAAS,EAAEA,QAAY,CAAC,SAAS;IACjC,cAAc,EAAEA,QAAY,CAAC,cAAc;IAC3C,IAAI;IACJ,QAAQ,EAAEA,QAAY,CAAC,QAAQ;IAC/B,aAAa,EAAEA,QAAY,CAAC,aAAa;IACzC,WAAW,EAAEA,QAAY,CAAC,WAAW;;;;;"}
+{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraSelect"],"mappings":"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"}

package/dist/components/Select/Select.styles.d.ts

@@ -14,6 +14,12 @@ export declare const triggerStyles: {
         borderColor: string;
         boxShadow: string;
     };
+    '[data-part=control]:has([data-part=clear-trigger]:not([hidden])) > &': {
+        pe: string;
+        '& [data-part=value-text]': {
+            maxW: string;
+        };
+    };
     bg: string;
     color: string;
     borderColor: string;
@@ -76,6 +82,12 @@ export declare const ghostTriggerStyles: {
 };
 /** Combobox text input — the typeable control. */
 export declare const inputStyles: {
+    '[data-part=control]:has([data-part=clear-trigger]:not([hidden])) > &': {
+        pe: string;
+        '& [data-part=value-text]': {
+            maxW: string;
+        };
+    };
     bg: string;
     color: string;
     borderColor: string;
@@ -147,4 +159,88 @@ export declare const itemStyles: {
 export declare const indicatorStyles: {
     color: string;
 };
+export declare const selectClearTriggerStyles: {
+    position: string;
+    display: string;
+    alignItems: string;
+    justifyContent: string;
+    boxSize: string;
+    me: string;
+    color: string;
+    cursor: string;
+    _hover: {
+        color: string;
+    };
+    _after: {
+        content: string;
+        position: string;
+        insetEnd: string;
+        top: string;
+        transform: string;
+        h: string;
+        borderEndWidth: string;
+        borderColor: string;
+        pointerEvents: string;
+    };
+    _hidden: {
+        display: string;
+    };
+    '& svg': {
+        width: string;
+        height: string;
+    };
+    '@media (pointer: coarse)': {
+        '&::before': {
+            content: string;
+            position: string;
+            insetEnd: number;
+            top: string;
+            transform: string;
+            width: string;
+            height: string;
+        };
+    };
+};
+export declare const comboboxClearTriggerStyles: {
+    position: string;
+    display: string;
+    alignItems: string;
+    justifyContent: string;
+    boxSize: string;
+    me: string;
+    color: string;
+    cursor: string;
+    _hover: {
+        color: string;
+    };
+    _after: {
+        content: string;
+        position: string;
+        insetEnd: string;
+        top: string;
+        transform: string;
+        h: string;
+        borderEndWidth: string;
+        borderColor: string;
+        pointerEvents: string;
+    };
+    _hidden: {
+        display: string;
+    };
+    '& svg': {
+        width: string;
+        height: string;
+    };
+    '@media (pointer: coarse)': {
+        '&::before': {
+            content: string;
+            position: string;
+            insetEnd: number;
+            top: string;
+            transform: string;
+            width: string;
+            height: string;
+        };
+    };
+};
 //# sourceMappingURL=Select.styles.d.ts.map

package/dist/components/Select/Select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA+BH,8CAA8C;AAC9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOzB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAoB9B,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEvB,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;CAG9B,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;CAWtB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,eAAe;;CAE3B,CAAC"}
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAgDH,8CAA8C;AAC9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQzB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAoB9B,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGvB,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;;;CAG9B,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;CAWtB,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,eAAe;;CAE3B,CAAC;AAwDF,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEpC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEtC,CAAC"}

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

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,

package/src/components/Select/Select.usage.mdx

@@ -96,6 +96,32 @@ Other props: `size` (`xs`–`lg`, default `md`), `invalid`, `disabled`,
 `null` when the selection is cleared. `ComboboxField` adds `emptyText`; it has
 no `variant` or `stagger`.
 
+## Clearing the value
+
+When "nothing chosen" is a valid value, let the user empty the field again: a
+filter, or a form field that is not required. Do not offer it on a required
+field.
+
+`ComboboxField` already has the button. `SelectField` has none, so a
+clearable select is composed from `Select.*`. With `Select.*` or
+`Combobox.*`, put `ClearTrigger` in the indicator group, before the chevron:
+
+```tsx
+<Select.IndicatorGroup>
+  <Select.ClearTrigger aria-label="조직 선택 지우기" />
+  <Select.Indicator />
+</Select.IndicatorGroup>
+```
+
+The part does the rest. It shows only while something is selected. It draws
+its own icon, smaller and lighter than the chevron, with a divider between
+them. While it shows, the 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. Do not pass a size, a colour or your own divider.
+
+`onValueChange` receives an empty value when it is pressed;
+`ComboboxField` passes `null` to `onChange`.
+
 ## Do / Don't
 
 </En>
@@ -112,6 +138,30 @@ no `variant` or `stagger`.
 받습니다. `ComboboxField`에는 `emptyText`가 더 있고, `variant`와 `stagger`는
 없습니다.
 
+## 선택 지우기
+
+"아무것도 고르지 않음"도 올바른 값일 때는 사용자가 필드를 다시 비울 수 있게 합니다.
+필터나 필수가 아닌 폼 필드가 그렇습니다. 필수 필드에는 두지 않습니다.
+
+`ComboboxField`에는 이미 들어 있습니다. `SelectField`에는 없으므로, 지울 수 있는
+셀렉트는 `Select.*`로 조합합니다. `Select.*`나 `Combobox.*`로 조합할 때는
+`ClearTrigger`를 indicator group 안, 화살표 앞에 둡니다.
+
+```tsx
+<Select.IndicatorGroup>
+  <Select.ClearTrigger aria-label="조직 선택 지우기" />
+  <Select.Indicator />
+</Select.IndicatorGroup>
+```
+
+나머지는 부품이 처리합니다. 무언가 골라져 있을 때만 보입니다. 아이콘을 직접 그리고,
+화살표보다 작고 옅게 그리며, 화살표와의 사이에 구분선을 둡니다. 보이는 동안 값은
+버튼 앞에서 말줄임으로 끝납니다. 터치 화면에서는 누르는 영역이 값 쪽으로 44px까지
+넓어지고, 높이는 필드 높이를 따릅니다. 크기, 색, 구분선을 따로 넘기지 마세요.
+
+누르면 `onValueChange`가 빈 값을 받습니다. `ComboboxField`는 `onChange`에
+`null`을 넘깁니다.
+
 ## 이렇게 하세요 / 이렇게 하지 마세요
 
 </Ko>
@@ -144,6 +194,13 @@ no `variant` or `stagger`.
   ko="사용자가 이름을 알고 목록이 길다면 ComboboxField를 씁니다. emptyText의 기본값은 영어이므로 번역해서 넘깁니다."
 />
 
+<Canvas of={SelectStories.Clearable} />
+<Verdict
+  kind="do"
+  en="On an optional field, put ClearTrigger before the chevron and pass an aria-label that says what is cleared. Without one it is named 'Clear selection' in the provider language."
+  ko="필수가 아닌 필드에는 화살표 앞에 ClearTrigger를 두고, 무엇을 지우는지 aria-label로 넘깁니다. 넘기지 않으면 provider 언어의 '선택 지우기'로 읽힙니다."
+/>
+
 <Canvas of={SelectStories.DontSelectForTwo} />
 <Verdict
   kind="dont"
@@ -183,6 +240,9 @@ What these components do for you:
 - **Keyboard.** The Chakra / Zag listbox handles it: Enter, Space or the arrow
   keys open the list; arrows move; Enter selects; Escape closes and returns
   focus to the trigger. In `ComboboxField` typing filters the list.
+- **A name for the clear button.** `ClearTrigger` is named 「선택 지우기」 /
+  "Clear selection" in the provider language, instead of Chakra's English
+  "Clear value" in every locale. A caller's `aria-label` wins.
 - **Focus and states.** The trigger shows a `primary.main` border and ring on
   focus and while open (WCAG 2.4.7). The selected option is bold on
   `primary.selected` and carries a check mark, so it does not rely on colour
@@ -228,6 +288,9 @@ Generated from `Select.styles.ts`. Select and Combobox share these.
 - **키보드.** Chakra와 Zag의 목록 상자가 처리합니다. Enter, Space, 방향키로 목록을
   열고, 방향키로 옮기고, Enter로 고르며, Escape로 닫으면 초점이 트리거로 돌아갑니다.
   `ComboboxField`에서는 입력하면 목록이 걸러집니다.
+- **지우기 버튼의 이름.** `ClearTrigger`는 provider 언어로 「선택 지우기」
+  ("Clear selection")라는 이름을 가집니다. Chakra 기본값은 어느 언어에서나 영어
+  "Clear value"였습니다. 호출부에서 넘긴 `aria-label`이 우선합니다.
 - **초점과 상태.** 트리거는 초점을 받거나 열려 있는 동안 `primary.main` 테두리와 링을
   보여 줍니다(WCAG 2.4.7). 선택된 항목은 `primary.selected` 위에 굵은 글자와 체크
   표시로 나타나므로 색에만 기대지 않습니다(WCAG 1.4.1).

package/src/translations/Defaults.translations.json

@@ -243,5 +243,12 @@
     "zh": "关闭",
     "ja": "閉じる",
     "es": "Cerrar"
+  },
+  "clear_selection": {
+    "ko": "선택 지우기",
+    "en": "Clear selection",
+    "zh": "清除选择",
+    "ja": "選択をクリア",
+    "es": "Borrar selección"
   }
 }