@mindlogic-ai/logician-ui 5.0.0-alpha.3 → 5.0.0-alpha.30

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

@@ -13,4 +13,28 @@ import type { SystemStyleObject } from '@chakra-ui/react';
  * moment to promote it.
  */
 export declare const indicatorTravel: SystemStyleObject;
+/**
+ * The root's padding in px (see `rootPadding` in SegmentedControl.tsx for
+ * why px), per size. Shared with the item-height calc so the two cannot
+ * disagree.
+ *
+ * 4px from `sm` up; 2px at `xs` / `2xs`. A fixed 4px left an `xs` item 20px
+ * tall (28 − 8) inside a 16px `ScaledContext`, shorter than its own 14px type's
+ * 21px line, and the label read squeezed against the indicator (FactChat
+ * coding-agent toolbar, 박상현 2026-11-10). At 2px the item is 24px.
+ */
+export declare const segmentRootPaddingPx: (size: unknown) => number;
+/**
+ * Item height so that the OUTER height (item + 2 × root padding) equals the
+ * Button height for the same size — `controlSizes[size].height`, i.e. 28 /
+ * 31.5 / 35 / 38.5px for xs / sm / md / lg at the 14px root, and 36 / 40 / 44
+ * for sm / md / lg inside a 16px `ScaledContext`.
+ *
+ * A `calc()` on the height token rather than a smaller token: the root padding
+ * is a fixed px value while the sizes tokens are rem (em inside a
+ * ScaledContext), so no single token equals "Button height − padding" at every
+ * font size. The old one-token-smaller table (`6`/`7`/`8`/`9`) was written for
+ * a 16px rem and came out 1px taller than Button at the real 14px root.
+ */
+export declare const segmentItemHeight: (size: unknown) => string;
 //# sourceMappingURL=SegmentedControl.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,iBAM7B,CAAC"}
+{"version":3,"file":"SegmentedControl.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAQ1D;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,iBAM7B,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,GAAI,MAAM,OAAO,KAAG,MACZ,CAAC;AAE1C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,OAAO,KAAG,MAKN,CAAC"}

package/dist/components/SegmentedControl/SegmentedControl.styles.js

@@ -1,6 +1,8 @@
 "use client";
 'use strict';
 
+var controlSizes = require('../../theme/controlSizes.js');
+
 /**
  * `travel`, but delivered through custom properties.
  *
@@ -21,6 +23,34 @@ const indicatorTravel = {
         '--transition-duration': 'var(--chakra-durations-motion-instant)',
     },
 };
+/**
+ * The root's padding in px (see `rootPadding` in SegmentedControl.tsx for
+ * why px), per size. Shared with the item-height calc so the two cannot
+ * disagree.
+ *
+ * 4px from `sm` up; 2px at `xs` / `2xs`. A fixed 4px left an `xs` item 20px
+ * tall (28 − 8) inside a 16px `ScaledContext`, shorter than its own 14px type's
+ * 21px line, and the label read squeezed against the indicator (FactChat
+ * coding-agent toolbar, 박상현 2026-11-10). At 2px the item is 24px.
+ */
+const segmentRootPaddingPx = (size) => size === 'xs' || size === '2xs' ? 2 : 4;
+/**
+ * Item height so that the OUTER height (item + 2 × root padding) equals the
+ * Button height for the same size — `controlSizes[size].height`, i.e. 28 /
+ * 31.5 / 35 / 38.5px for xs / sm / md / lg at the 14px root, and 36 / 40 / 44
+ * for sm / md / lg inside a 16px `ScaledContext`.
+ *
+ * A `calc()` on the height token rather than a smaller token: the root padding
+ * is a fixed px value while the sizes tokens are rem (em inside a
+ * ScaledContext), so no single token equals "Button height − padding" at every
+ * font size. The old one-token-smaller table (`6`/`7`/`8`/`9`) was written for
+ * a 16px rem and came out 1px taller than Button at the real 14px root.
+ */
+const segmentItemHeight = (size) => `calc(${controlSizes.controlHeightVar((typeof size === 'string' && size in controlSizes.controlSizes
+    ? size
+    : 'md'))} - ${segmentRootPaddingPx(size) * 2}px)`;
 
 exports.indicatorTravel = indicatorTravel;
+exports.segmentItemHeight = segmentItemHeight;
+exports.segmentRootPaddingPx = segmentRootPaddingPx;
 //# sourceMappingURL=SegmentedControl.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.styles.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAsB;AAChD,IAAA,uBAAuB,EAAE,qCAAqC;AAC9D,IAAA,8BAA8B,EAAE,kCAAkC;AAClE,IAAA,aAAa,EAAE;AACb,QAAA,uBAAuB,EAAE,wCAAwC;AAClE,KAAA;;;;;"}
+{"version":3,"file":"SegmentedControl.styles.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":[null],"names":["controlHeightVar","controlSizes"],"mappings":";;;;;AAQA;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAsB;AAChD,IAAA,uBAAuB,EAAE,qCAAqC;AAC9D,IAAA,8BAA8B,EAAE,kCAAkC;AAClE,IAAA,aAAa,EAAE;AACb,QAAA,uBAAuB,EAAE,wCAAwC;AAClE,KAAA;;AAGH;;;;;;;;;AASG;AACI,MAAM,oBAAoB,GAAG,CAAC,IAAa,KAChD,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,GAAG,CAAC,GAAG;AAExC;;;;;;;;;;;AAWG;MACU,iBAAiB,GAAG,CAAC,IAAa,KAC7C,CAAA,KAAA,EAAQA,6BAAgB,EACrB,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAIC;AACnC,MAAE;AACF,MAAE,IAAI,EACT,CAAA,GAAA,EAAM,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,GAAA;;;;;;"}

package/dist/components/SegmentedControl/SegmentedControl.styles.mjs

@@ -1,4 +1,6 @@
 "use client";
+import { controlHeightVar, controlSizes } from '../../theme/controlSizes.mjs';
+
 /**
  * `travel`, but delivered through custom properties.
  *
@@ -19,6 +21,32 @@ const indicatorTravel = {
         '--transition-duration': 'var(--chakra-durations-motion-instant)',
     },
 };
+/**
+ * The root's padding in px (see `rootPadding` in SegmentedControl.tsx for
+ * why px), per size. Shared with the item-height calc so the two cannot
+ * disagree.
+ *
+ * 4px from `sm` up; 2px at `xs` / `2xs`. A fixed 4px left an `xs` item 20px
+ * tall (28 − 8) inside a 16px `ScaledContext`, shorter than its own 14px type's
+ * 21px line, and the label read squeezed against the indicator (FactChat
+ * coding-agent toolbar, 박상현 2026-11-10). At 2px the item is 24px.
+ */
+const segmentRootPaddingPx = (size) => size === 'xs' || size === '2xs' ? 2 : 4;
+/**
+ * Item height so that the OUTER height (item + 2 × root padding) equals the
+ * Button height for the same size — `controlSizes[size].height`, i.e. 28 /
+ * 31.5 / 35 / 38.5px for xs / sm / md / lg at the 14px root, and 36 / 40 / 44
+ * for sm / md / lg inside a 16px `ScaledContext`.
+ *
+ * A `calc()` on the height token rather than a smaller token: the root padding
+ * is a fixed px value while the sizes tokens are rem (em inside a
+ * ScaledContext), so no single token equals "Button height − padding" at every
+ * font size. The old one-token-smaller table (`6`/`7`/`8`/`9`) was written for
+ * a 16px rem and came out 1px taller than Button at the real 14px root.
+ */
+const segmentItemHeight = (size) => `calc(${controlHeightVar((typeof size === 'string' && size in controlSizes
+    ? size
+    : 'md'))} - ${segmentRootPaddingPx(size) * 2}px)`;
 
-export { indicatorTravel };
+export { indicatorTravel, segmentItemHeight, segmentRootPaddingPx };
 //# sourceMappingURL=SegmentedControl.styles.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.styles.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAEA;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAsB;AAChD,IAAA,uBAAuB,EAAE,qCAAqC;AAC9D,IAAA,8BAA8B,EAAE,kCAAkC;AAClE,IAAA,aAAa,EAAE;AACb,QAAA,uBAAuB,EAAE,wCAAwC;AAClE,KAAA;;;;;"}
+{"version":3,"file":"SegmentedControl.styles.mjs","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQA;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAsB;AAChD,IAAA,uBAAuB,EAAE,qCAAqC;AAC9D,IAAA,8BAA8B,EAAE,kCAAkC;AAClE,IAAA,aAAa,EAAE;AACb,QAAA,uBAAuB,EAAE,wCAAwC;AAClE,KAAA;;AAGH;;;;;;;;;AASG;AACI,MAAM,oBAAoB,GAAG,CAAC,IAAa,KAChD,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,GAAG,CAAC,GAAG;AAExC;;;;;;;;;;;AAWG;MACU,iBAAiB,GAAG,CAAC,IAAa,KAC7C,CAAA,KAAA,EAAQ,gBAAgB,EACrB,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,IAAI;AACnC,MAAE;AACF,MAAE,IAAI,EACT,CAAA,GAAA,EAAM,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,GAAA;;;;"}

package/dist/components/SegmentedProgressBar/SegmentedProgressBar.types.d.ts

@@ -1,9 +1,11 @@
 import { BoxProps } from '@chakra-ui/react';
 import { ProgressBarProps } from '../ProgressBar/ProgressBar.types';
 export type SegmentedProgressBarProps = BoxProps & {
+    /** The whole; each segment's width is `value / max`. */
     max: number;
 };
 export type ProgressSegmentProps = ProgressBarProps & {
+    /** This part's amount, in the same unit as the bar's `max`. */
     value: number;
 };
 //# sourceMappingURL=SegmentedProgressBar.types.d.ts.map

package/dist/components/SegmentedProgressBar/SegmentedProgressBar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedProgressBar.types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedProgressBar/SegmentedProgressBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG;IACjD,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GAAG;IACpD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}
+{"version":3,"file":"SegmentedProgressBar.types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedProgressBar/SegmentedProgressBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG;IACjD,wDAAwD;IACxD,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GAAG;IACpD,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

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;
@@ -65,10 +71,10 @@ export declare const ghostTriggerStyles: {
         borderColor: string;
     };
     _disabled: {
+        color: string;
         cursor: string;
         fontWeight: string;
         bg: "transparent";
-        color: "disabled.fg";
         borderColor: "transparent";
         opacity: 1;
         boxShadow: "none";
@@ -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;;;;;;;;;;;;;;;;;;;;CAe9B,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;AA2DF,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` (`3`), 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 + 4em)`,
+        '& [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',
@@ -66,6 +83,11 @@ const ghostTriggerStyles = {
     _hover: { borderColor: 'border.control' },
     _disabled: {
         ...disabledControl.disabledText,
+        // A field, not a ghost button: the value text stays readable at
+        // `disabled.fg` (well apart from the resting `fg.default` already).
+        // `disabled.fgGhost` is for fill-less buttons whose resting glyph is
+        // `fg.icon`.
+        color: 'disabled.fg',
         cursor: 'not-allowed',
         fontWeight: 'semibold',
     },
@@ -73,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 = {
@@ -109,12 +132,72 @@ 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',
+    // The divider sits `1` past the box. `3` leaves the same space between the
+    // divider and the chevron glyph as between the × glyph and the divider
+    // (about 13px at 14px text).
+    me: '3',
+    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