@crisp-ui-kit/crisp 0.7.0 → 0.7.2

package/dist/cjs/components/datepicker/datepicker.recipe.js

@@ -81,16 +81,26 @@ const config = (0, core_1.defineRecipe)({
     }
     & .datepicker-empty-cell { min-height: ${tokens_1.contract.size.calendarCell}; }
 
-    /* the bridge joining days inside a completed range */
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its
+       own content. */
     & .datepicker-cell[data-range-complete][data-in-range]::before {
       content: ""; position: absolute; z-index: -1; inset-inline: 0;
       top: ${pillInset}; height: ${tokens_1.contract.size.calendarPill}; background: ${tokens_1.contract.bgNeutralWeak};
     }
     & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      inset-inline-start: 50%;
+      content: ""; position: absolute; z-index: -1;
+      inset-inline-start: 50%; inset-inline-end: 0;
+      top: ${pillInset}; height: ${tokens_1.contract.size.calendarPill}; background: ${tokens_1.contract.bgNeutralWeak};
     }
     & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      inset-inline-end: 50%;
+      content: ""; position: absolute; z-index: -1;
+      inset-inline-start: 0; inset-inline-end: 50%;
+      top: ${pillInset}; height: ${tokens_1.contract.size.calendarPill}; background: ${tokens_1.contract.bgNeutralWeak};
     }
 
     & .datepicker-date {

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

@@ -64,6 +64,12 @@ function Chip({ opt }) {
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
 function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, ...rest }) {
+    // Virtual focus: DOM focus stays on the trigger (or the search field) and the
+    // active option is named by `aria-activedescendant`. `data-highlighted` is a
+    // styling hook only -- a screen reader cannot see it.
+    const autoId = React.useId();
+    const listboxId = `${autoId}-listbox`;
+    const optionId = (i) => `${autoId}-opt-${i}`;
     const [open, setOpen] = React.useState(false);
     const [up, setUp] = React.useState(false);
     const [pos, setPos] = React.useState({});
@@ -105,6 +111,9 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, p
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
     };
+    const activeId = open && highlight >= 0 && highlight < filtered.length
+        ? optionId(highlight)
+        : undefined;
     const toggle = (v) => {
         const next = selectedSet.has(v)
             ? value.filter((x) => x !== v)
@@ -143,19 +152,19 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, p
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, 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")) {
                         e.preventDefault();
                         openMenu();
                     }
-                }, children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => (0, jsx_runtime_1.jsx)(Chip, { opt: o }, o.value))) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "multiselect-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, value: query, onChange: (e) => {
+                }, children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => (0, jsx_runtime_1.jsx)(Chip, { opt: o }, o.value))) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "multiselect-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: "multiselect-empty", children: "No results" })) : (filtered.map((opt, i) => {
                         const sel = selectedSet.has(opt.value);
-                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "option", "aria-selected": sel, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
                     }))] }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

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

@@ -51,6 +51,14 @@ function optionText(o) {
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
 function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", 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
+    // ids below have to resolve to the element the highlight is actually drawn on.
+    const autoId = React.useId();
+    const baseId = id ?? autoId;
+    const listboxId = `${baseId}-listbox`;
+    const optionId = (i) => `${baseId}-opt-${i}`;
     const [internal, setInternal] = React.useState(defaultValue);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
@@ -70,6 +78,9 @@ function Select({ options, value, defaultValue, onValueChange, placeholder = "Se
     const enabledIndexes = filtered
         .map((o, i) => (o.disabled ? -1 : i))
         .filter((i) => i >= 0);
+    const activeId = open && highlight >= 0 && highlight < filtered.length
+        ? optionId(highlight)
+        : undefined;
     const openMenu = () => {
         if (disabled)
             return;
@@ -169,12 +180,12 @@ function Select({ options, value, defaultValue, onValueChange, placeholder = "Se
         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: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "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", { 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, value: query, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [(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: "No results" })) : (filtered.map((opt, i) => {
                         const isSel = opt.value === selected;
-                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "option", "aria-selected": isSel, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
                     }))] }))] }));
 }
 Select.displayName = "Select";

package/dist/datepicker.css

@@ -62,16 +62,26 @@
     }
     & .datepicker-empty-cell { min-height: var(--size-calendarCell); }
 
-    /* the bridge joining days inside a completed range */
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its
+       own content. */
     & .datepicker-cell[data-range-complete][data-in-range]::before {
       content: ""; position: absolute; z-index: -1; inset-inline: 0;
       top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
     }
     & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      inset-inline-start: 50%;
+      content: ""; position: absolute; z-index: -1;
+      inset-inline-start: 50%; inset-inline-end: 0;
+      top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
     }
     & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      inset-inline-end: 50%;
+      content: ""; position: absolute; z-index: -1;
+      inset-inline-start: 0; inset-inline-end: 50%;
+      top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
     }
 
     & .datepicker-date {

package/dist/esm/components/datepicker/datepicker.recipe.js

@@ -78,16 +78,26 @@ const config = defineRecipe({
     }
     & .datepicker-empty-cell { min-height: ${c.size.calendarCell}; }
 
-    /* the bridge joining days inside a completed range */
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its
+       own content. */
     & .datepicker-cell[data-range-complete][data-in-range]::before {
       content: ""; position: absolute; z-index: -1; inset-inline: 0;
       top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
     }
     & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      inset-inline-start: 50%;
+      content: ""; position: absolute; z-index: -1;
+      inset-inline-start: 50%; inset-inline-end: 0;
+      top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
     }
     & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      inset-inline-end: 50%;
+      content: ""; position: absolute; z-index: -1;
+      inset-inline-start: 0; inset-inline-end: 50%;
+      top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
     }
 
     & .datepicker-date {

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

@@ -28,6 +28,12 @@ function Chip({ opt }) {
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
 export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, ...rest }) {
+    // Virtual focus: DOM focus stays on the trigger (or the search field) and the
+    // active option is named by `aria-activedescendant`. `data-highlighted` is a
+    // styling hook only -- a screen reader cannot see it.
+    const autoId = React.useId();
+    const listboxId = `${autoId}-listbox`;
+    const optionId = (i) => `${autoId}-opt-${i}`;
     const [open, setOpen] = React.useState(false);
     const [up, setUp] = React.useState(false);
     const [pos, setPos] = React.useState({});
@@ -69,6 +75,9 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
     };
+    const activeId = open && highlight >= 0 && highlight < filtered.length
+        ? optionId(highlight)
+        : undefined;
     const toggle = (v) => {
         const next = selectedSet.has(v)
             ? value.filter((x) => x !== v)
@@ -107,19 +116,19 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [_jsxs("button", { ref: triggerRef, 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")) {
                         e.preventDefault();
                         openMenu();
                     }
-                }, children: [_jsx("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => {
+                }, children: [_jsx("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "multiselect-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: "multiselect-empty", children: "No results" })) : (filtered.map((opt, i) => {
                         const sel = selectedSet.has(opt.value);
-                        return (_jsxs("button", { type: "button", role: "option", "aria-selected": sel, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                        return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
                     }))] }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

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

@@ -15,6 +15,14 @@ function optionText(o) {
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
 export function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", 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
+    // ids below have to resolve to the element the highlight is actually drawn on.
+    const autoId = React.useId();
+    const baseId = id ?? autoId;
+    const listboxId = `${baseId}-listbox`;
+    const optionId = (i) => `${baseId}-opt-${i}`;
     const [internal, setInternal] = React.useState(defaultValue);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
@@ -34,6 +42,9 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
     const enabledIndexes = filtered
         .map((o, i) => (o.disabled ? -1 : i))
         .filter((i) => i >= 0);
+    const activeId = open && highlight >= 0 && highlight < filtered.length
+        ? optionId(highlight)
+        : undefined;
     const openMenu = () => {
         if (disabled)
             return;
@@ -133,12 +144,12 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "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", { 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, value: query, onChange: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [_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: "No results" })) : (filtered.map((opt, i) => {
                         const isSel = opt.value === selected;
-                        return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSel, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && (_jsx("span", { className: "select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
+                        return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && (_jsx("span", { className: "select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
                     }))] }))] }));
 }
 Select.displayName = "Select";

package/dist/styles.css

@@ -632,16 +632,26 @@
     }
     & .datepicker-empty-cell { min-height: var(--size-calendarCell); }
 
-    /* the bridge joining days inside a completed range */
+    /* The bridge joining days inside a completed range.
+       The endpoints do NOT carry data-in-range -- only the interior days do --
+       so these are three independent rules, not a base plus two modifiers. A
+       modifier that sets only inset-inline-start never generates a pseudo
+       element on an endpoint, which leaves a half-cell of white between the
+       endpoint's pill and the run of grey beside it. Each rule declares its
+       own content. */
     & .datepicker-cell[data-range-complete][data-in-range]::before {
       content: ""; position: absolute; z-index: -1; inset-inline: 0;
       top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
     }
     & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
-      inset-inline-start: 50%;
+      content: ""; position: absolute; z-index: -1;
+      inset-inline-start: 50%; inset-inline-end: 0;
+      top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
     }
     & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
-      inset-inline-end: 50%;
+      content: ""; position: absolute; z-index: -1;
+      inset-inline-start: 0; inset-inline-end: 50%;
+      top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
     }
 
     & .datepicker-date {

package/package.json

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