@crewlethq/ui 0.2.0 → 0.4.0

package/dist/Checkbox-VGW26YLQ.css

@@ -0,0 +1,111 @@
+/*
+ * Checkbox: a box, its label and its consequence as one target.
+ *
+ * The root IS the label element, so the row is clickable end to end. A 16px
+ * square is under every pointer-target floor there is; the row is what makes
+ * it pass, which is why the text is inside the control rather than beside it.
+ */
+
+/*
+ * THE ROW CARRIES THE LABEL'S SIZE, and it is load-bearing rather than
+ * cosmetic: the box below is nudged onto the label's first line by arithmetic
+ * in `em`, and `em` on the box is the size it INHERITS, which is this. Left
+ * off, the row took whatever size the application's body text happened to be
+ * and the nudge was computed against a line the label does not set: on a 16px
+ * host it moved a 16px box by 3.2px to sit on an 18.9px line, which wants
+ * 1.45px.
+ */
+.crewlet-checkbox {
+  --crewlet-checkbox-size: 16px;
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-sm);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.crewlet-checkbox__control {
+  /*
+   * Nudged down by half the difference between the label's first LINE and the
+   * BOX, so the box sits on that line rather than above it.
+   *
+   * BOTH TERMS ARE NAMED. The product's own stylesheet writes this as
+   * (line-height * 1em - 1em) / 2, which is the same sum only where the box
+   * is one em tall: that one draws a native checkbox at whatever size the
+   * platform picks, and this one is a stated 16px square on a 19.6px line, so
+   * the em form leaves it a pixel low. Reading the square's own token here is
+   * what stops the two drifting when either changes.
+   */
+  margin: calc((var(--font-line-height-snug) * 1em - var(--crewlet-checkbox-size)) / 2) 0 0;
+  width: var(--crewlet-checkbox-size);
+  height: var(--crewlet-checkbox-size);
+  flex: 0 0 auto;
+  /*
+   * THE TICK IS THE ACCENT, which is what "here, this one" means everywhere
+   * else in the system. It used to read --color-brand-primary, which is white
+   * in the dark theme: a white tick on a white box.
+   */
+  accent-color: var(--color-brand-accent);
+  cursor: pointer;
+}
+
+.crewlet-checkbox--danger .crewlet-checkbox__control {
+  accent-color: var(--color-feedback-danger);
+}
+
+.crewlet-checkbox__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  user-select: none;
+  min-width: 0;
+}
+
+.crewlet-checkbox__label {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+}
+
+/*
+ * The consequence, on the tertiary step. It says what ticking the box
+ * deletes, so it is a fact a reader has to make out rather than decoration:
+ * the muted step is measured into the 2.8 to 4.5 band on purpose and is the
+ * wrong home for a sentence about removing somebody's accounts.
+ */
+.crewlet-checkbox__description {
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The bordered row a dialog gives a decision that stands on its own. It draws
+ * a BOUNDARY and nothing else: the frame sits on the dialog's own body, and a
+ * surface of its own inside a panel of the same surface is a box that reads
+ * as a second panel rather than as one choice.
+ *
+ * A destructive choice is not tinted here either. What it deletes is said in
+ * the words, and the box itself says so in the colour of its tick; a red
+ * panel around the sentence puts the alarm on the frame, where a reader who
+ * has already decided is not reading.
+ */
+.crewlet-checkbox--framed {
+  gap: var(--spacing-3);
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+}
+
+.crewlet-checkbox.is-disabled,
+.crewlet-checkbox.is-disabled .crewlet-checkbox__control {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.crewlet-checkbox__control:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}

package/dist/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,119 @@
+import { type HTMLAttributes } from 'react';
+interface CodeBlockLook extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The code to display and copy. A trailing newline is trimmed. */
+    code: string;
+    /** Shown in the header when there is no filename, and set as a data attribute. */
+    language?: string | undefined;
+    /** Shown on the left of the header. */
+    filename?: string | undefined;
+    showLineNumbers?: boolean | undefined;
+    /** Render the copy control. On by default. */
+    copyable?: boolean | undefined;
+    /** Names the copy control's action. */
+    copyLabel?: string | undefined;
+    /** A per-line prefix that is not part of the copy: `$` for a shell command. */
+    prompt?: string | undefined;
+    /**
+     * Wrap long lines instead of scrolling sideways. ON by default, because a
+     * block a reader reads is the common case, a message, a record, a stack
+     * trace, and a sideways scrollbar on one of those is a line nobody finds the
+     * end of. Turn it off for a block whose columns are the point: a diff, a
+     * table of output, a log that is aligned on purpose.
+     *
+     * THIS IS THE WRAPPING PROP, and the only one. `plain` is about the header;
+     * see its note.
+     */
+    wrap?: boolean | undefined;
+    /**
+     * A ceiling for THIS block, after which it scrolls itself: a CSS length, or
+     * a number of px. Without one a 900-line record pushes everything under it
+     * off the screen.
+     *
+     * There is no default, and a ceiling every caller has to remember is a
+     * ceiling somebody forgets — so the value is also readable from the CASCADE.
+     * An application that wants one ceiling for every block it renders declares
+     * `--crewlet-codeblock-max-height` on an ancestor (`:root`, a route's own
+     * wrapper) and passes nothing here; this prop then OVERRIDES that ancestor
+     * for one block, `maxHeight="none"` escapes it, and with neither set the
+     * block is unbounded exactly as it has always been.
+     */
+    maxHeight?: string | number | undefined;
+    /**
+     * No HEADER at all, for a block inside a row that already has one: no
+     * filename strip, no language, no copy control.
+     *
+     * IT IS ABOUT THE CHROME, NEVER THE TEXT. A `plain` block still wraps, and a
+     * block with a header wraps too — wrapping is `wrap` and nothing else. The
+     * name is worth reading twice when porting, because it is a word other code
+     * blocks spend on the opposite meaning: a `plain` that turned WRAPPING off
+     * is `wrap={false}` here.
+     */
+    plain?: boolean | undefined;
+}
+/**
+ * WHAT MAKES A BLOCK FOCUSABLE IS TWO DECISIONS, AND A NAME IS WHAT BOTH OWE.
+ *
+ * `selectable` is an INTENT only the caller has: this block is the record the
+ * screen is about, so while it has focus Command or Control plus A means this
+ * record rather than the document.
+ *
+ * `focusWhenScrollable` is an OBLIGATION the component discharges for itself.
+ * The `pre` is `overflow: auto`, so a ceiling or `wrap={false}` can turn any
+ * block into a scroll container, and a scroll container no keyboard can reach
+ * is content no keyboard can read. Whether a given block is one is a fact
+ * about the RENDERED BOX, not about any prop — the same code overflows at one
+ * viewport and not at the next — so the component measures it. A card carrying
+ * dozens of tool-argument blocks then gets a tab stop in front of the two that
+ * scroll rather than in front of all of them.
+ *
+ * They are separate because they answer different questions, and welding them
+ * gets both cases wrong: a block promoted for its scrollbar would start
+ * swallowing a chord nobody pressed for it, and a block that owns the chord
+ * would have to scroll to be named.
+ *
+ * `label` is the part they SHARE, and the type is what says so: a focusable
+ * `role="region"` with no accessible name is a tab stop a screen reader
+ * announces as nothing, which is worse than the plain block it replaced. So
+ * every arm that can take focus demands one, from either door, and the arm
+ * that cannot take focus refuses one — an optional label beside an optional
+ * flag is a label somebody forgets, and a label on a block that can never be
+ * named is a prop that silently does nothing.
+ */
+export type CodeBlockProps = CodeBlockLook & ({
+    /** Take Command or Control plus A while focused, and take focus. */
+    selectable: true;
+    /** Also take focus when the rendered box turns out to scroll. */
+    focusWhenScrollable?: boolean | undefined;
+    /** What this block is: "The turn record, as JSON". */
+    label: string;
+} | {
+    selectable?: false | undefined;
+    /**
+     * Take focus when, and only when, the rendered box scrolls — on
+     * either axis. The block is a named region then and nothing more: the
+     * select-all chord stays with the browser.
+     */
+    focusWhenScrollable: true;
+    /**
+     * What this block is. Required although the block may never take
+     * focus, because whether it does is a property of the box at one
+     * viewport and not of this call.
+     */
+    label: string;
+} | {
+    selectable?: false | undefined;
+    focusWhenScrollable?: false | undefined;
+    label?: never;
+});
+/**
+ * A block of code, a config or a record.
+ *
+ * WHY THE LINES CARRY THEIR OWN NEWLINE. Each line used to be a `span` with
+ * nothing between them, so the block's `textContent` and any Range taken over
+ * it ran every line together: a reader who selected the block and copied it
+ * got one line of JSON with the structure gone. The newline is a real
+ * character in the markup now, and with line numbers off the code is ONE TEXT
+ * NODE, which is what a selection and a browser's own find both want.
+ */
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/CodeBlock/index.d.ts

@@ -0,0 +1,3 @@
+import './CodeBlock.css';
+export { CodeBlock } from './CodeBlock.js';
+export type { CodeBlockProps } from './CodeBlock.js';

package/dist/CodeBlock/index.js

@@ -0,0 +1,7 @@
+export { CodeBlock } from '../chunk-D35VTV2Z.js';
+import '../chunk-3QRYCPXQ.js';
+import '../chunk-5VNUYO76.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZYDZBAN.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CodeBlock-GYNJ2HI6.css

@@ -0,0 +1,188 @@
+/*
+ * CodeBlock, a monospace command, config or record surface. One step off the
+ * page, with an optional header carrying a filename and the copy control.
+ * Long lines WRAP, because the common block is one a reader reads; a caller
+ * whose columns are the point asks for the sideways scroll instead.
+ */
+
+.crewlet-codeblock {
+  border: 1px solid var(--color-border-default);
+  /* The block sits INSIDE a card more often than beside one, and the card's
+     own radius repeated inside it reads as a box drawn twice. */
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  overflow: hidden;
+  font-family: var(--font-family-mono);
+  min-width: 0;
+}
+
+.crewlet-codeblock__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  padding: var(--spacing-2) var(--spacing-3);
+  /* The rule alone, as every head in the system is drawn. A second ground
+     inside the block made the filename strip a lighter band across a surface
+     that is already one step off the page. */
+  border-bottom: 1px solid var(--color-border-default);
+  min-height: var(--size-row-md);
+}
+
+.crewlet-codeblock__meta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-codeblock__filename {
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-codeblock__lang {
+  text-transform: uppercase;
+  letter-spacing: var(--font-letter-spacing-wide);
+}
+
+.crewlet-codeblock__pre {
+  margin: 0;
+  padding: var(--spacing-3);
+  overflow: auto;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-secondary);
+  /*
+   * IT WRAPS. A block a reader READS is the common case, a stack trace or a
+   * record or a model's own error text, and a sideways scrollbar on one of
+   * those is a line nobody finds the end of. `nowrap` is what the caller asks
+   * for when the columns are the point.
+   */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+  /*
+   * THE CEILING IS A CASCADING ONE, read here and declared nowhere, so the
+   * fallback IS the default: with nothing set the block is unbounded, as it
+   * has always been. `maxHeight` writes the property inline on the block, and
+   * an application that wants one ceiling for every block it renders writes it
+   * once on an ancestor instead — because a ceiling every call site has to
+   * remember is a ceiling somebody forgets, and the right height is a fact
+   * about the SURFACE the block sits on rather than about the component.
+   *
+   * Declared with a fallback rather than seeded on `.crewlet-codeblock`: a
+   * name a component declares on itself stops inheriting, so seeding it would
+   * be the one shape in which an ancestor's value can never arrive.
+   *
+   * ONE DECLARATION, in the rule below. `.crewlet-codeblock--bounded` is still
+   * emitted as the marker that this block set a ceiling of its own — the hook
+   * an application stylesheet and a reader of the DOM key on — but it draws
+   * nothing, because a second rule restating this height is how the two come
+   * to disagree.
+   */
+}
+
+/*
+ * The ceiling, at the specificity the rule it replaces already had.
+ *
+ * `.crewlet-codeblock .crewlet-codeblock__pre` rather than
+ * `.crewlet-codeblock__pre`, and the extra class earns its place: the rule
+ * that used to set this was `.crewlet-codeblock--bounded .crewlet-codeblock__pre`
+ * at (0,2,0), and an application overriding it wrote `.crewlet-codeblock__pre
+ * { max-height: … }` at (0,1,0) and expected to LOSE. Declaring it on the
+ * single class drops this to (0,1,0), which turns every one of those
+ * overrides into a tie decided by sheet order — so a consumer who wrote a
+ * losing rule on purpose silently starts winning. Same two-class weight,
+ * same outcome for anybody who already had an opinion.
+ */
+.crewlet-codeblock .crewlet-codeblock__pre {
+  max-height: var(--crewlet-codeblock-max-height, none);
+}
+
+/*
+ * Columns kept, and a sideways scroll to reach them: a diff, a table of
+ * output, a log whose alignment carries meaning.
+ */
+.crewlet-codeblock--nowrap .crewlet-codeblock__pre {
+  white-space: pre;
+  overflow-wrap: normal;
+}
+
+/*
+ * A BLOCK A READER CAN REACH. Two things put the block in the tab order and
+ * the role follows both: `selectable`, and `focusWhenScrollable` on a box that
+ * turned out to scroll.
+ *
+ * On the first, select-all is a document verb, so on a screen that is mostly
+ * one record it took the nav, the stat row and every card with it. While this
+ * block has focus the verb means "this record", which is the only thing
+ * anybody was reaching for, and the ring is what says so: a keyboard verb that
+ * changes meaning on focus, with no visible focus state, is a secret. On the
+ * second the block keeps no keys at all; the ring is there because a scroll
+ * container a reader arrows through has to say where they are.
+ *
+ * The text cursor is right for both, and it is what the caret-shape of a
+ * `pre` full of selectable text should always have been.
+ */
+.crewlet-codeblock__pre[role='region'] {
+  cursor: text;
+}
+
+.crewlet-codeblock__pre:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-codeblock__code {
+  display: block;
+  font-family: inherit;
+}
+
+.crewlet-codeblock__line {
+  display: block;
+}
+
+.crewlet-codeblock--numbered .crewlet-codeblock__line {
+  display: grid;
+  grid-template-columns: 2ch 1fr;
+  gap: var(--spacing-3);
+  align-items: baseline;
+}
+
+/*
+ * A line number is a reference somebody reads aloud in a review, so it sits on
+ * the tertiary step rather than the decoration one. `user-select: none` is
+ * what keeps it out of a copy.
+ */
+.crewlet-codeblock__ln {
+  text-align: right;
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+.crewlet-codeblock__prompt {
+  flex: none;
+  color: var(--color-brand-accent-ink);
+  user-select: none;
+  margin-inline-end: var(--spacing-2);
+}
+
+.crewlet-codeblock__linecontent {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-codeblock--nowrap .crewlet-codeblock__linecontent {
+  overflow-wrap: normal;
+}
+
+/* The copy control sits in the header in the sans face, not the block's. */
+.crewlet-codeblock__copy {
+  flex: none;
+  font-family: var(--font-family-sans);
+}

package/dist/Combobox/Combobox.d.ts

@@ -0,0 +1,89 @@
+import { type ReactNode } from 'react';
+import { type InputProps } from '../Input/index.js';
+export interface ComboboxOption {
+    /** What taking the option puts in the field. */
+    value: string;
+    /** What is drawn. The value itself when it is left out. */
+    label?: ReactNode;
+    /** A short second line of identity: a handle, a path, a kind. */
+    hint?: ReactNode;
+    disabled?: boolean;
+}
+/** What a caller drawing its own rows is handed. */
+export interface ComboboxListRender {
+    /** The id the field's `aria-controls` points at. Put it on the list. */
+    listId: string;
+    /** The highlighted row's index, or -1 when nothing is offered. */
+    active: number;
+    /** The id of the row at `index`. */
+    optionId: (index: number) => string;
+    /** Mouse wiring for the row at `index`. */
+    optionHandlers: (index: number) => Record<string, unknown>;
+}
+export interface ComboboxProps extends Omit<InputProps, 'value' | 'onChange' | 'role' | 'onKeyDown' | 'list'> {
+    /** What the field holds. The caller owns it: a completion is an edit to it. */
+    value: string;
+    onValueChange: (next: string) => void;
+    /**
+     * What is offered RIGHT NOW. The caller filters, because what a query
+     * matches is the caller's question: a secret reference matches on a prefix
+     * of the name under the caret, not on the whole field.
+     */
+    options?: readonly ComboboxOption[];
+    /**
+     * Draws the rows itself, for a list whose rows are not plain options.
+     *
+     * `options` STILL SAYS WHAT IS OFFERED. This decides what a row looks like,
+     * not what there is: the highlight is an index into `options`, and so is
+     * what Enter takes, so a list drawn this way with no `options` is one the
+     * arrows cannot move through and Enter cannot commit from.
+     */
+    renderList?: ((list: ComboboxListRender) => ReactNode) | undefined;
+    /**
+     * Taking an option. By default it writes the option's value into the field,
+     * which is what a completion means; a caller with a caret to place (a
+     * `${NAME}` inside a longer value) does it itself.
+     */
+    onCommit?: ((option: ComboboxOption, index: number) => void) | undefined;
+    /** Whether the list is on screen. Controlled: only the caller knows when it has something to offer. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Names the list. A listbox with no name is announced as "list box" and nothing else. */
+    label: string;
+    /**
+     * Tab takes the highlighted option, which is what it means in a completion
+     * list. Left off, Tab moves focus, as it does on every form control.
+     */
+    tabCommits?: boolean | undefined;
+    /**
+     * Which press takes a row. `mousedown` is the default and the right answer
+     * for a list that closes on blur: the field blurs first, so a list waiting
+     * for the click takes the row out from under the press that chose it.
+     * `click` is for a list inside a surface that is not going anywhere.
+     */
+    commitOn?: 'mousedown' | 'click' | undefined;
+    /** Draws the rows in the mono face, for names read exactly rather than for sense. */
+    mono?: boolean | undefined;
+    /** The line shown while the list is open with nothing to offer. Nothing is drawn without one. */
+    emptyMessage?: ReactNode;
+}
+/**
+ * A text field that offers completions.
+ *
+ * WHY THE LIST IS ANCHORED RATHER THAN PORTALLED. It is positioned absolutely
+ * under the field, inside the field's own box, so opening it moves nothing: a
+ * list that took part in the layout pushed every field under it down the form
+ * as somebody typed. It is bounded and scrolled rather than as long as the
+ * matches, and it sits on an OPAQUE surface, because a translucent one over a
+ * form leaves two sets of words in the same place.
+ *
+ * ESCAPE IS CONSUMED HERE. The list closes and the dialog or sheet around the
+ * field stays open; a second Escape reaches it. Without that, somebody
+ * dismissing a completion they did not want lost the whole editor with it.
+ *
+ * WHAT IT DOES NOT DECIDE is what matches. The caller filters and hands over
+ * what is offered, because a completion's question belongs to the value: the
+ * engine's secret references complete on the name under the caret, not on the
+ * whole field.
+ */
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Combobox/index.d.ts

@@ -0,0 +1,3 @@
+import './Combobox.css';
+export { Combobox } from './Combobox.js';
+export type { ComboboxListRender, ComboboxOption, ComboboxProps } from './Combobox.js';

package/dist/Combobox/index.js

@@ -0,0 +1,8 @@
+export { Combobox } from '../chunk-UOGSZKLT.js';
+import '../chunk-GTOUGQQK.js';
+import '../chunk-O6232G37.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ITHXJHBB.js';
+import '../chunk-F27EPQ7D.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Combobox-4FUVYIE7.css

@@ -0,0 +1,80 @@
+/*
+ * Combobox: a field that offers completions.
+ *
+ * The panel is anchored inside the field's own box rather than portalled or
+ * laid out in the flow. In the flow it pushed every field under it down the
+ * form as somebody typed; portalled, it would have to be placed, followed and
+ * given a layer of its own for a list that never leaves its field's side.
+ */
+
+.crewlet-combobox {
+  position: relative;
+  width: 100%;
+}
+
+.crewlet-combobox__panel {
+  /* Six rows and a scroll, as every list this package offers from a field. */
+  --crewlet-combobox-panel-max-height: 12rem;
+
+  position: absolute;
+  top: calc(100% + var(--spacing-1));
+  left: 0;
+  right: 0;
+  max-height: var(--crewlet-combobox-panel-max-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-1);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  /*
+   * OPAQUE, and the product's own panel surface: a translucent list over a
+   * form puts two sets of words in the same place, and the words underneath
+   * are a label and a value somebody is in the middle of typing.
+   */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  /* Above the fields below it, and nothing more: it never leaves its form. */
+  z-index: var(--z-index-dropdown);
+}
+
+/* Names read exactly rather than for sense: a secret reference, a path, a key. */
+.crewlet-combobox__panel.is-mono .crewlet-combobox__label {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-combobox__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * The row the arrows or the pointer are on, in the hover tint. The accent is
+ * what "here, this is the current one" means elsewhere in the product; a
+ * completion list has no current one, only the row about to be taken.
+ *
+ * Scoped to the panel rather than written on the row class, because the
+ * shared listbox register paints [aria-selected] itself and the stylesheets
+ * are bundled in hash order: a rule of equal weight would win or lose by the
+ * name of a build artefact.
+ */
+.crewlet-combobox__panel .crewlet-listbox__option {
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-combobox__panel .crewlet-listbox__option[aria-selected='true'],
+.crewlet-combobox__panel .crewlet-listbox__option.is-highlight,
+.crewlet-combobox__panel .crewlet-listbox__option:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-combobox__panel .crewlet-listbox__option.is-disabled {
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}