@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/SearchInput/SearchInput.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Spinner_1 = require("../Spinner");
+const Icon_1 = require("../Icon");
+require("./SearchInput.css");
+/**
+ * SearchInput — search-flavored text input with built-in clear, optional cancel,
+ * and loading state.
+ *
+ * Optimized for mobile: large tap targets, native `type="search"` keyboard, and
+ * an `embedded` variant for use inside a TopBar.
+ *
+ * @accessibility
+ * - Renders as `<input type="search">` inside a `<form role="search">` landmark
+ * - Clear and cancel buttons have descriptive aria-labels
+ */
+exports.SearchInput = (0, react_1.forwardRef)(({ value, onChange, placeholder = 'Search', clearable = true, cancellable = false, cancelLabel = 'Cancel', onCancel, onSubmit, loading = false, variant = 'default', autoFocus = false, disabled = false, size = 'md', 'aria-label': ariaLabel, className = '', }, forwardedRef) => {
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(forwardedRef, () => inputRef.current);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const showClear = clearable && !loading && value.length > 0;
+    const showCancel = cancellable && (focused || value.length > 0);
+    const handleClear = () => {
+        onChange('');
+        inputRef.current?.focus();
+    };
+    const handleCancel = () => {
+        if (onCancel) {
+            onCancel();
+        }
+        else {
+            onChange('');
+        }
+        inputRef.current?.blur();
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onSubmit?.(value);
+        }
+        else if (e.key === 'Escape' && cancellable) {
+            handleCancel();
+        }
+    };
+    const rootClasses = [
+        'muka-search-input',
+        `muka-search-input--${variant}`,
+        `muka-search-input--${size}`,
+        focused && 'muka-search-input--focused',
+        disabled && 'muka-search-input--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("form", { className: rootClasses, role: "search", onSubmit: (e) => e.preventDefault(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-search-input__field", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-search-input__leading", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "search", variant: "line", size: "md" }) }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "search", className: "muka-search-input__input", value: value, onChange: (e) => onChange(e.target.value), onFocus: () => setFocused(true), onBlur: () => setFocused(false), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, autoFocus: autoFocus, "aria-label": ariaLabel || placeholder, 
+                        // Disable browser-supplied clear icon — we render our own
+                        // (the `-webkit-search-cancel-button` CSS pseudo-element is also hidden in CSS)
+                        autoComplete: "off", autoCorrect: "off", spellCheck: false }), loading && ((0, jsx_runtime_1.jsx)("span", { className: "muka-search-input__trailing", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "sm", variant: "subtle" }) })), showClear && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-search-input__clear", onClick: handleClear, "aria-label": "Clear search", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", variant: "line", size: "sm" }) }))] }), showCancel && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-search-input__cancel", onClick: handleCancel, children: cancelLabel }))] }));
+});
+exports.SearchInput.displayName = 'SearchInput';
+exports.default = exports.SearchInput;
+//# sourceMappingURL=SearchInput.js.map

package/dist/cjs/components/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/SearchInput/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchInput = void 0;
+var SearchInput_1 = require("./SearchInput");
+Object.defineProperty(exports, "SearchInput", { enumerable: true, get: function () { return SearchInput_1.SearchInput; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/SearchInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/SearchInput/index.ts"],"names":[],"mappings":";;;AAAA,6CAAmE;AAA1D,0GAAA,WAAW,OAAA"}

package/dist/cjs/components/Section/Section.css

@@ -0,0 +1,20 @@
+/* Section Component - Layout tokens (section.padding) */
+
+.muka-section {
+  box-sizing: border-box;
+}
+
+.muka-section--padding-compact {
+  padding-block: var(--section-padding-vertical-compact);
+  padding-inline: var(--section-padding-horizontal-compact);
+}
+
+.muka-section--padding-default {
+  padding-block: var(--section-padding-vertical-default);
+  padding-inline: var(--section-padding-horizontal-default);
+}
+
+.muka-section--padding-spacious {
+  padding-block: var(--section-padding-vertical-spacious);
+  padding-inline: var(--section-padding-horizontal-spacious);
+}

package/dist/cjs/components/Section/Section.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./Section.css");
+/**
+ * Section Component
+ *
+ * Layout primitive that applies consistent vertical and horizontal padding
+ * from the Muka layout token system. Responsive values come from
+ * mobile/tablet/desktop layout tokens.
+ *
+ * Tokens: section.padding.vertical.{compact|default|spacious},
+ *        section.padding.horizontal.{compact|default|spacious}
+ */
+const Section = ({ children, padding = 'default', as: Element = 'section', className = '', ...props }) => {
+    const sectionClasses = [
+        'muka-section',
+        `muka-section--padding-${padding}`,
+        className,
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)(Element, { className: sectionClasses, ...props, children: children }));
+};
+exports.Section = Section;
+exports.default = exports.Section;
+//# sourceMappingURL=Section.js.map

package/dist/cjs/components/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../components/Section/Section.tsx"],"names":[],"mappings":";;;;AACA,yBAAuB;AAgBvB;;;;;;;;;GASG;AACI,MAAM,OAAO,GAA2B,CAAC,EAC9C,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,EAAE,EAAE,OAAO,GAAG,SAAS,EACvB,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,cAAc,GAAG;QACrB,cAAc;QACd,yBAAyB,OAAO,EAAE;QAClC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,uBAAC,OAAO,IAAC,SAAS,EAAE,cAAc,KAAM,KAAK,YAC1C,QAAQ,GACD,CACX,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,OAAO,WAkBlB;AAEF,kBAAe,eAAO,CAAC"}

package/dist/cjs/components/Section/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+var Section_1 = require("./Section");
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Section_1.Section; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Section/index.ts"],"names":[],"mappings":";;;AAAA,qCAAuD;AAA9C,kGAAA,OAAO,OAAA"}

package/dist/cjs/components/SegmentGroup/SegmentGroup.css

@@ -0,0 +1,185 @@
+/* SegmentGroup Component Styles - Using Muka Design Tokens */
+
+/* Container */
+.muka-segmentgroup {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: var(--segmentgroup-container-padding);
+  background-color: var(--segmentgroup-container-background);
+  border-radius: var(--segmentgroup-container-radius);
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+/* Inset shadow on container */
+.muka-segmentgroup::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: var(--segmentgroup-container-shadow);
+  pointer-events: none;
+}
+
+/* Full width variant */
+.muka-segmentgroup--full-width {
+  width: 100%;
+}
+
+.muka-segmentgroup--full-width .muka-segmentgroup__segment {
+  flex: 1;
+}
+
+/* Pill */
+.muka-segmentgroup__pill {
+  position: absolute;
+  top: var(--segmentgroup-container-padding);
+  bottom: var(--segmentgroup-container-padding);
+  left: 0;
+  margin: 0;
+  background-color: var(--segmentgroup-segment-color-selected-background);
+  box-shadow: var(--segmentgroup-segment-shadow-selected);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* Segment button */
+.muka-segmentgroup__segment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: var(--segmentgroup-segment-color-unselected-background);
+  color: var(--segmentgroup-segment-color-unselected-foreground);
+  border-radius: var(--segmentgroup-segment-radius);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  outline: none;
+  box-shadow: var(--segmentgroup-segment-shadow-unselected);
+  font-family: var(--alias-font-plain-family);
+  font-weight: var(--alias-font-plain-weight-regular);
+  z-index: 1; /* Keep above pill */
+}
+
+/* Size variants */
+.muka-segmentgroup--sm {
+  border-radius: var(--border-radius-xl, 16px);
+}
+.muka-segmentgroup--sm .muka-segmentgroup__segment,
+.muka-segmentgroup--sm .muka-segmentgroup__pill {
+  border-radius: var(--border-radius-xl, 16px);
+}
+.muka-segmentgroup--sm .muka-segmentgroup__segment {
+  padding: var(--segmentgroup-segment-padding-sm-y) var(--segmentgroup-segment-padding-sm-x);
+  height: var(--segmentgroup-segment-height-sm);
+  font-size: var(--text-label-sm-fontSize);
+  line-height: var(--text-label-sm-lineHeight);
+}
+
+.muka-segmentgroup--md {
+  border-radius: var(--border-radius-xl, 16px);
+}
+.muka-segmentgroup--md .muka-segmentgroup__segment,
+.muka-segmentgroup--md .muka-segmentgroup__pill {
+  border-radius: var(--border-radius-xl, 16px);
+}
+.muka-segmentgroup--md .muka-segmentgroup__segment {
+  padding: var(--segmentgroup-segment-padding-md-y) var(--segmentgroup-segment-padding-md-x);
+  font-size: var(--text-label-md-fontSize);
+  line-height: var(--text-label-md-lineHeight);
+}
+
+.muka-segmentgroup--lg {
+  border-radius: var(--border-radius-full, 9999px);
+}
+.muka-segmentgroup--lg .muka-segmentgroup__segment,
+.muka-segmentgroup--lg .muka-segmentgroup__pill {
+  border-radius: var(--border-radius-full, 9999px);
+}
+.muka-segmentgroup--lg .muka-segmentgroup__segment {
+  padding: var(--segmentgroup-segment-padding-lg-y) var(--segmentgroup-segment-padding-lg-x);
+  height: 40px;
+  font-size: var(--text-label-lg-fontSize);
+  line-height: var(--text-label-lg-lineHeight);
+}
+
+/* Icon-only variants */
+.muka-segmentgroup--icon-only {
+  gap: var(--spacing-1, 4px);
+}
+
+.muka-segmentgroup--icon-only.muka-segmentgroup--sm .muka-segmentgroup__segment {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+}
+.muka-segmentgroup--icon-only.muka-segmentgroup--sm .muka-segmentgroup__icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.muka-segmentgroup--icon-only.muka-segmentgroup--md .muka-segmentgroup__segment {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+.muka-segmentgroup--icon-only.muka-segmentgroup--md .muka-segmentgroup__icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.muka-segmentgroup--icon-only.muka-segmentgroup--lg .muka-segmentgroup__segment {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+.muka-segmentgroup--icon-only.muka-segmentgroup--lg .muka-segmentgroup__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* Icon */
+.muka-segmentgroup__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Selected state */
+.muka-segmentgroup__segment--selected {
+  background-color: transparent;
+  box-shadow: none;
+  color: var(--segmentgroup-segment-color-selected-foreground);
+  font-weight: var(--alias-font-plain-weight-semibold);
+  z-index: 2; /* Highlight pill when focused is tested below */
+}
+
+/* Hover state (only for unselected) */
+.muka-segmentgroup__segment:not(.muka-segmentgroup__segment--selected):not(:disabled):hover {
+  color: var(--segmentgroup-segment-color-hover-foreground);
+}
+
+/* Focus visible */
+.muka-segmentgroup__segment:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+  z-index: 2;
+}
+
+/* Disabled state */
+.muka-segmentgroup__segment--disabled,
+.muka-segmentgroup__segment:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Label */
+.muka-segmentgroup__label {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  user-select: none;
+}

package/dist/cjs/components/SegmentGroup/SegmentGroup.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./SegmentGroup.css");
+/**
+ * SegmentGroup Component
+ *
+ * A segmented control for selecting one option from a set of mutually exclusive options.
+ * Similar to radio buttons but with a more compact, visual representation.
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - role="radiogroup" with aria-label
+ * - role="radio" for each segment with aria-checked
+ * - Keyboard: Arrow keys for navigation, Space/Enter to select
+ * - Roving tabindex pattern
+ *
+ * @example
+ * ```tsx
+ * <SegmentGroup
+ *   options={[
+ *     { value: 'day', label: 'Day' },
+ *     { value: 'week', label: 'Week' },
+ *     { value: 'month', label: 'Month' }
+ *   ]}
+ *   defaultValue="day"
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', className = '', fullWidth = false, disabled = false, iconOnly = false, }) => {
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue ?? options[0]?.value ?? '');
+    const selectedValue = value !== undefined ? value : internalValue;
+    const containerRef = (0, react_1.useRef)(null);
+    const [pillStyle, setPillStyle] = (0, react_1.useState)({ left: 0, width: 0, opacity: 0 });
+    (0, react_1.useEffect)(() => {
+        const updatePill = () => {
+            if (!containerRef.current)
+                return;
+            const activeSegment = containerRef.current.querySelector('[aria-checked="true"]');
+            if (activeSegment) {
+                setPillStyle({
+                    left: activeSegment.offsetLeft,
+                    width: activeSegment.offsetWidth,
+                    opacity: 1,
+                });
+            }
+        };
+        updatePill();
+        if (typeof ResizeObserver !== 'undefined' && containerRef.current) {
+            const observer = new ResizeObserver(updatePill);
+            observer.observe(containerRef.current);
+            return () => observer.disconnect();
+        }
+    }, [selectedValue, size, fullWidth]);
+    const handleChange = (0, react_1.useCallback)((newValue) => {
+        if (disabled)
+            return;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    }, [value, onChange, disabled]);
+    const handleKeyDown = (e, optionValue, _index) => {
+        const enabledOptions = options.filter((opt) => !opt.disabled);
+        const currentIndex = enabledOptions.findIndex((opt) => opt.value === optionValue);
+        let nextIndex = null;
+        switch (e.key) {
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                e.preventDefault();
+                nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledOptions.length - 1;
+                break;
+            case 'ArrowRight':
+            case 'ArrowDown':
+                e.preventDefault();
+                nextIndex = currentIndex < enabledOptions.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'Home':
+                e.preventDefault();
+                nextIndex = 0;
+                break;
+            case 'End':
+                e.preventDefault();
+                nextIndex = enabledOptions.length - 1;
+                break;
+            case ' ':
+            case 'Enter':
+                e.preventDefault();
+                handleChange(optionValue);
+                return;
+            default:
+                return;
+        }
+        if (nextIndex !== null) {
+            handleChange(enabledOptions[nextIndex].value);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: `muka-segmentgroup muka-segmentgroup--${size} ${fullWidth ? 'muka-segmentgroup--full-width' : ''} ${iconOnly ? 'muka-segmentgroup--icon-only' : ''} ${className}`.trim(), role: "radiogroup", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-segmentgroup__pill", style: {
+                    transform: `translateX(${pillStyle.left}px)`,
+                    width: `${pillStyle.width}px`,
+                    opacity: pillStyle.opacity,
+                } }), options.map((option, index) => {
+                const isSelected = selectedValue === option.value;
+                const isDisabled = disabled || option.disabled;
+                return ((0, jsx_runtime_1.jsx)("button", { type: "button", role: "radio", "aria-checked": isSelected, "aria-label": option.label, disabled: isDisabled, tabIndex: isSelected ? 0 : -1, className: `muka-segmentgroup__segment ${isSelected ? 'muka-segmentgroup__segment--selected' : ''} ${isDisabled ? 'muka-segmentgroup__segment--disabled' : ''}`.trim(), onClick: () => !isDisabled && handleChange(option.value), onKeyDown: (e) => !isDisabled && handleKeyDown(e, option.value, index), children: iconOnly && option.icon ? ((0, jsx_runtime_1.jsx)("span", { className: "muka-segmentgroup__icon", children: option.icon })) : ((0, jsx_runtime_1.jsx)("span", { className: "muka-segmentgroup__label", children: option.label })) }, option.value));
+            })] }));
+};
+exports.SegmentGroup = SegmentGroup;
+exports.default = exports.SegmentGroup;
+//# sourceMappingURL=SegmentGroup.js.map

package/dist/cjs/components/SegmentGroup/SegmentGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../components/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/SegmentGroup/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentGroup = void 0;
+var SegmentGroup_1 = require("./SegmentGroup");
+Object.defineProperty(exports, "SegmentGroup", { enumerable: true, get: function () { return SegmentGroup_1.SegmentGroup; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/SegmentGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/SegmentGroup/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8C;AAArC,4GAAA,YAAY,OAAA"}

package/dist/cjs/components/Select/Select.css

@@ -0,0 +1,191 @@
+/* Select Component Styles - Aligned with Input for consistency */
+
+.muka-select {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.muka-select--full-width {
+  width: 100%;
+}
+
+/* Label */
+.muka-select__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-select__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-select__label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-select__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-select__required {
+  color: var(--color-state-error-foreground);
+}
+
+.muka-select__label--sm + .muka-select__field--disabled,
+.muka-select__label--md + .muka-select__field--disabled,
+.muka-select__label--lg + .muka-select__field--disabled {
+  cursor: not-allowed;
+}
+
+/* Field container — same as Input: 1px border, radius, padding, inset shadow */
+.muka-select__field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  position: relative;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-md);
+  padding: var(--input-field-padding-y) var(--input-field-padding-x);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+/* Inset shadow — same as Input (single subtle line) */
+.muka-select__field::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.08);
+  pointer-events: none;
+}
+
+/* Size variants — same radius/height as Input */
+.muka-select__field--sm {
+  min-height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+}
+
+.muka-select__field--md {
+  min-height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-select__field--lg {
+  min-height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+/* Hover — no visual change (same as Input) */
+
+/* Focus (active) — same as Input: 2px border, padding compensation */
+.muka-select__field--focused:not(.muka-select__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+}
+
+/* Error — same as Input: 2px border, padding compensation */
+.muka-select__field--error:not(.muka-select__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+}
+
+/* Disabled — same as Input */
+.muka-select__field--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  cursor: not-allowed;
+}
+
+.muka-select__field--disabled::after {
+  display: none;
+}
+
+/* Native select — padding on field so native has 0 + right space for chevron */
+.muka-select__native {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--input-field-color-default-foreground);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+  padding: 0;
+  padding-right: calc(var(--input-field-padding-x) + 1.5rem);
+  cursor: pointer;
+  min-width: 0;
+  width: 100%;
+}
+
+.muka-select__field--sm .muka-select__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-select__field--lg .muka-select__native {
+  font-family: var(--text-input-lg-fontFamily);
+  font-weight: var(--text-input-lg-fontWeight);
+  font-size: var(--text-input-lg-fontSize);
+  line-height: var(--text-input-lg-lineHeight);
+}
+
+.muka-select__field--disabled .muka-select__native {
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Chevron — aligned with field padding */
+.muka-select__chevron {
+  display: inline-flex;
+  align-items: center;
+  position: absolute;
+  right: var(--input-field-padding-x);
+  pointer-events: none;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-select__field--disabled .muka-select__chevron {
+  color: var(--input-field-color-disabled-foreground);
+}
+
+/* Helper text — same as Input */
+.muka-select__helper {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+  margin: 0;
+}
+
+/* Error message — same as Input */
+.muka-select__error {
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  color: var(--color-state-error-foreground);
+  margin: 0;
+}