@carissa-io/components-combobox 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,134 @@
-# Temporary Holding Version
+# @carissa-io/components-combobox
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A combobox with list autocomplete: a text field that looks like
+[components-input](https://github.com/carissa-io/components-input), whose text filters a list of options shown in a
+popover. The user picks one option; free text is never a value. React component, SCSS-themed. It builds on
+`components-input` (field look and styles), `components-popover` (the panel) and `components-listbox` (the options and
+the keyboard).
+
+```bash
+npm i @carissa-io/components-combobox
+```
+
+## Use
+
+```jsx
+import { Combobox } from '@carissa-io/components-combobox'
+
+<Combobox
+    label={t('country')}
+    name="country"
+    options={[
+        { value: 'ar', label: t('argentina') },
+        { value: 'br', label: t('brazil') },
+        { value: 'cl', label: t('chile'), disabled: true },
+    ]}
+    placeholder={t('search')}
+    empty={t('no_results')}
+    required
+    messages={{ required: t('required') }}
+    onChange={(value, option) => setCountry(value)}
+    onValidate={(isValid, errorCode) => setFormValid(isValid)}
+/>
+```
+
+| Prop | |
+|---|---|
+| `label`, `name`, `id`, `disabled`, `className` | usual; `id` is the input's id (generated when omitted), `className` goes to the root |
+| `options` | `[{ value, label, disabled }]`; `label` can be any node. Values are compared as given (strings or numbers) |
+| `value` + `onChange(value, option)` | controlled; or `defaultValue` for uncontrolled. `''`, `null` and `undefined` mean "nothing selected" |
+| `input_value` + `onInputChange(text)` | the text of the input, controlled; or `default_input_value` for uncontrolled |
+| `filter(option, text)` | which options match the text. Default: case-insensitive "contains" on the label (on the value when the label is not a string). An empty text shows every option |
+| `placeholder` | string passed to the input |
+| `required` | something must be selected; the error code is `required` |
+| `onValidate(isValid, errorCode)` | fires on mount and whenever the outcome changes |
+| `messages` | `{ [errorCode]: text }`; without an entry the bare code is shown |
+| `error` | an error from the parent (e.g. the API); wins over the built-in one and shows immediately |
+| `arrow_icon` | the arrow node. Omitted = Lucide's `chevron-down`; `null` = no arrow |
+| `empty` | node the list shows when the filter leaves no options. Without it the list renders nothing |
+| `default_open` | `false`. Initial open state (uncontrolled), handy for stories and tests |
+| anything else | goes to the `<input>` (`aria-label`, `data-*`, `onFocus`, ...). Its `onKeyDown` runs first and can `preventDefault()` to skip the list keys |
+
+## Value and text
+
+- The input shows the selected option's label until the user types. Typing opens the list, calls `onInputChange(text)`,
+  filters the options and activates the first enabled match, so Enter picks the top match.
+- Picking an option (click or Enter) sets the value, puts its label in the input, closes the list and keeps the focus in
+  the input. `onChange` fires only when the value changes.
+- Clearing the text (empty input) clears the value: `onChange('', null)`, only if there was a value. In controlled
+  mode the parent passes the new `value` back.
+- Free text is not a value: when the input loses focus the text goes back to the selected option's label, or to `''`
+  without a selection. `onInputChange` receives the reverted text, so a controlled `input_value` follows. The hidden
+  input and `onChange` only ever carry the value of an option.
+- With a `name`, a hidden `<input type="hidden" name value>` carries the value (an empty string when nothing is
+  selected) so the combobox is submitted with its form; it is `disabled` along with the combobox.
+- The typed text only filters while it is the user's: after a pick or a blur, opening the list with ArrowDown shows
+  every option again.
+
+The built-in `required` error shows after the first interaction: the list was opened and closed, or the input lost
+focus. `onValidate` reports from the start. The error line is a `role="alert"` paragraph linked to the input with
+`aria-describedby`.
+
+## Keyboard
+
+Focus stays in the input the whole time; the active option is announced through `aria-activedescendant`. The keys come
+from `useListboxKeyDown` of components-listbox, with the text-editing keys left alone (`allow_space_select: false`,
+`open_on_enter: false`, `home_end: false`, `typeahead: false`).
+
+| Key | Closed | Open |
+|---|---|---|
+| Typing | opens and filters | filters; the first enabled match becomes active |
+| ArrowDown, ArrowUp | opens on the selected option (else the first / last enabled) | moves to the next / previous enabled option |
+| Enter | nothing special (a form can submit) | selects the active option and closes; with no active option nothing special |
+| Space, Home, End | text editing | text editing |
+| Escape | nothing | closes, keeping the focus and the text |
+| Tab | moves on | closes and moves on |
+
+Clicking the input or focusing it does not open the list. A press outside closes it; clicking an option selects it and
+keeps the focus in the input. Disabled options are skipped and cannot be selected.
+
+## Arrow
+
+The arrow is decorative: `aria-hidden`, it ignores the pointer and it is not a button. A press anywhere in the box
+(label, padding, arrow) focuses the input, but does not open the list; the keyboard and typing do.
+
+## Accessibility
+
+- Input: `role="combobox"`, `aria-autocomplete="list"`, `aria-expanded`, `aria-controls` (the listbox id),
+  `aria-activedescendant` only while the list is open with an active option, `aria-required`, `aria-invalid`,
+  `aria-describedby`; `autocomplete="off"`. The `<label>` points at the input with `for`.
+- Ids derive from `id`: `<id>-label`, `<id>-listbox` (the `<ul role="listbox">`), `<id>-panel` (the popover panel,
+  without a role, so the listbox id is not duplicated), `<id>-error`.
+
+## Limitation
+
+The panel lives inside the combobox (no portal, see components-popover), so an ancestor with `overflow: hidden` or
+`auto` clips it, and it only flips above the field by looking at the viewport.
+
+## Style
+
+```scss
+@use '@carissa-io/components-input/scss' with ($c-input-border-color: #000);
+@use '@carissa-io/components-popover/scss' with ($c-popover-shadow: none);
+@use '@carissa-io/components-listbox/scss' with ($c-listbox-max-height: 12rem);
+@use '@carissa-io/components-combobox/scss' with (
+    $c-combobox-arrow-color: #000,
+    $c-combobox-arrow-rotate-open: 180deg
+);
+```
+
+`scss/index.scss` forwards the styles and variables of the three base packages, so configuring the combobox alone also
+configures them; but Sass only accepts a module's configuration before the module is first loaded: configure input,
+popover and listbox first (in that order) when you want to tune them, and the combobox last. It can sit in the same
+file as components-select, which forwards the same bases. The combobox's own variables are in
+[scss/_variables.scss](scss/_variables.scss): text color, minimum height, cursor, placeholder color (`null` keeps
+Input's), and the arrow (size, offset from the box edge, gap to the text, color, hover/open/disabled colors, transition
+and the rotation when open).
+
+Classes: the root is `c-input c-combobox` (modifiers `c-input--invalid`, `--required`, `--disabled`,
+`c-combobox--open`), inside Input's `__box`, `__label`, `__field`, `__error`, plus `c-combobox__popover`,
+`c-combobox__input` (`c-input__control` too) and `c-combobox__arrow`. The input has no focus style of its own: the box
+shows Input's focus ring while the input is focused (`:focus-within`). The panel and the arrow are positioned against
+the whole box.
+
+The default arrow is Lucide's `chevron-down` (see [THIRD-PARTY-NOTICES](THIRD-PARTY-NOTICES)).

package/THIRD-PARTY-NOTICES

@@ -0,0 +1,54 @@
+THIRD-PARTY NOTICES
+
+@carissa-io/components-combobox includes material from the following third-party projects.
+
+--------------------------------------------------------------------------------
+Lucide (https://lucide.dev), icon "chevron-down", copied from lucide-static v1.53.0
+License: ISC, and MIT for the part derived from the Feather project
+--------------------------------------------------------------------------------
+
+The icon "chevron-down" is one of the Lucide icons derived from the Feather project, so both licenses below apply to it.
+
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -0,0 +1,221 @@
+// src/Combobox.jsx
+import { useEffect, useId, useRef, useState } from "react";
+import { Popover } from "@carissa-io/components-popover";
+import { Listbox, getOptionId, optionText, useListboxKeyDown } from "@carissa-io/components-listbox";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChevronDown = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "100%",
+    height: "100%",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var isNothing = (value) => value === void 0 || value === null || value === "";
+var firstEnabled = (options) => options.find((option) => !option.disabled);
+var containsText = (option, text) => optionText(option).toLowerCase().includes(text.toLowerCase());
+function Combobox({
+  id,
+  name,
+  label,
+  options = [],
+  value,
+  defaultValue,
+  onChange,
+  input_value,
+  default_input_value,
+  onInputChange,
+  filter = containsText,
+  placeholder,
+  onBlur,
+  onKeyDown,
+  onValidate,
+  error,
+  required = false,
+  messages,
+  arrow_icon,
+  empty,
+  default_open = false,
+  className = "",
+  disabled = false,
+  ...rest
+}) {
+  const autoId = useId();
+  const inputId = id ?? autoId;
+  const labelId = `${inputId}-label`;
+  const listId = `${inputId}-listbox`;
+  const panelId = `${inputId}-panel`;
+  const errorId = `${inputId}-error`;
+  const inputRef = useRef(null);
+  const [inner, setInner] = useState(defaultValue);
+  const [touched, setTouched] = useState(false);
+  const current = value !== void 0 ? value : inner;
+  const selected = isNothing(current) ? void 0 : options.find((option) => option.value === current);
+  const selectedText = selected ? optionText(selected) : "";
+  const initialText = input_value !== void 0 ? input_value : default_input_value;
+  const [typed, setTyped] = useState(!isNothing(initialText) && initialText !== selectedText);
+  const [innerText, setInnerText] = useState(default_input_value ?? "");
+  const text = input_value !== void 0 ? input_value : typed ? innerText : selectedText;
+  const matches = typed && text !== "" ? options.filter((option) => filter(option, text)) : options;
+  const [open, setOpen] = useState(default_open && !disabled);
+  const [active, setActive] = useState(() => (selected && !selected.disabled ? selected : firstEnabled(matches))?.value);
+  const isOpen = open && !disabled;
+  const activeOption = matches.find((option) => option.value === active && !option.disabled);
+  const activeIndex = isOpen && activeOption ? matches.indexOf(activeOption) : -1;
+  const code = required && isNothing(current) ? "required" : null;
+  const valid = code === null;
+  const onValidateRef = useRef(onValidate);
+  useEffect(() => {
+    onValidateRef.current = onValidate;
+  });
+  useEffect(() => {
+    onValidateRef.current?.(valid, code);
+  }, [valid, code]);
+  const shown = error || (touched && code ? messages?.[code] ?? code : null);
+  const changeText = (next) => {
+    if (next === text) return;
+    setInnerText(next);
+    onInputChange?.(next);
+  };
+  const openList = () => {
+    if (disabled) return;
+    setActive((selected && !selected.disabled ? selected : firstEnabled(matches))?.value);
+    setOpen(true);
+  };
+  const closeList = () => {
+    setOpen(false);
+    setTouched(true);
+  };
+  const pick = (next, option) => {
+    if (next !== current) {
+      if (value === void 0) setInner(next);
+      onChange?.(next, option);
+    }
+    setTyped(false);
+    changeText(optionText(option));
+    closeList();
+    inputRef.current?.focus();
+  };
+  const handleKeyDown = useListboxKeyDown({
+    options: matches,
+    value: current,
+    active: activeOption?.value,
+    onActiveChange: setActive,
+    onSelect: pick,
+    isOpen,
+    open: openList,
+    close: closeList,
+    // The input keeps its own editing keys: Space types a space, Home/End move the caret, Enter does not open.
+    allow_space_select: false,
+    open_on_enter: false,
+    home_end: false,
+    typeahead: false
+  });
+  const onInputKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented) handleKeyDown(event);
+  };
+  const onType = (event) => {
+    const next = event.target.value;
+    const nextMatches = next === "" ? options : options.filter((option) => filter(option, next));
+    setTyped(true);
+    setInnerText(next);
+    onInputChange?.(next);
+    setActive(firstEnabled(nextMatches)?.value);
+    setOpen(true);
+    if (next === "" && !isNothing(current)) {
+      if (value === void 0) setInner("");
+      onChange?.("", null);
+    }
+  };
+  const onInputBlur = (event) => {
+    setTyped(false);
+    changeText(selectedText);
+    setOpen(false);
+    setTouched(true);
+    onBlur?.(event);
+  };
+  const onBoxMouseDown = (event) => {
+    if (disabled || event.target === inputRef.current) return;
+    event.preventDefault();
+    inputRef.current?.focus();
+  };
+  const arrow = arrow_icon === void 0 ? /* @__PURE__ */ jsx(ChevronDown, {}) : arrow_icon;
+  const hiddenValue = isNothing(current) ? "" : String(current);
+  const classes = ["c-input", "c-combobox"];
+  if (isOpen) classes.push("c-combobox--open");
+  if (shown) classes.push("c-input--invalid");
+  if (required) classes.push("c-input--required");
+  if (disabled) classes.push("c-input--disabled");
+  if (className) classes.push(className);
+  return /* @__PURE__ */ jsxs("div", { className: classes.join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "c-input__box", onMouseDown: onBoxMouseDown, children: [
+      label ? /* @__PURE__ */ jsx("label", { className: "c-input__label", id: labelId, htmlFor: inputId, children: label }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "c-input__field", children: [
+        /* @__PURE__ */ jsxs(
+          Popover,
+          {
+            className: "c-combobox__popover",
+            open: isOpen,
+            onClose: closeList,
+            match_width: true,
+            panel_id: panelId,
+            panel: /* @__PURE__ */ jsx(
+              Listbox,
+              {
+                id: listId,
+                options: matches,
+                value: current,
+                active: activeOption?.value,
+                onActiveChange: setActive,
+                onSelect: pick,
+                empty
+              }
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ...rest,
+                  ref: inputRef,
+                  type: "text",
+                  role: "combobox",
+                  className: "c-input__control c-combobox__input",
+                  id: inputId,
+                  value: text,
+                  placeholder,
+                  disabled,
+                  autoComplete: "off",
+                  "aria-autocomplete": "list",
+                  "aria-expanded": isOpen,
+                  "aria-controls": listId,
+                  "aria-activedescendant": activeIndex >= 0 ? getOptionId(listId, activeIndex) : void 0,
+                  "aria-required": required ? "true" : void 0,
+                  "aria-invalid": shown ? "true" : void 0,
+                  "aria-describedby": shown ? errorId : void 0,
+                  onChange: onType,
+                  onKeyDown: onInputKeyDown,
+                  onBlur: onInputBlur
+                }
+              ),
+              arrow !== null && arrow !== false ? /* @__PURE__ */ jsx("span", { className: "c-combobox__arrow", "aria-hidden": "true", children: arrow }) : null
+            ]
+          }
+        ),
+        name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: hiddenValue, disabled }) : null
+      ] })
+    ] }),
+    shown ? /* @__PURE__ */ jsx("p", { className: "c-input__error", id: errorId, role: "alert", children: shown }) : null
+  ] });
+}
+export {
+  Combobox
+};

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@carissa-io/components-combobox",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Carissa UI: combobox (text input with a filtered list in a popover, keyboard, validation) as a React component with SCSS variables",
+  "type": "module",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "scss",
+    "THIRD-PARTY-NOTICES"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./scss": "./scss/index.scss",
+    "./scss/*": "./scss/*"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "esbuild src/index.js --bundle --packages=external --format=esm --jsx=automatic --outfile=dist/index.js",
+    "test": "vitest run",
+    "lint": "eslint .",
+    "prepublishOnly": "node -e \"if (!process.env.GITHUB_ACTIONS) { console.error('Refusing to publish outside GitHub Actions CI: commit and push to main instead.'); process.exit(1); }\" && npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/carissa-io/components-combobox.git"
+  },
+  "license": "UNLICENSED",
+  "engines": {
+    "node": ">=24"
+  },
+  "dependencies": {
+    "@carissa-io/components-input": "^0.1.4",
+    "@carissa-io/components-popover": "^0.1.0",
+    "@carissa-io/components-listbox": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "esbuild": "^0.28.0",
+    "eslint": "^10.12.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.13.0",
+    "jsdom": "^29.1.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "sass-embedded": "^1.105.1",
+    "vite": "^8.3.2",
+    "vitest": "^4.1.11"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}

package/scss/_combobox.scss

@@ -0,0 +1,73 @@
+@use 'variables' as *;
+
+// The look of the field is Input's (`c-input`, `c-input__box`, ...); this adds the arrow and sizes the text input.
+.c-combobox {
+    // The panel and the arrow are positioned against the whole box, not against the narrower field inside its padding.
+    .c-input__box {
+        position: relative;
+        cursor: $c-combobox-cursor;
+    }
+
+    .c-combobox__popover {
+        position: static;
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        min-width: 0;
+    }
+
+    &__input {
+        box-sizing: border-box;
+        width: 100%;
+        min-height: $c-combobox-min-height;
+        padding: 0 calc(#{$c-combobox-arrow-size} + #{$c-combobox-arrow-gap}) 0 0;
+        color: $c-combobox-color;
+        text-overflow: ellipsis;
+
+        @if $c-combobox-placeholder-color {
+            &::placeholder {
+                color: $c-combobox-placeholder-color;
+            }
+        }
+
+        &:disabled {
+            color: inherit; // the disabled color is set on the box by Input
+            cursor: $c-combobox-disabled-cursor;
+        }
+    }
+
+    &__arrow {
+        position: absolute;
+        top: 50%;
+        right: $c-combobox-arrow-offset;
+        display: inline-flex;
+        width: $c-combobox-arrow-size;
+        height: $c-combobox-arrow-size;
+        color: $c-combobox-arrow-color;
+        pointer-events: none;
+        translate: 0 -50%;
+        transition: $c-combobox-arrow-transition;
+
+        > svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .c-input__box:hover &__arrow {
+        color: $c-combobox-arrow-color-hover;
+    }
+
+    &--open &__arrow {
+        color: $c-combobox-arrow-color-open;
+        rotate: $c-combobox-arrow-rotate-open;
+    }
+
+    &.c-input--disabled .c-input__box {
+        cursor: $c-combobox-disabled-cursor;
+    }
+
+    &.c-input--disabled &__arrow {
+        color: $c-combobox-arrow-color-disabled;
+    }
+}

package/scss/_variables.scss

@@ -0,0 +1,23 @@
+// Every value is `!default`: set it before the first @use / through `with (...)` and it wins.
+// The field look (box, notched label, focus ring, errors) comes from components-input, the panel from
+// components-popover and the options from components-listbox: configure those once, before this module.
+//
+//   @use '@carissa-io/components-combobox/scss' with ($c-combobox-arrow-size: 1.25rem, $c-combobox-arrow-color: #000);
+
+// Input (the text field; the font, padding and focus ring are Input's)
+$c-combobox-color: inherit !default;
+$c-combobox-min-height: 1.5em !default;
+$c-combobox-cursor: text !default; // over the whole box, since a press anywhere in it focuses the input
+$c-combobox-disabled-cursor: not-allowed !default;
+$c-combobox-placeholder-color: null !default; // null = keep the placeholder color of Input
+
+// Arrow: decorative, sits inside the field on the inline-end side and never takes the pointer
+$c-combobox-arrow-size: 1rem !default;
+$c-combobox-arrow-offset: 0.75rem !default; // distance from the box edge (match the input's horizontal padding)
+$c-combobox-arrow-gap: 0.5rem !default; // space kept between the text and the arrow
+$c-combobox-arrow-color: #495057 !default;
+$c-combobox-arrow-color-hover: #212529 !default;
+$c-combobox-arrow-color-open: $c-combobox-arrow-color-hover !default;
+$c-combobox-arrow-color-disabled: #868e96 !default;
+$c-combobox-arrow-transition: rotate 0.15s ease-in-out, color 0.15s ease-in-out !default;
+$c-combobox-arrow-rotate-open: 180deg !default;

package/scss/index.scss

@@ -0,0 +1,5 @@
+@forward '@carissa-io/components-input/scss';
+@forward '@carissa-io/components-popover/scss';
+@forward '@carissa-io/components-listbox/scss';
+@forward 'variables';
+@use 'combobox';