@crisp-ui-kit/crisp 0.30.1 → 0.31.1

package/dist/cjs/components/multiselect/multiselect.js

@@ -65,7 +65,7 @@ function Chip({ opt }) {
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, 
+function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, 
 // The id belongs on the trigger, not the wrapper: `<label for>` only names a
 // LABELABLE element, so an id left on the root div meant a FormField label
 // above this control named nothing (#247). Select already did this.
@@ -166,7 +166,7 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [name &&
-                value.map((v) => (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: v }, v)), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+                (value.length > 0 ? value : required ? [""] : []).map((v) => ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {

package/dist/cjs/components/radiogroup/radiogroup-keyboard.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRadioGroupKeyboard = useRadioGroupKeyboard;
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 /**
  * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
  * previous enabled radio, wrapping, and check it on arrival. Home/End jump to
@@ -113,7 +114,11 @@ function useRadioGroupKeyboard({ select, groupRef: externalRef, }) {
         else if (e.key === "End")
             next = radios[radios.length - 1];
         else {
-            const fwd = e.key === "ArrowDown" || e.key === "ArrowRight";
+            // Down always means forward; the horizontal pair follows the direction
+            // the radios are drawn in, which for Segmented's pill row is the whole
+            // point (#255).
+            const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+            const fwd = e.key === "ArrowDown" || e.key === (rtl ? "ArrowLeft" : "ArrowRight");
             // focus outside the group: enter at the near end rather than stepping
             // off an index of -1, which would land two from the back going backwards
             if (idx < 0)

package/dist/cjs/components/radiogroup/radiogroup.js

@@ -47,7 +47,7 @@ const RadioContext = React.createContext(null);
  * preview cards whose border turns brand when picked (the Theme picker). Arrow
  * keys move between options (roving focus). Controlled or uncontrolled.
  */
-function RadioGroup({ value, defaultValue, onValueChange, variant = "default", name, className, "aria-label": ariaLabel, children, ...rest }) {
+function RadioGroup({ value, defaultValue, onValueChange, variant = "default", name, required, className, "aria-label": ariaLabel, children, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue);
     const selected = value ?? internal;
     const generatedName = React.useId();
@@ -68,7 +68,7 @@ function RadioGroup({ value, defaultValue, onValueChange, variant = "default", n
         if (value === undefined)
             setInternal(defaultValue);
     });
-    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: (0, jsx_runtime_1.jsxs)("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: (0, radiogroup_recipe_1.radiogroupRecipe)({ className }), ...rest, onKeyDown: onKeyDown, children: [children, name && selected && ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: selected }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: (0, jsx_runtime_1.jsxs)("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: (0, radiogroup_recipe_1.radiogroupRecipe)({ className }), ...rest, onKeyDown: onKeyDown, children: [children, name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }))] }) }));
 }
 RadioGroup.displayName = "RadioGroup";
 function Radio({ value, label, children, disabled }) {

package/dist/cjs/components/select/select.js

@@ -52,7 +52,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-function Select({ options, value, defaultValue, onValueChange, name, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -156,7 +156,10 @@ function Select({ options, value, defaultValue, onValueChange, name, placeholder
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [name && selected && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: selected }), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [name && (selected || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
+                // controlled by the listbox above; `readOnly` would bar it from
+                // validation, which is the only reason this input is not hidden
+                onChange: () => { } })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
                                 }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {

package/dist/cjs/components/switch/switch.js

@@ -44,7 +44,7 @@ const switch_recipe_1 = require("./switch.recipe");
  * label association and keyboard (Space/Enter) come for free. Controlled via
  * `checked`/`onCheckedChange`, or uncontrolled from `defaultChecked`.
  */
-exports.Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedChange, disabled, className, onClick, name, value = "on", ...props }, ref) => {
+exports.Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedChange, disabled, className, onClick, name, value = "on", required, ...props }, ref) => {
     const [internal, setInternal] = React.useState(defaultChecked);
     const on = checked ?? internal;
     // `form.reset()` restores native controls; a role="switch" button holds its
@@ -63,6 +63,6 @@ exports.Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedC
                     if (checked === undefined)
                         setInternal((v) => !v);
                     onCheckedChange?.(!on);
-                }, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: "switch-thumb" }) }), name && on && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: value })] }));
+                }, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: "switch-thumb" }) }), name && (on || required) && ((0, jsx_runtime_1.jsx)("input", { className: "crisp-formvalue", style: core_1.formValueStyle, type: "checkbox", name: name, value: value, checked: on, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }))] }));
 });
 exports.Switch.displayName = "Switch";

package/dist/cjs/components/tabs/tabs-keyboard.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTablistKeyboard = useTablistKeyboard;
+const core_1 = require("../../core");
 /**
  * The WAI-ARIA tablist keyboard model: ←/→ to move (wrapping), Home/End to
  * jump, disabled tabs skipped, focus following selection.
@@ -20,9 +21,15 @@ function useTablistKeyboard({ tabs, active, select, listRef, }) {
             return;
         const idx = enabled.findIndex((t) => t.value === active);
         let next = -1;
-        if (e.key === "ArrowRight")
+        // The arrows follow the strip as it is drawn: under RTL the next tab is to
+        // the LEFT, so the keys swap. Everything else about the model is unchanged
+        // (#255).
+        const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+        const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+        if (e.key === forwardKey)
             next = (idx + 1) % enabled.length;
-        else if (e.key === "ArrowLeft")
+        else if (e.key === backKey)
             next = (idx - 1 + enabled.length) % enabled.length;
         else if (e.key === "Home")
             next = 0;

package/dist/cjs/core/form-value.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formValueStyle = void 0;
+/**
+ * The style for the input that carries a non-native control's value into the
+ * form.
+ *
+ * It cannot be `type="hidden"`: hidden inputs are *barred from constraint
+ * validation*, so `required` on one is ignored and the form submits with the
+ * field empty (#253). A laid-out but invisible input validates normally — the
+ * browser blocks the submit, focuses it and shows its own message beside the
+ * control.
+ *
+ * `opacity: 0` rather than `display: none` or `visibility: hidden`, both of
+ * which bar it again. Inline rather than a recipe rule because Switch renders
+ * its input as a SIBLING of the button that is its root: a nested `& .class`
+ * rule never matches there, and the first version of this shipped a visible
+ * 13px checkbox next to every switch — caught in a browser, not by a test.
+ */
+exports.formValueStyle = {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    opacity: 0,
+    margin: 0,
+    padding: 0,
+    border: 0,
+    pointerEvents: "none",
+};

package/dist/cjs/core/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
+exports.usePrefersReducedMotion = exports.useLabelAssociation = exports.useFormReset = exports.useFocusAfterRemoval = exports.resolveRecipe = exports.Primitive = exports.placeFloating = exports.formValueStyle = exports.isRtlElement = exports.withDescribedBy = exports.defineRecipe = exports.cx = void 0;
 var cx_1 = require("./cx");
 Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return cx_1.cx; } });
 var define_1 = require("./define");
@@ -23,6 +23,8 @@ var dialog_description_1 = require("./dialog-description");
 Object.defineProperty(exports, "withDescribedBy", { enumerable: true, get: function () { return dialog_description_1.withDescribedBy; } });
 var direction_1 = require("./direction");
 Object.defineProperty(exports, "isRtlElement", { enumerable: true, get: function () { return direction_1.isRtlElement; } });
+var form_value_1 = require("./form-value");
+Object.defineProperty(exports, "formValueStyle", { enumerable: true, get: function () { return form_value_1.formValueStyle; } });
 var place_floating_1 = require("./place-floating");
 Object.defineProperty(exports, "placeFloating", { enumerable: true, get: function () { return place_floating_1.placeFloating; } });
 var primitive_1 = require("./primitive");

package/dist/cjs/product/board/board.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Board = Board;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const core_1 = require("../../core");
 const board_recipe_1 = require("./board.recipe");
 /**
  * A kanban board with native drag-and-drop between columns. Cards are
@@ -108,11 +109,12 @@ function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLa
                                     }, onKeyDown: (e) => {
                                         if (!(e.ctrlKey || e.metaKey))
                                             return;
-                                        const delta = e.key === "ArrowLeft"
-                                            ? -1
-                                            : e.key === "ArrowRight"
-                                                ? 1
-                                                : 0;
+                                        // the columns are a flex row, so under RTL the next one
+                                        // is to the LEFT and the keys swap (#255)
+                                        const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+                                        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+                                        const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+                                        const delta = e.key === backKey ? -1 : e.key === forwardKey ? 1 : 0;
                                         // only swallow the key when the move actually happens, so
                                         // Ctrl+Right at the last column still reaches the browser
                                         if (delta && moveByKey(card, delta))

package/dist/cjs/product/recordpage/recordpage.js

@@ -414,10 +414,15 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                                                         if (!next)
                                                             setFieldQuery("");
                                                     }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), (0, jsx_runtime_1.jsxs)("div", { className: "recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
-                            if (e.key === "ArrowLeft")
-                                setDetailsW((w) => Math.max(300, w - 16));
-                            else if (e.key === "ArrowRight")
-                                setDetailsW((w) => Math.min(560, w + 16));
+                            if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
+                                return;
+                            // The pointer drag learned its direction in #212; this did not.
+                            // The details column is the flex row's first child, so it sits on
+                            // the RIGHT under RTL and ArrowLeft has to grow it — the same
+                            // half-conversion the drag had, one handler away (#255).
+                            const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+                            const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                            setDetailsW((w) => grow ? Math.min(560, w + 16) : Math.max(300, w - 16));
                         } }), (0, jsx_runtime_1.jsx)("main", { className: "recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
 }
 RecordPage.displayName = "RecordPage";

package/dist/cjs/product/recordstable/recordstable.js

@@ -640,10 +640,15 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
             nr = Math.max(0, r - 1);
         else if (e.key === "ArrowDown")
             nr = Math.min(visibleRows.length - 1, r + 1);
-        else if (e.key === "ArrowLeft")
-            nc = Math.max(0, c - 1);
-        else if (e.key === "ArrowRight")
-            nc = Math.min(cols.length - 1, c + 1);
+        // The arrows follow what the user SEES. Under RTL the first column renders
+        // rightmost, so ArrowLeft moves to the next column and ArrowRight to the
+        // previous — the grid's own half-conversion, of the same kind the resize
+        // grips had (#255).
+        else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+            const rtl = (0, core_1.isRtlElement)(e.currentTarget);
+            const forward = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+            nc = forward ? Math.min(cols.length - 1, c + 1) : Math.max(0, c - 1);
+        }
         else if (e.key === "Escape") {
             setSelCell(null);
             return;

package/dist/esm/components/multiselect/multiselect.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
-import { placeFloating, useFormReset } from "../../core/index.js";
+import { formValueStyle, placeFloating, useFormReset } from "../../core/index.js";
 import { useListboxKeyboard } from "../select/index.js";
 import { multiselectRecipe } from "./multiselect.recipe.js";
 const TONES = [
@@ -29,7 +29,7 @@ function Chip({ opt }) {
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, 
+export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, 
 // The id belongs on the trigger, not the wrapper: `<label for>` only names a
 // LABELABLE element, so an id left on the root div meant a FormField label
 // above this control named nothing (#247). Select already did this.
@@ -130,7 +130,7 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
     return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [name &&
-                value.map((v) => _jsx("input", { type: "hidden", name: name, value: v }, v)), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+                (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {

package/dist/esm/components/radiogroup/radiogroup-keyboard.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { isRtlElement } from "../../core/index.js";
 /**
  * The WAI-ARIA radio group keyboard model: ←/→/↑/↓ move focus to the next or
  * previous enabled radio, wrapping, and check it on arrival. Home/End jump to
@@ -77,7 +78,11 @@ export function useRadioGroupKeyboard({ select, groupRef: externalRef, }) {
         else if (e.key === "End")
             next = radios[radios.length - 1];
         else {
-            const fwd = e.key === "ArrowDown" || e.key === "ArrowRight";
+            // Down always means forward; the horizontal pair follows the direction
+            // the radios are drawn in, which for Segmented's pill row is the whole
+            // point (#255).
+            const rtl = isRtlElement(e.currentTarget);
+            const fwd = e.key === "ArrowDown" || e.key === (rtl ? "ArrowLeft" : "ArrowRight");
             // focus outside the group: enter at the near end rather than stepping
             // off an index of -1, which would land two from the back going backwards
             if (idx < 0)

package/dist/esm/components/radiogroup/radiogroup.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useFormReset, useLabelAssociation } from "../../core/index.js";
+import { formValueStyle, useFormReset, useLabelAssociation } from "../../core/index.js";
 import { radiogroupRecipe } from "./radiogroup.recipe.js";
 import { useRadioGroupKeyboard } from "./radiogroup-keyboard.js";
 const RadioContext = React.createContext(null);
@@ -10,7 +10,7 @@ const RadioContext = React.createContext(null);
  * preview cards whose border turns brand when picked (the Theme picker). Arrow
  * keys move between options (roving focus). Controlled or uncontrolled.
  */
-export function RadioGroup({ value, defaultValue, onValueChange, variant = "default", name, className, "aria-label": ariaLabel, children, ...rest }) {
+export function RadioGroup({ value, defaultValue, onValueChange, variant = "default", name, required, className, "aria-label": ariaLabel, children, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue);
     const selected = value ?? internal;
     const generatedName = React.useId();
@@ -31,7 +31,7 @@ export function RadioGroup({ value, defaultValue, onValueChange, variant = "defa
         if (value === undefined)
             setInternal(defaultValue);
     });
-    return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsxs("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), ...rest, onKeyDown: onKeyDown, children: [children, name && selected && (_jsx("input", { type: "hidden", name: name, value: selected }))] }) }));
+    return (_jsx(RadioContext.Provider, { value: { value: selected, select, name: groupName, variant }, children: _jsxs("div", { ref: groupRef, role: "radiogroup", "aria-label": ariaLabel, "data-variant": variant, className: radiogroupRecipe({ className }), ...rest, onKeyDown: onKeyDown, children: [children, name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }))] }) }));
 }
 RadioGroup.displayName = "RadioGroup";
 export function Radio({ value, label, children, disabled }) {

package/dist/esm/components/select/select.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
-import { placeFloating, useFormReset } from "../../core/index.js";
+import { formValueStyle, placeFloating, useFormReset } from "../../core/index.js";
 import { useListboxKeyboard } from "./listbox-keyboard.js";
 import { selectRecipe } from "./select.recipe.js";
 function optionText(o) {
@@ -16,7 +16,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export function Select({ options, value, defaultValue, onValueChange, name, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -120,7 +120,10 @@ export function Select({ options, value, defaultValue, onValueChange, name, plac
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [name && selected && _jsx("input", { type: "hidden", name: name, value: selected }), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
+                // controlled by the listbox above; `readOnly` would bar it from
+                // validation, which is the only reason this input is not hidden
+                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
                                 }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {

package/dist/esm/components/switch/switch.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { useFormReset } from "../../core/index.js";
+import { formValueStyle, useFormReset } from "../../core/index.js";
 import { switchRecipe } from "./switch.recipe.js";
 /**
  * An on/off toggle — the settings switch, measured from Attio. Renders a
@@ -8,7 +8,7 @@ import { switchRecipe } from "./switch.recipe.js";
  * label association and keyboard (Space/Enter) come for free. Controlled via
  * `checked`/`onCheckedChange`, or uncontrolled from `defaultChecked`.
  */
-export const Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedChange, disabled, className, onClick, name, value = "on", ...props }, ref) => {
+export const Switch = React.forwardRef(({ checked, defaultChecked = false, onCheckedChange, disabled, className, onClick, name, value = "on", required, ...props }, ref) => {
     const [internal, setInternal] = React.useState(defaultChecked);
     const on = checked ?? internal;
     // `form.reset()` restores native controls; a role="switch" button holds its
@@ -27,6 +27,6 @@ export const Switch = React.forwardRef(({ checked, defaultChecked = false, onChe
                     if (checked === undefined)
                         setInternal((v) => !v);
                     onCheckedChange?.(!on);
-                }, ...props, children: _jsx("span", { className: "switch-thumb" }) }), name && on && _jsx("input", { type: "hidden", name: name, value: value })] }));
+                }, ...props, children: _jsx("span", { className: "switch-thumb" }) }), name && (on || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, type: "checkbox", name: name, value: value, checked: on, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }))] }));
 });
 Switch.displayName = "Switch";

package/dist/esm/components/tabs/tabs-keyboard.js

@@ -1,3 +1,4 @@
+import { isRtlElement } from "../../core/index.js";
 /**
  * The WAI-ARIA tablist keyboard model: ←/→ to move (wrapping), Home/End to
  * jump, disabled tabs skipped, focus following selection.
@@ -17,9 +18,15 @@ export function useTablistKeyboard({ tabs, active, select, listRef, }) {
             return;
         const idx = enabled.findIndex((t) => t.value === active);
         let next = -1;
-        if (e.key === "ArrowRight")
+        // The arrows follow the strip as it is drawn: under RTL the next tab is to
+        // the LEFT, so the keys swap. Everything else about the model is unchanged
+        // (#255).
+        const rtl = isRtlElement(e.currentTarget);
+        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+        const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+        if (e.key === forwardKey)
             next = (idx + 1) % enabled.length;
-        else if (e.key === "ArrowLeft")
+        else if (e.key === backKey)
             next = (idx - 1 + enabled.length) % enabled.length;
         else if (e.key === "Home")
             next = 0;

package/dist/esm/core/form-value.js

@@ -0,0 +1,26 @@
+/**
+ * The style for the input that carries a non-native control's value into the
+ * form.
+ *
+ * It cannot be `type="hidden"`: hidden inputs are *barred from constraint
+ * validation*, so `required` on one is ignored and the form submits with the
+ * field empty (#253). A laid-out but invisible input validates normally — the
+ * browser blocks the submit, focuses it and shows its own message beside the
+ * control.
+ *
+ * `opacity: 0` rather than `display: none` or `visibility: hidden`, both of
+ * which bar it again. Inline rather than a recipe rule because Switch renders
+ * its input as a SIBLING of the button that is its root: a nested `& .class`
+ * rule never matches there, and the first version of this shipped a visible
+ * 13px checkbox next to every switch — caught in a browser, not by a test.
+ */
+export const formValueStyle = {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    opacity: 0,
+    margin: 0,
+    padding: 0,
+    border: 0,
+    pointerEvents: "none",
+};

package/dist/esm/core/index.js

@@ -2,6 +2,7 @@ export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
 export { withDescribedBy } from "./dialog-description.js";
 export { isRtlElement } from "./direction.js";
+export { formValueStyle } from "./form-value.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";

package/dist/esm/product/board/board.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { isRtlElement } from "../../core/index.js";
 import { boardRecipe } from "./board.recipe.js";
 /**
  * A kanban board with native drag-and-drop between columns. Cards are
@@ -72,11 +73,12 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
                                     }, onKeyDown: (e) => {
                                         if (!(e.ctrlKey || e.metaKey))
                                             return;
-                                        const delta = e.key === "ArrowLeft"
-                                            ? -1
-                                            : e.key === "ArrowRight"
-                                                ? 1
-                                                : 0;
+                                        // the columns are a flex row, so under RTL the next one
+                                        // is to the LEFT and the keys swap (#255)
+                                        const rtl = isRtlElement(e.currentTarget);
+                                        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+                                        const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+                                        const delta = e.key === backKey ? -1 : e.key === forwardKey ? 1 : 0;
                                         // only swallow the key when the move actually happens, so
                                         // Ctrl+Right at the last column still reaches the browser
                                         if (delta && moveByKey(card, delta))

package/dist/esm/product/recordpage/recordpage.js

@@ -377,10 +377,15 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                                                         if (!next)
                                                             setFieldQuery("");
                                                     }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_jsxs("div", { className: "recordpage-noresults", children: ["No fields match \u201C", fieldQuery, "\u201D."] })))] }), _jsxs("div", { className: "recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "recordpage-emptystate", children: t.noLists })] })] }), _jsx("div", { className: "recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
-                            if (e.key === "ArrowLeft")
-                                setDetailsW((w) => Math.max(300, w - 16));
-                            else if (e.key === "ArrowRight")
-                                setDetailsW((w) => Math.min(560, w + 16));
+                            if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
+                                return;
+                            // The pointer drag learned its direction in #212; this did not.
+                            // The details column is the flex row's first child, so it sits on
+                            // the RIGHT under RTL and ArrowLeft has to grow it — the same
+                            // half-conversion the drag had, one handler away (#255).
+                            const rtl = isRtlElement(e.currentTarget);
+                            const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                            setDetailsW((w) => grow ? Math.min(560, w + 16) : Math.max(300, w - 16));
                         } }), _jsx("main", { className: "recordpage-main", children: _jsx(Tabs, { tabs: tabs, defaultValue: "overview", "aria-label": `${name} record`, children: panel }) })] })] }));
 }
 RecordPage.displayName = "RecordPage";

package/dist/esm/product/recordstable/recordstable.js

@@ -600,10 +600,15 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
             nr = Math.max(0, r - 1);
         else if (e.key === "ArrowDown")
             nr = Math.min(visibleRows.length - 1, r + 1);
-        else if (e.key === "ArrowLeft")
-            nc = Math.max(0, c - 1);
-        else if (e.key === "ArrowRight")
-            nc = Math.min(cols.length - 1, c + 1);
+        // The arrows follow what the user SEES. Under RTL the first column renders
+        // rightmost, so ArrowLeft moves to the next column and ArrowRight to the
+        // previous — the grid's own half-conversion, of the same kind the resize
+        // grips had (#255).
+        else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+            const rtl = isRtlElement(e.currentTarget);
+            const forward = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+            nc = forward ? Math.min(cols.length - 1, c + 1) : Math.max(0, c - 1);
+        }
         else if (e.key === "Escape") {
             setSelCell(null);
             return;

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

@@ -18,6 +18,16 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
      * nothing to FormData (#243).
      */
     name?: string;
+    /**
+     * Blocks the form until the field is answered, using the browser's own
+     * validation: the submit is stopped, the control is focused and the
+     * browser's message is shown.
+     *
+     * Needs `name`, because the value rides on a real input — a `type="hidden"`
+     * one is barred from constraint validation and ignores `required`
+     * entirely (#253).
+     */
+    required?: boolean;
     /** Fires with the next value on every toggle, controlled or not. */
     onValueChange?: (value: string[]) => void;
     placeholder?: string;
@@ -36,7 +46,7 @@ export type MultiSelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "valu
  * popover with a search field over rows of "[chip] … [checkbox]" that toggle on
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
-export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, id, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
+export declare function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, name, required, id, placeholder, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, ...rest }: MultiSelectProps): React.JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }

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

@@ -13,6 +13,16 @@ export type RadioGroupProps = Omit<React.ComponentPropsWithoutRef<"div">, "value
      * (#243). The value now rides on a hidden input.
      */
     name?: string;
+    /**
+     * Blocks the form until the field is answered, using the browser's own
+     * validation: the submit is stopped, the control is focused and the
+     * browser's message is shown.
+     *
+     * Needs `name`, because the value rides on a real input — a `type="hidden"`
+     * one is barred from constraint validation and ignores `required`
+     * entirely (#253).
+     */
+    required?: boolean;
     className?: string;
     "aria-label"?: string;
     children: React.ReactNode;
@@ -23,7 +33,7 @@ export type RadioGroupProps = Omit<React.ComponentPropsWithoutRef<"div">, "value
  * preview cards whose border turns brand when picked (the Theme picker). Arrow
  * keys move between options (roving focus). Controlled or uncontrolled.
  */
-export declare function RadioGroup({ value, defaultValue, onValueChange, variant, name, className, "aria-label": ariaLabel, children, ...rest }: RadioGroupProps): React.JSX.Element;
+export declare function RadioGroup({ value, defaultValue, onValueChange, variant, name, required, className, "aria-label": ariaLabel, children, ...rest }: RadioGroupProps): React.JSX.Element;
 export declare namespace RadioGroup {
     var displayName: string;
 }

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

@@ -21,6 +21,16 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
      * nothing to FormData (#243).
      */
     name?: string;
+    /**
+     * Blocks the form until the field is answered, using the browser's own
+     * validation: the submit is stopped, the control is focused and the
+     * browser's message is shown.
+     *
+     * Needs `name`, because the value rides on a real input — a `type="hidden"`
+     * one is barred from constraint validation and ignores `required`
+     * entirely (#253).
+     */
+    required?: boolean;
     placeholder?: string;
     /** `ghost` is borderless until hover — for inline selects (e.g. sort rows). */
     variant?: "default" | "ghost";
@@ -43,7 +53,7 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export declare function Select({ options, value, defaultValue, onValueChange, name, placeholder, variant, width, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, name, required, placeholder, variant, width, searchable, searchPlaceholder, emptyLabel, disabled, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

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

@@ -13,6 +13,16 @@ export type SwitchProps = Omit<React.ComponentPropsWithoutRef<"button">, "onChan
     name?: string;
     /** The value submitted when it is on (default "on", as a checkbox does). */
     value?: string;
+    /**
+     * Blocks the form until the field is answered, using the browser's own
+     * validation: the submit is stopped, the control is focused and the
+     * browser's message is shown.
+     *
+     * Needs `name`, because the value rides on a real input — a `type="hidden"`
+     * one is barred from constraint validation and ignores `required`
+     * entirely (#253).
+     */
+    required?: boolean;
 };
 /**
  * An on/off toggle — the settings switch, measured from Attio. Renders a
@@ -34,4 +44,14 @@ export declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<React.Det
     name?: string;
     /** The value submitted when it is on (default "on", as a checkbox does). */
     value?: string;
+    /**
+     * Blocks the form until the field is answered, using the browser's own
+     * validation: the submit is stopped, the control is focused and the
+     * browser's message is shown.
+     *
+     * Needs `name`, because the value rides on a real input — a `type="hidden"`
+     * one is barred from constraint validation and ignores `required`
+     * entirely (#253).
+     */
+    required?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/core/form-value.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+/**
+ * The style for the input that carries a non-native control's value into the
+ * form.
+ *
+ * It cannot be `type="hidden"`: hidden inputs are *barred from constraint
+ * validation*, so `required` on one is ignored and the form submits with the
+ * field empty (#253). A laid-out but invisible input validates normally — the
+ * browser blocks the submit, focuses it and shows its own message beside the
+ * control.
+ *
+ * `opacity: 0` rather than `display: none` or `visibility: hidden`, both of
+ * which bar it again. Inline rather than a recipe rule because Switch renders
+ * its input as a SIBLING of the button that is its root: a nested `& .class`
+ * rule never matches there, and the first version of this shipped a visible
+ * 13px checkbox next to every switch — caught in a browser, not by a test.
+ */
+export declare const formValueStyle: React.CSSProperties;

package/dist/types/core/index.d.ts

@@ -2,6 +2,7 @@ export { cx } from "./cx";
 export { defineRecipe } from "./define";
 export { withDescribedBy } from "./dialog-description";
 export { isRtlElement } from "./direction";
+export { formValueStyle } from "./form-value";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";
 export { resolveRecipe } from "./resolve";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.30.1",
+  "version": "0.31.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",